Order in express middleware

Hello,

I currently use apollo-server-express with next.js. I REALLY want to replace apollo-server with graphql-yoga but it does not work.

In graphql-yoga, middlewares are triggered before endpoint and playground createHttpServer next’s router is a catch all that returns 404 if there is no matching route. run As next’s router is triggered before yoga’s endpoints, when I try to reach ‘/graphql’ I get 404.

With apollo-server-express, I don’t have that problem because I have a way to order express middleware applyMiddleware

Could you change middleware order so that endpoint, playground are before middlewares ? Thanks

Here is my code with graphql-yoga :

import next from 'next';
import routes from 'next-routes';

import { GraphQLServer }  from 'graphql-yoga';
import schema from './models/schema';

const nextApp = next();
const handler = routes()
  .add('home', '/', 'Home')
  .getRequestHandler(nextApp);

nextApp.prepare().then(() => {
  const server = new GraphQLServer({ schema }).use(handler);
  server.start({
    endpoint: '/graphql',
    playground: '/graphql',
    getEndpoint: true
  });
});

[djgrant]

@kevinya Wrap the next handler in a middleware that checks the request is not for the /graphql route.

nextServer.prepare().then(() => {
  graphQLServer.use((req, res, next) => {
    if (req.path.startsWith("/graphql")) return next();
    nextServerHandler(req, res, next);
  });
  graphQLServer
    .start({
      endpoint: '/graphql',
      playground: '/graphql',
      getEndpoint: true
    })
    .then(() => {
      console.log("Next.js app is running on http://localhost:3000");
      console.log("GraphQL API is running on http://localhost:3000/graphql");
    })
    .catch(() => {
      console.error("Server start failed", err);
      process.exit(1);
    });
});

[heymartinadams]

Just adding this to the pool. Below, working example that combines next and graphql-yoga (along with some integration of Prisma’s newly-released PhotonJS)

// NextJS
const nextJS = require('next')
const nextRoutes = require('next-routes')
// GraphQL Yoga
const { GraphQLServer } = require('graphql-yoga')
// Prisma Photon
const Photon = require('@generated/photon')
// Custom functions
const { resolvers } = require('./server/resolvers')

// Photon
const photon = new Photon.default()

// NextJS
const nextJSApp = nextJS({ dev: process.env.NODE_ENV !== 'production' })
const nextJSRoutes = nextRoutes()
	.add({ pattern: '/', page: '/' })
	.add({ pattern: '/signin', page: '/signin' })
	.getRequestHandler(nextJSApp)

// GraphQL Endpoint
const gqlEndpoint = '/server'

const gqlServer = new GraphQLServer({
	typeDefs: 'server/schema.graphql',
	resolvers,
	context: data => ({ ...data, photon })
})

// Begin NextJS...
nextJSApp.prepare().then(() => {
	// ...check if GraphQL endpoint is pinged...
	gqlServer.use((req, res, next) => {
		if (req.path.startsWith(gqlEndpoint)) return next()
		// ... if not, use NextJS routes.
		nextJSRoutes(req, res, next)
	})

	// Start server.
	gqlServer
		.start(
			{
				endpoint: gqlEndpoint,
				playground: gqlEndpoint,
				subscriptions: gqlEndpoint,
				port: process.env.PORT || 3000
			},
			() => console.log(`\n🚀 GraphQL server ready at http://localhost:4000`)
		)
		.then(httpServer => {
			async function cleanup() {
				console.log(`\n\nDisconnecting...`)
				await photon.disconnect()
				httpServer.close()
				console.log(`\nDone.\n`)
			}
			// process.on('SIGINT', cleanup)
			process.on('SIGTERM', cleanup)
		})
		.catch(err => {
			console.error('Server start failed ', err)
			process.exit(1)
		})
})