gql.tada

.gitignore

@@ -39,3 +39,4 @@ playwright-report/
 e2e-recordings/
 locales/**/*_old.json
 token
+graphql-env.d.ts

.storybook/main.js

@@ -8,6 +8,9 @@ module.exports = {
     builder: "webpack5",
   },
   framework: "@storybook/react",
+  typescript: {
+    reactDocgen: "react-docgen-typescript-plugin",
+  },
   webpackFinal: (config) => {
     config.resolve.modules = [...(config.resolve.modules || []), "./src"];
 

.vitest/setupAfterEnv.ts

@@ -69,7 +69,7 @@ nock.back.fixtures = `${dirname(
 )}/../__fixtures__`;
 
 beforeEach(() => {
-  nock.back.setMode(isCI ? "lockdown" : "record");
+  nock.back.setMode("lockdown");
 });
 
 const origConsoleError = console.error;

.vscode/settings.json

@@ -8,7 +8,7 @@
     "**/.DS_Store": true
   },
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "eslint.format.enable": false,
   "editor.formatOnSave": true,

codegen.yml

@@ -1,6 +1,7 @@
 overwrite: true
 schema:
   - "./codegen.schema.js"
+
 generates:
   ./schema.graphql:
     plugins:
@@ -11,14 +12,3 @@ generates:
   ./src/renderer/gql/__generated__/apollo-helpers.ts:
     plugins:
       - typescript-apollo-client-helpers
-
-  ./src/renderer/__generated__/tag/:
-    documents:
-      - "src/renderer/**/*.{ts,tsx}":
-          noRequire: true
-      - "!**/__generated__/*.ts"
-
-    preset: gql-tag-operations
-    presetConfig:
-      # define which module you want to import your gql function from
-      augmentedModuleName: "@apollo/client"

package.json

@@ -49,7 +49,7 @@
     "@octokit/core": "^3.5.1",
     "@pothos/core": "^3.1.2",
     "@pothos/plugin-simple-objects": "^3.0.1",
-    "@rehooks/local-storage": "^2.4.4",
+    "@rehooks/local-storage": "^2.4.5",
     "antd": "^4.17.2",
     "apollo-bus-link": "^0.4.4",
     "apollo-link-logger": "^2.0.0",
@@ -61,6 +61,7 @@
     "electron-window-controls": "^1.0.23",
     "get-stream": "^6.0.1",
     "got": "^11.8.3",
+    "gql.tada": "canary",
     "graphql": "16.5.0",
     "graphql-subscriptions": "^2.0.0",
     "graphql-tag": "^2.12.6",
@@ -69,7 +70,7 @@
     "is-mobile": "^3.0.0",
     "iso-639-1": "^3.1.1",
     "js-file-download": "^0.4.12",
-    "ky": "^0.28.7",
+    "ky": "^1.2.1",
     "ky-universal": "^0.9.1",
     "markdown-to-jsx": "7.1.7",
     "md5": "^2.3.0",
@@ -111,7 +112,7 @@
     "compile:web:production": "yarn compile:web --mode production",
     "compile:main": "yarn run compile:deps && webpack --config webpack/main.config.js",
     "compile:deps": "electron-rebuild",
-    "codegen": "graphql-codegen --config codegen.yml",
+    "codegen": "graphql-codegen --config codegen.yml && gql.tada generate",
     "lint": "eslint --ext .js,.jsx,.ts,.tsx",
     "lint:all": "yarn lint '**/*.{ts,tsx,js,jsx}'",
     "fmt": "prettier --write '**/*.{ts,tsx,js,jsx}'",
