From ef6b573e08e4d4d5238cf4d02a993db6d2adf8e6 Mon Sep 17 00:00:00 2001
From: Enrico Ros <enrico.ros@gmail.com>
Date: Fri, 15 Mar 2024 15:39:38 -0700
Subject: [PATCH] Update TRPC Query Settings

---
 pages/_app.tsx                                | 18 +++++-----
 .../providers/ProviderTRPCQueryClient.tsx     | 29 ---------------
 .../providers/ProviderTRPCQuerySettings.tsx   | 36 +++++++++++++++++++
 3 files changed, 45 insertions(+), 38 deletions(-)
 delete mode 100644 src/common/providers/ProviderTRPCQueryClient.tsx
 create mode 100644 src/common/providers/ProviderTRPCQuerySettings.tsx

diff --git a/pages/_app.tsx b/pages/_app.tsx
index e06aafebf..8bdda75b2 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -17,7 +17,7 @@ import { ProviderBackendAndNoSSR } from '~/common/providers/ProviderBackendAndNo
 import { ProviderBootstrapLogic } from '~/common/providers/ProviderBootstrapLogic';
 import { ProviderSingleTab } from '~/common/providers/ProviderSingleTab';
 import { ProviderSnacks } from '~/common/providers/ProviderSnacks';
-import { ProviderTRPCQueryClient } from '~/common/providers/ProviderTRPCQueryClient';
+import { ProviderTRPCQuerySettings } from '~/common/providers/ProviderTRPCQuerySettings';
 import { ProviderTheming } from '~/common/providers/ProviderTheming';
 import { hasGoogleAnalytics, OptionalGoogleAnalytics } from '~/common/components/GoogleAnalytics';
 import { isVercelFromFrontend } from '~/common/util/pwaUtils';
@@ -33,15 +33,15 @@ const MyApp = ({ Component, emotionCache, pageProps }: MyAppProps) =>
 
     <ProviderTheming emotionCache={emotionCache}>
       <ProviderSingleTab>
-        <ProviderBootstrapLogic>
-          <ProviderTRPCQueryClient>
-            <ProviderSnacks>
-              <ProviderBackendAndNoSSR>
+        <ProviderTRPCQuerySettings>
+          <ProviderBootstrapLogic>
+            <ProviderBackendAndNoSSR>
+              <ProviderSnacks>
                 <Component {...pageProps} />
-              </ProviderBackendAndNoSSR>
-            </ProviderSnacks>
-          </ProviderTRPCQueryClient>
-        </ProviderBootstrapLogic>
+              </ProviderSnacks>
+            </ProviderBackendAndNoSSR>
+          </ProviderBootstrapLogic>
+        </ProviderTRPCQuerySettings>
       </ProviderSingleTab>
     </ProviderTheming>
 
diff --git a/src/common/providers/ProviderTRPCQueryClient.tsx b/src/common/providers/ProviderTRPCQueryClient.tsx
deleted file mode 100644
index d03694599..000000000
--- a/src/common/providers/ProviderTRPCQueryClient.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as React from 'react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-
-
-export function ProviderTRPCQueryClient(props: { children: React.ReactNode }) {
-  // single app-wide instance, used by both React Query and tRPC
-  const [queryClient] = React.useState(() => new QueryClient({
-    defaultOptions: {
-      queries: {
-        retry: false,
-        // call functions even when the network is disconnected; this makes 127.0.0.1 work, while probably not causing other issues
-        networkMode: 'always',
-        // not tested yet, but they could be good defaults
-        // refetchOnWindowFocus: false,
-        // refetchOnMount: false,
-      },
-      mutations: {
-        retry: false,
-        networkMode: 'always',
-      },
-    },
-  }));
-
-  return (
-    <QueryClientProvider client={queryClient}>
-      {props.children}
-    </QueryClientProvider>
-  );
-}
\ No newline at end of file
diff --git a/src/common/providers/ProviderTRPCQuerySettings.tsx b/src/common/providers/ProviderTRPCQuerySettings.tsx
new file mode 100644
index 000000000..520d5ba1c
--- /dev/null
+++ b/src/common/providers/ProviderTRPCQuerySettings.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+
+export function ProviderTRPCQuerySettings(props: { children: React.ReactNode }) {
+
+  // single app-wide instance, used by both React Query and tRPC
+  const queryClientRef = React.useRef<QueryClient | null>(null);
+
+  // create the instance if it doesn't exist
+  if (!queryClientRef.current) {
+    queryClientRef.current = new QueryClient({
+      defaultOptions: {
+        queries: {
+          retry: false,
+          // call functions even when the network is disconnected; this makes 127.0.0.1 work, while probably not causing other issues
+          networkMode: 'always',
+          // not tested yet, but they could be good defaults
+          // NOTE: Turn on for 1.15.0 - 1.16.0
+          // refetchOnWindowFocus: false,
+          // refetchOnMount: false,
+        },
+        mutations: {
+          retry: false,
+          networkMode: 'always',
+        },
+      },
+    });
+  }
+
+  return (
+    <QueryClientProvider client={queryClientRef.current}>
+      {props.children}
+    </QueryClientProvider>
+  );
+}
\ No newline at end of file