correct-apricot

new QueryClient throws error on NextJS with dynamicIO enabled.

When using react-query with nextjs@15.0.3-canary.4 with dynamicIO enabled I get the following error when trying to create a query client.

Error: Route "/" used `Date.now()` instead of using `performance` or without explicitly calling `await connection()` beforehand. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time
    at io (node_modules/next/src/server/node-environment-extensions/utils.tsx:33:31)
    at now (node_modules/next/src/server/node-environment-extensions/date.tsx:17:9)
    at createQueryClient (src/trpc/query-client.ts:5:2)
    at createQueryClient (src/trpc/react.tsx:17:28)
    at getQueryClient (src/trpc/react.tsx:41:22)
  3 |
  4 | export const createQueryClient = () =>
> 5 |   new QueryClient({
    |  ^
  6 |     defaultOptions: {
  7 |       queries: {

Error: Route "/" used `Date.now()` instead of using `performance` or without explicitly calling `await connection()` beforehand. See more info here: https://nextjs.org/docs/messages/next-prerender-current-time
    at io (node_modules/next/src/server/node-environment-extensions/utils.tsx:33:31)
    at now (node_modules/next/src/server/node-environment-extensions/date.tsx:17:9)
    at createQueryClient (src/trpc/query-client.ts:5:2)
    at createQueryClient (src/trpc/react.tsx:17:28)
    at getQueryClient (src/trpc/react.tsx:41:22)
  3 |
  4 | export const createQueryClient = () =>
> 5 |   new QueryClient({
    |  ^
  6 |     defaultOptions: {
  7 |       queries: {

Is there any way to solve this on my side? Or is this something that needs to be fixed inside of tanstack-query to support dynamicIO?

4 Replies

evident-indigo•10mo ago

so we can't use Date.now() anymore now 😂 ?

evident-indigo•10mo ago

it's probably this line: https://github.com/TanStack/query/blob/24f1d45cbd3a252e2c8bb3471591502a2418b6ad/packages/query-core/src/mutationCache.ts#L91

GitHub

query/packages/query-core/src/mutationCache.ts at 24f1d45cbd3a252e2...

🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query. - TanStack/query

correct-apricotOP•10mo ago

@TkDodo 🔮 Yeah seems like it, at least for SSR in the upcoming nextjs features if they don't change. 🙃 Are there any technical reasons this mutationId has to be new Date(), or could it be swapped for a random id to get partial pre-rendering with dynamicIO working?

evident-indigo•10mo ago

I wanted something that's globally unique and can be incremented Doesn't have to be Date.now

Gaming

Programming

new QueryClient throws error on NextJS with dynamicIO enabled.

Did you find this page helpful?