🛠️ ESLint: add unicorn/consistent-destructuring rule (#2993)

* add `unicorn/consistent-destructuring` rule

.changeset/nasty-readers-listen.md

@@ -0,0 +1,10 @@
+---
+'codemirror-graphql': patch
+'@graphiql/react': patch
+'graphql-language-service': patch
+'graphql-language-service-server': patch
+'monaco-graphql': patch
+'vscode-graphql-execution': patch
+---
+
+add `unicorn/consistent-destructuring` rule

.eslintrc.js

@@ -261,6 +261,7 @@ module.exports = {
     // Jest rules
     'jest/no-conditional-expect': 0,
 
+    'unicorn/consistent-destructuring': 'error',
     'prefer-destructuring': ['error', { VariableDeclarator: { object: true } }],
     'promise/no-multiple-resolved': 'error',
     'sonarjs/no-redundant-jump': 'error',

packages/codemirror-graphql/src/hint.ts

@@ -70,7 +70,7 @@ CodeMirror.registerHelper(
     editor: CodeMirror.Editor,
     options: GraphQLHintOptions,
   ): IHints | undefined => {
-    const { schema } = options;
+    const { schema, externalFragments } = options;
     if (!schema) {
       return;
     }
@@ -90,7 +90,7 @@ CodeMirror.registerHelper(
       editor.getValue(),
       position,
       token,
-      options.externalFragments,
+      externalFragments,
     );
 
     const results = {

packages/codemirror-graphql/src/lint.ts

@@ -42,13 +42,13 @@ CodeMirror.registerHelper(
   'lint',
   'graphql',
   (text: string, options: GraphQLLintOptions): CodeMirror.Annotation[] => {
-    const { schema } = options;
+    const { schema, validationRules, externalFragments } = options;
     const rawResults = getDiagnostics(
       text,
       schema,
-      options.validationRules,
+      validationRules,
       undefined,
-      options.externalFragments,
+      externalFragments,
     );
 
     const results = rawResults.map(error => ({

packages/codemirror-graphql/src/results/mode.ts

@@ -52,12 +52,12 @@ function indent(
   state: State,
   textAfter: string,
 ) {
-  const { levels } = state;
+  const { levels, indentLevel } = state;
   // If there is no stack of levels, use the current level.
   // Otherwise, use the top level, preemptively dedenting for close braces.
   const level =
     !levels || levels.length === 0
-      ? state.indentLevel
+      ? indentLevel
       : levels[levels.length - 1] -
         (this.electricInput?.test(textAfter) ? 1 : 0);
   return (level || 0) * (this.config?.indentUnit || 0);

packages/codemirror-graphql/src/utils/jump-addon.ts

@@ -103,9 +103,9 @@ function onKeyDown(cm: CodeMirror.Editor, event: KeyboardEvent) {
   };
 
   const onClick = (clickEvent: MouseEvent) => {
-    const { destination } = cm.state.jump;
+    const { destination, options } = cm.state.jump;
     if (destination) {
-      cm.state.jump.options.onClick(destination, clickEvent);
+      options.onClick(destination, clickEvent);
     }
   };
 

packages/codemirror-graphql/src/utils/mode-indent.ts

@@ -19,12 +19,12 @@ export default function indent(
   state: State,
   textAfter: string,
 ) {
-  const { levels } = state;
+  const { levels, indentLevel } = state;
   // If there is no stack of levels, use the current level.
   // Otherwise, use the top level, preemptively dedenting for close braces.
   const level =
     !levels || levels.length === 0
-      ? state.indentLevel
+      ? indentLevel
       : levels[levels.length - 1] -
         (this.electricInput?.test(textAfter) ? 1 : 0);
   return (level || 0) * (this.config?.indentUnit || 0);

packages/codemirror-graphql/src/variables/mode.ts

@@ -53,12 +53,12 @@ function indent(
   state: State,
   textAfter: string,
 ) {
-  const { levels } = state;
+  const { levels, indentLevel } = state;
   // If there is no stack of levels, use the current level.
   // Otherwise, use the top level, preemptively dedenting for close braces.
   const level =
     !levels || levels.length === 0
-      ? state.indentLevel
+      ? indentLevel
       : levels[levels.length - 1] -
         (this.electricInput?.test(textAfter) ? 1 : 0);
   return (level || 0) * (this.config?.indentUnit || 0);

packages/graphiql-react/src/editor/context.tsx

@@ -364,17 +364,14 @@ export function EditorContextProvider(props: EditorContextProviderProps) {
     headerEditor,
     responseEditor,
   });
-  const { onTabChange } = props;
+  const { onTabChange, defaultHeaders, children } = props;
 
   const addTab = useCallback<EditorContextType['addTab']>(() => {
     setTabState(current => {
       // Make sure the current tab stores the latest values
       const updatedValues = synchronizeActiveTabValues(current);
       const updated = {
-        tabs: [
-          ...updatedValues.tabs,
-          createTab({ headers: props.defaultHeaders }),
-        ],
+        tabs: [...updatedValues.tabs, createTab({ headers: defaultHeaders })],
         activeTabIndex: updatedValues.tabs.length,
       };
       storeTabs(updated);
@@ -383,7 +380,7 @@ export function EditorContextProvider(props: EditorContextProviderProps) {
       return updated;
     });
   }, [
-    props.defaultHeaders,
+    defaultHeaders,
     onTabChange,
     setEditorValues,
     storeTabs,
@@ -530,9 +527,7 @@ export function EditorContextProvider(props: EditorContextProviderProps) {
   );
 
   return (
-    <EditorContext.Provider value={value}>
-      {props.children}
-    </EditorContext.Provider>
+    <EditorContext.Provider value={value}>{children}</EditorContext.Provider>
   );
 }
 

packages/graphiql-react/src/execution.tsx

@@ -99,7 +99,7 @@ export function ExecutionContextProvider(props: ExecutionContextProviderProps) {
     setSubscription(null);
   }, [subscription]);
 
-  const { fetcher } = props;
+  const { fetcher, children, operationName } = props;
   const run = useCallback<ExecutionContextType['run']>(async () => {
     if (!queryEditor || !responseEditor) {
       return;
@@ -169,14 +169,13 @@ export function ExecutionContextProvider(props: ExecutionContextProviderProps) {
     setResponse('');
     setIsFetching(true);
 
-    const operationName =
-      props.operationName ?? queryEditor.operationName ?? undefined;
+    const opName = operationName ?? queryEditor.operationName ?? undefined;
 
     history?.addToHistory({
       query,
       variables: variablesString,
       headers: headersString,
-      operationName,
+      operationName: opName,
     });
 
     try {
@@ -228,7 +227,7 @@ export function ExecutionContextProvider(props: ExecutionContextProviderProps) {
             } else if (data) {
               // If there is no path, we don't know what to do with the payload,
               // so we just set it.
-              payload.data = part.data;
+              payload.data = data;
             }
 
             // Ensures we also bring extensions and alike along for the ride
@@ -251,7 +250,7 @@ export function ExecutionContextProvider(props: ExecutionContextProviderProps) {
         {
           query,
           variables,
-          operationName,
+          operationName: opName,
         },
         {
           headers: headers ?? undefined,
@@ -312,7 +311,7 @@ export function ExecutionContextProvider(props: ExecutionContextProviderProps) {
     fetcher,
     headerEditor,
     history,
-    props.operationName,
+    operationName,
     queryEditor,
     responseEditor,
     stop,
@@ -326,16 +325,16 @@ export function ExecutionContextProvider(props: ExecutionContextProviderProps) {
     () => ({
       isFetching,
       isSubscribed,
-      operationName: props.operationName ?? null,
+      operationName: operationName ?? null,
       run,
       stop,
     }),
-    [isFetching, isSubscribed, props.operationName, run, stop],
+    [isFetching, isSubscribed, operationName, run, stop],
   );
 
   return (
     <ExecutionContext.Provider value={value}>
-      {props.children}
+      {children}
     </ExecutionContext.Provider>
   );
 }

packages/graphiql-react/src/plugin.tsx

@@ -156,7 +156,7 @@ export function PluginContextProvider(props: PluginContextProviderProps) {
       );
     });
 
-  const { onTogglePluginVisibility } = props;
+  const { onTogglePluginVisibility, children } = props;
   const setVisiblePlugin = useCallback<PluginContextType['setVisiblePlugin']>(
     plugin => {
       const newVisiblePlugin = plugin
@@ -187,9 +187,7 @@ export function PluginContextProvider(props: PluginContextProviderProps) {
   );
 
   return (
-    <PluginContext.Provider value={value}>
-      {props.children}
-    </PluginContext.Provider>
+    <PluginContext.Provider value={value}>{children}</PluginContext.Provider>
   );
 }
 

packages/graphiql-react/src/schema.tsx

@@ -179,7 +179,8 @@ export function SchemaContextProvider(props: SchemaContextProviderProps) {
   /**
    * Fetch the schema
    */
-  const { fetcher, onSchemaChange } = props;
+  const { fetcher, onSchemaChange, dangerouslyAssumeSchemaIsValid, children } =
+    props;
   const introspect = useCallback(() => {
     /**
      * Only introspect if there is no schema provided via props. If the
@@ -330,11 +331,11 @@ export function SchemaContextProvider(props: SchemaContextProviderProps) {
    * Derive validation errors from the schema
    */
   const validationErrors = useMemo(() => {
-    if (!schema || props.dangerouslyAssumeSchemaIsValid) {
+    if (!schema || dangerouslyAssumeSchemaIsValid) {
       return [];
     }
     return validateSchema(schema);
-  }, [schema, props.dangerouslyAssumeSchemaIsValid]);
+  }, [schema, dangerouslyAssumeSchemaIsValid]);
 
   /**
    * Memoize context value
@@ -351,9 +352,7 @@ export function SchemaContextProvider(props: SchemaContextProviderProps) {
   );
 
   return (
-    <SchemaContext.Provider value={value}>
-      {props.children}
-    </SchemaContext.Provider>
+    <SchemaContext.Provider value={value}>{children}</SchemaContext.Provider>
   );
 }