Custom Apollo landingspage setup in config.graphql.apolloConfig gives error

[remihuigen]

1. Set up a keystone app with the following graphql config

import { BaseKeystoneTypeInfo } from '@keystone-6/core/types'
import { GraphQLConfig } from '@keystone-6/core/types'
import { ApolloServerPluginLandingPageLocalDefault, ApolloServerPluginLandingPageProductionDefault } from '@apollo/server/plugin/landingPage/default';

const playgroundOptions = {
  embed: {
      endpointIsEditable: false,
      footer: false,
      initialState: {
          pollForSchemaUpdates: false,
          headers: {
              "api-key": process.env.SUPER_SECRET,
              "graphql-client-name": "playground",
              "graphql-client-version": process.env.npm_package_version,
          },
      }
  }
}

// See https://keystonejs.com/docs/config/config#server
const graphql: GraphQLConfig<BaseKeystoneTypeInfo> = {
  debug: process.env.NODE_ENV !== 'production',
  path: '/api/v2/private/graphql',
  playground: 'apollo',
  apolloConfig: {
    includeStacktraceInErrorResponses: process.env.NODE_ENV !== 'production',
    plugins: [
      process.env.NODE_ENV === 'production'
        ? ApolloServerPluginLandingPageProductionDefault({
          footer: false,
        })
        : ApolloServerPluginLandingPageLocalDefault(playgroundOptions),
    ]
  }
}

export { graphql };

// in ./keystone.ts
import { config } from '@keystone-6/core';

// to keep this file tidy, we define our config in seperate files
import { lists } from './schema/schema';
import { withAuth, session } from './config/auth';
import { ui } from './config/ui';
import { db } from './config/db';
import { server } from './config/server';
import { graphql } from './config/graphql';


export default withAuth(
  config({
    db,
    lists,
    session,
    ui,
    server,
    graphql
  })
);

2. npm run dev

You'll get this error

✨ Starting Keystone
⭐️ Server listening on :4000 (http://localhost:4000/)
⭐️ GraphQL API available at /api/v2/private/graphql
unhandledRejection Error: Only one plugin can implement renderLandingPage.
    at ApolloServer._start (/Users/remihuigen/local-projects/my-project/node_modules/@apollo/server/dist/cjs/ApolloServer.js:213:23)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async ApolloServer.start (/Users/remihuigen/local-projects/my-project/node_modules/@apollo/server/dist/cjs/ApolloServer.js:143:16)
    at async startApolloServer (/Users/remihuigen/local-projects/my-project/.keystone/config.js:10961:3)

I want to change the default behavior of the Apollo playground, and according to the docs (here and here and here), this is the way to go about it.

I expected that setting the config.graphql.playground to "apollo" would disable all default plugins, so I could use my own.

I think (but I'm not sure) is has something to do with line 102 and 106 in this file. At 102 it spreads the supplied apolloConfig (which contains a plugin array), and at 106 it also spreads the plugins from apolloConfig.plugins

• running on Node 18.18.0
• using @keystone-6/core@5.7.1