A query that was dehydrated as pending ended up rejecting.

[SaadFarooq-Dev]

When ever I get a error from the server I get this in the development. Not sure what I am doing wrong here.

hydration-error-info.js:63 A query that was dehydrated as pending ended up rejecting. ${QUERY_KEY}: AxiosError: Request failed with status code 500; The error will be redacted in production builds

This is my query

export const useQueryFuncName = ({
  interval,
  enabled = false,
}: Props) => {
  return useQuery({
    enabled,
    queryKey: [Key],
    queryFn: () => {
      return func();
    },
    staleTime: 60 * 60 * 1000 * 4, // 4 hours
  });
};

This is the function

const func = async ({ interval }: Props) => {
  const { data }: { data: TYPE } = await Api.get(
    `/path`,
    {
      params: { interval },
    },
  );
  return data;
};

And then we proxy to our server.

[TkDodo]

This can’t be the whole code because this error will only show up if you’re using hydration and stream a promise to the client. if you would like me to look into this, please show a minimal stackblitz or codesandbox reproduction

[SaadFarooq-Dev]

Will do. Thanks.

[SaadFarooq-Dev]

https://codesandbox.io/p/devbox/clg44m?migrateFrom=d3dtxf

[SaadFarooq-Dev]

@TkDodo

[TkDodo]

the problem is that your custom dehydrateOptions also persist erroneous / pending queries. That not only doesn’t work because you can’t serialize Error classes, but it also wants to store pending queries, which puts promises into the cache. Persistence and server-side-rendering use the same hydration approach, so getting promises from the persister back doesn’t really work.

What you want is to only persist successful queries, which we do per default, so:

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

dehydrateOptions: {
  shouldDehydrateQuery: (query) => {
    return (
      defaultShouldDehydrateQuery(query) &&
      !doNotPersistQueries.includes(query.queryKey[0])
    );
  },
}

[SaadFarooq-Dev]

Thank you @TkDodo .