fix: Safe setState (#1547)

Co-authored-by: Juan Mateo Garcia Ramirez <[email protected]>

Author: teo-garcia

packages/graphiql/src/components/GraphiQL.tsx

@@ -156,6 +156,8 @@ export class GraphiQL extends React.Component<GraphiQLProps, GraphiQLState> {
   _storage: StorageAPI;
 
   codeMirrorSizer!: CodeMirrorSizer;
+  // Ensure the component is mounted to execute async setState
+  componentIsMounted: boolean;
 
   // refs
   docExplorerComponent: Maybe<DocExplorer>;
@@ -178,6 +180,9 @@ export class GraphiQL extends React.Component<GraphiQLProps, GraphiQLState> {
     // Cache the storage instance
     this._storage = new StorageAPI(props.storage);
 
+    // Disable setState when the component is not mounted
+    this.componentIsMounted = false;
+
     // Determine the initial query to display.
     const query =
       props.query !== undefined
@@ -251,6 +256,9 @@ export class GraphiQL extends React.Component<GraphiQLProps, GraphiQLState> {
   }
 
   componentDidMount() {
+    // Allow async state changes
+    this.componentIsMounted = true;
+
     // Only fetch schema via introspection if a schema has not been
     // provided, including if `null` was provided.
     if (this.state.schema === undefined) {
@@ -349,6 +357,9 @@ export class GraphiQL extends React.Component<GraphiQLProps, GraphiQLState> {
   // When the component is about to unmount, store any persistable state, such
   // that when the component is remounted, it will use the last used values.
   componentWillUnmount() {
+    // Deny async state changes
+    this.componentIsMounted = false;
+
     if (this.state.query) {
       this._storage.set('query', this.state.query);
     }
@@ -377,6 +388,12 @@ export class GraphiQL extends React.Component<GraphiQLProps, GraphiQLState> {
     );
   }
 
+  // Use it when the state change is async
+  // TODO: Annotate correctly this function
+  safeSetState = (nextState: any, callback?: any): void => {
+    this.componentIsMounted && this.setState(nextState, callback);
+  };
+
   render() {
     const children = React.Children.toArray(this.props.children);
 
@@ -745,19 +762,19 @@ export class GraphiQL extends React.Component<GraphiQLProps, GraphiQLState> {
         if (typeof result !== 'string' && 'data' in result) {
           const schema = buildClientSchema(result.data);
           const queryFacts = getQueryFacts(schema, this.state.query);
-          this.setState({ schema, ...queryFacts });
+          this.safeSetState({ schema, ...queryFacts });
         } else {
           const responseString =
             typeof result === 'string' ? result : GraphiQL.formatResult(result);
-          this.setState({
+          this.safeSetState({
             // Set schema to `null` to explicitly indicate that no schema exists.
             schema: undefined,
             response: responseString,
           });
         }
       })
       .catch(error => {
-        this.setState({
+        this.safeSetState({
           schema: undefined,
           response: error ? GraphiQL.formatError(error) : undefined,
         });
@@ -794,7 +811,7 @@ export class GraphiQL extends React.Component<GraphiQLProps, GraphiQLState> {
       // If fetcher returned a Promise, then call the callback when the promise
       // resolves, otherwise handle the error.
       fetch.then(cb).catch(error => {
-        this.setState({
+        this.safeSetState({
           isWaitingForResponse: false,
           response: error ? GraphiQL.formatError(error) : undefined,
         });
@@ -806,14 +823,14 @@ export class GraphiQL extends React.Component<GraphiQLProps, GraphiQLState> {
       const subscription = fetch.subscribe({
         next: cb,
         error: (error: Error) => {
-          this.setState({
+          this.safeSetState({
             isWaitingForResponse: false,
             response: error ? GraphiQL.formatError(error) : undefined,
             subscription: null,
           });
         },
         complete: () => {
-          this.setState({
+          this.safeSetState({
             isWaitingForResponse: false,
             subscription: null,
           });