Graphql playground doesn't load when offline #1421

wmertens · 2018-07-25T22:00:16Z

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

unicodeveloper · 2018-07-25T22:02:06Z

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

wmertens · 2018-07-26T06:32:25Z

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 · 2018-09-21T14:57:00Z

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/graphql-playground-react@1.7.4/build/static/css/index.css" />
<link rel="shortcut icon" href="//cdn.jsdelivr.net/npm/graphql-playground-react@1.7.4/build/favicon.png" />
<script src="//cdn.jsdelivr.net/npm/graphql-playground-react@1.7.4/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 · 2018-09-21T15:05:17Z

Line 127 in 8347511

send(res, 200, renderPlaygroundPage(middlewareOptions));

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 · 2018-09-21T15:19:39Z

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.

Allow the cdn url to be passed in to renderPlaygroundPage as an option. This is to support graphql-playground being used offline by tools such as Apollo Server. See apollographql/apollo-server#1421

* renderPlaygroundPage - cdnUrl config option Allow the cdn url to be passed in to renderPlaygroundPage as an option. This is to support graphql-playground being used offline by tools such as Apollo Server. See apollographql/apollo-server#1421 * don't insert @ in cdn url if no version given If version is not passed then don't append @ to the cdn url. This is to aid serving from localhost from a folder with no given version number. See #845

anodynos · 2018-10-15T19:22:46Z

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

penx · 2018-10-15T20:09:46Z

@anodynos graphql/graphql-playground#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:

#1734

penx · 2018-10-16T13:56:51Z

scoped graphql-playground-html was added in 8ea36d8 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 · 2018-10-16T14:15:17Z

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 · 2018-10-16T14:22:25Z

@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 · 2018-10-16T14:24:11Z

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

* renderPlaygroundPage - cdnUrl config option Allow the cdn url to be passed in to renderPlaygroundPage as an option. This is to support graphql-playground being used offline by tools such as Apollo Server. See apollographql/apollo-server#1421 * don't insert @ in cdn url if no version given If version is not passed then don't append @ to the cdn url. This is to aid serving from localhost from a folder with no given version number. See #845

JonPaz · 2019-03-08T09:39:26Z

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

OlivierJM · 2019-05-10T09:56:13Z

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

JonPaz · 2019-05-10T11:02:13Z

@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/graphql-playground-react@1.7.10/build/static/css/index.css
https://cdn.jsdelivr.net/npm/graphql-playground-react@1.7.10/build/static/js/middleware.js
https://cdn.jsdelivr.net/npm/graphql-playground-react@1.7.10/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 · 2019-05-10T11:07:18Z

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

jbaxleyiii · 2019-07-08T21:01:16Z

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

mrdulin · 2019-10-15T08:07:46Z

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

mrdulin · 2019-10-21T11:41:45Z

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/graphql-playground-react@1.7.31/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 · 2019-12-15T10:15:53Z

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

TalShperling · 2020-11-12T09:02:26Z

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.

* renderPlaygroundPage - cdnUrl config option Allow the cdn url to be passed in to renderPlaygroundPage as an option. This is to support graphql-playground being used offline by tools such as Apollo Server. See apollographql/apollo-server#1421 * don't insert @ in cdn url if no version given If version is not passed then don't append @ to the cdn url. This is to aid serving from localhost from a folder with no given version number. See graphql#845

* renderPlaygroundPage - cdnUrl config option Allow the cdn url to be passed in to renderPlaygroundPage as an option. This is to support graphql-playground being used offline by tools such as Apollo Server. See apollographql/apollo-server#1421 * don't insert @ in cdn url if no version given If version is not passed then don't append @ to the cdn url. This is to aid serving from localhost from a folder with no given version number. See #845

penx mentioned this issue Sep 24, 2018

renderPlaygroundPage - cdnUrl config option graphql/graphql-playground#845

Merged

abernix mentioned this issue Sep 26, 2018

Use server's own graphiql package instead of from CDN #295

Closed

abernix added the 🪲 bug label Sep 26, 2018

penx mentioned this issue Sep 26, 2018

Getting graphql-playground-react to work when offline #1734

Closed

9 tasks

abernix added the playground label Nov 22, 2018

saerdnaer mentioned this issue May 27, 2019

Playground not loading on my local machine graphql/graphql-playground#302

Closed

1 task

jbaxleyiii added the 🚧👷‍♀️👷‍♂️🚧 in triage Issue currently being triaged label Jul 8, 2019

jbaxleyiii closed this as completed Jul 8, 2019

abernix removed 🚧👷‍♀️👷‍♂️🚧 in triage Issue currently being triaged labels Jul 9, 2019

This was referenced Jan 17, 2022

[Snyk] Security upgrade node-fetch from 2.6.7 to 3.1.1 k4ny/apollo-server#5

Open

[Snyk] Security upgrade node-fetch from 2.6.7 to 3.1.1 vutting4221/apollo-server#19

Open

github-actions bot locked as resolved and limited conversation to collaborators Apr 20, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Graphql playground doesn't load when offline #1421

Graphql playground doesn't load when offline #1421

wmertens commented Jul 25, 2018

unicodeveloper commented Jul 25, 2018

wmertens commented Jul 26, 2018

penx commented Sep 21, 2018 •

edited

Loading

penx commented Sep 21, 2018 •

edited

Loading

penx commented Sep 21, 2018 •

edited

Loading

anodynos commented Oct 15, 2018

penx commented Oct 15, 2018 •

edited

Loading

penx commented Oct 16, 2018 •

edited

Loading

martijnwalraven commented Oct 16, 2018

penx commented Oct 16, 2018 •

edited

Loading

martijnwalraven commented Oct 16, 2018

JonPaz commented Mar 8, 2019

OlivierJM commented May 10, 2019

JonPaz commented May 10, 2019

OlivierJM commented May 10, 2019 •

edited

Loading

jbaxleyiii commented Jul 8, 2019

mrdulin commented Oct 15, 2019

mrdulin commented Oct 21, 2019 •

edited

Loading

rahularyan commented Dec 15, 2019

TalShperling commented Nov 12, 2020

Graphql playground doesn't load when offline #1421

Graphql playground doesn't load when offline #1421

Comments

wmertens commented Jul 25, 2018

unicodeveloper commented Jul 25, 2018

wmertens commented Jul 26, 2018

penx commented Sep 21, 2018 • edited Loading

penx commented Sep 21, 2018 • edited Loading

penx commented Sep 21, 2018 • edited Loading

anodynos commented Oct 15, 2018

penx commented Oct 15, 2018 • edited Loading

penx commented Oct 16, 2018 • edited Loading

martijnwalraven commented Oct 16, 2018

penx commented Oct 16, 2018 • edited Loading

martijnwalraven commented Oct 16, 2018

JonPaz commented Mar 8, 2019

OlivierJM commented May 10, 2019

JonPaz commented May 10, 2019

OlivierJM commented May 10, 2019 • edited Loading

jbaxleyiii commented Jul 8, 2019

mrdulin commented Oct 15, 2019

mrdulin commented Oct 21, 2019 • edited Loading

rahularyan commented Dec 15, 2019

TalShperling commented Nov 12, 2020

penx commented Sep 21, 2018 •

edited

Loading

penx commented Sep 21, 2018 •

edited

Loading

penx commented Sep 21, 2018 •

edited

Loading

penx commented Oct 15, 2018 •

edited

Loading

penx commented Oct 16, 2018 •

edited

Loading

penx commented Oct 16, 2018 •

edited

Loading

OlivierJM commented May 10, 2019 •

edited

Loading

mrdulin commented Oct 21, 2019 •

edited

Loading