Michael SchaufelbergerM
tRPC•14mo ago•
12 replies
Michael Schaufelberger

Hydration error when using useQuery instead of useSuspenseQuery when prefetching

I have a page

export const PostsPage = async ({ params }: PostsPageProps) => {
  trpc.posts.getAll.prefetch({ userId: user.id });

  return (
    <HydrateClient>
      <PostsTable userId={user.id} />
    </HydrateClient>
  );
};


and a component

export const PostsTable = ({ userId }: PostsTableProps) => {
  const { data: posts, isPending } = trpc.posts.getAll.useQuery({
    userId,
  });

  const { table } = useDataTable({
    data: posts ?? [],
  });

  return (
    <DataTable table={table} isLoading={isPending}>
      { /* ... */ }
    </DataTable>
  );
};


Where the DataTable has some logic like 
return isLoading ? (
    <TableRow className="hover:bg-transparent">
      {table.getLeafHeaders().map((_, i) => (
        <TableCell key={i}>
          <Skeleton className="h-6 w-full" />
        </TableCell>
      ))}
    </TableRow>
  ) : (
    <TableRow>
      <TableCell
        colSpan={table.getAllColumns().length}
        className="h-24 text-center"
      >
        No results.
      </TableCell>
    </TableRow>
  )}


Using a useQuery in the PostsTable component results in a Hydration error. Can I prevent this without having to use Suspense? I found using the isPending flag to be a way simpler solution to rendering the skeleton in a deeply nested component.
Was this page helpful?