T
TanStack•2y ago
helpful-purple

Setting the initial data of an useQuery with SSR data

Hello guys, I have a NextJS application that I am now trying to list rows of a table called Message. I have to now server rendered it, but I need to refetch it and consider using useQuery aswell. Whats the approach I should use when the inital data should be the SSR one, but then after that im refetching from the client side. Here is the SSR code I currently have: 
export async function getServerSideProps(
  ctx: GetServerSidePropsContext,
): Promise<GetServerSidePropsResult<MessagesProps>> {
  const messages = await db.contactMessage.findMany({
    orderBy: {
      createdAt: "desc",
    },
  });

  return {
    props: {
      messages,
    },
  };
}
export async function getServerSideProps(
  ctx: GetServerSidePropsContext,
): Promise<GetServerSidePropsResult<MessagesProps>> {
  const messages = await db.contactMessage.findMany({
    orderBy: {
      createdAt: "desc",
    },
  });

  return {
    props: {
      messages,
    },
  };
}
1 Reply
vicious-gold
vicious-gold•2y ago
please consult the docs, this is all very well documented: https://tanstack.com/query/v5/docs/react/guides/ssr
Server Rendering & Hydration | TanStack Query Docs
In this guide you'll learn how to use React Query with server rendering. See the guide on Prefetching & Router Integration for some background. You might also want to check out the Performance & Request Waterfalls guide before that.

Did you find this page helpful?