@@ -132,20 +133,21 @@
     ]
   },
   "devDependencies": {
+    "@0no-co/graphqlsp": "^1.4.1",
     "@babel/core": "^7.16.0",
     "@graphql-codegen/cli": "2.3.0",
     "@graphql-codegen/gql-tag-operations": "^1.2.4",
     "@graphql-codegen/gql-tag-operations-preset": "^1.2.1",
     "@graphql-codegen/typescript-apollo-client-helpers": "^2.1.8",
     "@playwright-testing-library/test": "^4.0.1",
     "@playwright/test": "^1.29.1",
-    "@storybook/addon-actions": "^6.4.9",
-    "@storybook/addon-docs": "^6.4.9",
-    "@storybook/addon-essentials": "^6.4.9",
-    "@storybook/addon-links": "^6.4.9",
-    "@storybook/builder-webpack5": "^6.4.9",
-    "@storybook/manager-webpack5": "^6.4.9",
-    "@storybook/react": "^6.4.9",
+    "@storybook/addon-actions": "6",
+    "@storybook/addon-docs": "6",
+    "@storybook/addon-essentials": "6",
+    "@storybook/addon-links": "6",
+    "@storybook/builder-webpack5": "6",
+    "@storybook/manager-webpack5": "6",
+    "@storybook/react": "6",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
@@ -163,8 +165,8 @@
     "@types/uuid": "^8.3.3",
     "@types/w3c-web-usb": "^1.0.5",
     "@types/wicg-file-system-access": "^2020.9.5",
-    "@typescript-eslint/eslint-plugin": "^5.6.0",
-    "@typescript-eslint/parser": "^5.6.0",
+    "@typescript-eslint/eslint-plugin": "^7.1.0",
+    "@typescript-eslint/parser": "^7.1.0",
     "@vitejs/plugin-react": "^1.3.2",
     "@vitest/web-worker": "0.14.2",
     "babel-loader": "^8.2.3",
@@ -179,7 +181,7 @@
     "electron-devtools-installer": "^3.2.0",
     "electron-rebuild": "^3.2.5",
     "esbuild-loader": "^2.18.0",
-    "eslint": "^8.4.1",
+    "eslint": "^8.57.0",
     "eslint-config-airbnb": "^19.0.2",
     "eslint-config-airbnb-typescript": "^16.1.0",
     "eslint-config-prettier": "^8.3.0",
@@ -193,7 +195,7 @@
     "eslint-plugin-testing-library": "^5.0.4",
     "favicons": "^6.2.2",
     "favicons-webpack-plugin": "^5.0.2",
-    "fork-ts-checker-webpack-plugin": "^6.4.2",
+    "fork-ts-checker-webpack-plugin": "^9.0.2",
     "html-inline-css-webpack-plugin": "^1.11.1",
     "html-webpack-plugin": "^5.5.0",
     "husky": "^7.0.0",
@@ -210,14 +212,15 @@
     "prettier": "^2.5.1",
     "range-parser": "^1.2.1",
     "react-dev-utils": "^11.0.4",
+    "react-docgen-typescript-plugin": "^1.0.5",
     "react-svg-loader": "^3.0.3",
     "serve": "^13.0.2",
     "snapshot-diff": "0.9.0",
     "tmp-promise": "^3.0.3",
     "ts-node": "^10.5.0",
     "tsconfig-paths": "^3.12.0",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
-    "typescript": "^4.6.2",
+    "typescript": "^5.3.3",
     "vite-tsconfig-paths": "^3.5.0",
     "vitest": "^0.14.2",
     "webpack": "^5.64.4",

src/gql.ts

@@ -0,0 +1,15 @@
+import { initGraphQLTada } from "gql.tada";
+import type { introspection } from "graphql-env.d.ts";
+
+export * from "gql.tada";
+
+export default initGraphQLTada<{
+  introspection: introspection;
+
+  scalars: {
+    ID: string;
+  };
+}>();
+
+export type { FragmentOf, ResultOf, VariablesOf } from "gql.tada";
+export { readFragment } from "gql.tada";

src/renderer/components/devices/DeviceSelector.tsx

@@ -3,7 +3,8 @@ import {
   SyncOutlined,
   UsbOutlined,
 } from "@ant-design/icons";
-import { gql, useMutation, useQuery } from "@apollo/client";
+import { useMutation, useQuery } from "@apollo/client";
+import gql from "gql";
 import { Button, Card, Empty, Typography } from "antd";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
@@ -36,7 +37,7 @@ type Props = {
   disabled?: boolean;
 };
 
-const DevicesQuery = gql(/* GraphQL */ `
+const DevicesQuery = gql(`
   query Devices {
     flashableDevices {
       id
@@ -59,7 +60,7 @@ const DeviceSelector: React.FC<Props> = ({
   const { t } = useTranslation("flashing");
 
   const [requestDevice] = useMutation(
-    gql(/* GraphQL */ `
+    gql(`
       mutation RequestDevice {
         requestFlashableDevice {
           id

src/renderer/components/devices/DeviceSummary.tsx

@@ -2,7 +2,8 @@ import { UsbOutlined } from "@ant-design/icons";
 import { Skeleton, Space, Typography } from "antd";
 import React from "react";
 import { Centered } from "renderer/shared/layouts";
-import { gql, useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client";
+import gql from "gql";
 import { Device } from "./types";
 
 const DeviceDetails: React.FC<{ device?: Device; loading?: boolean }> = ({
@@ -43,7 +44,7 @@ const DeviceDetails: React.FC<{ device?: Device; loading?: boolean }> = ({
 
 const DeviceSummary: React.FC<{ deviceId: string }> = ({ deviceId }) => {
   const { loading, data } = useQuery(
-    gql(/* GraphQL */ `
+    gql(`
       query DeviceInfo($deviceId: ID!) {
         flashableDevice(id: $deviceId) {
           id

src/renderer/components/devices/__tests__/DeviceSelector.spec.tsx

@@ -6,7 +6,7 @@ import { devicesQuery } from "test-utils/mocks";
 import { exampleDevices } from "test-utils/data";
 import { fireEvent, screen, waitFor } from "@testing-library/react";
 
-import gql from "graphql-tag";
+import gql from "gql";
 
 describe("<DeviceSelector />", () => {
   it("should show devices connected via USB", async () => {
@@ -71,13 +71,13 @@ describe("<DeviceSelector />", () => {
     it("should request a device from the browser when add device is clicked", async () => {
       const requestDeviceQuery: MockedResponse = {
         request: {
-          query: gql`
+          query: gql(`
             mutation RequestDevice {
               requestFlashableDevice {
                 id
               }
             }
-          `,
+          `),
         },
         result: {
           data: {
@@ -117,13 +117,13 @@ describe("<DeviceSelector />", () => {
     it("should disable add device button when disabled", async () => {
       const requestDeviceQuery: MockedResponse = {
         request: {
-          query: gql`
+          query: gql(`
             mutation RequestDevice {
               requestFlashableDevice {
                 id
               }
             }
-          `,
+          `),
         },
         result: {
           data: {

src/renderer/components/firmware/DownloadFirmwareButton.tsx

@@ -1,5 +1,6 @@
 import { DownloadOutlined } from "@ant-design/icons";
-import { gql, useApolloClient } from "@apollo/client";
+import { useApolloClient } from "@apollo/client";
+import gql from "gql";
 import { Button, message } from "antd";
 import React, { useState } from "react";
 import { decodePrVersion, isPrVersion } from "shared/tools";
@@ -78,7 +79,7 @@ const DownloadFirmwareButton: React.FC<Props> = ({
     if (isCloudBuild && isCloudBuildValid) {
       const flags = selectedFlags as { name: string; value: string }[];
       const response = await client.query({
-        query: gql(/* GraphQL */ `
+        query: gql(`
           query CloudFirmware($params: CloudFirmwareParams!) {
             cloudFirmware(params: $params) {
               base64Data
@@ -102,7 +103,7 @@ const DownloadFirmwareButton: React.FC<Props> = ({
       );
     } else if (validPrVersion) {
       const response = await client.query({
-        query: gql(/* GraphQL */ `
+        query: gql(`
           query PrBuildFirmwareData($prId: ID!, $commitId: ID!, $target: ID!) {
             edgeTxPr(id: $prId) {
               id
@@ -137,7 +138,7 @@ const DownloadFirmwareButton: React.FC<Props> = ({
       }
     } else if (!isLocal && target && version) {
       const response = await client.query({
-        query: gql(/* GraphQL */ `
+        query: gql(`
           query ReleaseFirmwareData($version: ID!, $target: ID!) {
             edgeTxRelease(id: $version) {
               id

src/renderer/components/firmware/FirmwareSummary.tsx

@@ -1,4 +1,5 @@
-import { gql, useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client";
+import gql from "gql";
 import { Skeleton } from "antd";
 import React from "react";
 import { Centered } from "renderer/shared/layouts";
@@ -18,7 +19,7 @@ const FirmwareSummary: React.FC<{
   const isPr = isPrVersion(version);
 
   const releaseInfoQuery = useQuery(
-    gql(/* GraphQL */ `
+    gql(`
       query ReleaseInfo($version: ID!, $target: ID!) {
         edgeTxRelease(id: $version) {
           id
@@ -44,7 +45,7 @@ const FirmwareSummary: React.FC<{
   );
 
   const firmwareFileQuery = useQuery(
-    gql(/* GraphQL */ `
+    gql(`
       query LocalFirmwareInfo($fileId: ID!) {
         localFirmware(byId: $fileId) {
           id
@@ -63,7 +64,7 @@ const FirmwareSummary: React.FC<{
   const prVersion = decodePrVersion(version);
 
   const prFirmwareQuery = useQuery(
-    gql(/* GraphQL */ `
+    gql(`
       query PrFirmwareInfo($prId: ID!, $commitId: ID!, $target: ID!) {
         edgeTxPr(id: $prId) {
           id

src/renderer/hooks/useCancelFlashJob.ts

@@ -1,9 +1,10 @@
-import { gql, useMutation } from "@apollo/client";
+import { useMutation } from "@apollo/client";
+import gql from "gql";
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export default (jobId?: string) => {
   const [cancelJob] = useMutation(
-    gql(/* GraphQL */ `
+    gql(`
       mutation CancelFlashJob($jobId: ID!) {
         cancelFlashJob(jobId: $jobId)
       }

src/renderer/hooks/useCreateFlashJob.ts

@@ -1,7 +1,8 @@
-import { gql, useApolloClient } from "@apollo/client";
+import { useApolloClient } from "@apollo/client";
+import gql from "gql";
 import { useCallback, useMemo, useState } from "react";
 
-const createQuery = gql(/* GraphQL */ `
+const createQuery = gql(`
   mutation CreateFlashJob($firmware: FlashFirmwareInput!, $deviceId: ID!) {
     createFlashJob(firmware: $firmware, deviceId: $deviceId) {
       id
@@ -31,7 +32,7 @@ export default () => {
                 ""
             );
           });
-        result.finally(() => {
+        void result.finally(() => {
           setLoading(false);
         });
 

src/renderer/hooks/useFlashJobStatus.ts

@@ -1,11 +1,12 @@
-import { gql, useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client";
+import gql from "gql";
 import { exception } from "react-ga";
 import { useEffect } from "react";
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export default (jobId?: string) => {
   const { data, subscribeToMore, error, loading } = useQuery(
-    gql(/* GraphQL */ `
+    gql(`
       query FlashJobStatus($jobId: ID!) {
         flashJobStatus(jobId: $jobId) {
           id
@@ -60,7 +61,7 @@ export default (jobId?: string) => {
   useEffect(() => {
     if (jobId) {
       const unsub = subscribeToMore({
-        document: gql(/* GraphQL */ `
+        document: gql(`
           subscription FlashJobUpdates($jobId: ID!) {
             flashJobStatusUpdates(jobId: $jobId) {
               id