export default와 중괄호 {}

export const GET_PRODUCT = gql`
  query GET_PRODUCT($id: string) {
    id
    imageUrl
    price
    title
    description
    createAt
  }
`;

const GET_PRODUCTS = gql`
  query GET_PRODUCTS {
    id
    imageUrl
    price
    title
    description
    createAt
  }
`;

export default GET_PRODUCTS;​

맞게 쳤는데 에러는 안 나고 데이터는 가져오지 못해서 이틀 동안 씨름한 문제였다

 

알고 보니 import 할 때 중괄호 여부였다

 

export default로 내보낸 것은 중괄호 없이 가져와야 하고 

export로 내보낸 것은 중괄호가 있어야 한다

 

 

문제의 코드다

import ProductDetail from "@/components/ProductDetail";
import  GET_PRODUCT,{ Product } from "@/graphql/products";      <----이 부분
import { QueryKeys, graphqlFetcher } from "@/queryClient";
import { useRouter } from "next/dist/client/router";

import React from "react";
import { useQuery } from "react-query";

const ProductDetailPage = () => {
  const router = useRouter();
  const { id } = router.query;
  const { data } = useQuery<Product>([QueryKeys.PRODUCTS, id], () =>
    graphqlFetcher<Product>(GET_PRODUCT, { id })
  );

  if (!data) return null;

  return (
    <div>
      <ProductDetail {...data} />
    </div>
  );
};

export default ProductDetailPage;

 

 

코드를 바꿔가며 작업하며 자동 import로 불러오기를 하다가 저 부분에서 아마 중괄호가 없이 불러와졌나 보다

아마도 중괄호 없이 불러오는 GET_PRODUCTS를 불러왔다가 S를 지운 듯하다

 

 

 

import ProductDetail from "@/components/ProductDetail";
import { GET_PRODUCT, Product } from "@/graphql/products";  <----중괄호를 넣어주니 잘 작동됐다
import { QueryKeys, graphqlFetcher } from "@/queryClient";
import { useRouter } from "next/dist/client/router";

import React from "react";
import { useQuery } from "react-query";

const ProductDetailPage = () => {
  const router = useRouter();
  const { id } = router.query;
  const { data } = useQuery<Product>([QueryKeys.PRODUCTS, id], () =>
    graphqlFetcher<Product>(GET_PRODUCT, { id })
  );

  if (!data) return null;

  return (
    <div>
      <ProductDetail {...data} />
    </div>
  );
};

export default ProductDetailPage;

 

 

코드 오타나 에러가 없으면 import 부분을 봐보자

어떻게 보면 {} 안 쓴 것도 오타일 수도...