Graphql: Add graphql operation name in url (#129)

* Fix ScenarioEditor error OPENHEXA-C4

* Sentry: add user information to sentry payload

* AC-359: Fix accessibility analysis form to not spam server with thousand of graphql requests

* Graphql: Add graphql operation name in url

Author: qgerome

src/libs/apollo.ts

@@ -4,6 +4,7 @@ import {
   InMemoryCache,
   NormalizedCacheObject,
   createHttpLink,
+  InMemoryCacheConfig,
 } from "@apollo/client";
 import { onError } from "@apollo/link-error";
 import merge from "deepmerge";
@@ -22,93 +23,98 @@ let apolloClient: CustomApolloClient | undefined;
 
 const { publicRuntimeConfig } = getConfig();
 
+const CACHE_CONFIG: InMemoryCacheConfig = {
+  // possibleTypes must be provided to cache correctly unions and interfaces
+  // https://www.apollographql.com/docs/react/data/fragments/#using-fragments-with-unions-and-interfaces
+  possibleTypes: {
+    AccessmodAnalysis: [
+      "AccessmodGeographicCoverageAnalysis",
+      "AccessmodAccessibilityAnalysis",
+      "AccessmodZonalStatistics",
+    ],
+  },
+  typePolicies: {
+    Team: {
+      merge: true,
+      fields: {
+        permissions: {
+          merge: true,
+        },
+      },
+    },
+    AccessmodProject: {
+      merge: true,
+    },
+    AccessmodProjectPermission: {
+      merge: true,
+    },
+    User: {
+      merge: true,
+    },
+    AccessmodFileset: {
+      merge: true,
+      // We need to tell to Apollo how to handle the metadata scalar
+      fields: {
+        metadata: {
+          merge: true,
+        },
+      },
+    },
+    Country: {
+      // Country code are unique (at least it should). Let's use that for the cache key
+      keyFields: false,
+    },
+  },
+};
+
 const createApolloClient = (headers: IncomingHttpHeaders | null = null) => {
-  const enhancedFetch = (url: RequestInfo, init: RequestInit) => {
-    if (process.env.NODE_ENV === "development") {
-      const body = JSON.parse(init.body as string);
-      console.log(`Fetch ${url}${body.operationName}`);
-    }
-    return fetch(url, {
+  const enhancedFetch = (url: RequestInfo, init: RequestInit) =>
+    fetch(url, {
       ...init,
       headers: {
         ...init.headers,
         cookie: headers?.cookie ?? "",
       },
-    }).then((resp) => resp);
-  };
-  return new ApolloClient({
-    ssrMode: typeof window === "undefined",
-    ssrForceFetchDelay: 100, // in milliseconds
-    link: ApolloLink.from([
-      onError(({ graphQLErrors, networkError }) => {
-        if (graphQLErrors) {
-          graphQLErrors.forEach(({ message, locations, path }) =>
-            console.error(
-              `[GraphQL error]: Message: ${message}, Location: ${JSON.stringify(
-                locations
-              )}, Path: ${path}`
-            )
-          );
-        }
-        if (networkError) {
+    });
+
+  const link = ApolloLink.from([
+    onError(({ graphQLErrors, networkError }) => {
+      if (graphQLErrors) {
+        graphQLErrors.forEach(({ message, locations, path }) =>
           console.error(
-            `[Network error]: ${networkError}. Backend is unreachable. Is it running?`
-          );
-        }
-      }),
-
-      createHttpLink({
-        uri: publicRuntimeConfig.GRAPHQL_ENDPOINT,
-        fetch: enhancedFetch,
-        credentials: "include",
-        fetchOptions: {
-          mode: "cors",
-        },
-      }),
-    ]),
-    cache: new InMemoryCache({
-      // possibleTypes must be provided to cache correctly unions and interfaces
-      // https://www.apollographql.com/docs/react/data/fragments/#using-fragments-with-unions-and-interfaces
-      possibleTypes: {
-        AccessmodAnalysis: [
-          "AccessmodGeographicCoverageAnalysis",
-          "AccessmodAccessibilityAnalysis",
-          "AccessmodZonalStatistics",
-        ],
-      },
-      typePolicies: {
-        Team: {
-          merge: true,
-          fields: {
-            permissions: {
-              merge: true,
-            },
-          },
-        },
-        AccessmodProject: {
-          merge: true,
-        },
-        AccessmodProjectPermission: {
-          merge: true,
-        },
-        User: {
-          merge: true,
-        },
-        AccessmodFileset: {
-          merge: true,
-          // We need to tell to Apollo how to handle the metadata scalar
-          fields: {
-            metadata: {
-              merge: true,
-            },
-          },
-        },
-        Country: {
-          // Country code are unique (at least it should). Let's use that for the cache key
-          keyFields: false,
-        },
+            `[GraphQL error]: Message: ${message}, Location: ${JSON.stringify(
+              locations
+            )}, Path: ${path}`
+          )
+        );
+      }
+      if (networkError) {
+        console.error(
+          `[Network error]: ${networkError}. Backend is unreachable. Is it running?`
+        );
+      }
+    }),
+
+    createHttpLink({
+      uri: (operation) =>
+        operation.operationName
+          ? `${publicRuntimeConfig.GRAPHQL_ENDPOINT}${operation.operationName}/`
+          : publicRuntimeConfig.GRAPHQL_ENDPOINT,
+      fetch: enhancedFetch,
+      credentials: "include",
+      fetchOptions: {
+        mode: "cors",
       },
     }),
+  ]);
+
+  const cache = new InMemoryCache(CACHE_CONFIG);
+
+  return new ApolloClient({
+    ssrMode: typeof window === "undefined",
+    ssrForceFetchDelay: 100, // in milliseconds
+    link,
+    cache,
   });
 };
 
@@ -156,6 +162,7 @@ export const getApolloClient = (
 
   return client;
 };
+
 export const addApolloState = (client: ApolloClient<NormalizedCacheObject>) => {
   return { props: { [APOLLO_STATE_PROP_NAME]: client.cache.extract() } };
 };