coder2000•2w ago

Error using prefetch query with TanStack Query

When trying to prefetch data with TanStack Query it fails with the following:

A query that was dehydrated as pending ended up rejecting. [[["tradeList"],{"type":"query"}]]: TypeError: (0 , __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$next$40$15$2e$3$2e$0_react$2d$dom$40$19$2e$1$2e$0_react$40$19$2e$1$2e$0_$5f$react$40$19$2e$1$2e$0$2f$node_modules$2f$next$2f$dist$2f$server$2f$route$2d$modules$2f$app$2d$page$2f$vendored$2f$rsc$2f$react$2e$js__$5b$app$2d$rsc$5d$__$28$ecmascript$29$__.createContext) is not a function; The error will be redacted in production builds
 ⨯ [Error: redacted] { digest: '2062921512' }

A query that was dehydrated as pending ended up rejecting. [[["tradeList"],{"type":"query"}]]: TypeError: (0 , __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$next$40$15$2e$3$2e$0_react$2d$dom$40$19$2e$1$2e$0_react$40$19$2e$1$2e$0_$5f$react$40$19$2e$1$2e$0$2f$node_modules$2f$next$2f$dist$2f$server$2f$route$2d$modules$2f$app$2d$page$2f$vendored$2f$rsc$2f$react$2e$js__$5b$app$2d$rsc$5d$__$28$ecmascript$29$__.createContext) is not a function; The error will be redacted in production builds
 ⨯ [Error: redacted] { digest: '2062921512' }

Once the page loads the data appears and it keeps loading it every few seconds.

7 Replies

craftzcode•7d ago

@coder2000 we have the same problem I just posted now, have you already find a solution for this problem? https://discord.com/channels/867764511159091230/1360887109119905923/1360887109119905923

coder2000OP•7d ago

I removed the pending status queries from the dehydrate config

vntbln•7d ago

Where can I find that config? I have same issue

coder2000OP•7d ago

This is my query client file:

import {
  QueryClient,
  defaultShouldDehydrateQuery,
} from "@tanstack/react-query";

export function makeQueryClient() {
  return new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 30 * 1000,
      },
      dehydrate: {
        shouldDehydrateQuery: (query) => defaultShouldDehydrateQuery(query),
      },
      hydrate: {},
    },
  });
}

import {
  QueryClient,
  defaultShouldDehydrateQuery,
} from "@tanstack/react-query";

export function makeQueryClient() {
  return new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 30 * 1000,
      },
      dehydrate: {
        shouldDehydrateQuery: (query) => defaultShouldDehydrateQuery(query),
      },
      hydrate: {},
    },
  });
}

If you have something adding pending queries I would remove it.

craftzcode•5d ago

after removing that line I'm getting this error

craftzcode•5d ago

did you encouter this kind of error? @coder2000 even I have authorization, when I tried to back that shouldDehydrateQuery I'm not getting that error, but the continuously sending a request is my problem

coder2000OP•5d ago

No. I didn't see anything like that one. I did put superjson in a different place though

Error using prefetch query with TanStack Query

Did you find this page helpful?