Playground not loading with Express Middleware throwing 404

[emlyknguyen]

This issue pertains to the following package(s):

• GraphQL Playground - Electron App
• GraphQL Playground HTML
• GraphQL Playground
• GraphQL Playground Express Middleware
• GraphQL Playground Hapi Middleware
• GraphQL Playground Koa Middleware
• GraphQL Playground Lambda Middleware

What OS and OS version are you experiencing the issue(s) on?

Mac HighSierra 10.13.6

What version of graphql-playground(-electron/-middleware) are you experiencing the issue(s) on?

graphql-playground-middleware-express 1.7.12

What is the expected behavior?

The package imported is 1.7.12

What is the actual behavior?

It is trying to access graphql-playground-react@1.7.26 and throwing a 404

What steps may we take to reproduce the behavior?

Please provide a gif or image of the issue for a quicker response/fix.

[yoshiakis]

Hi @emlyknguyen, I need more information to understand why Playground is trying to access to the version of 1.7.26. Could you tell me what config object you've pass into GraphQL Playground Express Middleware?

[iszfan]

Hi @yoshiakis, thank you for the response! Emily and I are running the same code. I have been able to access https://cdn.jsdelivr.net/npm/graphql-playground-react@1.7.10/build/static/js/middleware.js. While she is providing you with the config object, is there any reason why the same code could access different version of graphql-playground-react?

[emlyknguyen]

Hi @yoshiakis! I ran it just now and it suddenly works again. The issue was happening intermittently yesterday...here is the config object for the playground.
const playground = expressPlayground({ ...defaultPlaygroundOptions, endpoint: /graphql?headers=${encodeURIComponent(authorizationHeader)}, settings: { ...defaultPlaygroundOptions.settings, 'request.credentials': 'include' } });

[yoshiakis]

Hi @iszfan and @emlyknguyen, you can select which version of graphql-playground-react you get from CDN by passing version property into expressPlayground. For instance, You want to use the version of 1.7.10 of graphql-playground-react, you need to set config object into expressPlayground like so:

const playground = expressPlayground({ version: '1.7.10' });

If you don't pass version property into expressPlayground, it gets the latest version from CDN.

So now my question is what exactly defaultPlaygroundOptions is which you showed above?

[KamalAman]

Experiencing the same issue with this 1.7.12 is trying to access https://cdn.jsdelivr.net/npm/graphql-playground-react@1.7.26

The defaultPlaygroundOptions in my case are coming from apollo-server-express

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

{
  "version": "1.7.26",
  "settings": {
    "general.betaUpdates": false,
    "editor.theme": "dark",
    "editor.cursorShape": "line",
    "editor.reuseHeaders": true,
    "tracing.hideTracingResponse": true,
    "queryPlan.hideQueryPlanResponse": true,
    "editor.fontSize": 14,
    "editor.fontFamily": "'Source Code Pro', 'Consolas', 'Inconsolata', 'Droid Sans Mono', 'Monaco', monospace",
    "request.credentials": "omit"
  }
}

My apollo-server-express is 2.6.2, so really this is an issue with the options that apollo-server-express exports.

... But my question is why did this work in the first place?

Also, version: 1.7.12 does not work. I need to fix it at 1.7.10. Please stop using cdn's and bundle the playground properly to include all dependencies.

[yoshiakis]

Hi @KamalAman!

why did this work in the first place?

I would think it's because defaultPlaygroundOptions has had 1.7.10 as version property in an older version of apollo-server-express.

https://github.com/apollographql/apollo-server/blob/apollo-server-express%402.5.0/packages/apollo-server-core/src/playground.ts#L12

version: 1.7.12 does not work

Because GrpahQL Playground React doesn't have the version of 1.7.12. GraphQL Playground Express Middleware has the version of 1.7.12, which is the latest version of it.

[yoshiakis]

@emlyknguyen and @iszfan, I'm going to close this issue. If you have the same issue again please let me know so that I can reopen this issue.

[iszfan]

Hi @yoshiakis, we are seeing this issue pretty consistently now. Even though passing in the version fixes it, but it doesn't seem to be a good long-term plan. Is there any update on if there is any plan to bundle the version correctly?

For the defaultPlaygroundOptions, we are getting it from 'apollo-server-express'.

[yoshiakis]

Hi @iszfan, I think it's not the bug of graphql-playground but of apollo-server-express. It provides the wrong version in defaultPlaygroundOptions.

[iszfan]

Thank you @yoshiakis , it is specfied in apollo-server-express here. Will open an issue there.

[cleverplatypus]

The new versions of graphql-playground-react seem to be under @apollographql/graphql-playground-react but the jsDelivr url is hard-coded in graphql-playground-html without the prefix.

Should this be fixed?