Update TRPC Query Settings

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>
 

src/common/providers/ProviderTRPCQueryClient.tsx

@@ -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>
-  );
-}

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>
+  );
+}