개발자
next js 14 react query
next js 14에서 react query를 사용해보고 있는데 QueryClient를 세팅하고 useMutation를 사용했는데 "No QueryClient set, use QueryClientProvider to set one"라고 오류가 떠서 어떻게 하면 고칠수 있는지 궁금합니다 query-provider.tsx 부분입니다
1'use client';
2import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
3import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
4import GlobalStyle from "@/styles/global";
5export default function ReactQueryProviders({
6 children,
7}: React.PropsWithChildren) {
8 const client = new QueryClient({
9 defaultOptions: {
10 queries: {
11 retry: false,
12 retryOnMount: false,
13 refetchOnWindowFocus: false,
14 refetchOnReconnect: false,
15 staleTime: 1000,
16 },
17 },
18 });
19
20
21 return (
22 <QueryClientProvider client={client}>
23 <GlobalStyle/>
24 {children}
25 <ReactQueryDevtools initialIsOpen={false} />
26 </QueryClientProvider>
27 );
28}
답변 1
사용하고자 하는 컴포넌트가 해당 provider로 감싸졌나요? useMutation을 사용하고자 하는데 해당 컴포넌트에서 react query에 접근하지 못하는 문제로 보입니다
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 05월 02일
먼저, `QueryClientProvider`가 앱의 최상위 컴포넌트에 위치하고 있는지 확인해보세요. 가장 바깥쪽에서 `QueryClientProvider`를 설정해줘야 모든 하위 컴포넌트들에서 useMutation이나 useQuery 등의 기능을 사용할 수 있습니다. 다음으로는 `ReactQueryProviders` 컴포넌트가 앱 전체에 적용되고 있는지 확인해보세요. `_app.tsx` 파일 안에서 이 컴포넌트를 사용하면 됩니다. ```typescript import React from 'react' import { ReactQueryProviders } from './query-provider' export default function MyApp({ Component, pageProps }) { return ( <ReactQueryProviders> <Component {...pageProps} /> </ReactQueryProviders> ) } ``` 이렇게 수정한 후 다시 코드를 실행하여 문제가 해결되었는지 확인해 보세요.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!