react-query no cookies on initial load
Using react-query client on a page that uses router server caller, when initially loading that page, react-query client does not pass cookies through.
Here is a minimal reproduction repo, created with create-t3-app: https://github.com/Shmookoff/trpc-react-query-no-cookies-on-initial-load
1. Cookie test is set in the middleware.
2. The / page is invoking a procedure using server caller.
3. The ClientComponent is invoking a procedure using react-query client.
4. After the cookie is already set, on initial page load, the ClientComponent invokes a procedure without passing the cookie with the request ({ testCookie: undefined } in console output).
5. At this point, the page is fully sent to the client ( GET / 200 in 151ms)
6. The procedure (for some reason) is then invoked the second time, the cookie is present ({ testCookie: { name: 'test', value: 'test' } })GitHub
GitHub - Shmookoff/trpc-react-query-no-cookies-on-initial-load
Contribute to Shmookoff/trpc-react-query-no-cookies-on-initial-load development by creating an account on GitHub.
3 Replies
I suppose the procedure on step 3 is invoked server side using
TRPCReactProvider. This explains why there are no cookies. Why though? I thought the react-query client should only be used client side.. Should I ask this question to the t3 team?
it really should not run on the server with "use client", should it?Advanced Server Rendering | TanStack Query React Docs
Welcome to the Advanced Server Rendering guide, where you will learn all about using React Query with streaming, Server Components and the Next.js app router.
You might want to read the Server Rendering & Hydration guide before this one as it teaches the basics for using React Query with SSR, and Performance & Request Waterfalls as well as Pre...
...and the relevant issue: https://github.com/t3-oss/create-t3-app/issues/1765
GitHub
bug:
useSuspenseQuery will get "UNAUTHORIZED" tRPC error · Issue ...Provide environment information System: OS: macOS 14.2.1 CPU: (8) arm64 Apple M1 Pro Memory: 196.13 MB / 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/nod...