Documentation - Correction required in Swapping to expressMiddleware

[cgn-ca]

Description

After trying to implement the Swapping to expressMiddleware for healthchecks I noticed an error in the documentation, ended up costing me an hour or two.

The documentation is incorrect at standalone.mdx (I would create a PR but I don't have write access to the repository, I'd prefer to just create the PR myself)

app.use('/',
  cors<cors.CorsRequest>(),
  // 50mb is the limit that `startStandaloneServer` uses, but you may configure this to suit your needs
  bodyParser.json({ limit: '50mb' }),
  // expressMiddleware accepts the same arguments:
  // an Apollo Server instance and optional configuration options
  expressMiddleware(server, {
    context: async ({ req }) => ({ token: req.headers.token }),
  }),
);

should be changed to

app.use('/graphql',
  cors<cors.CorsRequest>(),
  // 50mb is the limit that `startStandaloneServer` uses, but you may configure this to suit your needs
  bodyParser.json({ limit: '50mb' }),
  // expressMiddleware accepts the same arguments:
  // an Apollo Server instance and optional configuration options
  expressMiddleware(server, {
    context: async ({ req }) => ({ token: req.headers.token }),
  }),
);

[trevor-scheer]

/ is the default, /graphql is more of a relic of Apollo Server v3. I would say that here it's correct as is. But if you were also referencing the health check page here, I think we should switch this to / instead.

You are welcome to fork and PR even without write permissions! You can even edit straight in the Github UI with the little pencil icon if you'd rather not clone the repo:

[cgn-ca]

For what it's worth, this is the error I get if I use / and not /graphql , running the following curl command

curl http://localhost:3000/healthz

{"errors":[{"message":"This operation has been blocked as a potential Cross-Site Request Forgery (CSRF). Please either specify a 'content-type' header (with a type that is not one of application/x-www-form-urlencoded, multipart/form-data, text/plain) or provide a non-empty value for one of the following headers: x-apollo-operation-name, apollo-require-preflight\n","extensions":{"code":"BAD_REQUEST","stacktrace":["BadRequestError: This operation has been blocked as a potential Cross-Site Request Forgery (CSRF). Please either specify a 'content-type' header (with a type that is not one of application/x-www-form-urlencoded, multipart/form-data, text/plain) or provide a non-empty value for one of the following headers: x-apollo-operation-name, apollo-require-preflight","","    at new GraphQLErrorWithCode (/Users/me/Dev/Apollo-Example/node_modules/@apollo/server/src/internalErrorClasses.ts:15:5)","    at new BadRequestError (/Users/me/apollo-example/node_modules/@apollo/server/src/internalErrorClasses.ts:116:5)","    at preventCsrf (/Users/me/apollo-example/node_modules/@apollo/server/src/preventCsrf.ts:91:9)","    at ApolloServer.executeHTTPGraphQLRequest (/Users/me/apollo-example/node_modules/@apollo/server/src/ApolloServer.ts:1044:20)","    at processTicksAndRejections (node:internal/process/task_queues:95:5)"]}}]}

[trevor-scheer]

What if you define the routes more specifically instead of .use()?

app.post('/', ...);
app.get('/healthz', ...);