안녕하세요. 질문 있습니다.
안녕하세요 질문 있습니다. 노드 버드 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;
답변 1
0
https://stackoverflow.com/questions/61471873/how-to-call-usequery-hook-conditionally
이 기능 찾으시나요
0
맞습니다. 문서보고 useQuery를 여러개 쓸때 동기적으로 사용하는건가 넘기고 저렇게 써볼 생각을 못했네요ㅠㅠ 정말 감사합니다!!
추가로 위 코드에서 getStaticPaths를 빼면 아래와 같은 에러가 나던데 혹시 저 부분을 없앨수 있는 방법도 있을까요???
Server Error
Error: getStaticPaths is required for dynamic SSG pages and is missing for '/app/store/[storeId]'.
Read more: https://nextjs.org/docs/messages/invalid-getstaticpaths-value
This error happened while generating the page. Any console logs will be displayed in the terminal window.
항상 친절히 답변주셔서 정말 감사합니다!
넥스트 버젼 질문
0
79
2
로그인시 401 Unauthorized 오류가 뜹니다
0
91
1
무한 스크롤 중 스크롤 튐 현상
0
177
1
특정 페이지 접근을 막고 싶을 때
0
105
2
createGlobalStyle의 위치와 영향범위
0
97
2
인라인 스타일 리렌더링 관련
0
93
2
vsc 에서 npm init 설치시 오류
0
149
2
nextjs 15버전 사용 가능할까요?
0
160
1
화면 새로고침 문의
0
123
1
RTK에서 draft, state 차이가 있나요?
0
156
2
Next 14 사용해도 될까요?
0
452
1
next, node 버전 / 폴더 구조 질문 드립니다.
0
350
1
url 오류 질문있습니다
0
211
1
ssh xxxxx로 우분투에 들어가려니까 port 22: Connection timed out
0
380
1
sudo certbot --nginx 에러
0
1282
2
Minified React error 콘솔에러 (hydrate)
0
471
1
카카오 공유했을 때 이전에 작성했던 글이 나오는 버그
0
249
1
프론트서버 배포 후 EADDRINUSE에러 발생
0
330
1
npm run build 에러
0
519
1
front 서버 npm run build 중에 발생한 에러들
0
383
1
서버 실행하고 브라우저로 들어갔을때 404에러
0
339
2
css 서버사이드 랜더링이 적용되지 않아서 문의 드립니다.
0
289
1
팔로워 3명씩 불러오고 데이터 합쳐주는걸로 바꾸고 서버요청을 무한으로하고있습니다.
0
242
2
해시태그 검색에서 throttle에 관해 질문있습니다.
0
202
1





