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

안녕하세요 질문 있습니다. 노드 버드 react-query 폴더를 보면서 따라하고 있습니다. 현재 주소에서 storeId를 id 값으로 하여 서버에서 각기 다른 데이터를 받아오고 있습니다.

그런데 아래와 같이 router.query로 값을 불러오거나 아래 getStaticProps에서 storeId를 보내도 컴포넌트 내부에서 storeId를 한번 undefined로 인식해서 오류가 나더라고요. 이럴 경우 어떤 방식으로 해결해 나가는게 좋을지 궁금합니다.

서버에 요청 보내는 api에서 파라미터의 값이 undefined일 경우 실행을 안시키는 식으로 했는데 좋은 방법이 아닌거 같고 페이지 내부에서 해결해야 할거 같긴 한데 어떤 식으로 접근해야할지 잘 모르겠습니다ㅠ

import React from 'react';
import { dehydrate, QueryClient, useInfiniteQuery, useQuery } from 'react-query';
import DefaultLayout from '@layouts/DefaultLayout';
// import InfiniteCarousel from '@components/Commons/InfiniteCarousel';
import { loadStoreAPI } from '@apis/store';
import { GetStaticProps } from 'next';
import { ParsedUrlQuery } from 'querystring';
import { useRouter } from 'next/router';

interface Params extends ParsedUrlQuery {
  storeId: string;
}

const Home: React.FC<Params> = () => {
  const router = useRouter();
  const { storeId } = router.query as Params;
  console.log(storeId);
  const { data: storeInfo } = useQuery(['storeInfo', storeId], () => loadStoreAPI(storeId));

  return (
    <DefaultLayout>
      <h1>home123</h1>
      {/*<InfiniteCarousel></InfiniteCarousel>*/}
    </DefaultLayout>
  );
};

export const getStaticPaths = async () => {
  return {
    paths: ['/app/store/[storeId]'],
    fallback: true,
  };
};

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const { storeId } = params as Params;

  if (!storeId) {
    return {
      redirect: {
        destination: '/',
        permanent: true,
      },
    };
  }

  console.log(storeId);
  const queryClient = new QueryClient();

  await queryClient.prefetchQuery(['storeInfo', storeId], () => loadStoreAPI(storeId));

  return {
    props: {
      dehydratedState: dehydrate(queryClient),
      storeId,
    },
  };
};

export default Home;