Apollo-server: Graphql playground doesn't load when offline

[wmertens]

You can't use the playground to test the graphql API while offline (e.g. when working on a train)

[unicodeveloper]

@wmertens Do you mean using playground in production? Or is this about using playground locally?

[wmertens]

using the playground locally, while developing your app. It is served from a CDN. It would be nice if the assets were local instead.

[penx]

Same issue here, I need to be able to use GraphQL Playground without an internet connection. Happy to look in to this issue if anyone has any pointers.

Some more details:

Following the introduction tutorial and loading http://localhost:4000 returns an html response. The top of the html response contains:

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/build/static/css/index.css" />
<link rel="shortcut icon" href="//cdn.jsdelivr.net/npm/[email protected]/build/favicon.png" />
<script src="//cdn.jsdelivr.net/npm/[email protected]/build/static/js/middleware.js"></script>

It would be good to have the option to include graphql-playground-react as a devDependency and serve these files from localhost rather than cdn.jsdelivr.net.

[penx]

Related:

https://github.com/apollographql/apollo-server/blob/8347511db8e5f9ae6026833af17d266ec165e8dc/packages/apollo-server-micro/src/ApolloServer.ts#L127

const getCdnMarkup = options => `
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/graphql-playground-react@${
      options.version
    }/build/static/css/index.css" />
    <link rel="shortcut icon" href="//cdn.jsdelivr.net/npm/graphql-playground-react@${
      options.version
    }/build/favicon.png" />
    <script src="//cdn.jsdelivr.net/npm/graphql-playground-react@${
      options.version
    }/build/static/js/middleware.js"></script>

https://github.com/prisma/graphql-playground/blob/3f457e5ea5d7edc1472df69681f3eb48ed70e797/packages/graphql-playground-html/src/render-playground-page.ts#L70-L79

https://www.npmjs.com/package/@apollographql/graphql-playground-html

I'm not sure where the source is to @apollographql/graphql-playground-html, I found this but doesn't seem to be namespaced:

https://github.com/apollographql/graphql-playground/tree/master/packages/graphql-playground-html

[penx]

I guess having the option to override //cdn.jsdelivr.net/npm/ in @apollographql/graphql-playground-html with a config option set on playgroundOptions in apollo server would be a good first step. It would rely on the developer setting up another URL where they can host graphql-playground-react assets, e.g. on another port on localhost.

Either that or serving the assets from Express and using the running apollo server url.

[anodynos]

Any update on this issue?
It's very annoying not to be able to work offline :-(

[penx]

@anodynos https://github.com/prisma/graphql-playground/pull/845 was merged in today and will be in the next release of graphql-playground-html.

However, Apollo Server uses a fork - @apollographql/graphql-playground-html

I need someone from the Apollo team to let me know where this fork lives so I can open a PR for this fix, or for them to let me know what the process will be for including this in their fork.

Once this is done, offline support can be done as per this project:

https://github.com/penx/graphql-server-example

Or someone from the Apollo team could feed in to my comments on this WIP PR:

https://github.com/apollographql/apollo-server/pull/1734

[penx]

scoped graphql-playground-html was added in 8ea36d80 by @martijnwalraven

@apollographql/graphql-playground-html is almost identical to 1.6.0 of graphql-playground-html, the only difference being in render-playground-page.d.ts:

    config?: GraphQLConfigData;

was changed to

    config?: any;

(and the associated import removed)

@martijnwalraven was the use of scoped graphql-playground-html meant to be temporary? Does this fork live anywhere? How do we go about getting changes in to it?

[martijnwalraven]

I don't think it's temporary, because upstream has a dependency on graphql-config, which brings in a number of other dependencies we don't want (like graphql-import). We want Apollo Server to stay lean and be able to run in edge environments.

The fork currently lives at https://github.com/apollographql/graphql-playground/tree/remove-graphql-config. Rebasing those changes on top of the upstream master shouldn't lead to too much trouble.

[penx]

@martijnwalraven My changes should be in the next release of graphql-playground-html. Do you just my changes in @apollographql/graphql-playground-html or all changes on graphql-playground-html up until the next release? I'll monitor graphql-playground-html for the next release if the latter

[martijnwalraven]

@penx I think all changes should be fine. I'd like us to stay synchronized with upstream, with the exception of those dependencies.

[JonPaz]

Hi @martijnwalraven - Just wondering when the change to support offline playground resources will be merged in? Many thanks!

[OlivierJM]

Any progress with this issue, I have never noticed the need until now and it’s quite annoying.
Any workarounds ?

[JonPaz]

@OlivierJM - I've now got this working by implementing the following:

• Create an HTTP(S) endpoint to serve the graphql-playground-react static content. I grabbed the following:

https://cdn.jsdelivr.net/npm/[email protected]/build/static/css/index.css
https://cdn.jsdelivr.net/npm/[email protected]/build/static/js/middleware.js
https://cdn.jsdelivr.net/npm/[email protected]/build/favicon.png

to:

./favicon.png
./static
./static/css
./static/css/index.css
./static/js
./static/js/middleware.js

And used used http-server to server them.

• When creating a new ApolloServer, set the playground CDN url:

const server = new ApolloServer({
  playground: {
    cdnUrl: "http://127.0.0.1:8080"
  },
  typeDefs,
  resolvers,
  dataSources: () => ({
    launchAPI: new LaunchAPI()
  })
});

[OlivierJM]

Thanks for pointing this out, I will set this up in advance in case.
Thank you

[jbaxleyiii]

The latest Apollo Server is rebased on the latest from the upstream project which should support this!

[mrdulin]

Need Graphql playground work offline/slow network for Apollo Server 2.x which means work without the static resources from CDN.

[mrdulin]

I try to use playground offline with "graphql-playground-react": "^1.7.20", like this:

import { gql, IResolvers } from 'apollo-server';
import express from 'express';
import path from 'path';
import { ApolloServer } from 'apollo-server-express';

const typeDefs = gql`
  type Query {
    name: String
  }
`;

const resolvers: IResolvers = {
  Query: {
    name: () => 'name',
  },
};

const PORT = process.env.PORT || 3000;
const app = express();
const staticRoot = path.resolve(__dirname, '../../node_modules');
app.use('/node_modules', express.static(staticRoot));
const server = new ApolloServer({ typeDefs, resolvers, playground: { cdnUrl: './node_modules' } });
server.applyMiddleware({ app });

app.listen(PORT, () => {
  console.log(`🚀 Server ready at http://localhost:${PORT}${server.graphqlPath}`);
});

But it doesn't working. The browser try to request middleware.js, but got 404:

Request URL: http://localhost:3000/node_modules/[email protected]/build/static/js/middleware.js
Request Method: GET
Status Code: 404 Not Found
Remote Address: [::1]:3000
Referrer Policy: no-referrer-when-downgrade

"apollo-server": "^2.9.3",

[rahularyan]

A simple and very elegant solution is to use Resource Override extension for chrome browser. Replace CDN URL to local file.

[TalShperling]

There is another solution I came up with.

If you are working on other network/locally you can clone this project:
https://github.com/TalShperling/graphql-playground-offline

and run the CDN locally for your/your environment's needs.