Playground autoComplete or Type Box doesn't disappear.

[Yeong-Woo]

This issue pertains to the following package(s):

• GraphQL Playground - Electron App
• GraphQL Playground HTML
• GraphQL Playground
• GraphQL Playground Express Middleware
• GraphQL Playground Hapi Middleware
• GraphQL Playground Koa Middleware
• GraphQL Playground Lambda Middleware

What OS and OS version are you experiencing the issue(s) on?

Windows 10 Home 22H2

What version of graphql-playground(-electron/-middleware) are you experiencing the issue(s) on?

I don't know exactly what version is of graphql-playground. I ran this based on Nest.JS server.

        "@apollo/server": "^4.10.5",
        "@nestjs/apollo": "^12.2.0",
        "@nestjs/graphql": "^12.2.0",
        "graphql": "^16.9.0",

What is the expected behavior?

autoComplete or Type Box does disapper.

What is the actual behavior?

It doesn't disappear.

Then, I checked developer tabs of Chrome browser, it said many many errors like following picture.

What steps may we take to reproduce the behavior?

Please provide a gif or image of the issue for a quicker response/fix.

[lairdman320]

I started seeing this same issue about a week ago after a Chrome update. I am seeing the same error messages in the Chrome developer tab as the bug reporter, with a slightly different line number for onHasCompletion.tsx (onHasCompletion.tsx:88). It appears to be specific to Chrome, as I was able to use the playground normally in Microsoft Edge. I am using Chrome Version 127.0.6533.89 and GraphQL version 15.5.1.

Here is the relevant information from the chromestatus web page (https://chromestatus.com/feature/5083947249172480) on how this can be replicated and fixed:

Mutation Events, including DOMSubtreeModified, DOMNodeInserted, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMNodeInsertedIntoDocument, and DOMCharacterDataModified, are quite bad for page performance, and also significantly increase the complexity of adding new features to the Web. These APIs were deprecated from the spec ( ) in 2011, and were replaced (in 2012) by the much better-behaved Mutation Observer API. Usage of the obsolete Mutation Events must now be migrated to Mutation Observer.

Mutation event support will be disabled by default starting in Chrome 127, around July 30, 2024. Code should be migrated before that date to avoid site breakage.

[danialdezfouli]

The error that I'm receiving in the latest Chrome's console

Uncaught TypeError: Cannot read properties of undefined (reading 'showDocFromType')
    at e.onClickHintInformation (GraphQLEditor.tsx:619:37)
e.onClickHintInformation @ GraphQLEditor.tsx:619

[NewGrafon]

Have same issue, subscribed.

[JoaoBGusmao]

Since this is a dead lib, I forked and fixed the autocomplete issue and also another crash when trying to click on a type definition inside the box.
I wont raise a PR because it's probably going to be a waste of time. Feel free to copy the solution from my fork:
https://github.com/JoaoBGusmao/graphql-playground

To fix the box issue was just to replace the deprecated code and implement again using MutationObservers.

The issue when clicking the type was prabably around for years, prob introduced when they added the "schema" tab. Basically the click on type event handler depends on a ref to GraphDocs component, but this component is only really mounted when the doc tabs is clicked. Also the ref was not being properly set, maybe because of the way the tabs component builds the active tab component. As a workarround, calling the dispatch that activate the docs tab before using the ref worked just fine. It's not the best code (bc I rely on a ref that is set by a function in a side effects of props changes) but it should work.

[michael-nwuju]

https://github.com/JoaoBGusmao/graphql-playground

This is brilliant man, thank you so much! Please how do we actually apply it to our graphql codebases, changing the code in the node_modules will not change its behaviour when deployed to a staging environment, is there some hack around this?

[JoaoBGusmao]

https://github.com/JoaoBGusmao/graphql-playground

This is brilliant man, thank you so much! Please how do we actually apply it to our graphql codebases, changing the code in the node_modules will not change its behaviour when deployed to a staging environment, is there some hack around this?

@michael-nwuju If it is an installed lib of your project, the easiest way is to use patch-package to apply the diff from my commit to the code installed inside node_modules. This way you'll ensure when your deploy routine installs your dependencies, it will also apply the patch.

If you're using playground from libs like apollo 2, this solution won't work because they have their own fork of playground and I believe they actually don't use the code from node_modules but instead they build a html where playground's bundle is directly imported from jsdelivr.net. For this to work I believe you'd have to build and publish to npm, and then use cdnUrl and version props from ApolloClient to render the right version. In this case, I believe it's better to just give up using this lib.

I always used playground from the chrome extension. I'm publishing the fixed version to chrome web store and it should be available soon.

[JoeHogan]

Obviously the fix by @JoaoBGusmao above is the right way to do this, but i just wanted a simpler way to hide the annoying boxes. I opted for adding some css to the page where i host the playground.

This css will simply hide the annoying helper messages after a few seconds instead of the default behavior of removing them from the DOM:

<style>
        .CodeMirror-hint-information {
            -moz-animation: cssAnimation 0s ease-in 3s forwards;
            -webkit-animation: cssAnimation 0s ease-in 3s forwards;
            -o-animation: cssAnimation 0s ease-in 3s forwards;
            animation: cssAnimation 0s ease-in 3s forwards;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        @keyframes cssAnimation {
            to {
                display:none;
            }
        }
        @-webkit-keyframes cssAnimation {
            to {
                display:none;
            }
        }
    </style>

You can add this to a custom page via the instructions here: https://github.com/graphql/graphql-playground?tab=readme-ov-file#as-html-page

[Sczlog]

A temporally solution with mutation observer, I use tampermonkey to host it.

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.removedNodes.length) {
      mutation.removedNodes.forEach((node) => {
        if (
          node.tagName === "UL" &&
          node.classList.contains("CodeMirror-hints")
        ) {
          if (!node.parentElement && mutation.target.parentElement) {
            mutation.target.parentElement.removeChild(mutation.target);
          }
        }
      });
    }
  });
});
observer.observe(document.body, {
  subtree: true,
  childList: true,
});

[jillesme]

Instead of using graphql-playground which has not had a release in over 5 years, we just switched to GraphiQL. All it took for us was:

    if (['local', 'dev'].includes(process.env.NODE_ENV)) {
        app.get('/graphql', (req, res) => {
            // Instead of creating an entire React application for GraphiQL, we can just serve the HTML file
            // As described in https://github.com/graphql/graphiql/blob/main/packages/graphiql/README.md#examples
            res.sendFile(path.join(__dirname, '../graphiql/index.html'));
        });
    }

No new dependencies. Works amazing for local / dev. If you want to run it in a production environment you can use the React app. This worked for us.

[vijay-zip]

Band aid fix:
I'm in a hurry to use the playground autocomplete feature without these info tool tips hindering the process.

Once i auto complete a desired set of fields I clear the tool tips via chrome console:
document.querySelectorAll('.CodeMirror-hint-information').forEach(node => node.remove());

Hacky but helps !