setup @shopify/prefer-early-return and sonarjs/no-inverted-boolean-check

.eslintrc.js

@@ -43,7 +43,14 @@ module.exports = {
         'plugin:react/jsx-runtime',
         'prettier',
       ],
-
+      plugins: [
+        'promise',
+        'sonarjs',
+        'unicorn',
+        '@arthurgeron/react-usememo',
+        'sonar',
+        '@shopify',
+      ],
       globals: {
         atom: false,
         document: false,
@@ -52,8 +59,9 @@ module.exports = {
         Map: true,
         Set: true,
       },
-
       rules: {
+        '@shopify/prefer-early-return': ['error', { maximumStatements: 2 }],
+        'sonarjs/no-inverted-boolean-check': 'error',
         '@arthurgeron/react-usememo/require-usememo': [
           'error',
           { checkHookCalls: false },
@@ -314,14 +322,6 @@ module.exports = {
         // TODO: Fix all errors for the following rules included in recommended config
         '@typescript-eslint/no-var-requires': 'off',
       },
-
-      plugins: [
-        'promise',
-        'sonarjs',
-        'unicorn',
-        '@arthurgeron/react-usememo',
-        'sonar',
-      ],
     },
     {
       // Rules that requires type information

examples/monaco-graphql-nextjs/src/components/editor.tsx

@@ -4,6 +4,7 @@ import { Uri, editor, KeyMod, KeyCode, languages } from 'monaco-editor';
 import { initializeMode } from 'monaco-graphql/esm/initializeMode';
 import { createGraphiQLFetcher } from '@graphiql/toolkit';
 import * as JSONC from 'jsonc-parser';
+
 /**
  * Copied from graphql/graphiql/examples/monaco-graphql-vite
  */
@@ -154,42 +155,44 @@ export default function Editor() {
    * Handle the initial schema load
    */
   useEffect(() => {
-    if (!schema && !loading) {
-      setLoading(true);
-      void getSchema()
-        .then(data => {
-          if (!('data' in data)) {
-            throw new Error(
-              'this demo does not support subscriptions or http multipart yet',
-            );
-          }
-          initializeMode({
-            diagnosticSettings: {
-              validateVariablesJSON: {
-                [Uri.file('operation.graphql').toString()]: [
-                  Uri.file('variables.json').toString(),
-                ],
-              },
-              jsonDiagnosticSettings: {
-                validate: true,
-                schemaValidation: 'error',
-                // set these again, because we are entirely re-setting them here
-                allowComments: true,
-                trailingCommas: 'ignore',
-              },
+    if (schema || loading) {
+      return;
+    }
+
+    setLoading(true);
+    void getSchema()
+      .then(data => {
+        if (!('data' in data)) {
+          throw new Error(
+            'this demo does not support subscriptions or http multipart yet',
+          );
+        }
+        initializeMode({
+          diagnosticSettings: {
+            validateVariablesJSON: {
+              [Uri.file('operation.graphql').toString()]: [
+                Uri.file('variables.json').toString(),
+              ],
             },
-            schemas: [
-              {
-                introspectionJSON: data.data as unknown as IntrospectionQuery,
-                uri: 'myschema.graphql',
-              },
-            ],
-          });
+            jsonDiagnosticSettings: {
+              validate: true,
+              schemaValidation: 'error',
+              // set these again, because we are entirely re-setting them here
+              allowComments: true,
+              trailingCommas: 'ignore',
+            },
+          },
+          schemas: [
+            {
+              introspectionJSON: data.data as unknown as IntrospectionQuery,
+              uri: 'myschema.graphql',
+            },
+          ],
+        });
 
-          setSchema(data.data);
-        })
-        .then(() => setLoading(false));
-    }
+        setSchema(data.data);
+      })
+      .then(() => setLoading(false));
   }, [schema, loading]);
   return (
     <div id="wrapper">

examples/monaco-graphql-react-vite/src/App.tsx

@@ -156,42 +156,43 @@ export default function App() {
    * Handle the initial schema load
    */
   useEffect(() => {
-    if (!schema && !loading) {
-      setLoading(true);
-      void getSchema()
-        .then(data => {
-          if (!('data' in data)) {
-            throw new Error(
-              'this demo does not support subscriptions or http multipart yet',
-            );
-          }
-          initializeMode({
-            diagnosticSettings: {
-              validateVariablesJSON: {
-                [Uri.file('operation.graphql').toString()]: [
-                  Uri.file('variables.json').toString(),
-                ],
-              },
-              jsonDiagnosticSettings: {
-                validate: true,
-                schemaValidation: 'error',
-                // set these again, because we are entirely re-setting them here
-                allowComments: true,
-                trailingCommas: 'ignore',
-              },
+    if (schema || loading) {
+      return;
+    }
+    setLoading(true);
+    void getSchema()
+      .then(data => {
+        if (!('data' in data)) {
+          throw new Error(
+            'this demo does not support subscriptions or http multipart yet',
+          );
+        }
+        initializeMode({
+          diagnosticSettings: {
+            validateVariablesJSON: {
+              [Uri.file('operation.graphql').toString()]: [
+                Uri.file('variables.json').toString(),
+              ],
+            },
+            jsonDiagnosticSettings: {
+              validate: true,
+              schemaValidation: 'error',
+              // set these again, because we are entirely re-setting them here
+              allowComments: true,
+              trailingCommas: 'ignore',
             },
-            schemas: [
-              {
-                introspectionJSON: data.data as unknown as IntrospectionQuery,
-                uri: 'myschema.graphql',
-              },
-            ],
-          });
+          },
+          schemas: [
+            {
+              introspectionJSON: data.data as unknown as IntrospectionQuery,
+              uri: 'myschema.graphql',
+            },
+          ],
+        });
 
-          setSchema(data.data);
-        })
-        .then(() => setLoading(false));
-    }
+        setSchema(data.data);
+      })
+      .then(() => setLoading(false));
   }, [schema, loading]);
   return (
     <div id="wrapper">

examples/monaco-graphql-webpack/src/index.ts

@@ -111,19 +111,19 @@ async function render() {
   schemaPicker.addEventListener(
     'input',
     async function SchemaSelectionHandler(_ev: Event) {
-      if (schemaPicker.value !== schemaFetcher.currentSchema.value) {
-        const schemaResult = await schemaFetcher.changeSchema(
-          schemaPicker.value,
-        );
-        if (schemaResult && monacoGraphQLAPI) {
-          monacoGraphQLAPI.setSchemaConfig([
-            {
-              ...schemaResult,
-              fileMatch: [operationModel.uri.toString()],
-            },
-          ]);
-          schemaEditor.setValue(schemaResult.documentString || '');
-        }
+      if (schemaPicker.value === schemaFetcher.currentSchema.value) {
+        return;
+      }
+
+      const schemaResult = await schemaFetcher.changeSchema(schemaPicker.value);
+      if (schemaResult && monacoGraphQLAPI) {
+        monacoGraphQLAPI.setSchemaConfig([
+          {
+            ...schemaResult,
+            fileMatch: [operationModel.uri.toString()],
+          },
+        ]);
+        schemaEditor.setValue(schemaResult.documentString || '');
       }
     },
   );

package.json

@@ -94,6 +94,7 @@
     "@changesets/changelog-github": "^0.4.7",
     "@changesets/cli": "^2.25.2",
     "@manypkg/get-packages": "^1.1.3",
+    "@shopify/eslint-plugin": "^42.1.0",
     "@strictsoftware/typedoc-plugin-monorepo": "^0.3.1",
     "@testing-library/jest-dom": "5.16.5",
     "@types/aws-serverless-express": "^3.3.3",

packages/graphiql-react/src/editor/completion.ts

@@ -161,26 +161,27 @@ export function onHasCompletion(
           hintsUl.addEventListener(
             'DOMNodeRemoved',
             (onRemoveFn = (event: Event) => {
-              if (event.target === hintsUl) {
-                hintsUl.removeEventListener('scroll', handleScroll);
-                hintsUl.removeEventListener('DOMNodeRemoved', onRemoveFn);
-                if (information) {
-                  information.removeEventListener(
-                    'click',
-                    onClickHintInformation,
-                  );
-                }
-                information = null;
-                fieldName = null;
-                typeNamePill = null;
-                typeNamePrefix = null;
-                typeName = null;
-                typeNameSuffix = null;
-                description = null;
-                deprecation = null;
-                deprecationReason = null;
-                onRemoveFn = null;
+              if (event.target !== hintsUl) {
+                return;
               }
+              hintsUl.removeEventListener('scroll', handleScroll);
+              hintsUl.removeEventListener('DOMNodeRemoved', onRemoveFn);
+              if (information) {
+                information.removeEventListener(
+                  'click',
+                  onClickHintInformation,
+                );
+              }
+              information = null;
+              fieldName = null;
+              typeNamePill = null;
+              typeNamePrefix = null;
+              typeName = null;
+              typeNameSuffix = null;
+              description = null;
+              deprecation = null;
+              deprecationReason = null;
+              onRemoveFn = null;
             }),
           );
         }

packages/graphiql-toolkit/src/storage/history.ts

@@ -75,23 +75,24 @@ export class HistoryStore {
     operationName?: string,
   ) => {
     if (
-      this.shouldSaveQuery(
+      !this.shouldSaveQuery(
         query,
         variables,
         headers,
         this.history.fetchRecent(),
       )
     ) {
-      this.history.push({
-        query,
-        variables,
-        headers,
-        operationName,
-      });
-      const historyQueries = this.history.items;
-      const favoriteQueries = this.favorite.items;
-      this.queries = historyQueries.concat(favoriteQueries);
+      return;
     }
+    this.history.push({
+      query,
+      variables,
+      headers,
+      operationName,
+    });
+    const historyQueries = this.history.items;
+    const favoriteQueries = this.favorite.items;
+    this.queries = historyQueries.concat(favoriteQueries);
   };
 
   toggleFavorite(

packages/graphiql/__mocks__/codemirror.ts

@@ -36,15 +36,16 @@ function CodeMirror(node: HTMLElement, { value, ...options }) {
     },
 
     off(event) {
-      if (Object.prototype.hasOwnProperty.call(_eventListeners, event)) {
-        const updatedEventListeners = {};
-        for (const e in _eventListeners) {
-          if (e !== event) {
-            updatedEventListeners[e] = _eventListeners[e];
-          }
+      if (!Object.prototype.hasOwnProperty.call(_eventListeners, event)) {
+        return;
+      }
+      const updatedEventListeners = {};
+      for (const e in _eventListeners) {
+        if (e !== event) {
+          updatedEventListeners[e] = _eventListeners[e];
         }
-        _eventListeners = updatedEventListeners;
       }
+      _eventListeners = updatedEventListeners;
     },
 
     getValue() {