5

I'd like to render GraphQL Playground as a React component in one of my pages but it fails due to missing file-loader in webpack. Is there a way to fix this in docs or do I need to create new plugin with new webpack config?

Is it good idea to integrate Playground and Docusaurus at all?

Thanks for your ideas...

Yangshun Tay
  • 49,270
  • 33
  • 114
  • 141
Josef Rybička
  • 87
  • 1
  • 8
  • Docusaurus also seems to mess up the css for the playground component... – Ethan SK May 27 '20 at 20:38
  • 1
    @EthanSK that's right. It turned out that it requires too much effort to render `` in Docusaurus and I chose to load it in ` – Josef Rybička Jun 03 '20 at 12:56

4 Answers4

2

I just had exactly the same problem. Basically, Docusaurus with a gQL Playground Integration runs fine in local but won't compile due to errors when running yarn build as above.

In the end I found the answer is in Docusaurus, not in building a custom compiler:

  1. I switched from using graphql-react-playground to GraphiQL: package: "graphiql": "^1.8.7"
  2. This moved my error on to a weird one with no references anywhere on the web (rare for me): "no valid fetcher implementation available"
  3. I fixed the above by importing createGraphiQLFetcher from '@graphiql/create-fetcher' to my component
  4. Then the error was around not being able to find a window component, this was an easy one, I followed docusaurus docs here: https://docusaurus.io/docs/docusaurus-core#browseronly and wrapped my component on this page in like this:
import BrowserOnly from '@docusaurus/BrowserOnly';
const Explorer = () => {
  const { siteConfig } = useDocusaurusContext();
  return (
      <Layout
        title={siteConfig.title}
        description="Slerp GraphQL Explorer">
        <main>
          <BrowserOnly fallback={<div>Loading...</div>}>
            {() => {
                const GraphEx = GraphExplorer
                return <GraphEx />
            }}
          </BrowserOnly>
        </main>
      </Layout>
  );
}

This now works and builds successfully

DINA TAKLIT
  • 7,074
  • 10
  • 69
  • 74
Tom M
  • 46
  • 2
0

A few Docusaurus sites have embedded playgrounds:

In your case you will have to write a plugin to extend the webpack config with file-loader.

Yangshun Tay
  • 49,270
  • 33
  • 114
  • 141
  • 1
    I focus on [GraphQL Playground](https://www.apollographql.com/docs/apollo-server/testing/graphql-playground/) that can be embedded as a React compment, not playground in general. But thank you anyway. Now I know that custom plugin is the way. – Josef Rybička May 27 '20 at 06:24
0

Not sure if you found a better way but check out: https://www.npmjs.com/package/graphql-playground-react

You can embed this react component directly in your react app - It looks like Apollo also uses the vanilla JS version of this

SerShubham
  • 873
  • 4
  • 10
0

Following what @Tom MOnce I tried to add the graphql playground using graphiql in my docusaurus documentation

import React from "react";
import { createGraphiQLFetcher } from "@graphiql/toolkit";
import { GraphiQL } from "graphiql";
import "graphiql/graphiql.css";

const fetcher = createGraphiQLFetcher({
  url: "https://my.graphql.api/graphql",
});

export default function GraphqlPlayGround() {
  return <GraphiQL fetcher={fetcher} />;
}

I was running into this issue

Module not found: Error: Can't resolve 'react/jsx-runtime' in '/Users/user/Desktop/Saleor/DocAuth0/node_modules/@graphiql/react/dist'
Did you mean 'jsx-runtime.js'?
BREAKING CHANGE: The request 'react/jsx-runtime' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

I am sure some of you will run into the same issue, to fix this you need to create a custom loader for you webpack configuration to disable this behaviour

Since webpack 5.0.0-beta.30, you're required to specify extensions when using imports in .mjs files or any .js files with a package.json with "type": "module". You can still disable the behavior with resolve.fullySpecified set to false if you see any related errors in your project.

The steps you need to follow for this process are:

  1. Create plugins folder: Create a plugins folder at your project root.
  2. Create a plugin: Create a plugin (e.g., my-loaders) inside the plugins folder with index.js and package.json files:

As noted in the Docusaurus docs for configureWebpack(), the return object highlighted below gets merged into the final webpack config.

/plugins/my-loaders/index.js

module.exports = function (context, options) {
  return {
    name: 'my-loaders',
    configureWebpack(config, isServer) {
      return {
        module: {
          rules: [
            {
              test: /\.m?js/,
              resolve: {
                fullySpecified: false
              }
            },
          ],
        },
      };
    },
  };
};

/plugins/my-loaders/package.json

{
  "name": "my-loaders",
  "version": "0.0.0",
  "private": true
}

3.Update Docusaurus config: Update your Docusaurus configuration file to use the plugin: /docusaurus.config.js

plugins: [
  // ...
  'my-loaders'
  // ...
]

4.Update project dependency list to use plugin: Specify the plugin as a dependency in the package.json at your project root: /package.json

{
  // ...
  "dependencies": {
    // ...
    "my-loaders": "file:plugins/my-loaders",
    // ...
  },
    // ...
}

5.Install new plugin dependency for project: Execute the following to make use of the new plugin in your project:

npm i

Reference: Please follow up [this documentaion] for more details (https://dwf.dev/blog/2022/11/12/2022/updating-docusaurus-webpack-config)

DINA TAKLIT
  • 7,074
  • 10
  • 69
  • 74