feat(app): Add tRPC client configured with Tanstack React Query (#3370)

* feat(app): Add tRPC client configured with Tanstack React Query
* feat(app): Add authentication headers to tRPC client

app.territoiresentransitions.react/src/app/App.tsx

@@ -1,35 +1,40 @@
+import { createTheme, ThemeProvider } from '@mui/material/styles';
 import {
-  BrowserRouter as Router,
+  QueryClient as TanstackQueryClient,
+  QueryClientProvider as TanstackQueryClientProvider,
+} from '@tanstack/react-query';
+import { createTrackingClient, TrackingProvider } from '@tet/ui';
+import { CollectiviteRoutes } from 'app/pages/collectivite/CollectiviteRoutes';
+import Home from 'app/pages/Home';
+import { Redirector } from 'app/Redirector';
+import { ScrollToTopOnPageChange } from 'app/ScrollToTopOnPageChange';
+import { Toasters } from 'app/Toasters';
+import { ENV } from 'environmentVariables';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { ReactQueryDevtools } from 'react-query/devtools';
+import {
+  Redirect,
   Route,
+  BrowserRouter as Router,
   Switch,
-  Redirect,
 } from 'react-router-dom';
-import {QueryClient, QueryClientProvider} from 'react-query';
-import {ReactQueryDevtools} from 'react-query/devtools';
-import {TrackingProvider, createTrackingClient} from '@tet/ui';
-import {ENV} from 'environmentVariables';
-import {E2E} from './E2E';
-import {CollectiviteRoutes} from 'app/pages/collectivite/CollectiviteRoutes';
-import Home from 'app/pages/Home';
-import {Redirector} from 'app/Redirector';
-import {Toasters} from 'app/Toasters';
-import {ScrollToTopOnPageChange} from 'app/ScrollToTopOnPageChange';
-import {createTheme, ThemeProvider} from '@mui/material/styles';
+import { E2E } from './E2E';
 
+import Layout from 'app/Layout';
+import { CollectivitesEngageesPage } from 'app/pages/CollectivitesEngagees/CollectivitesEngageesPage';
 import {
   ancienRecherchesPath,
   finaliserMonInscriptionUrl,
   profilPath,
   recherchesCollectivitesUrl,
   recherchesLandingPath,
 } from 'app/paths';
-import {CollectivitesEngageesPage} from 'app/pages/CollectivitesEngagees/CollectivitesEngageesPage';
-import {ProfilPage} from './pages/Profil/ProfilPage';
-import Layout from 'app/Layout';
-import {AuthProvider} from 'core-logic/api/auth/AuthProvider';
-import {ScoreListenerProvider} from 'core-logic/hooks/useScoreListener';
-import {VisitTracker} from 'app/VisitTracker';
+import { VisitTracker } from 'app/VisitTracker';
+import { AuthProvider } from 'core-logic/api/auth/AuthProvider';
+import { ScoreListenerProvider } from 'core-logic/hooks/useScoreListener';
+import { trpc, trpcClient } from 'utils/trpc';
 import AccepterCGUModal from './pages/Auth/AccepterCGUModal';
+import { ProfilPage } from './pages/Profil/ProfilPage';
 
 const theme = createTheme({
   palette: {
@@ -39,52 +44,60 @@ const theme = createTheme({
   },
 });
 
-const queryClient = new QueryClient();
 const trackingClient = createTrackingClient(ENV.posthog);
+const queryClient = new QueryClient();
+const tanstackQueryClient = new TanstackQueryClient();
 
 export const App = () => {
   return (
     <TrackingProvider client={trackingClient}>
-      <QueryClientProvider client={queryClient}>
-        <AuthProvider>
-          <ThemeProvider theme={theme}>
-            <ReactQueryDevtools initialIsOpen={false} />
-            <Router>
-              <ScoreListenerProvider>
-                <Layout>
-                  <E2E />
-                  <ScrollToTopOnPageChange />
-                  <Toasters />
-                  <Redirector />
-                  <VisitTracker />
-                  <AccepterCGUModal />
-                  <Switch>
-                    <Route exact path="/">
-                      <Home />
-                    </Route>
-                    <Route path={profilPath}>
-                      <ProfilPage />
-                    </Route>
-                    <Redirect
-                      exact
-                      from={ancienRecherchesPath}
-                      to={recherchesCollectivitesUrl}
-                    />
-                    <Route
-                      path={[recherchesLandingPath, finaliserMonInscriptionUrl]}
-                    >
-                      <CollectivitesEngageesPage />
-                    </Route>
-                    <Route path={'/collectivite/:collectiviteId'}>
-                      <CollectiviteRoutes />
-                    </Route>
-                  </Switch>
-                </Layout>
-              </ScoreListenerProvider>
-            </Router>
-          </ThemeProvider>
-        </AuthProvider>
-      </QueryClientProvider>
+      <trpc.Provider client={trpcClient} queryClient={tanstackQueryClient}>
+        <TanstackQueryClientProvider client={tanstackQueryClient}>
+          <QueryClientProvider client={queryClient}>
+            <AuthProvider>
+              <ThemeProvider theme={theme}>
+                <ReactQueryDevtools initialIsOpen={false} />
+                <Router>
+                  <ScoreListenerProvider>
+                    <Layout>
+                      <E2E />
+                      <ScrollToTopOnPageChange />
+                      <Toasters />
+                      <Redirector />
+                      <VisitTracker />
+                      <AccepterCGUModal />
+                      <Switch>
+                        <Route exact path="/">
+                          <Home />
+                        </Route>
+                        <Route path={profilPath}>
+                          <ProfilPage />
+                        </Route>
+                        <Redirect
+                          exact
+                          from={ancienRecherchesPath}
+                          to={recherchesCollectivitesUrl}
+                        />
+                        <Route
+                          path={[
+                            recherchesLandingPath,
+                            finaliserMonInscriptionUrl,
+                          ]}
+                        >
+                          <CollectivitesEngageesPage />
+                        </Route>
+                        <Route path={'/collectivite/:collectiviteId'}>
+                          <CollectiviteRoutes />
+                        </Route>
+                      </Switch>
+                    </Layout>
+                  </ScoreListenerProvider>
+                </Router>
+              </ThemeProvider>
+            </AuthProvider>
+          </QueryClientProvider>
+        </TanstackQueryClientProvider>
+      </trpc.Provider>
     </TrackingProvider>
   );
 };

app.territoiresentransitions.react/src/core-logic/api/auth/AuthProvider.tsx

@@ -227,23 +227,27 @@ const clearCrispUserData = () => {
   }
 };
 
-const useCurrentSession = () => {
-  const { data, error } = useQuery(['session'], async () => {
-    const { data, error } = await supabaseClient.auth.getSession();
+export async function getSession() {
+  const { data, error } = await supabaseClient.auth.getSession();
+  if (data?.session) {
+    return data.session;
+  }
+  if (error) throw error;
+
+  // restaure une éventuelle session précédente
+  const ret = await restoreSessionFromAuthTokens(supabaseClient);
+  if (ret) {
+    const { data, error } = ret;
     if (data?.session) {
       return data.session;
     }
     if (error) throw error;
+  }
+}
 
-    // restaure une éventuelle session précédente
-    const ret = await restoreSessionFromAuthTokens(supabaseClient);
-    if (ret) {
-      const { data, error } = ret;
-      if (data?.session) {
-        return data.session;
-      }
-      if (error) throw error;
-    }
+const useCurrentSession = () => {
+  const { data, error } = useQuery(['session'], async () => {
+    return getSession();
   });
 
   if (error || !data) {
@@ -252,3 +256,13 @@ const useCurrentSession = () => {
 
   return data;
 };
+
+export async function getAuthHeaders() {
+  const session = await getSession();
+  return session?.access_token
+    ? {
+        authorization: `Bearer ${session.access_token}`,
+        apikey: `${ENV.supabase_anon_key}`,
+      }
+    : null;
+}

app.territoiresentransitions.react/src/utils/trpc.ts

@@ -0,0 +1,23 @@
+// By using `import type` you ensure that the reference will be stripped at compile-time, meaning you don't inadvertently import server-side code into your client.
+// For more information, see the Typescript docs: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export
+import { createTRPCReact, httpBatchLink } from '@trpc/react-query';
+import type { AppRouter } from './../../../backend/src/trpc.router';
+import { getAuthHeaders } from 'core-logic/api/auth/AuthProvider';
+
+const BASE_URL = `${process.env.NX_PUBLIC_BACKEND_URL}/trpc`;
+
+export const trpc = createTRPCReact<AppRouter>();
+
+export const trpcClient = trpc.createClient({
+  links: [
+    httpBatchLink({
+      url: BASE_URL,
+      async headers() {
+        const authHeaders = await getAuthHeaders();
+        return {
+          ...(authHeaders ?? {}),
+        };
+      },
+    }),
+  ],
+});

package.json

@@ -41,7 +41,10 @@
     "@supabase/realtime-js": "^2.9.3",
     "@supabase/ssr": "^0.4.0",
     "@supabase/supabase-js": "^2.45.1",
-    "@trpc/server": "^10.45.2",
+    "@tanstack/react-query": "^5.59.15",
+    "@trpc/client": "11.0.0-rc.577",
+    "@trpc/react-query": "11.0.0-rc.577",
+    "@trpc/server": "11.0.0-rc.577",
     "@zxcvbn-ts/core": "^3.0.4",
     "@zxcvbn-ts/language-common": "^3.0.4",
     "@zxcvbn-ts/language-fr": "^3.0.2",