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

fetchTravelproducts에서 클릭으로 상세 페이지로 들어가면

fetchTravelproduct 의 data 값을 보여주는데

API 요청에서 data 값을 확인하면 seller 값이 들어있는데 data.fetchTravelproduct.seller를 콘솔에 찍으면 null 이 뜹니다. (다른 데이터는 정상적으로 불러옵니다.)

fetchTravelproducts에서는 판매자 이름이 잘 출력이 되는데 상세페이지에 들어가면 해당 fetchTravelproduct API 요청으로 가져와도 판매자 데이터가 없는 상태로 뜨는데 문제가 뭘까요?

여기서 상세페이지에서 새로고침을 하면 정상적으로 판매자가 보여집니다.

fetchTravelproducts에서 캐싱하는 과정에 문제가 있는 걸 까요?

// 상세 페이지

import { Query } from "@/entities/api/graphql";
import { gql, useQuery } from "@apollo/client";

export const TRAVEL_PRODUCT = gql`
  query fetchTravelproduct($travelproductId: ID!) {
    fetchTravelproduct(travelproductId: $travelproductId) {
      _id
      name
      remarks
      contents
      price
      tags
      images
      pickedCount
      travelproductAddress {
        zipcode
        address
        addressDetail
        lat
        lng
      }
      seller {
        _id
        name
        picture
      }
      createdAt
    }
  }
`;

export const useFetchTravelProduct = ({ travelId }: { travelId: string }) => {
  const result = useQuery<Pick<Query, "fetchTravelproduct">>(TRAVEL_PRODUCT, {
    variables: { travelproductId: travelId },
  });

  return result;
};

// 목록 페이지

import { Query } from "@/entities/api/graphql";
import { gql, useQuery } from "@apollo/client";

const TRAVEL_PRODUCTS = gql`
  query fetchTravelproducts($isSoldout: Boolean, $search: String, $page: Int) {
    fetchTravelproducts(isSoldout: $isSoldout, search: $search, page: $page) {
      _id
      name
      remarks
      contents
      price
      tags
      images
      pickedCount
      travelproductAddress {
        zipcode
        address
        addressDetail
        lat
        lng
      }
      buyer {
        _id
        name
        picture
      }
      seller {
        _id
        name
        picture
      }
      createdAt
    }
  }
`;

interface UseFetchTravelProductsArgs {
  isSoldout: boolean;
  search: string | null;
  page: number;
}

export const useFetchTravelProducts = ({
  isSoldout,
  search,
  page,
}: UseFetchTravelProductsArgs) => {
  const result = useQuery<Pick<Query, "fetchTravelproducts">>(TRAVEL_PRODUCTS, {
    variables: {
      isSoldout,
      search,
      page,
    },
  });

  return result;
};