Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/openstatusHQ/openstatus. 🫖 Status page with uptime monitoring & API monitoring as code 🫖 openstatus.dev
bun drizzle-orm monitoring monitoring-as-code nextjs observability on-call open-source shadcn-ui status-page statuspage synthetic-monitoring tinybird turso uptime uptime-checker uptime-monitor
Something went wrong. Try again.
1.7 kB · 53 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354"use client";
import type { AppRouter } from "@openstatus/api";import type { QueryClient } from "@tanstack/react-query";import { QueryClientProvider } from "@tanstack/react-query";import { ReactQueryDevtools } from "@tanstack/react-query-devtools";import { createTRPCReact } from "@trpc/react-query";import { useState } from "react";
import { makeQueryClient } from "./query-client";import { endingLink } from "./shared";
export const api = createTRPCReact<AppRouter>();let clientQueryClientSingleton: QueryClient;function getQueryClient() { if (typeof window === "undefined") { // Server: always make a new query client return makeQueryClient(); } // Browser: use singleton pattern to keep the same query client return (clientQueryClientSingleton ??= makeQueryClient());}
export function TRPCReactQueryProvider( props: Readonly<{ children: React.ReactNode; }>,) { // NOTE: Avoid useState when initializing the query client if you don't // have a suspense boundary between this and the code that may // suspend because React will throw away the client on the initial // render if it suspends and there is no boundary const queryClient = getQueryClient(); const [trpcClient] = useState(() => api.createClient({ links: [ endingLink({ headers: { "x-trpc-source": "client", }, }), ], }), ); return ( <api.Provider client={trpcClient} queryClient={queryClient}> <QueryClientProvider client={queryClient}> {props.children} <ReactQueryDevtools initialIsOpen={false} /> </QueryClientProvider> </api.Provider> );}