Feature request: De-/hydration with TypeScript (dehydrate does not take a generic for state type, hydration is not type-safe)

[bennettdams]

I would love to do the hydration in a type-safe manner.

For the Next.js example, <Hydration>.. is used in _app.jsx. This means that React Query's hydration can only ever work, if you never have unserializable data in any of your pages in getStaticProps getServerSideProps, e.g. the very first Date will make the hydration fail.

If we now say that one has to de-/serialize on his own (like written in the limitations), _app is a bad place to do that, because the data will look different for every page, so handling the deserialization in this general entrypoint component is probably not a good idea.
What I did now was using <Hydrate>.. in the page where I also fill the query cache. That way I also have the deserialization in the same place, which allows type-safish execution.

Do you have a recommendation to make the deserialization type-safe? Right now, neither dehydrate or <Hydrate>.. are implemented to be provided with a generic, so the QueryState's data is always unknown.

Example:

type QueryDataType = Cars[] | null;

function fillQueryCacheOnServer(
  cars: Car[] | null
) {
  if (!car) {
    return null;
  } else {
    const queryClient = new QueryClient();

    queryClient.setQueryData<QueryDataType>(
      [queryKey],
      // serialization
      serialize(cars)
    );

    return queryClient;
  }
}

export function createDehydratedState(
  cars: Car[] | null
): DehydratedState | null {
  const queryClient = fillQueryCacheOnServer(cars);
  return !queryClient ? null : dehydrate(queryClient);
}

export function serialize(cars: Car[]): Car[]{
  return JSON.parse(JSON.stringify(cars));
}

export function deserialize(car: Car): Car{
  car.someDate = new Date(car.someDate);

  return car;
}

export const getStaticProps: GetStaticProps<CarsPageProps> = async () => {
  // native `fetch` method used inside
  const cars: Car[] = (await fetchCars()).result ?? null

  return {
    props: {
      dehydratedState: createDehydratedState(cars),
    },
    revalidate: revalidateInSeconds,
  };
};

export default function CarsPage(props: CarsPageProps): JSX.Element {
  return (
    <Hydrate
      state={{
        ...props.dehydratedState,
        queries: props.dehydratedState.queries.map((query) => {
          // deserialization
          // TypeScript will yell at you here, because `car` is unknown
          query.state.data = query.state.data.map((car) => deserialize(car));
          return query;
        }),
      }}
    >
      <div ... />
    </Hydrate>
  );
}

Proposed solution

I think, for the beginning, it would be enough if dehydrate would take a generic that is passed through to the internal QueryState (which already takes a generic). That way, you can at least do the deserialization in a type-safe manner. This would not make alle the hydration type-safe, but as the serialization will be done with a general function (like JSON.parse(JSON.stringify(..))) most of the time, the dehydrate function is more important. Look for the // deserialization comment in my code example above, that is the only place where knowing the type is really important. Without knowing the type there, you would've to create a "generic" function that transforms all e.g. ISO strings to dates based on keys or something - when you know the type, you can do custom deserialization, which is the better approach in my opinion.

[SalahAdDin]

It is also hard to type it on a custom App, there is not such dehydratedState on props.

How can i properly type the hydration properties?

Where

 
import type { AppProps } from 'next/app';

const MyApp = ({ Component, pageProps }: AppProps) => {}

I get:

[TkDodo]

This is more of a question for nextJs, see this stackoverflow question.

Basically, the communication is only done via json from the server, and the client picks up the json. There is no real type-safety here, just assumptions. If you want end-to-end typesafety, I can recommend taking a look at trpc (which is built on top of react-query):

https://trpc.io/

[SalahAdDin]

This is more of a question for nextJs, see this stackoverflow question.

Basically, the communication is only done via json from the server, and the client picks up the json. There is no real type-safety here, just assumptions. If you want end-to-end typesafety, I can recommend taking a look at trpc (which is built on top of react-query):

https://trpc.io/

I will check it, Thank you!

[moshie]

import type { NextPageContext } from 'next';
import type { AppProps } from 'next/app';
import type { DehydratedState } from '@tanstack/react-query';

type PageProps = {
  dehydratedState?: DehydratedState;
};

type ExtendedAppProps<P = {}> = {
  err?: NextPageContext['err'];
} & AppProps<P>;

function MyApp({ Component, pageProps, err }: ExtendedAppProps<PageProps>) {

[filahf]

The new version of Next lets you extend AppProps like this.

import type { NextPageContext } from 'next';
import type { AppProps } from 'next/app';
import type { DehydratedState } from '@tanstack/react-query';


function MyApp({ Component, pageProps}: AppProps<{ dehydratedState: DehydratedState }>) {