tanstack query v5 with nextjs app dir
Hi guys, is there any repo, sandbox to see how to use tanstack query v5 in nextjs app dir?
20 Replies
fair-rose•3y ago
Have you followed the instructions in the docs?
dependent-tanOP•3y ago
my rq provider, i used in my main layout
dependent-tanOP•3y ago
my getQueryClient
dependent-tanOP•3y ago
i have an route called: /dashboard/page.tsx
dependent-tanOP•3y ago
dependent-tanOP•3y ago
and my component:
dependent-tanOP•3y ago
if a use this, i get an error:
dependent-tanOP•3y ago
i'm using: "@tanstack/react-query": "5.0.0-alpha.70", "next": "13.4.7"
if i use the initialData pattern, its works perfect
fair-rose•3y ago
Thanks, we just released this yesterday. Are you using the QueryClientProvider somewhere in a server component? It has to be in a client component.
@Ephem fyi. I think the posted code looks fine 🤔
Oh shoot
So getQueryClient imports the QueryClient from the index barrel. It looks like that brings in the Provider in a server context as well
Have we just poison pilled everything? Man this 💩 is so confusing
dependent-tanOP•3y ago
nop, im using the Rq provider in my global provider, which is marked as a cliente component as well
dependent-tanOP•3y ago
fair-rose•3y ago
Yeah your code looks right. Looking at the stack trace, it comes from getQueryClient()
dependent-tanOP•3y ago
QueryClient should be imported from "@tanstack/react-query'" or "@tanstack/query-core"? 🤔
I just cloned a project that uses both patterns and imported the QueryClient from "@tanstack/query-core" it doesn't throw the "use client" error
dependent-tanOP•3y ago
dependent-tanOP•3y ago
fair-rose•3y ago
Yeah but it should work from react- query as well
You don't install the core separately, so you shouldn't import from it
dependent-tanOP•3y ago
I still can't solve the problem, I have tried it in a new project with a single path following the steps in the doc and I still get the 'use client' error. If you have a repo or sandbox with a playback with the lib in its v5 version with the nextjs app dir I would appreciate it, because I need to use the runtime edge in nextjs but the lib doesn't support the runtime edge in the latest version due to unstable_batchedUpdates error
the only solution for now is to use the initialData pattern
fair-rose•3y ago
it should work with:
sorry for the troubles, I'll try figure it out tomorrow
dependent-tanOP•3y ago
Don't worry, it is really appreciated that the mantainers of the libs are modifying and adapting the libs to the new paradigm that is being proposed by both the react team and vercel. 👏
fair-rose•3y ago
should be fixed in alpha.71