trpc_react_query_provider_setup_with_httpbatchlink.ts

1import { createTRPCReact, httpBatchLink } from '@trpc/react-query';
2import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
3import React, { useState } from 'react';
4import type { AppRouter } from './server'; // Import your API's type definition
5
6// 1. Create tRPC hooks
7export const trpc = createTRPCReact<AppRouter>();
8
9export function App() {
10  const [queryClient] = useState(() => new QueryClient());
11  const [trpcClient] = useState(() =>
12    trpc.createClient({
13      links: [
14        httpBatchLink({
15          url: 'http://localhost:3000/trpc',
16          // You can pass any HTTP headers here
17          async headers() {
18            return {
19              // authorization: getAuthToken(),
20            };
21          },
22        }),
23      ],
24    }),
25  );
26
27  return (
28    <trpc.Provider client={trpcClient} queryClient={queryClient}>
29      <QueryClientProvider client={queryClient}>
30        <IndexPage />
31      </QueryClientProvider>
32    </trpc.Provider>
33  );
34}
35
36function IndexPage() {
37  // 2. Use the hooks to fetch data
38  const hello = trpc.hello.useQuery({ name: 'client' });
39
40  if (!hello.data) {
41    return <div>Loading...</div>;
42  }
43
44  return (
45    <div>
46      <p>{hello.data.greeting}</p>
47    </div>
48  );
49}