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.

1.

test

test

is set in the middleware.

2.

2.

The

page is invoking a procedure using server caller.

3.

3.

The

ClientComponent

ClientComponent

is invoking a procedure using react-query client.

4.

4.

After the cookie is already set, on initial page load, the

ClientComponent

ClientComponent

invokes a procedure without passing the cookie with the request (

{ testCookie: undefined }

{ testCookie: undefined }

in console output).

5.

5.

At this point, the page is fully sent to the client (

 GET / 200 in 151ms

 GET / 200 in 151ms

)

6.

6.

The procedure (for some reason) is then invoked the second time, the cookie is present (

{ testCookie: { name: 'test', value: 'test' } }

{ 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.

react-query no cookies on initial load

Similar Threads