openstatus.dev
Openstatus
www.openstatus.dev
1"use client";
2
3import { endingLink } from "@/lib/trpc/shared";
4import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
5import { createTRPCClient, loggerLink } from "@trpc/client";
6import { createTRPCContext } from "@trpc/tanstack-react-query";
7import { useState } from "react";
8
9import type { AppRouter } from "@openstatus/api";
10
11export const { TRPCProvider, useTRPC, useTRPCClient } =
12 createTRPCContext<AppRouter>();
13
14function makeQueryClient() {
15 return new QueryClient({
16 defaultOptions: {
17 queries: {
18 // With SSR, we usually want to set some default staleTime
19 // above 0 to avoid refetching immediately on the client
20 staleTime: 60 * 1000,
21 },
22 },
23 });
24}
25let browserQueryClient: QueryClient | undefined = undefined;
26function getQueryClient() {
27 if (typeof window === "undefined") {
28 // Server: always make a new query client
29 return makeQueryClient();
30 }
31 // Browser: make a new query client if we don't already have one
32 // This is very important, so we don't re-make a new client if React
33 // suspends during the initial render. This may not be needed if we
34 // have a suspense boundary BELOW the creation of the query client
35 if (!browserQueryClient) browserQueryClient = makeQueryClient();
36 return browserQueryClient;
37}
38
39export function TRPCReactProvider({ children }: { children: React.ReactNode }) {
40 const queryClient = getQueryClient();
41 const [trpcClient] = useState(() =>
42 createTRPCClient<AppRouter>({
43 links: [
44 loggerLink({
45 enabled: (opts) =>
46 process.env.NODE_ENV === "development" ||
47 (opts.direction === "down" && opts.result instanceof Error),
48 }),
49 endingLink({
50 headers: {
51 "x-trpc-source": "client",
52 },
53 }),
54 ],
55 }),
56 );
57
58 return (
59 <QueryClientProvider client={queryClient}>
60 <TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
61 {children}
62 </TRPCProvider>
63 </QueryClientProvider>
64 );
65}