Apollo-server: <Solved>[Express] applyMiddleware is not working with [email protected] and [email protected]

[jminz]

I just started a new express application, and added apollo-server-express to middleware.

When I tried to access localhost:5005/graphql
I got 404 not found.

The source code of app.js

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

const { ApolloServer, gql } = require('apollo-server-express');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

// Construct a schema, using GraphQL schema language
const typeDefs = gql`
  type Query {
    hello: String
  }
`;

// Provide resolver functions for your schema fields
const resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
};

const apolloServer = new ApolloServer({ typeDefs, resolvers });

apolloServer.applyMiddleware({app})

console.log(apolloServer)

app.listen(5005, '0.0.0.0')

module.exports = app;

[jminz]

[email protected] works:

const { graphqlExpress, graphiqlExpress } = require('apollo-server-express');
const { makeExecutableSchema } = require('graphql-tools')

const myGraphQLSchema = makeExecutableSchema({
  typeDefs,
  resolvers,
});

app.use('/graphql', bodyParser.json(), graphqlExpress({ schema: myGraphQLSchema }));
app.use('/graphiql', graphiqlExpress({ endpointURL: '/graphql' }));

[ksmithut]

It's because you have a catch-all middleware that's throwing a 404 error before the graphql middleware gets hit.

This:

app.use(function(req, res, next) {
  next(createError(404));
});

happens before:

apolloServer.applyMiddleware({app})

If you move the applyMiddleware call (and all the other apollo server stuff) above the 404 creation middleware, it should work.

[jminz]

Thanks @ksmithut! My bad, I didn't realize it.