chore: Update apollo-server-micro to v3.0.0

app/graphql/apollo-sentry-plugin.ts

@@ -19,7 +19,7 @@ const getDataCubeIri = (req: GraphQLRequest) => {
   }
 };
 
-const plugin: ApolloServerPlugin = {
+export const SentryPlugin: ApolloServerPlugin = {
   requestDidStart({ request }) {
     const transaction = Sentry.startTransaction({
       op: "gql",
@@ -38,29 +38,27 @@ const plugin: ApolloServerPlugin = {
     if (request.variables?.sourceUrl) {
       transaction.setTag("visualize.sourceUrl", request.variables.sourceUrl);
     }
-    return {
+
+    return Promise.resolve({
       willSendResponse() {
         // hook for transaction finished
         transaction.finish();
+        return Promise.resolve();
       },
       executionDidStart() {
-        return {
+        return Promise.resolve({
           willResolveField({ info }) {
             // hook for each new resolver
             const description = `${info.parentType.name}.${info.fieldName}`;
             const span = transaction.startChild({
               op: "resolver",
-              description: `${description}`,
+              description,
             });
-            return () => {
-              // this will execute once the resolver is finished
-              span.finish();
-            };
+
+            return span.finish();
           },
-        };
+        });
       },
-    };
+    });
   },
 };
-
-export default plugin;

app/graphql/resolvers/index.ts

@@ -1,3 +1,4 @@
+import { GraphQLScalarType } from "graphql";
 import { GraphQLJSONObject } from "graphql-type-json";
 import { topology } from "topojson-server";
 import { parse as parseWKT } from "wellknown";
@@ -126,11 +127,21 @@ const mkDimensionResolvers = (_: string): Resolvers["Dimension"] => ({
   },
 });
 
+// With an update of apollo-server-micro to 3.0.0, we can no longer use resolvers
+// with the same names (in case of JSONObject resolver, the name was always "JSONObject"),
+// so we need to make a new resolver for each type.
+const makeJSONObjectResolver = (name: string) => {
+  return {
+    ...GraphQLJSONObject,
+    name,
+  } as GraphQLScalarType;
+};
+
 export const resolvers: Resolvers = {
-  Filters: GraphQLJSONObject,
-  Observation: GraphQLJSONObject,
-  DimensionValue: GraphQLJSONObject,
-  RawObservation: GraphQLJSONObject,
+  Filters: makeJSONObjectResolver("Filters"),
+  Observation: makeJSONObjectResolver("Observation"),
+  DimensionValue: makeJSONObjectResolver("DimensionValue"),
+  RawObservation: makeJSONObjectResolver("RawObservation"),
   Query,
   DataCube,
   DataCubeTheme: {

app/package.json

@@ -13,6 +13,7 @@
     "build": "yarn workspace @visualize-admin/visualization-tool run build"
   },
   "dependencies": {
+    "@apollo/server-plugin-landing-page-graphql-playground": "^4.0.1",
     "@babel/standalone": "^7.11.6",
     "@date-io/date-fns": "^2.13.1",
     "@deck.gl/carto": "^8.9.19",
@@ -51,7 +52,7 @@
     "@visx/text": "^2.12.2",
     "@visx/zoom": "^2.10.0",
     "@zazuko/cube-hierarchy-query": "^2.0.0",
-    "apollo-server-micro": "^2.25.2",
+    "apollo-server-micro": "^3.0.0",
     "autosuggest-highlight": "^3.3.4",
     "catalog": "^4.0.1-canary.2",
     "clipboard-polyfill": "^3.0.1",
@@ -86,6 +87,7 @@
     "make-plural": "6.2.2",
     "maplibre-gl": "^2.1.6",
     "material-ui-popup-state": "^2.0.0",
+    "micro": "^9.3.4",
     "micro-cors": "^0.1.1",
     "mitt": "^3.0.0",
     "nanoid": "^3.1.12",

app/pages/api/graphql.ts

@@ -1,10 +1,11 @@
+import { ApolloServerPluginLandingPageGraphQLPlayground } from "@apollo/server-plugin-landing-page-graphql-playground";
 import { ApolloServer } from "apollo-server-micro";
 import configureCors from "cors";
 import "global-agent/bootstrap";
 import { NextApiRequest, NextApiResponse } from "next";
 
 import { setupFlamegraph } from "../../gql-flamegraph/resolvers";
-import sentryPlugin from "../../graphql/apollo-sentry-plugin";
+import { SentryPlugin } from "../../graphql/apollo-sentry-plugin";
 import { createContext, VisualizeGraphQLContext } from "../../graphql/context";
 import { resolvers } from "../../graphql/resolvers";
 import typeDefs from "../../graphql/schema.graphql";
@@ -18,7 +19,6 @@ const server = new ApolloServer({
   typeDefs,
   resolvers,
   formatError: (err) => {
-    console.log(err.source);
     console.error(err, err?.extensions?.exception?.stacktrace);
     return err;
   },
@@ -35,10 +35,8 @@ const server = new ApolloServer({
     return response;
   },
   context: createContext,
-  // Enable playground in production
   introspection: true,
-  playground: true,
-  plugins: [sentryPlugin],
+  plugins: [ApolloServerPluginLandingPageGraphQLPlayground, SentryPlugin],
 });
 
 export const config = {
@@ -47,10 +45,12 @@ export const config = {
   },
 };
 
-const handler = server.createHandler({ path: "/api/graphql" });
+const start = server.start();
 
 const GraphQLPage = async (req: NextApiRequest, res: NextApiResponse) => {
+  await start;
   await runMiddleware(req, res, cors);
+  const handler = server.createHandler({ path: "/api/graphql" });
   return handler(req, res);
 };