Difference on GraphQL endpoint between apollo-server and apollo-server-express

Question

Due to the fact that I need to add a bit more configuration to my GraphQL server, I am switching from apollo-server to apollo-server-express ( as recommended by the documentation ).

This is my old index.ts :

import { env } from 'process'
import { ApolloServer } from 'apollo-server'
import { typeDefs } from '../graphql/schema'
import { context } from './context'
import resolvers from '../graphql/resolvers/'

const port = env.GRAPHQL_SERVER_PORT || 80

const server = new ApolloServer({
  typeDefs,
  resolvers,
  context
})

server.listen({ port: port }).then(({ url }) => {
  console.log(`Server ready at ${url}`)
})

and this is what I'm trying to do now:

import { env } from 'process'
import { ApolloServer } from 'apollo-server-express';
import { ApolloServerPluginDrainHttpServer } from 'apollo-server-core';
import express from 'express';
import { forceDomain } from 'forcedomain'
import http from 'http';
import { typeDefs } from '../graphql/schema'
import { context } from './context'
import resolvers from '../graphql/resolvers/'

async function startApolloServer(typeDefs: any, resolvers: any, context: any) {
  const port = env.GRAPHQL_SERVER_PORT || 80
  const app = express();
  const httpServer = http.createServer(app);
  const plugins = [ApolloServerPluginDrainHttpServer({ httpServer })]

  const server = new ApolloServer({
    typeDefs,
    resolvers,
    context,
    plugins,
  });

  await server.start();

  app.use(function(req, res, next) {
    // some extra middleware configuration here
  })

  server.applyMiddleware({ app })

  await new Promise<void>(resolve => httpServer.listen({ port: port }, resolve))
  console.log(`Server ready at http://localhost:${port}${server.graphqlPath}`)
}

startApolloServer(typeDefs, resolvers, context)

What I don't understand is that after switching to apollo-server-express , everything is working fine (and the added middleware does what I need it to do) but the GraphQL endpoint is moved to the /graphql route (IE http://localhost:4000/graphql , or https://my-devel-server.com/graphql ) instead of being on the root as it was before (so just http://localhost:4000 ), when I was using apollo-server and the listen method.

Why is that, and how can I use apollo-server-express while keeping the endpoint on the root of the server?

Answer 1

I'm not sure as to why the middleware work now without seeing how you implemented them, but "GraphQL Middleware" is quite different from "Express Middleware" so maybe it's the way they were structured.

About the routes, it's just a standard to make the base GraphQL route at /graphql , since in an Express App, you could potentially have other REST routes at the root.

To change this behaviour you could change the line server.applyMiddleware({ app }) to server.applyMiddleware({ app, path: '/' }) with the path you want GraphQL to start on.