Error thrown when using NextJS, SSR and prefetchQuery

[RyanPayso13]

I have followed the docs to set up react-query with NextJS & SSR getServerSideProps to populate the cache but am getting the following error:

SerializableError: Error serializing `.dehydratedState.queries[0].data.config.transformRequest[0]` returned from `getServerSideProps` in "/policy-management".
Reason: `function` cannot be serialized as JSON. Please only return JSON serializable data types.

The code is as follows:

async function prefetchPolicies(path: string) {
  const queryCache = new QueryCache();
  await queryCache.prefetchQuery('policies', () => {
    return axios.get(`${path}/v1/policies`);
  });

  return dehydrate(queryCache);
}

export async function getServerSideProps({ req, res }: NextPageContext) {
  const { path } = absoluteUrl(req as IncomingMessage);
  return {
    props: {
      dehydratedState: await prefetchPolicies(path),
    },
  };
}

Can someone tell me why this error is being thrown?

[TkDodo]

Your policies query returns an AxiosResponse - which does contain function as well. The interface looks something like this:

export interface AxiosResponse<T = any>  {
  data: T;
  status: number;
  statusText: string;
  headers: any;
  config: AxiosRequestConfig;
  request?: any;
}

It would be good to only return the data from the axios request in your queryFn, as that is the serializable json that you can put in the cache:

  await queryCache.prefetchQuery('policies', async () => {
    const { data } = await axios.get(`${path}/v1/policies`);
    return data
  });

[RyanPayso13]

Wow! That is a very quick and useful response :)

[RyanPayso13]

If I rename the query to something like policy.runs i do not see that it has been pre-populated in the react-query dev tools.

async function prefetchPolicyRuns(path: string) {
  const queryCache = new QueryCache();
  const { data } = await axios.get(`${path}/v1/policies`);
  await queryCache.prefetchQuery('policy.runs', data);
  return dehydrate(queryCache);
}

Then in the client I would use the hook:

usePaginatedQuery(
    [`policies`],
    () => {
      return axios.get(`${path}/v1/policies?${params}`);
    },
    {
      enabled: false,
      retry: false,
    }
  );

I only see policies in the dev tools however?

I thought that using SSR would populate the query cache first which means that the client would serve that initially and update in the background form the client if the data was stale?

I only ask as I am having to justify this new tech to my team and I cannot just say 'it just works'! :)

[TkDodo]

My experience with SSR is very limited I'm afraid. I can take a look if you have a codesandbox that shows the behaviour though

[RyanPayso13]

My experience with SSR is very limited I'm afraid. I can take a look if you have a codesandbox that shows the behaviour though

No worries.

I think I am getting confused with queryCache on the client and server.

When I log:

async function prefetchPolicyRuns(path: string) {
  const queryCache = new QueryCache();
  const { data } = await axios.get(`${path}/v1/policies`);
  await queryCache.prefetchQuery('runs', data);

  console.log(queryCache);

  return dehydrate(queryCache);
}

I can see runs in the cache on the server which would then be hydrated in the client cache in _app.tsx via pageProps.

I think! :)