인프런 커뮤니티 질문&답변

import { useApolloClient } from "@apollo/client";
import {
  USED_ITEM,
  useQueryFetchUsedItem,
} from "../hooks/queries/useQueryFetchUsedItem";
import * as S from "./styles";

interface IImageProps {
  id: string;
}

export default function Image01(props: IImageProps): JSX.Element {
  const id = props.id;
  const client = useApolloClient();

  const { data } = useQueryFetchUsedItem({ useditemId: id });

  const image = data?.fetchUseditem.images[0] ?? "";

  const prefetchBoard = (useditemId: string) => async () => {
    const result = await client.query({
      query: USED_ITEM,
      variables: { useditemId },
    });
    console.log(useditemId);
    console.log(result);
  };

  return (
    <>
      <div onMouseOver={prefetchBoard(props.id)}>
        {image && <S.Image src={`https://storage.googleapis.com/${image}`} />}
      </div>
    </>
  );
}

위 처럼 코드를 작성하고 mouseover를 실행하면 useditem이 콘솔창에 잘 표시됩니다. 또한 result를 확인해보면
{data: {…}, loading: false, networkStatus: 7}

1. data: {fetchUseditem: {…}}

2. loading: false

3. networkStatus: 7

4. [[Prototype]]: Object
   
   위 처럼 콘솔창에 입력이 되나, loading은 false라고 뜨며 네트워크에 요청했단 표시가 나오지 않습니다. 혹시 이유를 알 수 있을까요?