`useQuery` in client components

// 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,
});