pandakas•8mo ago

server-side helpers doesnt work with `Hydrate` and `QueryClient`

environtment: node v20.9.0, npm Hi i tried to implement server-side helpers but somehow it just doesnt work, the fetch is successful but i think it didn't dehydrate i think the issue happened because im also using react query outside tRPC (first vanilla react query -> trying to migrate over to TRPC) so my _app.tsx pretty much look like this

const App = () => {
...
 <QueryClientProvider client={queryClient}>
  <Hydrate state={pageProps.dehydratedState}>
    <Component {...pageProps} />
    <ReactQueryDevtools initialIsOpen={false} />
  </Hydrate>
</QueryClientProvider>;
}

export default  bff.withTRPC(App)

const App = () => {
...
 <QueryClientProvider client={queryClient}>
  <Hydrate state={pageProps.dehydratedState}>
    <Component {...pageProps} />
    <ReactQueryDevtools initialIsOpen={false} />
  </Hydrate>
</QueryClientProvider>;
}

export default  bff.withTRPC(App)

its working fine when i remove the QueryClientProvider is it okay to remove them ?

export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
  const helpers = createServerSideHelpers({
    router: appRouter,
    ctx: createTRPCContext({
      req: ctx.req as NextApiRequest,
      res: ctx.res as NextApiResponse,
    }),
    transformer: superjson,
  });

  const returned = await helpers.auth.session.fetch();

  console.log(returned);

  return {
    props: {
      trpcState: helpers.dehydrate(),
    },
  };
};

function PlaygroundPage() {
  const { data } = bff.auth.session.useQuery();

  return (
    <div className="mx-auto my-auto">
      <div className="max-w-[400px]">{JSON.stringify(data?.accessToken)}</div>
      <button type="button">login</button>
    </div>
  );
}

export default PlaygroundPage;

export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
  const helpers = createServerSideHelpers({
    router: appRouter,
    ctx: createTRPCContext({
      req: ctx.req as NextApiRequest,
      res: ctx.res as NextApiResponse,
    }),
    transformer: superjson,
  });

  const returned = await helpers.auth.session.fetch();

  console.log(returned);

  return {
    props: {
      trpcState: helpers.dehydrate(),
    },
  };
};

function PlaygroundPage() {
  const { data } = bff.auth.session.useQuery();

  return (
    <div className="mx-auto my-auto">
      <div className="max-w-[400px]">{JSON.stringify(data?.accessToken)}</div>
      <button type="button">login</button>
    </div>
  );
}

export default PlaygroundPage;

thanks!

1 Reply

pandakas•8mo ago

i think the correct question would be - am i supposed to remove QueryClientProvider if i am migrating over to tRPC (incrementally/not complete)? Since i am still using react-query outside trpc