Graphql-playground: Koa middleware calling `next()` + /new redirect

[leebenson]

Really nice project. I'd love to swap out GraphiQL for this in ReactQL.

I'm running into an issue with the Koa-flavoured middleware.

Currently, I have this code to instantiate GraphiQL with Koa:

import { graphiqlKoa } from 'apollo-server-koa';

// ...

router.get(
  graphiQLEndpoint,  // <-- coming from ReactQL userland
  graphiqlKoa({
    endpointURL: config.graphQLEndpoint,  // <-- also set by the user
  }),
);

Looking at the Playground readme, it seems that the Koa middleware should be a drop-in placement; save for changing endpointURL -> endpointUrl, the syntax is identical:

router.get(
  graphiQLEndpoint,
  playground({
    endpointUrl: config.graphQLEndpoint,
  }),
);

However, instead of getting the Playground UI, I actually get a 404. Looking at the source, it seems to be because you're awaiting the next() middleware in the chain.

In the case of koa-router, calling next() on a route means that the route didn't 'finish', which is then caught by an upstream handler in ReactQL that handles the 404.

I can _kinda_ fix it by monkey patching next with a blank function:

router.use(graphiQLEndpoint, ctx => (
  playground({ endpointUrl: config.graphQLEndpoint })(ctx, () => {})
));

... which works for a brief second, but then Playground redirects from /playground to /new:

Which is due to this code at http://cdn.jsdelivr.net/npm/[email protected]/build/static/js/main.js

So, it seems possibly there's a couple of things here:

1. Making the Koa middleware conform to the expectation that the route will 'terminate', and avoid calling the next in the chain.

2. Enabling Playground to be hosted at a path, with further navigation respecting the path prefix.

[DevanB]

This is happening in Express for me as well. So not limited to Koa, possibly.

The /new redirect is coming from here. Not sure exactly what it is doing.

[leebenson]

Looks like /new is setting up a new view session where one doesn't already exist.

For example, the demo here at https://www.graphqlbin.com/RVIn remains on that route throughout. But going to https://www.graphqlbin.com redirects to -> https://www.graphqlbin.com/new

It'd be nice to have a 'prefix' option that is set automatically inside the HTML that's rendered (by looking at, say, Koa's ctx.request.url, and passing that through)

window.addEventListener('load', function(event) {
  GraphQLPlayground.init(document.getElementById('root'), {
    endpointUrl: "/graphql",
    undefined
  })
})

... which could inform the compiled Playground bundle to push to prefix + '/new' instead of a static '/new'.

[overra]

What's happening is we're mounting the middleware on /playground and because of the routing below it thinks that 'playground' is the id of a session. I think adding a basename prop to <BrowserRouter> should fix this.

https://github.com/graphcool/graphql-playground/blob/master/packages/graphql-playground/src/components/Root.tsx#L8-L13

[DevanB]

Also - When you mount the playground at / it breaks all other routes, obviously.

[timsuchanek]

Just published a new version which should fix this issue. Feel free to reopen if this is still a problem

[DevanB]

@timsuchanek Just an FYI - I see the new version (1.0.2) in npm, but not in the Releases tab here in GitHub.

Thanks for working on this! :)

[curtisallen]

@timsuchanek ~just tried 1.0.3 with express middleware and still seeing the same behavior.~
Nevermind, my fault 1.0.3 works like a charm. Thanks!