keystonejs / keystonejs/keystone

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

Open
#9,014 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
10k
Forks
1.3k
Avg merge
19h 14m
Merged PRs (30d)
19

Description

1. Set up a keystone app with the following [graphql config](https://keystonejs.com/docs/config/config#graphql)

```
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 = {
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](https://keystonejs.com/docs/config/config#graphql) and [here](https://www.apollographql.com/docs/apollo-server/api/apollo-server/#constructor) and [here](https://www.apollographql.com/docs/apollo-server/api/plugin/landing-pages/)), this is the way to go about it.

I expected that setting the config.graphql.playground to "apollo" would [disable all default plugins](https://arc.net/l/quote/iwlwjdla), 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](https://github.com/keystonejs/keystone/blob/main/packages/core/src/lib/server/createExpressServer.ts). 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

Contributor guide

Open the contributing guide

Research direction

Start with packages/core/src/lib/server/createExpressServer.ts, especially the referenced lines that assemble apolloConfig and plugins. Reproduce the failure with the supplied GraphQL configuration using npm run dev, then verify that a custom Apollo landing-page plugin can be configured without the duplicate-plugin error.

Written by the indexing model from the issue text.

Assessment

Tech stack
graphql, nodejs, typescript
Domain
api, backend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.