Update error template to fix Codesandbox issues

.github/dependabot.yml

@@ -7,3 +7,8 @@ updates:
     directory: "/" # Location of package manifests
     schedule:
       interval: "daily"
+    ignore:
+      - dependency-name: "graphql"
+        # Currently the graphql module seems to break on Codesandbox when 
+        # over version 16, so we'll keep it on 15.x until this is resolved.
+        # See issue apollo-client/#9943.

package.json

@@ -3,9 +3,10 @@
   "name": "apollo-client-error-template",
   "version": "1.0.0",
   "license": "MIT",
+  "main": "src/index.jsx",
   "dependencies": {
     "@apollo/client": "^3.6.8",
-    "graphql": "^16.4.0",
+    "graphql": "^15.6.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

src/index.jsx

@@ -1,84 +1,3 @@
-/*** SCHEMA ***/
-import {
-  GraphQLSchema,
-  GraphQLObjectType,
-  GraphQLID,
-  GraphQLString,
-  GraphQLList,
-} from 'graphql';
-const PersonType = new GraphQLObjectType({
-  name: 'Person',
-  fields: {
-    id: { type: GraphQLID },
-    name: { type: GraphQLString },
-  },
-});
-
-const peopleData = [
-  { id: 1, name: 'John Smith' },
-  { id: 2, name: 'Sara Smith' },
-  { id: 3, name: 'Budd Deey' },
-];
-
-const QueryType = new GraphQLObjectType({
-  name: 'Query',
-  fields: {
-    people: {
-      type: new GraphQLList(PersonType),
-      resolve: () => peopleData,
-    },
-  },
-});
-
-const MutationType = new GraphQLObjectType({
-  name: 'Mutation',
-  fields: {
-    addPerson: {
-      type: PersonType,
-      args: {
-        name: { type: GraphQLString },
-      },
-      resolve: function (_, { name }) {
-        const person = {
-          id: peopleData[peopleData.length - 1].id + 1,
-          name,
-        };
-
-        peopleData.push(person);
-        return person;
-      }
-    },
-  },
-});
-
-const schema = new GraphQLSchema({ query: QueryType, mutation: MutationType });
-
-/*** LINK ***/
-import { graphql, print } from "graphql";
-import { ApolloLink, Observable } from "@apollo/client";
-function delay(wait) {
-  return new Promise(resolve => setTimeout(resolve, wait));
-}
-
-const link = new ApolloLink(operation => {
-  return new Observable(async observer => {
-    const { query, operationName, variables } = operation;
-    await delay(300);
-    try {
-      const result = await graphql({
-        schema,
-        source: print(query),
-        variableValues: variables,
-        operationName,
-      });
-      observer.next(result);
-      observer.complete();
-    } catch (err) {
-      observer.error(err);
-    }
-  });
-});
-
 /*** APP ***/
 import React, { useState } from "react";
 import { createRoot } from "react-dom/client";
@@ -90,6 +9,8 @@ import {
   useQuery,
   useMutation,
 } from "@apollo/client";
+
+import { link } from "./link.js";
 import "./index.css";
 
 const ALL_PEOPLE = gql`

src/link.js

@@ -0,0 +1,27 @@
+/*** LINK ***/
+import { graphql, print } from "graphql";
+import { ApolloLink, Observable } from "@apollo/client";
+import { schema } from "./schema.js";
+
+function delay(wait) {
+  return new Promise(resolve => setTimeout(resolve, wait));
+}
+
+export const link = new ApolloLink(operation => {
+  return new Observable(async observer => {
+    const { query, operationName, variables } = operation;
+    await delay(300);
+    try {
+      const result = await graphql({
+        schema,
+        source: print(query),
+        variableValues: variables,
+        operationName,
+      });
+      observer.next(result);
+      observer.complete();
+    } catch (err) {
+      observer.error(err);
+    }
+  });
+});

src/schema.js

@@ -0,0 +1,55 @@
+/*** SCHEMA ***/
+import {
+  GraphQLSchema,
+  GraphQLObjectType,
+  GraphQLID,
+  GraphQLString,
+  GraphQLList,
+} from 'graphql';
+
+const PersonType = new GraphQLObjectType({
+  name: 'Person',
+  fields: {
+    id: { type: GraphQLID },
+    name: { type: GraphQLString },
+  },
+});
+
+const peopleData = [
+  { id: 1, name: 'John Smith' },
+  { id: 2, name: 'Sara Smith' },
+  { id: 3, name: 'Budd Deey' },
+];
+
+const QueryType = new GraphQLObjectType({
+  name: 'Query',
+  fields: {
+    people: {
+      type: new GraphQLList(PersonType),
+      resolve: () => peopleData,
+    },
+  },
+});
+
+const MutationType = new GraphQLObjectType({
+  name: 'Mutation',
+  fields: {
+    addPerson: {
+      type: PersonType,
+      args: {
+        name: { type: GraphQLString },
+      },
+      resolve: function (_, { name }) {
+        const person = {
+          id: peopleData[peopleData.length - 1].id + 1,
+          name,
+        };
+
+        peopleData.push(person);
+        return person;
+      }
+    },
+  },
+});
+
+export const schema = new GraphQLSchema({ query: QueryType, mutation: MutationType });