React Query and Next14 build error
Answered
Chinese Alligator posted this in #help-forum
Chinese AlligatorOP
Hi I can't build my next14 + react query + ky project. I want to consume a REST API with react query inside my next14 project. It works perfectly in dev mode, but when I try to build I get an error basically saying :
Error: No QueryClient set, use QueryClientProvider to set one. I set a QueryClientProvider in layout.tsx file as said here : https://tanstack.com/query/v4/docs/framework/react/guides/. Here is an OSS reproduction of this bug with details about the issue in the README : https://github.com/Courtcircuits/next14-react-query-error. I've been battling with this for two days and found no solution on StackOverflow or next's github issueAnswered by Chinese Alligator
Still doesn't work. But in the end with a coworker we fixed the issue. Actually I was using the
pages router AND the app router. Therefore next wanted to build pages that I didnt wanted to be built. Thanks for your help. For anyone with the same problem check this repo for the solution : https://github.com/Courtcircuits/next14-react-query-error8 Replies
Giant resin bee
im confused why are you using a state? why cant you initialize your QueryClient outside the function like this and then pass it to the QueryClientProvider
"use client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Suspense } from "react";
const queryClient = new QueryClient({
defaultOptions: {
queries: {
staleTime: 60 * 1000, // 1 minute
},
},
});
export default function QueryProvider({
children,
}: {
children: React.ReactNode;
}) {
return (
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
);
}@Giant resin bee im confused why are you using a state? why cant you initialize your QueryClient outside the function like this and then pass it to the QueryClientProvider
"use client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Suspense } from "react";
const queryClient = new QueryClient({
defaultOptions: {
queries: {
staleTime: 60 * 1000, // 1 minute
},
},
});
export default function QueryProvider({
children,
}: {
children: React.ReactNode;
}) {
return (
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
);
}
Chinese AlligatorOP
I did that since tanstack’s example on how to setup react query with next14 does it
I tried to move the instanciation outside the component and I tried to not use a state but it still doesn’t work
@Chinese Alligator I did that since tanstack’s example on how to setup react query with next14 does it
Giant resin bee
i feel this is for the pages router, as you can see the file is "_app.jsx", can you please try the above component i showed to you?
Chinese AlligatorOP
Still doesn't work. But in the end with a coworker we fixed the issue. Actually I was using the
pages router AND the app router. Therefore next wanted to build pages that I didnt wanted to be built. Thanks for your help. For anyone with the same problem check this repo for the solution : https://github.com/Courtcircuits/next14-react-query-errorAnswer
Giant resin bee
Glad to hear that, my friend. I see you wiped out the App router.
@Giant resin bee Glad to hear that, my friend. I see you wiped out the App router.
Chinese AlligatorOP
Yep exactly. I'm learning next so that's why I got confused. I'm digging into the different routers that next provides. Thanks again for your help !
Giant resin bee
No worries mate, best of luck in your journey! Stick to the docs, most of it is really well written, I'd recommend marking this thread as "solved"