Why do not dehydrate prefetched query options

[intoday87]

when using nextjs in SSR, dehydrated state do not contains options. why?

https://github.com/tannerlinsley/react-query/blob/16b7d290c70639b627d9ada32951d211eac3adc3/src/hydration/hydration.ts#L60-L66

_app/index.tsx hydrate state with new queryClient for each request without options. So all the options set in prefechQuery are lost. but I want to keep options like cachTime

https://react-query.tanstack.com/guides/ssr#using-hydration

[TkDodo]

It might be because options on the server are often purposefully different than on the client. I guess you could just share the defaultOptions object you pass to your queryClient between the server and the client?

[intoday87]

Sharing defaultOptions with the client is different from maintaining the options for each query. So I had no choice but to solve this.
in nextjs /pages

const dehydratedOptions = ArrayUtils.arrayToObject<Pick<QueryOptions, 'queryHash' | 'cacheTime'>>(
    queryClient
      .getQueryCache()
      .getAll()
      .map((query) => ({ queryHash: query.queryHash, cacheTime: query.cacheTime })),
    'queryHash',
  )

  return {
    props: {
      dehydratedOptions, // added for hydrating options set by server
      dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))),
    },
  }

and in nextjs /pages/_app/index.tsx

        <QueryClientProvider client={queryClientRef.current}>
          <Hydrate state={pageProps.dehydratedState}>
            <HydrateOptions options={pageProps.dehydratedOptions}> // I make my own
              // children
            </HydrateOptions>
          </Hydrate>
          <ReactQueryDevtools />
        </QueryClientProvider>

I made HydrateOptions myself and referenced the source

import { FC, ReactElement, useMemo } from 'react'

import { useQueryClient } from 'react-query'
import { QueryOptions } from 'react-query/types/core/types'

interface Props {
  options?: { [p: string]: Pick<QueryOptions, 'queryHash' | 'cacheTime'> }
}

export const HydrateOptions: FC<Props> = ({ options, children }) => {
  const queryClient = useQueryClient()

  useMemo(() => {
    if (options) {
      queryClient
        .getQueryCache()
        .getAll()
        .forEach((query) => {
          query.cacheTime = options[query.queryHash]?.cacheTime
        })
    }
  }, [queryClient, options])

  return children as ReactElement<any>
}