Upgrade to Apollo Server 3

.changeset/bright-beers-build.md

@@ -0,0 +1,29 @@
+---
+'@keystone-next/keystone': major
+'@keystone-next/website': patch
+'@keystone-next/examples-app-basic': patch
+'keystone-next-app': patch
+'@keystone-next/example-blog': patch
+'@keystone-next/example-custom-admin-ui-logo': patch
+'@keystone-next/example-custom-admin-ui-navigation': patch
+'@keystone-next/example-custom-admin-ui-pages': patch
+'@keystone-next/example-custom-field': patch
+'@keystone-next/example-custom-field-view': patch
+'@keystone-next/example-default-values': patch
+'@keystone-next/example-document-field': patch
+'@keystone-next/example-extend-graphql-schema': patch
+'@keystone-next/example-json-field': patch
+'@keystone-next/example-task-manager': patch
+'@keystone-next/example-testing': patch
+'@keystone-next/example-virtual-field': patch
+'@keystone-next/example-with-auth': patch
+'@keystone-next/api-tests-legacy': patch
+---
+
+Upgraded Apollo Server to [Version 3](https://www.apollographql.com/docs/apollo-server/migration/).
+
+The Apollo documentation contains a full list of breaking changes introduced by this update.
+You can configure the Apollo Server provided by Keystone using the [`graphql.apolloConfig`](https://keystonejs.com/docs/apis/config#graphql) configuration option.
+
+The most prominant change for most users will be that the GraphQL Playground has been replaced by the Apollo Sandbox.
+If you prefer to keep the GraphQL Playground, you can configure your server by [following these instructions](https://www.apollographql.com/docs/apollo-server/migration/#graphql-playground).

.changeset/sixty-windows-perform.md

@@ -7,7 +7,6 @@
 '@keystone-next/examples-app-basic': patch
 '@keystone-next/example-ecommerce': patch
 '@keystone-next/example-embedded-nextjs': patch
-'@keystone-next/example-playground': patch
 '@keystone-next/example-roles': patch
 '@keystone-next/example-blog': patch
 '@keystone-next/example-custom-admin-ui-logo': patch

docs/pages/docs/apis/config.mdx

@@ -288,10 +288,8 @@ Options:
 - `queryLimits` (default: `undefined`): Allows you to limit the total number of results returned from a query to your GraphQL API.
   See also the per-list `graphql.queryLimits` option in the [Schema API](./schema).
 - `path` (default: `'/api/graphql'`): The path of the GraphQL API endpoint.
-- `apolloConfig` (default: `undefined`): Allows you to pass extra options into the `ApolloServer` constructor.
-  - `playground` (default: `process.env.NODE_ENV !== 'production'`): If truthy, will enable the GraphQL Playground for testing queries and mutations in the browser.
-    To configure behaviour, pass an object of [GraphQL Playground settings](https://github.com/graphql/graphql-playground#settings). See the [Apollo docs](https://www.apollographql.com/docs/apollo-server/api/apollo-server/#constructor) for more supported options.
-  - `introspection` (default: `undefined`): Introspection enables you to query a GraphQL server for information about the underlying schema. If the playground is enabled then introspection is automatically enabled, unless specifically disabled.
+- `cors` : FIXME
+- `apolloConfig` (default: `undefined`): Allows you to pass [extra options](https://www.apollographql.com/docs/apollo-server/api/apollo-server/#constructor) into the `ApolloServer` constructor.
 
 ```typescript
 export default config({
@@ -300,8 +298,7 @@ export default config({
     queryLimits: { maxTotalResults: 100 },
     path: '/api/graphql',
     apolloConfig: {
-      playground: process.env.NODE_ENV !== 'production',
-      introspection: process.env.NODE_ENV !== 'production',
+      debug: true,
       /* ... */
     },
   },

docs/pages/docs/guides/cli.mdx

@@ -195,7 +195,7 @@ yarn keystone-next start
     heading="Getting Started with create-keystone-app"
     href="/docs/walkthroughs/getting-started-with-create-keystone-app"
     >
-    How to use Keystone's CLI app to standup a new local project with an Admin UI & the GraphQL API playground.
+    How to use Keystone's CLI app to standup a new local project with an Admin UI & the Apollo Sandbox.
   </Well>
 </RelatedContent>
 

docs/pages/docs/walkthroughs/embedded-mode-with-sqlite-nextjs.mdx

@@ -35,7 +35,7 @@ Here's what we're going to do:
 - Create a Next.js app
 - Embed Keystone, and run an Admin UI you can read and write to locally
 - Add a simple Keystone [Schema](/apis/schema) with a `Post` List
-- Setup a secure read-only GraphQL API endpoint (and playground) that you can access in production
+- Setup a secure read-only GraphQL API endpoint (and Apollo Sandbox) that you can access in production
 - Deploy the app to Vercel 🚀
 
 ## Setup a Next.js app
@@ -284,15 +284,17 @@ Run `yarn dev` again.
 
 ## Bonus: add the GraphQL API to the frontend
 
-To get a read-only GraphQL API and playground in production, add `/pages/api/graphql.tsx`with the following:
+FIXME
+
+To get a read-only GraphQL API and Apollo Sandbox in production, add `/pages/api/graphql.tsx`with the following:
 
 ```tsx
 // pages/api/graphql.tsx
 
 export { default, config } from '.keystone/next/graphql-api';
 ```
 
-This takes the fully functional GraphQL API that Keystone is already generating and makes it available as an endpoint and playground within the Next.js frontend app at [http://localhost:3000/api/graphql](http://localhost:3000/api/graphql).
+This takes the fully functional GraphQL API that Keystone is already generating and makes it available as an endpoint and Apollo Sandbox within the Next.js frontend app at [http://localhost:3000/api/graphql](http://localhost:3000/api/graphql).
 
 ![A browser displaying the GraphQL playground](/assets/walkthroughs/embedded-nextjs/graphql-api.png)
 
@@ -334,7 +336,7 @@ Keystone’s Embedded mode and SQLite support gives you the option to run a self
     heading="Getting Started with create-keystone-app"
     href="/docs/walkthroughs/getting-started-with-create-keystone-app"
     >
-    How to use Keystone's CLI app to standup a new local project with an Admin UI & the GraphQL API playground.
+    How to use Keystone's CLI app to standup a new local project with an Admin UI & the Apollo Sandbox.
   </Well>
 </RelatedContent>
 

docs/pages/why-keystone.tsx

@@ -521,7 +521,7 @@ export default function WhyKeystonePage() {
             <Type as="p" look="body18" color="var(--muted)" margin="1rem 0 0 0">
               Use an API-first content platform to unlocks the power of multichannel content ops.
               Connect to your audience where they want to be. Ship content to any frontend over
-              performant APIs. Use the built-in GraphQL playground to query with ease.
+              performant APIs. Use the built-in Apollo Sandbox to query with ease.
             </Type>
           </div>
           <TweetBox

examples-staging/basic/package.json

@@ -20,7 +20,6 @@
     "@keystone-ui/tooltip": "^4.0.1",
     "@preconstruct/next": "^3.0.0",
     "@types/react": "^17.0.19",
-    "apollo-server-micro": "^2.25.2",
     "graphql": "^15.5.2",
     "graphql-tag": "^2.12.5",
     "next": "^11.1.0",

examples-staging/graphql-api-endpoint/package.json

@@ -14,8 +14,7 @@
     "@babel/runtime": "^7.15.3",
     "@keystone-next/auth": "^31.0.0",
     "@keystone-next/fields-document": "^8.0.0",
-    "@keystone-next/keystone": "^24.0.0",
-    "apollo-server-micro": "^2.25.2"
+    "@keystone-next/keystone": "^24.0.0"
   },
   "repository": "https://github.com/keystonejs/keystone/tree/master/examples-staging/graphql-api-endpoint"
 }