graphiql: Warning: Can't perform a React state update on an unmounted component

@sashahavia we released another alpha today that should take care of this, by avoiding fetch requests during re-renders. graphiql@1.0.0-alpha.11 should be the one you want

let me know if that helps! if not, we will try the other fix as well.

@acao Getting this error when trying to run the app:

ERROR in ./node_modules/graphql-language-service-interface/esm/getAutocompleteSuggestions.js 35:51
Module parse failed: Unexpected token (35:51)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|                 label: argDef.name,
|                 detail: String(argDef.type),
>                 documentation: argDef.description ?? undefined,
|                 kind: CompletionItemKind.Variable,
|             })));
 @ ./node_modules/graphql-language-service-interface/esm/index.js 2:0-45 2:0-45
 @ ./node_modules/codemirror-graphql/hint.js
 @ ./node_modules/graphiql/esm/components/QueryEditor.js
 @ ./node_modules/graphiql/esm/components/GraphiQL.js
 @ ./node_modules/graphiql/esm/index.js

@acao I have updated to 1.0.0 release and still got this error

react_devtools_backend.js:6 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

No worries. I can wait. It doesn’t break the functionality for me, it is just a warning. And by the way GraphiQL.prototype.componentWillUnmount = undefined; - the warning still pops up but not as often

I was thinking is it possible to add support for canceling all requests. I think that’s what actually breaking.

I am using axios in my fetcher and it would be nice if GraphiQL could accept cancel function and then call it in componentWillUnmount

const source = axios.CancelToken.source();

And then in GraphiQL

<GraphiQL ref={c => graphiql = c} fetcher={createFetcher(api)} query={query} onEditQuery={() => updateQuery()} cancel={source.cancel()}>

And for the fetch request we can use

const controller = new AbortController();
const { signal } = controller;

<GraphiQL ref={c => graphiql = c} fetcher={createFetcher(api)} query={query} onEditQuery={() => updateQuery()} cancel={controller.abort()}>

cancel function can be optional parameter for GraphiQL

When I look at the network tab I can see multiple requests being fired at the same time by fetcher function, it would be nice to cancel requests when unMounting since the user can move away from the page before requests are finished

@harshithpabbati yes I’m aware, thanks!

ok got it! i was doing the first two backwards. i also see that the active query goes blank once the typing begins! maybe a few bugs exposed here. thank you

fanatstic, was able to reproduce with this example, thank you!

@acao Hey, sorry it took me so long. Here is the link to sandbox to re-produce the error

https://codesandbox.io/s/goofy-brook-kvren

@acao We are suing React hooks and I don’t have unmount hook in any of the components that I am using graphiql

@sashahavia ok! the PR that we thought might fix it had that same error, but I think we had just reproduced it in a different context. gonnna try this other PR, #1544. thanks for helping with this!

@acao alpha.13 compiled successfully

Unfortunately, I am still seeing the error

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

@acao I didn’t have a chance to test it this week. Will try to test it first thing Monday.

In my case multiple requests happen because I am using it within Redux form.

 <Field
                label="GraphQL Statement"
                name="inputJson"
                query={query}
                change={change}
                endpoints={endpoints}
                component={GraphQlTextArea}
            />

GraphQlTextArea has GraphiQL with fetcher implementation