tomwyrT
tRPC•3y ago•
1 reply
tomwyr

`useQuery` in client components

I have a very simple app with a single page configured to use SSR. The component that the page renders requests data using the tRPC client and 
useQuery
 function. I modified the component to be a client component by adding use client on top of the file.
The result I expected to see was app fetching the component from the server and loading data asynchronously from the client.
Instead, the server's response is delayed until the data is loaded and the browser renders component with the data already loaded.

Is it possible to use the combination of tRPC + SSR + use client? If so, wouldn't the code below result in the behavior I was expecting?

// src/pages/index.tsx
"use client";

import { trpc } from "../utils/trpc";

export default function HomePage() {

  // Expecting to see "Loading..." first but the message is displayed immediately after
  // a 2 seconds delay before rendering the page for the first time.

  const result = trpc.greeting.useQuery({
    name: "Bob",
  });

  if (!result.data) {
    return <div>Loading...</div>;
  }

  return <div>{result.data.message}</div>;
}

// src/pages/apis/trpc/[trpc].ts
const appRouter = router({
  greeting: publicProcedure
    .query(async ({ input }) => {
      await new Promise((resolve) => setTimeout(resolve, 2000));

      return {
        message: `Hello ${input.name}!`,
      };
    }),
});

// src/utils/trpc.ts
export const trpc = createTRPCNext<AppRouter>({
  config(opts) {
    const { ctx } = opts;

    return {
      links: [
        httpBatchLink({
          // ...
        }),
      ],

      queryClientConfig: {
        // ...
      },
    };
  },

  ssr: true,
});
Was this page helpful?