Need explanation about ssr with this library

[nenadfilipovic]

First here is my relevant code, I'm using Next.js:

export const ReactQueryProvider = ({
  state,
  children,
}: AppProviderArguments & {
  state: DehydratedState;
}): JSX.Element => {
  const [queryClient] = useState(() => new QueryClient());
  return (
    <QueryClientProvider client={queryClient}>
      <Hydrate state={state}>
        {children}
        <ReactQueryDevtools initialIsOpen={false} />
      </Hydrate>
    </QueryClientProvider>
  );
};

type CustomAppProps = {
  session: Session;
  dehydratedState: DehydratedState;
};

const App = ({
  Component,
  pageProps,
}: AppProps<CustomAppProps>): JSX.Element => {
  return (
    <AuthenticationProvider session={pageProps.session}>
      <ReactQueryProvider state={pageProps.dehydratedState}>
        <Component {...pageProps} />
      </ReactQueryProvider>
    </AuthenticationProvider>
  );
};

Here I use generated hooks with graphql-codegen.

const queryClient = new QueryClient();

    await queryClient.prefetchQuery(
      useGetOwnSettingsQuery.getKey({ where: { id } }),
      () => useGetOwnSettingsQuery.fetcher({ where: { id } }),
    );

    return {
      props: {
        dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))),
      },
    };

Request is successful and my db log show that request was completed, buy my state shows empty data field in devtools.

https://i.ibb.co/MyzRnv7/Screenshot-from-2021-08-04-09-47-55.png

UPDATE: problem here is that i am not passing auth headers to server and that is why it is not getting data, is there any pattern how to provide headers.

With hardcoded cookie I can fetch data but still data field in devtools is empty...

---

UPDATE 2: so it seems that prefetchQuery does not update cache, I must first pull data out with getQueryData and then push that data inside cache with setQueryData. Is this right?

---

UPDATE 3: so changing from queryClient.prefetchQuery(key, () => fetcher); to queryClient.prefetchQuery(key, fetcher); solved problem above.

If you look here https://www.graphql-code-generator.com/docs/plugins/typescript-react-query under exposeFetcher you will see this example await queryClient.prefetchQuery(userQuery.getKey(), () => userQuery.fetcher()). It would be good to update that part of docs if If someone else also have this problem.

---

Second problem is with client side fetching, here I can get data correctly but first render always create cache entry with no variables, I have tried to set enabled field but it does not help.

https://i.ibb.co/Fx1Qjf3/Screenshot-from-2021-08-04-09-51-12.png

Thanks :)

[TkDodo]

is there any pattern how to provide headers.

this depends on how you actually fetch the data and is out of hands of react-query. react-query is a Promise based library that only cares about resolved or rejected promises. They don't have to come from the network, so if you fetch data, that is entirely up to you :)

I must first pull data out with getQueryData and then push that data inside cache with setQueryData. Is this right?

no, prefetchQuery will put the result in the cache, that is what this method is for.

so changing from queryClient.prefetchQuery(key, () => fetcher); to queryClient.prefetchQuery(key, fetcher); solved problem above.

that just depends on what fetcher is doing. Again, react-query needs a function that returns a Promise, nothing more, nothing less.

[nenadfilipovic]

Thanks @TkDodo , I understand, my thought was that authors of this library are behind the codegen plugin for it. My problems are then tied to how plugin generates fetcher. Last thing how to avoid second problem from my opening post?

This should solve my headers problem: dotansimha/graphql-code-generator#6416