Merge pull request #1070 from visualize-admin/perf/only-send-gql-exte…

…nsions-when-needed

perf: Only send GQL extensions to the client when needed

CHANGELOG.md

@@ -9,7 +9,8 @@ You can also check the [release page](https://github.com/visualize-admin/visuali
 
 ## Unreleased
 
-Nothing yet.
+- Performance
+  - The debug data is now only sent along with the payload when the debug mode is enabled
 
 # [3.20.1] - 2023-06-19
 

app/graphql/client.tsx

@@ -9,10 +9,16 @@ export const client = createClient({
   url: GRAPHQL_ENDPOINT,
   exchanges: [...devtoolsExchanges, ...defaultExchanges],
   fetchOptions: {
-    headers: {
-      "x-visualize-cache-control": flag("server-side-cache.disable")
-        ? "no-cache"
-        : "",
-    },
+    headers: getHeaders(),
   },
 });
+
+function getHeaders() {
+  const debug = flag("debug");
+  const disableCache = flag("server-side-cache.disable");
+
+  return {
+    "x-visualize-debug": debug ? "true" : "",
+    "x-visualize-cache-control": disableCache ? "no-cache" : "",
+  };
+}

app/graphql/context.tsx

@@ -115,6 +115,10 @@ const shouldUseServerSideCache = (req: IncomingMessage) => {
   return req.headers["x-visualize-cache-control"] !== "no-cache";
 };
 
+const isDebugMode = (req: IncomingMessage) => {
+  return req.headers["x-visualize-debug"] === "true";
+};
+
 const createContextContent = async ({
   sourceUrl,
   locale,
@@ -157,9 +161,11 @@ const createContextContent = async ({
 };
 
 export const createContext = ({ req }: { req: IncomingMessage }) => {
+  const debug = isDebugMode(req);
   let setupping: ReturnType<typeof createContextContent>;
 
   const ctx = {
+    debug,
     // Stores meta information on queries that have been made during the request
     queries: [] as RequestQueryMeta[],
     timings: undefined as Timings | undefined,

app/pages/api/graphql.ts

@@ -1,6 +1,6 @@
 import { ApolloServer } from "apollo-server-micro";
-import "global-agent/bootstrap";
 import configureCors from "cors";
+import "global-agent/bootstrap";
 import { NextApiRequest, NextApiResponse } from "next";
 
 import { setupFlamegraph } from "../../gql-flamegraph/resolvers";
@@ -24,10 +24,14 @@ const server = new ApolloServer({
   },
   formatResponse: (response, reqCtx) => {
     const context = reqCtx.context as VisualizeGraphQLContext;
-    response.extensions = {
-      queries: context.queries,
-      timings: context.timings,
-    };
+
+    if (context.debug) {
+      response.extensions = {
+        queries: context.queries,
+        timings: context.timings,
+      };
+    }
+
     return response;
   },
   context: createContext,