/graphiql is 404 at Koa when wrapped by next

When koa-router is wrapped by next, /graphiql become 404

• [ x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

/graphiql should not 404

Current Behavior

/graphiql 404

Steps to Reproduce (for bugs)

wrapped with next js, this code below will make /graphiql 404

const Koa = require('koa');
const Router = require('koa-router');
const koaBody = require('koa-bodyparser');
const next = require('next');
const { graphqlKoa, graphiqlKoa } = require('apollo-server-koa');
const { makeExecutableSchema } = require('graphql-tools');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare()
  .then(() => {
    const server = new Koa();
    const router = new Router();

    router.get('*', async (ctx) => {
      await handle(ctx.req, ctx.res);
    });

    const typeDefs = `
      type Query {
        hello: String
      }
    `;

    const resolvers = {
      Query: {
        hello: () => 'Hello world!',
      },
    };

    // Put together a schema
    const schema = makeExecutableSchema({
      typeDefs,
      resolvers,
    });

    router.post('/graphql', koaBody(), graphqlKoa({ schema }));
    router.get('/graphql', graphqlKoa({ schema }));

    router.get('/graphiql', graphiqlKoa({ endpointURL: '/graphql' }));

    server.use(router.routes());
    server.use(router.allowedMethods());

    server.listen(3000, (err) => {
      if (err) throw err;
      console.log('> Ready on http://localhost:3000');
    });
  })
  .catch((ex) => {
    console.error(ex.stack);
    process.exit(1);
  });

but if we change the code like this, i can access /graphiql

const Koa = require('koa');
const Router = require('koa-router');
const koaBody = require('koa-bodyparser');

const { graphqlKoa, graphiqlKoa } = require('apollo-server-koa');
const { makeExecutableSchema } = require('graphql-tools');

const app = new Koa();
const router = new Router();
const PORT = 3000;

const typeDefs = `
  type Query {
    hello: String
  }
`;

const resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
};

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

// koaBody is needed just for POST.
router.post('/graphql', koaBody(), graphqlKoa({ schema: myGraphQLSchema }));
router.get('/graphql', graphqlKoa({ schema: myGraphQLSchema }));

router.get('/graphiql', graphiqlKoa({ endpointURL: '/graphql' }));

app.use(router.routes());
app.use(router.allowedMethods());
app.listen(3000, (err) => {
  if (err) throw err;
  console.log('> Ready on http://localhost:3000');
});

response console

 DONE  Compiled successfully in 2128ms                                                                                                                                        22:59:14

> Ready on http://localhost:3000
Client pings, but there's no entry for page: /graphiql
Client pings, but there's no entry for page: /graphiql
Client pings, but there's no entry for page: /graphiql
Client pings, but there's no entry for page: /graphiql
Client pings, but there's no entry for page: /graphiql
Client pings, but there's no entry for page: /graphiql
Client pings, but there's no entry for page: /graphiql
Client pings, but there's no entry for page: /graphiql

Your Environment

Tech	Version
next	5.1.0
node	8.9.4
OS	ubuntu 17
browser	chrome

Here’s my complete dependencies

 "dependencies": {
    "apollo-server-koa": "^1.3.4",
    "bcrypt": "^2.0.0",
    "bluebird": "^3.5.1",
    "dotenv": "^5.0.1",
    "googleapis": "^28.1.0",
    "graphql": "^0.13.2",
    "graphql-tools": "^2.24.0",
    "isomorphic-unfetch": "^2.0.0",
    "koa": "^2.5.0",
    "koa-bodyparser": "^4.2.0",
    "koa-router": "^7.4.0",
    "lodash": "^4.17.5",
    "next": "^5.1.0",
    "pg": "^7.4.1",
    "pg-hstore": "^2.3.2",
    "react": "^16.3.1",
    "react-dom": "^16.3.1",
    "reactstrap": "^5.0.0",
    "sequelize": "^4.37.6",
    "styled-jsx": "^2.2.6",
    "xlsx": "^0.12.8"
  },

[ghengeveld]

Next’s route handler must be last because it does a catch-all to it’s 404 page. I’ve previously commented on this behavior and provided a workaround here: https://github.com/zeit/next.js/issues/4042

I’m still not happy with this behavior, but at least there’s a reasonably simple workaround.

[fallion]

Next handler should go last.