test ref for queryClient

Sendouc · Apr 3, 2021 · e42bc3c · e42bc3c · vercel · Apr 3, 2021
1 parent 344916f
commit e42bc3c
Showing 1 changed file with 32 additions and 6 deletions.
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,22 +1,25 @@
-import "focus-visible/dist/focus-visible";
 import { ChakraProvider, extendTheme } from "@chakra-ui/react";
 import { mode } from "@chakra-ui/theme-tools";
 import { i18n } from "@lingui/core";
 import { I18nProvider } from "@lingui/react";
+import { createReactQueryHooks, createTRPCClient } from "@trpc/react";
 import Layout from "components/layout";
+import "focus-visible/dist/focus-visible";
 import { Provider as NextAuthProvider } from "next-auth/client";
 import { DefaultSeo } from "next-seo";
 import type { AppProps } from "next/app";
 import Head from "next/head";
 import { Router } from "next/router";
 import NProgress from "nprogress";
-import { useEffect } from "react";
-import { QueryClientProvider } from "react-query";
+import type { AppRouter } from "pages/api/trpc/[trpc]";
+import { useEffect, useRef } from "react";
+import { QueryClient, QueryClientProvider } from "react-query";
 import { Hydrate } from "react-query/hydration";
+import superjson from "superjson";
 import { theme } from "theme";
 import { activateLocale } from "utils/i18n";
 import { locales } from "utils/lists/locales";
-import { trpc } from "utils/trpc";
+//import { trpc } from "utils/trpc";
 import "./styles.css";
 
 NProgress.configure({ showSpinner: false });
@@ -148,8 +151,29 @@ const setDisplayedLanguage = () => {
 };
 
 const MyApp = ({ Component, pageProps }: AppProps) => {
+  const trpcRef = useRef<any>();
   useEffect(setDisplayedLanguage, []);
 
+  if (!trpcRef.current) {
+    const client = createTRPCClient<AppRouter>({
+      url: "/api/trpc",
+      transformer: superjson,
+    });
+
+    trpcRef.current = createReactQueryHooks({
+      client,
+      queryClient: new QueryClient({
+        defaultOptions: {
+          queries: {
+            // queries never go stale to save some work
+            // on our poor database
+            staleTime: Infinity,
+          },
+        },
+      }),
+    });
+  }
+
   return (
     <>
       <Head>
@@ -185,9 +209,11 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
               // @ts-expect-error
               header={Component.header}
             >
-              <QueryClientProvider client={trpc.queryClient}>
+              <QueryClientProvider client={trpcRef.current.queryClient}>
                 <Hydrate
-                  state={trpc.useDehydratedState(pageProps.dehydratedState)}
+                  state={trpcRef.current.useDehydratedState(
+                    pageProps.dehydratedState
+                  )}
                 >
                   <Component {...pageProps} />
                 </Hydrate>