Docusaurus v2 and GraphQL Playground integration

Question

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

Answer 1

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