Reputation: 97

Docusaurus v2 and GraphQL Playground integration

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...

Upvotes: 5

Answers (4)

DINA TAKLIT

Reputation: 8418

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:

Create plugins folder: Create a plugins folder at your project root.
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)

Upvotes: 0

Tom M

Reputation: 66

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:

I switched from using graphql-react-playground to GraphiQL: package: "graphiql": "^1.8.7"
This moved my error on to a weird one with no references anywhere on the web (rare for me): "no valid fetcher implementation available"
I fixed the above by importing createGraphiQLFetcher from '@graphiql/create-fetcher' to my component
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

Upvotes: 3