[ESLint] enable @typescript-eslint/no-unnecessary-type-assertion

.eslintrc.js

@@ -289,6 +289,20 @@ module.exports = {
   plugins: ['promise', 'sonarjs', 'unicorn'],
 
   overrides: [
+    {
+      files: ['**/*.{ts,tsx}'],
+      rules: {
+        '@typescript-eslint/no-unnecessary-type-assertion': 'error',
+      },
+      parserOptions: {
+        project: [
+          'packages/*/tsconfig.json',
+          'examples/*/tsconfig.json',
+          'packages/graphiql/cypress/tsconfig.json',
+          'tsconfig.eslint.json',
+        ],
+      },
+    },
     // Cypress plugin, global, etc., only for cypress directory
     // https://github.com/cypress-io/eslint-plugin-cypress
     // cypress clashes with jest expect()

.github/workflows/pr-check.yml

@@ -26,7 +26,8 @@ jobs:
         run: yarn build
 
       - name: ESLint
-        run: yarn lint
+        # Fixes error on CI: Allocation failed - JavaScript heap out of memory
+        run: NODE_OPTIONS=--max-old-space-size=4096 yarn lint
 
       - name: Prettier Check
         run: yarn pretty-check

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

@@ -42,7 +42,7 @@ export function createEditors() {
   );
 
   const variablesEditor = monaco.editor.create(
-    document.getElementById('variables') as HTMLElement,
+    document.getElementById('variables'),
     {
       model: variablesModel,
       language: 'json',
@@ -63,7 +63,7 @@ export function createEditors() {
   );
 
   const operationEditor = monaco.editor.create(
-    document.getElementById('operation') as HTMLElement,
+    document.getElementById('operation'),
     {
       model: operationModel,
       formatOnPaste: true,
@@ -81,7 +81,7 @@ export function createEditors() {
   );
 
   const schemaEditor = monaco.editor.create(
-    document.getElementById('schema-sdl') as HTMLElement,
+    document.getElementById('schema-sdl'),
     {
       model: schemaModel,
       formatOnPaste: true,
@@ -99,7 +99,7 @@ export function createEditors() {
   );
 
   const resultsEditor = monaco.editor.create(
-    document.getElementById('results') as HTMLElement,
+    document.getElementById('results'),
     {
       model: resultsModel,
       language: 'json',

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

@@ -153,22 +153,19 @@ async function render() {
         const body: { variables?: string; query: string } = {
           query: operation,
         };
-        // parse the variables with JSONC so we can have comments!
+        // parse the variables with JSONC, so we can have comments!
         const parsedVariables = JSONC.parse(variables);
         if (parsedVariables && Object.keys(parsedVariables).length) {
           body.variables = JSON.stringify(parsedVariables, null, 2);
         }
-        const result = await fetch(
-          schemaFetcher.currentSchema.value as string,
-          {
-            method: 'POST',
-            headers: {
-              'content-type': 'application/json',
-              ...schemaFetcher.currentSchema?.headers,
-            },
-            body: JSON.stringify(body, null, 2),
+        const result = await fetch(schemaFetcher.currentSchema.value, {
+          method: 'POST',
+          headers: {
+            'content-type': 'application/json',
+            ...schemaFetcher.currentSchema?.headers,
           },
-        );
+          body: JSON.stringify(body, null, 2),
+        });
 
         const resultText = await result.text();
         resultsEditor.setValue(JSON.stringify(JSON.parse(resultText), null, 2));

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

@@ -75,7 +75,7 @@ class MySchemaFetcher {
   async loadSchema() {
     try {
       setSchemaStatus('Schema Loading...');
-      const url = this._currentSchema.value as string;
+      const url = this._currentSchema.value;
 
       const headers = {
         'content-type': 'application/json',

package.json

@@ -105,8 +105,8 @@
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.17",
     "@types/ws": "^7.4.0",
-    "@typescript-eslint/eslint-plugin": "^5.27.0",
-    "@typescript-eslint/parser": "^5.27.0",
+    "@typescript-eslint/eslint-plugin": "^5.54.1",
+    "@typescript-eslint/parser": "^5.54.1",
     "aws-serverless-express": "^3.4.0",
     "babel-jest": "^29.4.3",
     "concurrently": "^7.0.0",

packages/graphiql-toolkit/src/create-fetcher/lib.ts

@@ -104,7 +104,7 @@ export const createWebsocketsFetcherFromUrl = (
 export const createWebsocketsFetcherFromClient =
   (wsClient: Client) => (graphQLParams: FetcherParams) =>
     makeAsyncIterableIteratorFromSink<ExecutionResult>(sink =>
-      wsClient!.subscribe(graphQLParams, {
+      wsClient.subscribe(graphQLParams, {
         ...sink,
         error: err => {
           if (err instanceof CloseEvent) {

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

@@ -86,7 +86,7 @@ export class QueryStore {
         this.key,
         JSON.stringify({ [this.key]: items }),
       );
-      if (!response || !response.error) {
+      if (!response?.error) {
         this.items = items;
       } else if (response.isQuotaError && this.maxSize) {
         // Only try to delete last items on LRU stores

packages/graphiql/src/components/__tests__/GraphiQL.spec.tsx

@@ -165,9 +165,9 @@ describe('GraphiQL', () => {
       const { container } = render(<GraphiQL fetcher={noOpFetcher} />);
 
       await waitFor(() => {
-        const mockEditor = container.querySelector(
+        const mockEditor = container.querySelector<HTMLTextAreaElement>(
           '[data-testid="query-editor"] .mockCodeMirror',
-        ) as HTMLTextAreaElement;
+        );
         expect(mockEditor.value).toContain('# Welcome to GraphiQL');
       });
     });
@@ -226,7 +226,7 @@ describe('GraphiQL', () => {
 
       const secondaryEditorTitle = container.querySelector(
         '.graphiql-editor-tools',
-      ) as Element;
+      );
 
       // drag the editor tools handle up
       act(() => {
@@ -298,10 +298,8 @@ describe('GraphiQL', () => {
 
       const { container } = render(<GraphiQL fetcher={noOpFetcher} />);
 
-      const dragBar = container.querySelector(
-        '.graphiql-horizontal-drag-bar',
-      ) as Element;
-      const editors = container.querySelector('.graphiql-editors') as Element;
+      const dragBar = container.querySelector('.graphiql-horizontal-drag-bar');
+      const editors = container.querySelector('.graphiql-editors');
 
       act(() => {
         fireEvent.mouseDown(dragBar, {
@@ -319,9 +317,7 @@ describe('GraphiQL', () => {
 
       await waitFor(() => {
         // 700 / (900 - 700) = 3.5
-        expect((editors.parentElement as HTMLElement).style.flex).toEqual(
-          '3.5',
-        );
+        expect(editors.parentElement.style.flex).toEqual('3.5');
       });
 
       clientWidthSpy.mockRestore();
@@ -343,9 +339,7 @@ describe('GraphiQL', () => {
 
       act(() => {
         fireEvent.click(
-          container.querySelector(
-            '[aria-label="Show Documentation Explorer"]',
-          ) as Element,
+          container.querySelector('[aria-label="Show Documentation Explorer"]'),
         );
       });
 
@@ -368,10 +362,7 @@ describe('GraphiQL', () => {
       await waitFor(() => {
         // 797 / (1200 - 797) = 1.977667493796526
         expect(
-          (
-            container.querySelector('.graphiql-plugin')
-              ?.parentElement as HTMLElement
-          ).style.flex,
+          container.querySelector('.graphiql-plugin')?.parentElement.style.flex,
         ).toBe('1.977667493796526');
       });
 
@@ -443,9 +434,7 @@ describe('GraphiQL', () => {
       });
 
       act(() => {
-        fireEvent.click(
-          container.querySelector('.graphiql-tab-add') as Element,
-        );
+        fireEvent.click(container.querySelector('.graphiql-tab-add'));
       });
 
       await waitFor(() => {
@@ -455,9 +444,7 @@ describe('GraphiQL', () => {
       });
 
       act(() => {
-        fireEvent.click(
-          container.querySelector('.graphiql-tab-add') as Element,
-        );
+        fireEvent.click(container.querySelector('.graphiql-tab-add'));
       });
 
       await waitFor(() => {
@@ -477,9 +464,7 @@ describe('GraphiQL', () => {
       });
 
       act(() => {
-        fireEvent.click(
-          container.querySelector('.graphiql-tab-add') as Element,
-        );
+        fireEvent.click(container.querySelector('.graphiql-tab-add'));
       });
 
       await waitFor(() => {
@@ -489,9 +474,7 @@ describe('GraphiQL', () => {
       });
 
       act(() => {
-        fireEvent.click(
-          container.querySelector('.graphiql-tab-add') as Element,
-        );
+        fireEvent.click(container.querySelector('.graphiql-tab-add'));
       });
 
       await waitFor(() => {
@@ -505,9 +488,7 @@ describe('GraphiQL', () => {
       const { container } = render(<GraphiQL fetcher={noOpFetcher} />);
 
       act(() => {
-        fireEvent.click(
-          container.querySelector('.graphiql-tab-add') as Element,
-        );
+        fireEvent.click(container.querySelector('.graphiql-tab-add'));
       });
 
       await waitFor(() => {
@@ -518,9 +499,7 @@ describe('GraphiQL', () => {
 
       act(() => {
         fireEvent.click(
-          container.querySelector(
-            '.graphiql-tab .graphiql-tab-close',
-          ) as Element,
+          container.querySelector('.graphiql-tab .graphiql-tab-close'),
         );
       });
 
@@ -914,7 +893,7 @@ describe('GraphiQL', () => {
         fireEvent.change(
           container.querySelector(
             '[data-testid="query-editor"] .mockCodeMirror',
-          ) as Element,
+          ),
           {
             target: { value: mockQuery2 },
           },
@@ -961,9 +940,7 @@ describe('GraphiQL', () => {
 
       act(() => {
         fireEvent.change(
-          container.querySelector(
-            '[aria-label="Variables"] .mockCodeMirror',
-          ) as Element,
+          container.querySelector('[aria-label="Variables"] .mockCodeMirror'),
           {
             target: { value: mockVariables2 },
           },
@@ -1015,9 +992,7 @@ describe('GraphiQL', () => {
 
       act(() => {
         fireEvent.change(
-          container.querySelector(
-            '[aria-label="Headers"] .mockCodeMirror',
-          ) as Element,
+          container.querySelector('[aria-label="Headers"] .mockCodeMirror'),
           {
             target: { value: mockHeaders2 },
           },

packages/graphql-language-service-server/src/MessageProcessor.ts

@@ -318,7 +318,7 @@ export class MessageProcessor {
     // We aren't able to use initialization event for this
     // and the config change event is after the fact.
 
-    if (!params || !params.textDocument) {
+    if (!params?.textDocument) {
       throw new Error('`textDocument` argument is required.');
     }
     const { textDocument } = params;
@@ -419,7 +419,7 @@ export class MessageProcessor {
     // e.g. auto-completions.
     if (!params?.textDocument?.uri || !params.contentChanges) {
       throw new Error(
-        '`textDocument`, `textDocument.uri`, and `contentChanges` arguments are required.',
+        '`textDocument.uri` and `contentChanges` arguments are required.',
       );
     }
     const { textDocument, contentChanges } = params;
@@ -501,7 +501,7 @@ export class MessageProcessor {
     // For every `textDocument/didClose` event, delete the cached entry.
     // This is to keep a low memory usage && switch the source of truth to
     // the file on disk.
-    if (!params || !params.textDocument) {
+    if (!params?.textDocument) {
       throw new Error('`textDocument` is required.');
     }
     const { textDocument } = params;
@@ -531,14 +531,9 @@ export class MessageProcessor {
   }
 
   validateDocumentAndPosition(params: CompletionParams): void {
-    if (
-      !params ||
-      !params.textDocument ||
-      !params.textDocument.uri ||
-      !params.position
-    ) {
+    if (!params?.textDocument?.uri || !params.position) {
       throw new Error(
-        '`textDocument`, `textDocument.uri`, and `position` arguments are required.',
+        '`textDocument.uri` and `position` arguments are required.',
       );
     }
   }
@@ -734,7 +729,7 @@ export class MessageProcessor {
       return [];
     }
 
-    if (!params || !params.textDocument || !params.position) {
+    if (!params?.textDocument || !params.position) {
       throw new Error('`textDocument` and `position` arguments are required.');
     }
     const { textDocument, position } = params;
@@ -831,13 +826,13 @@ export class MessageProcessor {
       return [];
     }
 
-    if (!params || !params.textDocument) {
+    if (!params?.textDocument) {
       throw new Error('`textDocument` argument is required.');
     }
 
     const { textDocument } = params;
     const cachedDocument = this._getCachedDocument(textDocument.uri);
-    if (!cachedDocument || !cachedDocument.contents[0]) {
+    if (!cachedDocument?.contents[0]) {
       return [];
     }
 
@@ -852,7 +847,7 @@ export class MessageProcessor {
   //      return [];
   //    }
 
-  //    if (!params || !params.textDocument) {
+  //    if (!params?.textDocument) {
   //      throw new Error('`textDocument` argument is required.');
   //    }
 
@@ -1103,9 +1098,9 @@ export class MessageProcessor {
           // build full system URI path with protocol
           const uri = URI.file(filePath).toString();
 
-          // i would use the already existing graphql-config AST, but there are a few reasons we can't yet
+          // I would use the already existing graphql-config AST, but there are a few reasons we can't yet
           const contents = this._parser(document.rawSDL, uri);
-          if (!contents[0] || !contents[0].query) {
+          if (!contents[0]?.query) {
             return;
           }
           await this._updateObjectTypeDefinition(uri, contents);