From ba3e7d9fa7d46e4c636148bbf01552833db0ceda Mon Sep 17 00:00:00 2001
From: Lenz Weber-Tronic <lorenz.weber-tronic@apollographql.com>
Date: Tue, 1 Aug 2023 10:19:18 +0200
Subject: [PATCH] Apply Prettier (#11111)

* flip .prettierignore to list ignored files
* apply formatting to currently not-ignored files
* upgrade prettier to v3
* apply agreed-up change to `"singleQuote": false`
* move prettier config into file
* format integration-tests
* format config folder
* ignore snap files per default
* format the whole non-ignored repo
* format `react` folder tests
* format `react` folder
---
 .attw.json                                    |    5 +-
 .eslintrc                                     |   13 +-
 .github/workflows/close-stale-issues.yml      |  216 +-
 .github/workflows/lock.yml                    |   12 +-
 .prettierignore                               |  302 +-
 .prettierrc                                   |    8 +
 .size-limit.cjs                               |   82 +-
 .vscode/launch.json                           |   12 +-
 .vscode/settings.json                         |    6 +-
 config/bundlesize.ts                          |   16 +-
 config/entryPoints.js                         |   70 +-
 config/helpers.ts                             |   20 +-
 config/jest.config.js                         |   28 +-
 config/postprocessDist.ts                     |   18 +-
 config/precheck.js                            |   13 +-
 config/prepareDist.js                         |   60 +-
 config/processInvariants.ts                   |  109 +-
 config/rewriteSourceMaps.ts                   |   64 +-
 config/rollup.config.js                       |   79 +-
 config/tsconfig.json                          |    4 +-
 config/version.js                             |   30 +-
 .../browser-esm/html/jsdeliver-esm.html       |   80 +-
 .../browser-esm/html/jspm-prepared.html       |  118 +-
 .../browser-esm/html/unpkg-unmangled.html     |  112 +-
 .../browser-esm/playwright.config.ts          |    4 +-
 .../tests/playwright/jsdeliver-esm.test.ts    |   14 +-
 .../tests/playwright/jspm-prepared.test.ts    |   14 +-
 .../tests/playwright/unpkg-unmangled.test.ts  |   14 +-
 integration-tests/cra4/playwright.config.ts   |    4 +-
 integration-tests/cra4/public/index.html      |   37 +-
 integration-tests/cra4/src/App.tsx            |   12 +-
 integration-tests/cra4/src/index.tsx          |    8 +-
 .../tests/playwright/apollo-client.test.ts    |   14 +-
 integration-tests/cra4/tsconfig.json          |   10 +-
 integration-tests/cra5/playwright.config.ts   |    4 +-
 integration-tests/cra5/public/index.html      |   33 +-
 integration-tests/cra5/src/App.tsx            |   12 +-
 integration-tests/cra5/src/index.tsx          |    8 +-
 .../tests/playwright/apollo-client.test.ts    |   14 +-
 integration-tests/cra5/tsconfig.json          |   10 +-
 integration-tests/next/next.config.js         |    4 +-
 integration-tests/next/playwright.config.ts   |    4 +-
 .../next/src/app/cc/ApolloWrapper.tsx         |   22 +-
 integration-tests/next/src/app/cc/layout.tsx  |    2 +-
 integration-tests/next/src/app/cc/page.tsx    |    8 +-
 integration-tests/next/src/app/client.ts      |    6 +-
 integration-tests/next/src/app/layout.tsx     |    4 +-
 integration-tests/next/src/app/page.tsx       |    6 +-
 .../next/src/libs/apolloClient.ts             |   30 +-
 integration-tests/next/src/libs/schemaLink.ts |    4 +-
 integration-tests/next/src/pages/_app.tsx     |    6 +-
 .../next/src/pages/pages-no-ssr.tsx           |    6 +-
 integration-tests/next/src/pages/pages.tsx    |   12 +-
 .../tests/playwright/apollo-client.test.ts    |   32 +-
 integration-tests/node-esm/test-cjs.cjs       |   26 +-
 integration-tests/node-esm/test-esm.mjs       |   26 +-
 integration-tests/node-standard/test-cjs.js   |   26 +-
 integration-tests/node-standard/test-esm.mjs  |   26 +-
 integration-tests/shared/fixture.ts           |   22 +-
 integration-tests/shared/playwright.config.ts |    6 +-
 integration-tests/vite-swc/index.html         |   22 +-
 .../vite-swc/playwright.config.ts             |    4 +-
 integration-tests/vite-swc/src/App.tsx        |   12 +-
 integration-tests/vite-swc/src/main.tsx       |    8 +-
 .../tests/playwright/apollo-client.test.ts    |   14 +-
 integration-tests/vite-swc/vite.config.ts     |    6 +-
 integration-tests/vite/index.html             |   22 +-
 integration-tests/vite/playwright.config.ts   |    4 +-
 integration-tests/vite/src/App.tsx            |   12 +-
 integration-tests/vite/src/main.tsx           |   12 +-
 .../tests/playwright/apollo-client.test.ts    |   14 +-
 integration-tests/vite/vite.config.ts         |    6 +-
 package-lock.json                             |   42 +-
 package.json                                  |   10 +-
 src/core/__tests__/equalByQuery.ts            |  911 +--
 src/core/equalByQuery.ts                      |   12 +-
 src/dev/index.ts                              |    6 +-
 src/dev/loadDevMessages.ts                    |    4 +-
 src/dev/loadErrorMessageHandler.ts            |   10 +-
 src/dev/loadErrorMessages.ts                  |    4 +-
 .../__tests__/removeTypenameFromVariables.ts  |  156 +-
 src/link/remove-typename/index.ts             |    2 +-
 .../removeTypenameFromVariables.ts            |   16 +-
 src/react/cache/QueryReference.ts             |   52 +-
 src/react/cache/SuspenseCache.ts              |   14 +-
 src/react/cache/getSuspenseCache.ts           |   10 +-
 src/react/cache/index.ts                      |   20 +-
 src/react/cache/types.ts                      |    6 +-
 src/react/components/Mutation.tsx             |   10 +-
 src/react/components/Query.tsx                |   17 +-
 src/react/components/Subscription.tsx         |   21 +-
 .../__tests__/client/Mutation.test.tsx        |  751 ++-
 .../__tests__/client/Query.test.tsx           |  608 +-
 .../__tests__/client/Subscription.test.tsx    |  273 +-
 .../__tests__/ssr/getDataFromTree.test.tsx    |  137 +-
 .../components/__tests__/ssr/server.test.tsx  |  120 +-
 src/react/components/index.ts                 |    8 +-
 src/react/components/types.ts                 |   20 +-
 src/react/context/ApolloConsumer.tsx          |   12 +-
 src/react/context/ApolloContext.ts            |   32 +-
 src/react/context/ApolloProvider.tsx          |   10 +-
 .../context/__tests__/ApolloConsumer.test.tsx |   32 +-
 .../context/__tests__/ApolloProvider.test.tsx |  133 +-
 src/react/context/index.ts                    |   10 +-
 .../hoc/__tests__/client-option.test.tsx      |  192 +-
 src/react/hoc/__tests__/fragments.test.tsx    |  135 +-
 .../hoc/__tests__/mutations/index.test.tsx    |  226 +-
 .../__tests__/mutations/lifecycle.test.tsx    |  146 +-
 .../hoc/__tests__/mutations/queries.test.tsx  |  410 +-
 .../mutations/recycled-queries.test.tsx       |  150 +-
 src/react/hoc/__tests__/queries/api.test.tsx  |  314 +-
 .../hoc/__tests__/queries/errors.test.tsx     |  793 +--
 .../hoc/__tests__/queries/index.test.tsx      |  627 +-
 .../hoc/__tests__/queries/lifecycle.test.tsx  |  208 +-
 .../hoc/__tests__/queries/loading.test.tsx    | 1073 +--
 .../queries/observableQuery.test.tsx          |  427 +-
 .../hoc/__tests__/queries/polling.test.tsx    |  231 +-
 .../__tests__/queries/recomposeWithState.ts   |    5 +-
 .../hoc/__tests__/queries/reducer.test.tsx    |  281 +-
 src/react/hoc/__tests__/queries/skip.test.tsx | 1333 ++--
 .../__tests__/queries/updateQuery.test.tsx    |  404 +-
 .../hoc/__tests__/shared-operations.test.tsx  |  102 +-
 .../__tests__/ssr/getDataFromTree.test.tsx    |  512 +-
 src/react/hoc/__tests__/ssr/server.test.tsx   |  170 +-
 src/react/hoc/__tests__/statics.test.tsx      |   24 +-
 .../subscriptions/subscriptions.test.tsx      |  132 +-
 src/react/hoc/graphql.tsx                     |   16 +-
 src/react/hoc/hoc-utils.tsx                   |   18 +-
 src/react/hoc/index.ts                        |   14 +-
 src/react/hoc/mutation-hoc.tsx                |   83 +-
 src/react/hoc/query-hoc.tsx                   |   43 +-
 src/react/hoc/subscription-hoc.tsx            |   48 +-
 src/react/hoc/types.ts                        |   30 +-
 src/react/hoc/withApollo.tsx                  |   24 +-
 .../hooks/__tests__/useApolloClient.test.tsx  |   22 +-
 .../__tests__/useBackgroundQuery.test.tsx     | 1100 ++--
 .../hooks/__tests__/useFragment.test.tsx      | 1082 ++--
 .../hooks/__tests__/useLazyQuery.test.tsx     | 1451 +++--
 .../hooks/__tests__/useMutation.test.tsx      | 2109 +++---
 src/react/hooks/__tests__/useQuery.test.tsx   | 5767 ++++++++++-------
 .../hooks/__tests__/useReactiveVar.test.tsx   |  216 +-
 .../hooks/__tests__/useSubscription.test.tsx  |  723 ++-
 .../hooks/__tests__/useSuspenseQuery.test.tsx | 2454 +++----
 src/react/hooks/index.ts                      |   22 +-
 .../internal/__tests__/useDeepMemo.test.ts    |   16 +-
 src/react/hooks/internal/__use.ts             |   12 +-
 src/react/hooks/internal/index.ts             |    6 +-
 src/react/hooks/internal/useDeepMemo.ts       |    6 +-
 .../internal/useIsomorphicLayoutEffect.ts     |    4 +-
 src/react/hooks/useApolloClient.ts            |   14 +-
 src/react/hooks/useBackgroundQuery.ts         |   60 +-
 src/react/hooks/useFragment.ts                |   47 +-
 src/react/hooks/useLazyQuery.ts               |  100 +-
 src/react/hooks/useMutation.ts                |  219 +-
 src/react/hooks/useQuery.ts                   |  395 +-
 src/react/hooks/useReactiveVar.ts             |    4 +-
 src/react/hooks/useReadQuery.ts               |   13 +-
 src/react/hooks/useSubscription.ts            |   60 +-
 src/react/hooks/useSuspenseQuery.ts           |   90 +-
 src/react/hooks/useSyncExternalStore.ts       |  168 +-
 src/react/index.ts                            |   16 +-
 src/react/parser/__tests__/parser.test.ts     |   38 +-
 src/react/parser/index.ts                     |   66 +-
 src/react/ssr/RenderPromises.ts               |   54 +-
 src/react/ssr/__tests__/useLazyQuery.test.tsx |   40 +-
 src/react/ssr/__tests__/useQuery.test.tsx     |  197 +-
 .../ssr/__tests__/useReactiveVar.test.tsx     |   27 +-
 src/react/ssr/getDataFromTree.ts              |   36 +-
 src/react/ssr/index.ts                        |    6 +-
 src/react/ssr/renderToStringWithData.ts       |    8 +-
 src/react/types/types.ts                      |  185 +-
 src/testing/matchers/index.d.ts               |   18 +-
 src/testing/matchers/index.ts                 |    6 +-
 .../matchers/toHaveSuspenseCacheEntryUsing.ts |   22 +-
 src/testing/matchers/toMatchDocument.ts       |   20 +-
 src/utilities/common/__tests__/omitDeep.ts    |  120 +-
 .../common/__tests__/stripTypename.ts         |   52 +-
 src/utilities/common/omitDeep.ts              |    4 +-
 src/utilities/common/stripTypename.ts         |    4 +-
 src/utilities/globals/invariantWrappers.ts    |   16 +-
 src/utilities/graphql/DocumentTransform.ts    |   12 +-
 .../graphql/__tests__/DocumentTransform.ts    |   94 +-
 src/utilities/graphql/operations.ts           |   12 +-
 src/utilities/graphql/print.ts                |    4 +-
 src/utilities/promises/decoration.ts          |   22 +-
 src/utilities/types/DeepOmit.ts               |    2 +-
 src/utilities/types/DeepPartial.ts            |    2 +-
 tsconfig.json                                 |    4 +-
 188 files changed, 16401 insertions(+), 14589 deletions(-)
 create mode 100644 .prettierrc

diff --git a/.attw.json b/.attw.json
index 7e5b3c23693..a1e00f328b4 100644
--- a/.attw.json
+++ b/.attw.json
@@ -1,6 +1,3 @@
 {
-  "ignoreRules": [
-    "false-esm",
-    "cjs-resolves-to-esm"
-  ]
+  "ignoreRules": ["false-esm", "cjs-resolves-to-esm"]
 }
diff --git a/.eslintrc b/.eslintrc
index 02a8f6d9027..182b279483c 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -24,11 +24,14 @@
       "files": ["**/*.ts", "**/*.tsx"],
       "excludedFiles": ["**/__tests__/**/*.*"],
       "rules": {
-        "@typescript-eslint/consistent-type-imports": ["error", {
-          "prefer": "type-imports",
-          "disallowTypeAnnotations": false,
-          "fixStyle": "separate-type-imports"
-        }],
+        "@typescript-eslint/consistent-type-imports": [
+          "error",
+          {
+            "prefer": "type-imports",
+            "disallowTypeAnnotations": false,
+            "fixStyle": "separate-type-imports"
+          }
+        ],
         "@typescript-eslint/no-import-type-side-effects": "error",
         "no-restricted-syntax": [
           "error",
diff --git a/.github/workflows/close-stale-issues.yml b/.github/workflows/close-stale-issues.yml
index 0e533202e5e..5d54d58ea6d 100644
--- a/.github/workflows/close-stale-issues.yml
+++ b/.github/workflows/close-stale-issues.yml
@@ -7,7 +7,7 @@ name: Mark stale issues and pull requests
 
 on:
   schedule:
-  - cron: '15 5 * * *'
+    - cron: "15 5 * * *"
 
 jobs:
   stale:
@@ -19,161 +19,161 @@ jobs:
       pull-requests: write
 
     steps:
-    - name: Close Stale Issues
-      uses: actions/stale@v8.0.0
-      with:
-        # # Token for the repository. Can be passed in using `{{ secrets.GITHUB_TOKEN }}`.
-        # repo-token: # optional, default is ${{ github.token }}
+      - name: Close Stale Issues
+        uses: actions/stale@v8.0.0
+        with:
+          # # Token for the repository. Can be passed in using `{{ secrets.GITHUB_TOKEN }}`.
+          # repo-token: # optional, default is ${{ github.token }}
 
-        # # The message to post on the issue when tagging it. If none provided, will not mark issues stale.
-        #. stale-issue-message: # optional
+          # # The message to post on the issue when tagging it. If none provided, will not mark issues stale.
+          #. stale-issue-message: # optional
 
-        # # The message to post on the pull request when tagging it. If none provided, will not mark pull requests stale.
-        # stale-pr-message: # optional
+          # # The message to post on the pull request when tagging it. If none provided, will not mark pull requests stale.
+          # stale-pr-message: # optional
 
-        # The message to post on the issue when closing it. If none provided, will not comment when closing an issue.
-        close-issue-message: "We're closing this issue now but feel free to ping the maintainers or open a new issue if you still need support.  Thank you!"
+          # The message to post on the issue when closing it. If none provided, will not comment when closing an issue.
+          close-issue-message: "We're closing this issue now but feel free to ping the maintainers or open a new issue if you still need support.  Thank you!"
 
-        # # The message to post on the pull request when closing it. If none provided, will not comment when closing a pull requests.
-        # close-pr-message: # optional
+          # # The message to post on the pull request when closing it. If none provided, will not comment when closing a pull requests.
+          # close-pr-message: # optional
 
-        # The number of days old an issue or a pull request can be before marking it stale. Set to -1 to never mark issues or pull requests as stale automatically.
-        days-before-stale: -1
+          # The number of days old an issue or a pull request can be before marking it stale. Set to -1 to never mark issues or pull requests as stale automatically.
+          days-before-stale: -1
 
-        # The number of days old an issue can be before marking it stale. Set to -1 to never mark issues as stale automatically. Override "days-before-stale" option regarding only the issues.
-        days-before-issue-stale: -1
+          # The number of days old an issue can be before marking it stale. Set to -1 to never mark issues as stale automatically. Override "days-before-stale" option regarding only the issues.
+          days-before-issue-stale: -1
 
-        # The number of days old a pull request can be before marking it stale. Set to -1 to never mark pull requests as stale automatically. Override "days-before-stale" option regarding only the pull requests.
-        days-before-pr-stale: -1
+          # The number of days old a pull request can be before marking it stale. Set to -1 to never mark pull requests as stale automatically. Override "days-before-stale" option regarding only the pull requests.
+          days-before-pr-stale: -1
 
-        # The number of days to wait to close an issue or a pull request after it being marked stale. Set to -1 to never close stale issues or pull requests.
-        days-before-close: -1
+          # The number of days to wait to close an issue or a pull request after it being marked stale. Set to -1 to never close stale issues or pull requests.
+          days-before-close: -1
 
-        # The number of days to wait to close an issue after it being marked stale. Set to -1 to never close stale issues. Override "days-before-close" option regarding only the issues.
-        days-before-issue-close: 30
+          # The number of days to wait to close an issue after it being marked stale. Set to -1 to never close stale issues. Override "days-before-close" option regarding only the issues.
+          days-before-issue-close: 30
 
-        # The number of days to wait to close a pull request after it being marked stale. Set to -1 to never close stale pull requests. Override "days-before-close" option regarding only the pull requests.
-        days-before-pr-close: -1
+          # The number of days to wait to close a pull request after it being marked stale. Set to -1 to never close stale pull requests. Override "days-before-close" option regarding only the pull requests.
+          days-before-pr-close: -1
 
-        # The label to apply when an issue is stale.
-        stale-issue-label: "🏓 awaiting-contributor-response"
+          # The label to apply when an issue is stale.
+          stale-issue-label: "🏓 awaiting-contributor-response"
 
-        # # The label to apply when an issue is closed.
-        # close-issue-label: # optional
+          # # The label to apply when an issue is closed.
+          # close-issue-label: # optional
 
-        # # The labels that mean an issue is exempt from being marked stale. Separate multiple labels with commas (eg. "label1,label2").
-        # exempt-issue-labels: # optional, default is 
+          # # The labels that mean an issue is exempt from being marked stale. Separate multiple labels with commas (eg. "label1,label2").
+          # exempt-issue-labels: # optional, default is
 
-        # The reason to use when closing an issue.
-        close-issue-reason: not_planned
+          # The reason to use when closing an issue.
+          close-issue-reason: not_planned
 
-        # # The label to apply when a pull request is stale.
-        # stale-pr-label: # optional, default is Stale
+          # # The label to apply when a pull request is stale.
+          # stale-pr-label: # optional, default is Stale
 
-        # # The label to apply when a pull request is closed.
-        # close-pr-label: # optional
+          # # The label to apply when a pull request is closed.
+          # close-pr-label: # optional
 
-        # # The labels that mean a pull request is exempt from being marked as stale. Separate multiple labels with commas (eg. "label1,label2").
-        # exempt-pr-labels: # optional, default is 
+          # # The labels that mean a pull request is exempt from being marked as stale. Separate multiple labels with commas (eg. "label1,label2").
+          # exempt-pr-labels: # optional, default is
 
-        # # The milestones that mean an issue or a pull request is exempt from being marked as stale. Separate multiple milestones with commas (eg. "milestone1,milestone2").
-        # exempt-milestones: # optional, default is 
+          # # The milestones that mean an issue or a pull request is exempt from being marked as stale. Separate multiple milestones with commas (eg. "milestone1,milestone2").
+          # exempt-milestones: # optional, default is
 
-        # # The milestones that mean an issue is exempt from being marked as stale. Separate multiple milestones with commas (eg. "milestone1,milestone2"). Override "exempt-milestones" option regarding only the issues.
-        # exempt-issue-milestones: # optional, default is 
+          # # The milestones that mean an issue is exempt from being marked as stale. Separate multiple milestones with commas (eg. "milestone1,milestone2"). Override "exempt-milestones" option regarding only the issues.
+          # exempt-issue-milestones: # optional, default is
 
-        # # The milestones that mean a pull request is exempt from being marked as stale. Separate multiple milestones with commas (eg. "milestone1,milestone2"). Override "exempt-milestones" option regarding only the pull requests.
-        # exempt-pr-milestones: # optional, default is 
+          # # The milestones that mean a pull request is exempt from being marked as stale. Separate multiple milestones with commas (eg. "milestone1,milestone2"). Override "exempt-milestones" option regarding only the pull requests.
+          # exempt-pr-milestones: # optional, default is
 
-        # # Exempt all issues and pull requests with milestones from being marked as stale. Default to false.
-        # exempt-all-milestones: # optional, default is false
+          # # Exempt all issues and pull requests with milestones from being marked as stale. Default to false.
+          # exempt-all-milestones: # optional, default is false
 
-        # # Exempt all issues with milestones from being marked as stale. Override "exempt-all-milestones" option regarding only the issues.
-        # exempt-all-issue-milestones: # optional, default is 
+          # # Exempt all issues with milestones from being marked as stale. Override "exempt-all-milestones" option regarding only the issues.
+          # exempt-all-issue-milestones: # optional, default is
 
-        # # Exempt all pull requests with milestones from being marked as stale. Override "exempt-all-milestones" option regarding only the pull requests.
-        # exempt-all-pr-milestones: # optional, default is 
+          # # Exempt all pull requests with milestones from being marked as stale. Override "exempt-all-milestones" option regarding only the pull requests.
+          # exempt-all-pr-milestones: # optional, default is
 
-        # # Only issues or pull requests with all of these labels are checked if stale. Defaults to `` (disabled) and can be a comma-separated list of labels.
-        # only-labels: # optional, default is 
+          # # Only issues or pull requests with all of these labels are checked if stale. Defaults to `` (disabled) and can be a comma-separated list of labels.
+          # only-labels: # optional, default is
 
-        # # Only issues or pull requests with at least one of these labels are checked if stale. Defaults to `` (disabled) and can be a comma-separated list of labels.
-        # any-of-labels: # optional, default is 
+          # # Only issues or pull requests with at least one of these labels are checked if stale. Defaults to `` (disabled) and can be a comma-separated list of labels.
+          # any-of-labels: # optional, default is
 
-        # Only issues with at least one of these labels are checked if stale. Defaults to `` (disabled) and can be a comma-separated list of labels. Override "any-of-labels" option regarding only the issues.
-        any-of-issue-labels: "🏓 awaiting-contributor-response"
+          # Only issues with at least one of these labels are checked if stale. Defaults to `` (disabled) and can be a comma-separated list of labels. Override "any-of-labels" option regarding only the issues.
+          any-of-issue-labels: "🏓 awaiting-contributor-response"
 
-        # # Only pull requests with at least one of these labels are checked if stale. Defaults to `` (disabled) and can be a comma-separated list of labels. Override "any-of-labels" option regarding only the pull requests.
-        # any-of-pr-labels: # optional, default is 
+          # # Only pull requests with at least one of these labels are checked if stale. Defaults to `` (disabled) and can be a comma-separated list of labels. Override "any-of-labels" option regarding only the pull requests.
+          # any-of-pr-labels: # optional, default is
 
-        # # Only issues with all of these labels are checked if stale. Defaults to `[]` (disabled) and can be a comma-separated list of labels. Override "only-labels" option regarding only the issues.
-        # only-issue-labels: # optional, default is 
+          # # Only issues with all of these labels are checked if stale. Defaults to `[]` (disabled) and can be a comma-separated list of labels. Override "only-labels" option regarding only the issues.
+          # only-issue-labels: # optional, default is
 
-        # # Only pull requests with all of these labels are checked if stale. Defaults to `[]` (disabled) and can be a comma-separated list of labels. Override "only-labels" option regarding only the pull requests.
-        # only-pr-labels: # optional, default is 
+          # # Only pull requests with all of these labels are checked if stale. Defaults to `[]` (disabled) and can be a comma-separated list of labels. Override "only-labels" option regarding only the pull requests.
+          # only-pr-labels: # optional, default is
 
-        # The maximum number of operations per run, used to control rate limiting (GitHub API CRUD related).
-        operations-per-run: 500 # optional, default is 30
+          # The maximum number of operations per run, used to control rate limiting (GitHub API CRUD related).
+          operations-per-run: 500 # optional, default is 30
 
-        # Remove stale labels from issues and pull requests when they are updated or commented on.
-        remove-stale-when-updated: false
+          # Remove stale labels from issues and pull requests when they are updated or commented on.
+          remove-stale-when-updated: false
 
-        # Remove stale labels from issues when they are updated or commented on. Override "remove-stale-when-updated" option regarding only the issues.
-        remove-issue-stale-when-updated: true
+          # Remove stale labels from issues when they are updated or commented on. Override "remove-stale-when-updated" option regarding only the issues.
+          remove-issue-stale-when-updated: true
 
-        # Remove stale labels from pull requests when they are updated or commented on. Override "remove-stale-when-updated" option regarding only the pull requests.
-        remove-pr-stale-when-updated: false
+          # Remove stale labels from pull requests when they are updated or commented on. Override "remove-stale-when-updated" option regarding only the pull requests.
+          remove-pr-stale-when-updated: false
 
-        # Run the processor in debug mode without actually performing any operations on live issues.
-        debug-only: false
+          # Run the processor in debug mode without actually performing any operations on live issues.
+          debug-only: false
 
-        # # The order to get issues or pull requests. Defaults to false, which is descending.
-        # ascending: # optional, default is false
+          # # The order to get issues or pull requests. Defaults to false, which is descending.
+          # ascending: # optional, default is false
 
-        # Delete the git branch after closing a stale pull request.
-        delete-branch: false
+          # Delete the git branch after closing a stale pull request.
+          delete-branch: false
 
-        # # The date used to skip the stale action on issue/pull request created before it (ISO 8601 or RFC 2822).
-        # start-date: # optional, default is 
+          # # The date used to skip the stale action on issue/pull request created before it (ISO 8601 or RFC 2822).
+          # start-date: # optional, default is
 
-        # # The assignees which exempt an issue or a pull request from being marked as stale. Separate multiple assignees with commas (eg. "user1,user2").
-        # exempt-assignees: # optional, default is 
+          # # The assignees which exempt an issue or a pull request from being marked as stale. Separate multiple assignees with commas (eg. "user1,user2").
+          # exempt-assignees: # optional, default is
 
-        # # The assignees which exempt an issue from being marked as stale. Separate multiple assignees with commas (eg. "user1,user2"). Override "exempt-assignees" option regarding only the issues.
-        # exempt-issue-assignees: # optional, default is 
+          # # The assignees which exempt an issue from being marked as stale. Separate multiple assignees with commas (eg. "user1,user2"). Override "exempt-assignees" option regarding only the issues.
+          # exempt-issue-assignees: # optional, default is
 
-        # # The assignees which exempt a pull request from being marked as stale. Separate multiple assignees with commas (eg. "user1,user2"). Override "exempt-assignees" option regarding only the pull requests.
-        # exempt-pr-assignees: # optional, default is 
+          # # The assignees which exempt a pull request from being marked as stale. Separate multiple assignees with commas (eg. "user1,user2"). Override "exempt-assignees" option regarding only the pull requests.
+          # exempt-pr-assignees: # optional, default is
 
-        # # Exempt all issues and pull requests with assignees from being marked as stale. Default to false.
-        # exempt-all-assignees: # optional, default is false
+          # # Exempt all issues and pull requests with assignees from being marked as stale. Default to false.
+          # exempt-all-assignees: # optional, default is false
 
-        # Exempt all issues with assignees from being marked as stale. Override "exempt-all-assignees" option regarding only the issues.
-        exempt-all-issue-assignees: true
+          # Exempt all issues with assignees from being marked as stale. Override "exempt-all-assignees" option regarding only the issues.
+          exempt-all-issue-assignees: true
 
-        # # Exempt all pull requests with assignees from being marked as stale. Override "exempt-all-assignees" option regarding only the pull requests.
-        # exempt-all-pr-assignees: # optional, default is 
+          # # Exempt all pull requests with assignees from being marked as stale. Override "exempt-all-assignees" option regarding only the pull requests.
+          # exempt-all-pr-assignees: # optional, default is
 
-        # # Exempt draft pull requests from being marked as stale. Default to false.
-        # exempt-draft-pr: # optional, default is false
+          # # Exempt draft pull requests from being marked as stale. Default to false.
+          # exempt-draft-pr: # optional, default is false
 
-        # # Display some statistics at the end regarding the stale workflow (only when the logs are enabled).
-        enable-statistics: true
+          # # Display some statistics at the end regarding the stale workflow (only when the logs are enabled).
+          enable-statistics: true
 
-        # # A comma delimited list of labels to add when a stale issue or pull request receives activity and has the stale-issue-label or stale-pr-label removed from it.
-        # labels-to-add-when-unstale: # optional, default is 
+          # # A comma delimited list of labels to add when a stale issue or pull request receives activity and has the stale-issue-label or stale-pr-label removed from it.
+          # labels-to-add-when-unstale: # optional, default is
 
-        # A comma delimited list of labels to remove when a stale issue or pull request receives activity and has the stale-issue-label or stale-pr-label removed from it.
-        labels-to-remove-when-unstale: "🏓 awaiting-contributor-response"
+          # A comma delimited list of labels to remove when a stale issue or pull request receives activity and has the stale-issue-label or stale-pr-label removed from it.
+          labels-to-remove-when-unstale: "🏓 awaiting-contributor-response"
 
-        # Any update (update/comment) can reset the stale idle time on the issues and pull requests.
-        ignore-updates: false
+          # Any update (update/comment) can reset the stale idle time on the issues and pull requests.
+          ignore-updates: false
 
-        # Any update (update/comment) can reset the stale idle time on the issues. Override "ignore-updates" option regarding only the issues.
-        ignore-issue-updates: false
+          # Any update (update/comment) can reset the stale idle time on the issues. Override "ignore-updates" option regarding only the issues.
+          ignore-issue-updates: false
 
-        # Any update (update/comment) can reset the stale idle time on the pull requests. Override "ignore-updates" option regarding only the pull requests.
-        ignore-pr-updates: false
+          # Any update (update/comment) can reset the stale idle time on the pull requests. Override "ignore-updates" option regarding only the pull requests.
+          ignore-pr-updates: false
 
-        # # Only the issues or the pull requests with an assignee will be marked as stale automatically.
-        # include-only-assigned: # optional, default is false
+          # # Only the issues or the pull requests with an assignee will be marked as stale automatically.
+          # include-only-assigned: # optional, default is false
diff --git a/.github/workflows/lock.yml b/.github/workflows/lock.yml
index 65ae0c4f75e..8c050ae5b5e 100644
--- a/.github/workflows/lock.yml
+++ b/.github/workflows/lock.yml
@@ -1,8 +1,8 @@
-name: 'Lock Threads'
+name: "Lock Threads"
 
 on:
   schedule:
-    - cron: '0 0 * * *'
+    - cron: "0 0 * * *"
 
 permissions:
   issues: write
@@ -20,12 +20,12 @@ jobs:
         with:
           github-token: ${{ github.token }}
           log-output: true
-          issue-inactive-days: '30'
-          exclude-any-issue-labels: 'discussion'
+          issue-inactive-days: "30"
+          exclude-any-issue-labels: "discussion"
           issue-comment: >
             This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
 
             For general questions, we recommend using [StackOverflow](https://stackoverflow.com/questions/tagged/apollo-client) or our [discord server](https://discord.gg/graphos).
 
-          pr-inactive-days: '30'
-          exclude-any-pr-labels: 'discussion'
+          pr-inactive-days: "30"
+          exclude-any-pr-labels: "discussion"
diff --git a/.prettierignore b/.prettierignore
index 3f7a5b85c01..2175bae9705 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -15,95 +15,219 @@
 # Ignore all mdx & md files:
 *.mdx
 *.md
+*.har
+*.snap
 
-# Do not format anything automatically except files listed below
-/*
+node_modules/
+.yalc/
+.next/
 
-!config/
-config/*
-!config/processInvariants.ts
+# Ignore all files in /scripts directory
+/scripts
 
-!integration-tests/
-!integration-tests/**
-
-#####  PATHS TO BE FORMATTED #####
-!src/
-src/*
-!src/react/
-src/react/*
-
-!src/dev
-
-# Allow src/react/cache/ApolloProvider
-!src/react/context/
-src/react/context/*
-!src/react/context/ApolloProvider.tsx
-!src/react/context/ApolloContext.ts
-!src/react/context/__tests__/
-src/react/context/__tests__/*
-!src/react/context/__tests__/ApolloProvider.test.tsx
-
-# Allow src/react/cache
-!src/react/cache/
-
-# Allow certain core files
-!src/core
-src/core/*
-!src/core/__tests__/
-src/core/tests/*
-!src/core/__tests__/equalByQuery.ts
-!src/core/equalByQuery.ts
-
-# Allowed utilities
-!src/utilities/
-src/utilities/*
-!src/utilities/promises/
-!src/utilities/types/
-src/utilities/types/*
-!src/utilities/types/DeepOmit.ts
-!src/utilities/types/DeepPartial.ts
-!src/utilities/types/Primitive.ts
-!src/utilities/common
-src/utilities/common/*
-!src/utilities/common/stripTypename.ts
-!src/utilities/common/omitDeep.ts
-!src/utilities/common/tap.ts
-!src/utilities/common/__tests__/
-src/utilities/common/__tests__/*
-!src/utilities/common/__tests__/omitDeep.ts
-!src/utilities/common/__tests__/stripTypename.ts
-!src/utilities/globals
-src/utilities/globals/*
-!src/utilities/globals/invariantWrappers.ts
-!src/utilities/graphql
-src/utilities/graphql/*
-!src/utilities/graphql/operations.ts
-!src/utilities/graphql/print.ts
-!src/utilities/graphql/DocumentTransform.ts
-!src/utilities/graphql/__tests__/
-src/utilities/graphql/__tests__/*
-!src/utilities/graphql/__tests__/DocumentTransform.ts
-
-# Allowed links
-!src/link
-src/link/*
-!src/link/remove-typename
-
-## Allowed React Hooks
-!src/react/hooks/
-src/react/hooks/*
-!src/react/hooks/internal
-!src/react/hooks/useSuspenseCache.ts
-!src/react/hooks/useSuspenseQuery.ts
-!src/react/hooks/useBackgroundQuery.ts
-
-## Allowed React hook tests
-!src/react/hooks/__tests__/
-src/react/hooks/__tests__/*
-!src/react/hooks/__tests__/useSuspenseQuery.test.tsx
-!src/react/hooks/__tests__/useBackgroundQuery.test.tsx
-
-## Allowed testing utils
-!src/testing
-src/testing/*
-!src/testing/matchers
+/src/__tests__/ApolloClient.ts
+/src/__tests__/client.ts
+/src/__tests__/exports.ts
+/src/__tests__/fetchMore.ts
+/src/__tests__/graphqlSubscriptions.ts
+/src/__tests__/local-state/export.ts
+/src/__tests__/local-state/general.ts
+/src/__tests__/local-state/resolvers.ts
+/src/__tests__/local-state/subscriptions.ts
+/src/__tests__/mutationResults.ts
+/src/__tests__/optimistic.ts
+/src/__tests__/refetchQueries.ts
+/src/__tests__/resultCacheCleaning.ts
+/src/__tests__/subscribeToMore.ts
+/src/cache/core/__tests__/cache.ts
+/src/cache/core/cache.ts
+/src/cache/core/types/Cache.ts
+/src/cache/core/types/DataProxy.ts
+/src/cache/core/types/common.ts
+/src/cache/index.ts
+/src/cache/inmemory/__tests__/cache.ts
+/src/cache/inmemory/__tests__/diffAgainstStore.ts
+/src/cache/inmemory/__tests__/entityStore.ts
+/src/cache/inmemory/__tests__/fragmentMatcher.ts
+/src/cache/inmemory/__tests__/fragmentRegistry.ts
+/src/cache/inmemory/__tests__/helpers.ts
+/src/cache/inmemory/__tests__/key-extractor.ts
+/src/cache/inmemory/__tests__/object-canon.ts
+/src/cache/inmemory/__tests__/optimistic.ts
+/src/cache/inmemory/__tests__/policies.ts
+/src/cache/inmemory/__tests__/readFromStore.ts
+/src/cache/inmemory/__tests__/recordingCache.ts
+/src/cache/inmemory/__tests__/roundtrip.ts
+/src/cache/inmemory/__tests__/writeToStore.ts
+/src/cache/inmemory/entityStore.ts
+/src/cache/inmemory/fixPolyfills.native.ts
+/src/cache/inmemory/fixPolyfills.ts
+/src/cache/inmemory/fragmentRegistry.ts
+/src/cache/inmemory/helpers.ts
+/src/cache/inmemory/inMemoryCache.ts
+/src/cache/inmemory/key-extractor.ts
+/src/cache/inmemory/object-canon.ts
+/src/cache/inmemory/policies.ts
+/src/cache/inmemory/reactiveVars.ts
+/src/cache/inmemory/readFromStore.ts
+/src/cache/inmemory/types.ts
+/src/cache/inmemory/writeToStore.ts
+/src/config/jest/setup.ts
+/src/core/ApolloClient.ts
+/src/core/LocalState.ts
+/src/core/ObservableQuery.ts
+/src/core/QueryInfo.ts
+/src/core/QueryManager.ts
+/src/core/__tests__/LocalState.ts
+/src/core/__tests__/ObservableQuery.ts
+/src/core/__tests__/QueryManager/index.ts
+/src/core/__tests__/QueryManager/links.ts
+/src/core/__tests__/QueryManager/multiple-results.ts
+/src/core/__tests__/QueryManager/recycler.ts
+/src/core/__tests__/fetchPolicies.ts
+/src/core/index.ts
+/src/core/networkStatus.ts
+/src/core/types.ts
+/src/core/watchQueryOptions.ts
+/src/errors/__tests__/ApolloError.ts
+/src/errors/index.ts
+/src/index.ts
+/src/invariantErrorCodes.ts
+/src/link/batch-http/__tests__/batchHttpLink.ts
+/src/link/batch-http/batchHttpLink.ts
+/src/link/batch-http/index.ts
+/src/link/batch/__tests__/batchLink.ts
+/src/link/batch/batchLink.ts
+/src/link/batch/batching.ts
+/src/link/batch/index.ts
+/src/link/context/__tests__/index.ts
+/src/link/context/index.ts
+/src/link/core/ApolloLink.ts
+/src/link/core/__tests__/ApolloLink.ts
+/src/link/core/concat.ts
+/src/link/core/empty.ts
+/src/link/core/execute.ts
+/src/link/core/from.ts
+/src/link/core/index.ts
+/src/link/core/split.ts
+/src/link/core/types.ts
+/src/link/error/__tests__/index.ts
+/src/link/error/index.ts
+/src/link/http/HttpLink.ts
+/src/link/http/__tests__/HttpLink.ts
+/src/link/http/__tests__/checkFetcher.ts
+/src/link/http/__tests__/headerNormalization.ts
+/src/link/http/__tests__/helpers.ts
+/src/link/http/__tests__/parseAndCheckHttpResponse.ts
+/src/link/http/__tests__/responseIterator.ts
+/src/link/http/__tests__/responseIteratorNoAsyncIterator.ts
+/src/link/http/__tests__/selectHttpOptionsAndBody.ts
+/src/link/http/__tests__/selectURI.ts
+/src/link/http/__tests__/serializeFetchParameter.ts
+/src/link/http/checkFetcher.ts
+/src/link/http/createHttpLink.ts
+/src/link/http/createSignalIfSupported.ts
+/src/link/http/index.ts
+/src/link/http/iterators/async.ts
+/src/link/http/iterators/nodeStream.ts
+/src/link/http/iterators/promise.ts
+/src/link/http/iterators/reader.ts
+/src/link/http/parseAndCheckHttpResponse.ts
+/src/link/http/responseIterator.ts
+/src/link/http/rewriteURIForGET.ts
+/src/link/http/selectHttpOptionsAndBody.ts
+/src/link/http/selectURI.ts
+/src/link/http/serializeFetchParameter.ts
+/src/link/persisted-queries/__tests__/persisted-queries.test.ts
+/src/link/persisted-queries/__tests__/react.test.tsx
+/src/link/persisted-queries/index.ts
+/src/link/retry/__tests__/delayFunction.ts
+/src/link/retry/__tests__/retryFunction.ts
+/src/link/retry/__tests__/retryLink.ts
+/src/link/retry/delayFunction.ts
+/src/link/retry/index.ts
+/src/link/retry/retryFunction.ts
+/src/link/retry/retryLink.ts
+/src/link/schema/__tests__/schemaLink.ts
+/src/link/schema/index.ts
+/src/link/subscriptions/__tests__/graphqlWsLink.ts
+/src/link/subscriptions/index.ts
+/src/link/utils/__tests__/filterOperationVariables.ts
+/src/link/utils/__tests__/fromError.ts
+/src/link/utils/__tests__/fromPromise.ts
+/src/link/utils/__tests__/toPromise.ts
+/src/link/utils/__tests__/validateOperation.ts
+/src/link/utils/createOperation.ts
+/src/link/utils/filterOperationVariables.ts
+/src/link/utils/fromError.ts
+/src/link/utils/fromPromise.ts
+/src/link/utils/index.ts
+/src/link/utils/throwServerError.ts
+/src/link/utils/toPromise.ts
+/src/link/utils/transformOperation.ts
+/src/link/utils/validateOperation.ts
+/src/link/ws/__tests__/webSocketLink.ts
+/src/link/ws/index.ts
+/src/testing/core/index.ts
+/src/testing/core/itAsync.ts
+/src/testing/core/mocking/mockClient.ts
+/src/testing/core/mocking/mockFetch.ts
+/src/testing/core/mocking/mockLink.ts
+/src/testing/core/mocking/mockQueryManager.ts
+/src/testing/core/mocking/mockSubscriptionLink.ts
+/src/testing/core/mocking/mockWatchQuery.ts
+/src/testing/core/observableToPromise.ts
+/src/testing/core/subscribeAndCount.ts
+/src/testing/core/wait.ts
+/src/testing/core/withConsoleSpy.ts
+/src/testing/core/wrap.ts
+/src/testing/index.ts
+/src/testing/react/MockedProvider.tsx
+/src/testing/react/__tests__/MockedProvider.test.tsx
+/src/testing/react/__tests__/mockSubscriptionLink.test.tsx
+/src/utilities/common/__tests__/canUse.ts
+/src/utilities/common/__tests__/cloneDeep.ts
+/src/utilities/common/__tests__/compact.ts
+/src/utilities/common/__tests__/maybeDeepFeeze.ts
+/src/utilities/common/__tests__/mergeDeep.ts
+/src/utilities/common/arrays.ts
+/src/utilities/common/canUse.ts
+/src/utilities/common/cloneDeep.ts
+/src/utilities/common/compact.ts
+/src/utilities/common/errorHandling.ts
+/src/utilities/common/filterInPlace.ts
+/src/utilities/common/incrementalResult.ts
+/src/utilities/common/makeUniqueId.ts
+/src/utilities/common/maybeDeepFreeze.ts
+/src/utilities/common/mergeDeep.ts
+/src/utilities/common/mergeOptions.ts
+/src/utilities/common/objects.ts
+/src/utilities/common/responseIterator.ts
+/src/utilities/common/stringifyForDisplay.ts
+/src/utilities/globals/global.ts
+/src/utilities/globals/index.ts
+/src/utilities/globals/maybe.ts
+/src/utilities/graphql/__tests__/directives.ts
+/src/utilities/graphql/__tests__/fragments.ts
+/src/utilities/graphql/__tests__/getFromAST.ts
+/src/utilities/graphql/__tests__/storeUtils.ts
+/src/utilities/graphql/__tests__/transform.ts
+/src/utilities/graphql/directives.ts
+/src/utilities/graphql/fragments.ts
+/src/utilities/graphql/getFromAST.ts
+/src/utilities/graphql/storeUtils.ts
+/src/utilities/graphql/transform.ts
+/src/utilities/index.ts
+/src/utilities/observables/Concast.ts
+/src/utilities/observables/Observable.ts
+/src/utilities/observables/__tests__/Concast.ts
+/src/utilities/observables/__tests__/Observable.ts
+/src/utilities/observables/__tests__/asyncMap.ts
+/src/utilities/observables/__tests__/subclassing.ts
+/src/utilities/observables/asyncMap.ts
+/src/utilities/observables/iteration.ts
+/src/utilities/observables/subclassing.ts
+/src/utilities/policies/__tests__/relayStylePagination.test.ts
+/src/utilities/policies/pagination.ts
+/src/utilities/types/IsStrictlyAny.ts
+/src/version.ts
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 00000000000..c21d016783a
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "bracketSpacing": true,
+  "printWidth": 80,
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}
diff --git a/.size-limit.cjs b/.size-limit.cjs
index 653df42d84e..ab25a3df44e 100644
--- a/.size-limit.cjs
+++ b/.size-limit.cjs
@@ -1,16 +1,16 @@
 const checks = [
   {
     path: "dist/apollo-client.min.cjs",
-    limit: "38056"
+    limit: "38056",
   },
   {
     path: "dist/main.cjs",
-    import: "{ ApolloClient, InMemoryCache, HttpLink }"
+    import: "{ ApolloClient, InMemoryCache, HttpLink }",
   },
   {
     path: "dist/index.js",
     import: "{ ApolloClient, InMemoryCache, HttpLink }",
-    limit: "31971"
+    limit: "31971",
   },
   ...[
     "ApolloProvider",
@@ -21,38 +21,50 @@ const checks = [
     "useSuspenseQuery",
     "useBackgroundQuery",
     "useReadQuery",
-    "useFragment"
+    "useFragment",
   ].map((name) => ({ path: "dist/react/index.js", import: `{ ${name} }` })),
-].map((config) => ({
-  ...config,
-  name: config.name || config.import ? `import ${config.import} from "${config.path}"` : config.path,
-  ignore: [
-    ...(config.ignore || []),
-    "react",
-    "react-dom",
-    "@graphql-typed-document-node/core",
-    "@wry/context",
-    "@wry/equality",
-    "@wry/trie",
-    "graphql-tag",
-    "hoist-non-react-statics",
-    "optimism",
-    "prop-types",
-    "response-iterator",
-    "symbol-observable",
-    "ts-invariant",
-    "tslib",
-    "zen-observable-ts"
-  ],
-})).flatMap((value) => value.path == "dist/apollo-client.min.cjs" ? value : [{...value, limit: undefined}, {
-  ...value,
-  name: `${value.name} (production)`,
-  modifyEsbuildConfig(config){
-    config.define = {
-      "globalThis.__DEV__": `false`,
-    }
-    return config
-  }
-}]);
+]
+  .map((config) => ({
+    ...config,
+    name:
+      config.name || config.import
+        ? `import ${config.import} from "${config.path}"`
+        : config.path,
+    ignore: [
+      ...(config.ignore || []),
+      "react",
+      "react-dom",
+      "@graphql-typed-document-node/core",
+      "@wry/context",
+      "@wry/equality",
+      "@wry/trie",
+      "graphql-tag",
+      "hoist-non-react-statics",
+      "optimism",
+      "prop-types",
+      "response-iterator",
+      "symbol-observable",
+      "ts-invariant",
+      "tslib",
+      "zen-observable-ts",
+    ],
+  }))
+  .flatMap((value) =>
+    value.path == "dist/apollo-client.min.cjs"
+      ? value
+      : [
+          { ...value, limit: undefined },
+          {
+            ...value,
+            name: `${value.name} (production)`,
+            modifyEsbuildConfig(config) {
+              config.define = {
+                "globalThis.__DEV__": `false`,
+              };
+              return config;
+            },
+          },
+        ]
+  );
 
 module.exports = checks;
diff --git a/.vscode/launch.json b/.vscode/launch.json
index 460c43a7a7d..6cdb71bc99d 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -5,9 +5,7 @@
       "name": "Attach to Node.js inspector",
       "port": 9229,
       "request": "attach",
-      "skipFiles": [
-        "<node_internals>/**"
-      ],
+      "skipFiles": ["<node_internals>/**"],
       "type": "pwa-node"
     },
     {
@@ -15,16 +13,12 @@
       "request": "launch",
       "name": "Jest Current File",
       "program": "${workspaceFolder}/node_modules/.bin/jest",
-      "args": [
-        "${relativeFile}",
-        "--config",
-        "./config/jest.config.js"
-      ],
+      "args": ["${relativeFile}", "--config", "./config/jest.config.js"],
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen",
       "disableOptimisticBPs": true,
       "windows": {
-        "program": "${workspaceFolder}/node_modules/jest/bin/jest",
+        "program": "${workspaceFolder}/node_modules/jest/bin/jest"
       }
     }
   ]
diff --git a/.vscode/settings.json b/.vscode/settings.json
index e343acdb09c..dddb0e3d487 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -5,8 +5,6 @@
   "files.trimTrailingWhitespace": true,
   "files.insertFinalNewline": true,
   "typescript.tsdk": "node_modules/typescript/lib",
-  "cSpell.enableFiletypes": [
-    "mdx"
-  ],
-  "jest.jestCommandLine": "node_modules/.bin/jest --config ./config/jest.config.js --ignoreProjects 'ReactDOM 17' --runInBand",
+  "cSpell.enableFiletypes": ["mdx"],
+  "jest.jestCommandLine": "node_modules/.bin/jest --config ./config/jest.config.js --ignoreProjects 'ReactDOM 17' --runInBand"
 }
diff --git a/config/bundlesize.ts b/config/bundlesize.ts
index d0529f47439..4a5ad18177b 100644
--- a/config/bundlesize.ts
+++ b/config/bundlesize.ts
@@ -9,15 +9,13 @@ const minPath = join(__dirname, "..", minFile);
 const gzipByteLen = gzipSync(readFileSync(minPath)).byteLength;
 const overLimit = gzipByteLen > gzipBundleByteLengthLimit;
 
-const message = `Minified + GZIP-encoded bundle size for ${
-  minFile
-} = ${
-  bytes(gzipByteLen, { unit: "KB" })
-}, ${
-  overLimit ? "exceeding" : "under"
-} limit ${
-  bytes(gzipBundleByteLengthLimit, { unit: "KB" })
-}`;
+const message = `Minified + GZIP-encoded bundle size for ${minFile} = ${bytes(
+  gzipByteLen,
+  { unit: "KB" }
+)}, ${overLimit ? "exceeding" : "under"} limit ${bytes(
+  gzipBundleByteLengthLimit,
+  { unit: "KB" }
+)}`;
 
 if (overLimit) {
   throw new Error(message);
diff --git a/config/entryPoints.js b/config/entryPoints.js
index 8afa1c9af0c..dbd41ad4d64 100644
--- a/config/entryPoints.js
+++ b/config/entryPoints.js
@@ -1,46 +1,46 @@
 const entryPoints = [
   { dirs: [], bundleName: "main" },
-  { dirs: ['cache'] },
-  { dirs: ['core'] },
-  { dirs: ['dev'] },
-  { dirs: ['errors'] },
-  { dirs: ['link', 'batch'] },
-  { dirs: ['link', 'batch-http'] },
-  { dirs: ['link', 'context'] },
-  { dirs: ['link', 'core'] },
-  { dirs: ['link', 'error'] },
-  { dirs: ['link', 'http'] },
-  { dirs: ['link', 'persisted-queries'] },
-  { dirs: ['link', 'retry'] },
-  { dirs: ['link', 'remove-typename'] },
-  { dirs: ['link', 'schema'] },
-  { dirs: ['link', 'subscriptions'] },
-  { dirs: ['link', 'utils'] },
-  { dirs: ['link', 'ws'] },
-  { dirs: ['react'] },
-  { dirs: ['react', 'components'] },
-  { dirs: ['react', 'context'] },
-  { dirs: ['react', 'hoc'] },
-  { dirs: ['react', 'hooks'] },
-  { dirs: ['react', 'parser'] },
-  { dirs: ['react', 'ssr'] },
-  { dirs: ['testing'], extensions: [".js", ".jsx"] },
-  { dirs: ['testing', 'core'] },
-  { dirs: ['utilities'] },
-  { dirs: ['utilities', 'globals'], sideEffects: true },
+  { dirs: ["cache"] },
+  { dirs: ["core"] },
+  { dirs: ["dev"] },
+  { dirs: ["errors"] },
+  { dirs: ["link", "batch"] },
+  { dirs: ["link", "batch-http"] },
+  { dirs: ["link", "context"] },
+  { dirs: ["link", "core"] },
+  { dirs: ["link", "error"] },
+  { dirs: ["link", "http"] },
+  { dirs: ["link", "persisted-queries"] },
+  { dirs: ["link", "retry"] },
+  { dirs: ["link", "remove-typename"] },
+  { dirs: ["link", "schema"] },
+  { dirs: ["link", "subscriptions"] },
+  { dirs: ["link", "utils"] },
+  { dirs: ["link", "ws"] },
+  { dirs: ["react"] },
+  { dirs: ["react", "components"] },
+  { dirs: ["react", "context"] },
+  { dirs: ["react", "hoc"] },
+  { dirs: ["react", "hooks"] },
+  { dirs: ["react", "parser"] },
+  { dirs: ["react", "ssr"] },
+  { dirs: ["testing"], extensions: [".js", ".jsx"] },
+  { dirs: ["testing", "core"] },
+  { dirs: ["utilities"] },
+  { dirs: ["utilities", "globals"], sideEffects: true },
 ];
 
 const lookupTrie = Object.create(null);
-entryPoints.forEach(info => {
+entryPoints.forEach((info) => {
   let node = lookupTrie;
-  info.dirs.forEach(dir => {
+  info.dirs.forEach((dir) => {
     const dirs = node.dirs || (node.dirs = Object.create(null));
     node = dirs[dir] || (dirs[dir] = { isEntry: false });
   });
   node.isEntry = true;
 });
 
-exports.forEach = function(callback, context) {
+exports.forEach = function (callback, context) {
   entryPoints.forEach(callback, context);
 };
 
@@ -76,9 +76,11 @@ exports.check = function (id, parentId) {
         return false;
       }
 
-      console.warn(`Risky cross-entry-point nested import of ${id} in ${
-        partsAfterDist(parentId).join("/")
-      }`);
+      console.warn(
+        `Risky cross-entry-point nested import of ${id} in ${partsAfterDist(
+          parentId
+        ).join("/")}`
+      );
     }
   }
 
diff --git a/config/helpers.ts b/config/helpers.ts
index e0e1b248ca1..58c306ae378 100644
--- a/config/helpers.ts
+++ b/config/helpers.ts
@@ -5,17 +5,17 @@ import glob = require("glob");
 
 export const distDir = path.resolve(__dirname, "..", "dist");
 
-export function eachFile(dir: string, callback: (
-  absPath: string,
-  relPath: string,
-) => any) {
+export function eachFile(
+  dir: string,
+  callback: (absPath: string, relPath: string) => any
+) {
   const promises: Promise<any>[] = [];
 
   return new Promise<void>((resolve, reject) => {
-    glob(`${dir.replace(/\\/g, '/')}/**/*.js`, (error, files) => {
+    glob(`${dir.replace(/\\/g, "/")}/**/*.js`, (error, files) => {
       if (error) return reject(error);
 
-      files.sort().forEach(file => {
+      files.sort().forEach((file) => {
         const relPath = path.relative(dir, file);
 
         // Outside the distDir, somehow.
@@ -32,9 +32,11 @@ export function eachFile(dir: string, callback: (
         // This file is not meant to be imported or processed.
         if (relPath.endsWith("invariantErrorCodes.js")) return;
 
-        promises.push(new Promise(resolve => {
-          resolve(callback(file, relPath));
-        }));
+        promises.push(
+          new Promise((resolve) => {
+            resolve(callback(file, relPath));
+          })
+        );
       });
 
       resolve();
diff --git a/config/jest.config.js b/config/jest.config.js
index e8ae983c671..3dcd6e6de56 100644
--- a/config/jest.config.js
+++ b/config/jest.config.js
@@ -11,14 +11,14 @@ const defaults = {
   },
   snapshotFormat: {
     escapeString: true,
-    printBasicPrototype: true
+    printBasicPrototype: true,
   },
   transform: {
-    '^.+\\.tsx?$': [
-      'ts-jest',
+    "^.+\\.tsx?$": [
+      "ts-jest",
       {
         diagnostics: {
-          warnOnly: process.env.TEST_ENV !== 'ci'
+          warnOnly: process.env.TEST_ENV !== "ci",
         },
       },
     ],
@@ -26,22 +26,22 @@ const defaults = {
   resolver: "ts-jest-resolver",
 };
 
-const ignoreTSFiles = '.ts$';
-const ignoreTSXFiles = '.tsx$';
+const ignoreTSFiles = ".ts$";
+const ignoreTSXFiles = ".tsx$";
 
 const react17TestFileIgnoreList = [
   ignoreTSFiles,
   // For now, we only support useSuspenseQuery with React 18, so no need to test
   // it with React 17
-  'src/react/hooks/__tests__/useSuspenseQuery.test.tsx',
-  'src/react/hooks/__tests__/useBackgroundQuery.test.tsx'
-]
+  "src/react/hooks/__tests__/useSuspenseQuery.test.tsx",
+  "src/react/hooks/__tests__/useBackgroundQuery.test.tsx",
+];
 
 const tsStandardConfig = {
   ...defaults,
-  displayName: 'Core Tests',
+  displayName: "Core Tests",
   testPathIgnorePatterns: [ignoreTSXFiles],
-}
+};
 
 // For both React (Jest) "projects", ignore core tests (.ts files) as they
 // do not import React, to avoid running them twice.
@@ -65,9 +65,5 @@ const standardReact17Config = {
 };
 
 module.exports = {
-  projects: [
-    tsStandardConfig,
-    standardReact17Config,
-    standardReact18Config,
-  ],
+  projects: [tsStandardConfig, standardReact17Config, standardReact18Config],
 };
diff --git a/config/postprocessDist.ts b/config/postprocessDist.ts
index 2d6d04d106e..6599c54ad0f 100644
--- a/config/postprocessDist.ts
+++ b/config/postprocessDist.ts
@@ -1,12 +1,14 @@
-import { distDir } from './helpers.ts';
-import fs from 'node:fs';
-import path from 'node:path';
+import { distDir } from "./helpers.ts";
+import fs from "node:fs";
+import path from "node:path";
 
 const globalTypesFile = path.resolve(distDir, "utilities/globals/global.d.ts");
-fs.writeFileSync(globalTypesFile, 
-  fs.readFileSync(globalTypesFile, "utf8")
+fs.writeFileSync(
+  globalTypesFile,
+  fs
+    .readFileSync(globalTypesFile, "utf8")
     .split("\n")
-    .filter(line => line.trim() !== 'const __DEV__: boolean;')
-    .join("\n"), 
+    .filter((line) => line.trim() !== "const __DEV__: boolean;")
+    .join("\n"),
   "utf8"
-);
\ No newline at end of file
+);
diff --git a/config/precheck.js b/config/precheck.js
index 85de72c59b4..31548802c02 100644
--- a/config/precheck.js
+++ b/config/precheck.js
@@ -1,17 +1,10 @@
-const {
-  lockfileVersion,
-} = require("../package-lock.json");
+const { lockfileVersion } = require("../package-lock.json");
 
 const expectedVersion = 2;
 
-if (typeof lockfileVersion !== "number" ||
-    lockfileVersion < expectedVersion) {
+if (typeof lockfileVersion !== "number" || lockfileVersion < expectedVersion) {
   throw new Error(
-    `Old lockfileVersion (${
-      lockfileVersion
-    }) found in package-lock.json (expected ${
-      expectedVersion
-    } or later)`
+    `Old lockfileVersion (${lockfileVersion}) found in package-lock.json (expected ${expectedVersion} or later)`
   );
 }
 
diff --git a/config/prepareDist.js b/config/prepareDist.js
index 0205b0eb8bc..b0a4a1d2bd8 100644
--- a/config/prepareDist.js
+++ b/config/prepareDist.js
@@ -11,23 +11,22 @@
 // - Create a new `package.json` for each sub-set bundle we support, and
 //   store it in the appropriate dist sub-directory.
 
-const fs = require('fs');
-const path = require('path');
-const recast = require('recast');
+const fs = require("fs");
+const path = require("path");
+const recast = require("recast");
 
 const distRoot = `${__dirname}/../dist`;
 
-
 /* @apollo/client */
 
-const packageJson = require('../package.json');
-const entryPoints = require('./entryPoints.js');
+const packageJson = require("../package.json");
+const entryPoints = require("./entryPoints.js");
 
 // Enable default interpretation of .js files as ECMAScript modules. We don't
 // put this in the source ../package.json file because it interferes with tools
 // like ts-node, which we use to run various ../config/*.ts scripts.
 // TODO(benjamn) Fully diagnose that interference.
-packageJson.type = 'module';
+packageJson.type = "module";
 
 // The root package.json is marked as private to prevent publishing
 // from happening in the root of the project. This sets the package back to
@@ -43,14 +42,19 @@ delete packageJson.engines;
 // on-going package development (e.g. running tests, supporting npm link, etc.).
 // When publishing from "dist" however, we need to update the package.json
 // to point to the files within the same directory.
-const distPackageJson = JSON.stringify(packageJson, (_key, value) => {
-  if (typeof value === 'string' && value.startsWith('./dist/')) {
-    const parts = value.split('/');
-    parts.splice(1, 1); // remove dist
-    return parts.join('/');
-  }
-  return value;
-}, 2) + "\n";
+const distPackageJson =
+  JSON.stringify(
+    packageJson,
+    (_key, value) => {
+      if (typeof value === "string" && value.startsWith("./dist/")) {
+        const parts = value.split("/");
+        parts.splice(1, 1); // remove dist
+        return parts.join("/");
+      }
+      return value;
+    },
+    2
+  ) + "\n";
 
 // Save the modified package.json to "dist"
 fs.writeFileSync(`${distRoot}/package.json`, distPackageJson);
@@ -58,8 +62,8 @@ fs.writeFileSync(`${distRoot}/package.json`, distPackageJson);
 // Copy supporting files into "dist"
 const srcDir = `${__dirname}/..`;
 const destDir = `${srcDir}/dist`;
-fs.copyFileSync(`${srcDir}/README.md`,  `${destDir}/README.md`);
-fs.copyFileSync(`${srcDir}/LICENSE`,  `${destDir}/LICENSE`);
+fs.copyFileSync(`${srcDir}/README.md`, `${destDir}/README.md`);
+fs.copyFileSync(`${srcDir}/LICENSE`, `${destDir}/LICENSE`);
 
 // Create individual bundle package.json files, storing them in their
 // associated dist directory. This helps provide a way for the Apollo Client
@@ -73,14 +77,18 @@ entryPoints.forEach(function buildPackageJson({
 }) {
   if (!dirs.length) return;
   fs.writeFileSync(
-    path.join(distRoot, ...dirs, 'package.json'),
-    JSON.stringify({
-      name: path.posix.join('@apollo', 'client', ...dirs),
-      type: "module",
-      main: `${bundleName}.cjs`,
-      module: 'index.js',
-      types: 'index.d.ts',
-      sideEffects,
-    }, null, 2) + "\n",
+    path.join(distRoot, ...dirs, "package.json"),
+    JSON.stringify(
+      {
+        name: path.posix.join("@apollo", "client", ...dirs),
+        type: "module",
+        main: `${bundleName}.cjs`,
+        module: "index.js",
+        types: "index.d.ts",
+        sideEffects,
+      },
+      null,
+      2
+    ) + "\n"
   );
 });
diff --git a/config/processInvariants.ts b/config/processInvariants.ts
index 787772aa262..6534f36aa8a 100644
--- a/config/processInvariants.ts
+++ b/config/processInvariants.ts
@@ -1,24 +1,24 @@
-import * as fs from 'fs';
-import { posix, join as osPathJoin } from 'path';
-import { distDir, eachFile, reparse, reprint } from './helpers.ts';
-import type { ExpressionKind } from 'ast-types/lib/gen/kinds';
+import * as fs from "fs";
+import { posix, join as osPathJoin } from "path";
+import { distDir, eachFile, reparse, reprint } from "./helpers.ts";
+import type { ExpressionKind } from "ast-types/lib/gen/kinds";
 
 eachFile(distDir, (file, relPath) => {
-  const source = fs.readFileSync(file, 'utf8');
+  const source = fs.readFileSync(file, "utf8");
   const output = transform(source, relPath);
   if (source !== output) {
-    fs.writeFileSync(file, output, 'utf8');
+    fs.writeFileSync(file, output, "utf8");
   }
 }).then(() => {
   fs.writeFileSync(
-    osPathJoin(distDir, 'invariantErrorCodes.js'),
+    osPathJoin(distDir, "invariantErrorCodes.js"),
     recast.print(program, {
       tabWidth: 2,
-    }).code + '\n'
+    }).code + "\n"
   );
 });
 
-import * as recast from 'recast';
+import * as recast from "recast";
 const b = recast.types.builders;
 const n = recast.types.namedTypes;
 type Node = recast.types.namedTypes.Node;
@@ -28,28 +28,28 @@ let nextErrorCode = 1;
 
 const program = b.program([]);
 const allExports = {
-  errorCodes: getExportObject('errorCodes'),
-  devDebug: getExportObject('devDebug'),
-  devLog: getExportObject('devLog'),
-  devWarn: getExportObject('devWarn'),
-  devError: getExportObject('devError'),
+  errorCodes: getExportObject("errorCodes"),
+  devDebug: getExportObject("devDebug"),
+  devLog: getExportObject("devLog"),
+  devWarn: getExportObject("devWarn"),
+  devError: getExportObject("devError"),
 };
 type ExportName = keyof typeof allExports;
 
 allExports.errorCodes.comments = [
   b.commentLine(
-    ' This file is used by the error message display website and the',
+    " This file is used by the error message display website and the",
     true
   ),
-  b.commentLine(' @apollo/client/includeErrors entry point.', true),
-  b.commentLine(' This file is not meant to be imported manually.', true),
+  b.commentLine(" @apollo/client/includeErrors entry point.", true),
+  b.commentLine(" This file is not meant to be imported manually.", true),
 ];
 
 function getExportObject(exportName: string) {
   const object = b.objectExpression([]);
   program.body.push(
     b.exportNamedDeclaration(
-      b.variableDeclaration('const', [
+      b.variableDeclaration("const", [
         b.variableDeclarator(b.identifier(exportName), object),
       ])
     )
@@ -62,7 +62,7 @@ function getErrorCode(
   expr: CallExpression | NewExpression,
   type: keyof typeof allExports
 ): ExpressionKind {
-  if (isIdWithName(expr.callee, 'invariant')) {
+  if (isIdWithName(expr.callee, "invariant")) {
     return extractString(
       file,
       allExports[type].properties,
@@ -75,44 +75,43 @@ function getErrorCode(
 
   function extractString(
     file: string,
-    target: typeof allExports[ExportName]['properties'],
+    target: (typeof allExports)[ExportName]["properties"],
     message: recast.types.namedTypes.SpreadElement | ExpressionKind,
     condition?: recast.types.namedTypes.SpreadElement | ExpressionKind
   ): ExpressionKind {
-    if (message.type === 'ConditionalExpression') {
+    if (message.type === "ConditionalExpression") {
       return b.conditionalExpression(
         message.test,
         extractString(file, target, message.consequent, condition),
         extractString(file, target, message.alternate, condition)
       );
     } else if (isStringOnly(message)) {
-
       const messageText = reprint(message);
-      if (messageText.includes('Apollo DevTools')) {
+      if (messageText.includes("Apollo DevTools")) {
         return message;
       }
 
       const obj = b.objectExpression([]);
       const numLit = b.numericLiteral(nextErrorCode++);
-      target.push(b.property('init', numLit, obj));
+      target.push(b.property("init", numLit, obj));
 
       obj.properties.push(
         b.property(
-          'init',
-          b.identifier('file'),
-          b.stringLiteral('@apollo/client/' + file)
+          "init",
+          b.identifier("file"),
+          b.stringLiteral("@apollo/client/" + file)
         )
       );
       if (condition) {
         obj.properties.push(
           b.property(
-            'init',
-            b.identifier('condition'),
+            "init",
+            b.identifier("condition"),
             b.stringLiteral(reprint(expr.arguments[0]))
           )
         );
       }
-      obj.properties.push(b.property('init', b.identifier('message'), message));
+      obj.properties.push(b.property("init", b.identifier("message"), message));
 
       return numLit;
     } else {
@@ -134,12 +133,12 @@ function transform(code: string, relativeFilePath: string) {
       this.traverse(path);
       const node = path.node;
 
-      if (isCallWithLength(node, 'invariant', 1)) {
+      if (isCallWithLength(node, "invariant", 1)) {
         const newArgs = [...node.arguments];
         newArgs.splice(
           1,
           1,
-          getErrorCode(relativeFilePath, node, 'errorCodes')
+          getErrorCode(relativeFilePath, node, "errorCodes")
         );
 
         return b.callExpression.from({
@@ -148,12 +147,12 @@ function transform(code: string, relativeFilePath: string) {
         });
       }
 
-      if (isCallWithLength(node, 'newInvariantError', 0)) {
+      if (isCallWithLength(node, "newInvariantError", 0)) {
         const newArgs = [...node.arguments];
         newArgs.splice(
           0,
           1,
-          getErrorCode(relativeFilePath, node, 'errorCodes')
+          getErrorCode(relativeFilePath, node, "errorCodes")
         );
 
         return b.callExpression.from({
@@ -163,14 +162,14 @@ function transform(code: string, relativeFilePath: string) {
       }
 
       if (
-        node.callee.type === 'MemberExpression' &&
-        isIdWithName(node.callee.object, 'invariant') &&
-        isIdWithName(node.callee.property, 'debug', 'log', 'warn', 'error')
+        node.callee.type === "MemberExpression" &&
+        isIdWithName(node.callee.object, "invariant") &&
+        isIdWithName(node.callee.property, "debug", "log", "warn", "error")
       ) {
         let newNode = node;
-        if (node.arguments[0].type !== 'Identifier') {
+        if (node.arguments[0].type !== "Identifier") {
           const prop = node.callee.property;
-          if (!n.Identifier.check(prop)) throw new Error('unexpected type');
+          if (!n.Identifier.check(prop)) throw new Error("unexpected type");
 
           const newArgs = [...node.arguments];
           newArgs.splice(
@@ -179,7 +178,7 @@ function transform(code: string, relativeFilePath: string) {
             getErrorCode(
               relativeFilePath,
               node,
-              ('dev' + capitalize(prop.name)) as ExportName
+              ("dev" + capitalize(prop.name)) as ExportName
             )
           );
           newNode = b.callExpression.from({
@@ -191,22 +190,26 @@ function transform(code: string, relativeFilePath: string) {
         if (isDEVLogicalAnd(path.parent.node)) {
           return newNode;
         }
-        return b.logicalExpression('&&', makeDEVExpr(), newNode);
+        return b.logicalExpression("&&", makeDEVExpr(), newNode);
       }
     },
   });
 
-  if (!['utilities/globals/index.js', 'config/jest/setup.js'].includes(relativeFilePath))
+  if (
+    !["utilities/globals/index.js", "config/jest/setup.js"].includes(
+      relativeFilePath
+    )
+  )
     recast.visit(ast, {
       visitIdentifier(path) {
         this.traverse(path);
         const node = path.node;
         if (isDEVExpr(node)) {
           return b.binaryExpression(
-            '!==',
+            "!==",
             b.memberExpression(
-              b.identifier('globalThis'),
-              b.identifier('__DEV__')
+              b.identifier("globalThis"),
+              b.identifier("__DEV__")
             ),
             b.literal(false)
           );
@@ -235,33 +238,33 @@ function isCallWithLength(
 function isDEVLogicalAnd(node: Node) {
   return (
     n.LogicalExpression.check(node) &&
-    node.operator === '&&' &&
+    node.operator === "&&" &&
     isDEVExpr(node.left)
   );
 }
 
 function makeDEVExpr() {
-  return b.identifier('__DEV__');
+  return b.identifier("__DEV__");
 }
 
 function isDEVExpr(node: Node) {
-  return isIdWithName(node, '__DEV__');
+  return isIdWithName(node, "__DEV__");
 }
 
 function isStringOnly(
   node: recast.types.namedTypes.ASTNode
 ): node is ExpressionKind {
   switch (node.type) {
-    case 'StringLiteral':
-    case 'Literal':
+    case "StringLiteral":
+    case "Literal":
       return true;
-    case 'TemplateLiteral':
+    case "TemplateLiteral":
       return (node.expressions as recast.types.namedTypes.ASTNode[]).every(
         isStringOnly
       );
-    case 'BinaryExpression':
+    case "BinaryExpression":
       return (
-        node.operator == '+' &&
+        node.operator == "+" &&
         isStringOnly(node.left) &&
         isStringOnly(node.right)
       );
diff --git a/config/rewriteSourceMaps.ts b/config/rewriteSourceMaps.ts
index cb3c284ef0d..7aafafd8065 100644
--- a/config/rewriteSourceMaps.ts
+++ b/config/rewriteSourceMaps.ts
@@ -1,9 +1,9 @@
 import * as fs from "fs";
 import * as path from "path";
-import { distDir } from './helpers.ts';
+import { distDir } from "./helpers.ts";
 import glob = require("glob");
 
-glob(`${distDir.replace(/\\/g, '/')}/**/*.js.map`, (error, files) => {
+glob(`${distDir.replace(/\\/g, "/")}/**/*.js.map`, (error, files) => {
   if (error) throw error;
 
   const rootDir = path.dirname(distDir);
@@ -11,34 +11,38 @@ glob(`${distDir.replace(/\\/g, '/')}/**/*.js.map`, (error, files) => {
   const startTime = Date.now();
   let rewriteCount = 0;
 
-  Promise.all(files.map(async file => {
-    const content = await fs.promises.readFile(file, "utf8");
-    const map = JSON.parse(content);
-    if (map.sourcesContent) return;
-    if (map.sources) {
-      map.sourcesContent = await Promise.all(
-        map.sources.map((relSourcePath: string) => {
-          const sourcePath = path.normalize(
-            path.join(path.dirname(file), relSourcePath));
-          const relPath = path.relative(rootDir, sourcePath);
-          // Disallow reading paths outside rootDir.
-          if (relPath.startsWith("../")) {
-            throw new Error(`Bad path: ${sourcePath}`);
-          }
-          return fs.promises.readFile(sourcePath, "utf8");
-        })
+  Promise.all(
+    files.map(async (file) => {
+      const content = await fs.promises.readFile(file, "utf8");
+      const map = JSON.parse(content);
+      if (map.sourcesContent) return;
+      if (map.sources) {
+        map.sourcesContent = await Promise.all(
+          map.sources.map((relSourcePath: string) => {
+            const sourcePath = path.normalize(
+              path.join(path.dirname(file), relSourcePath)
+            );
+            const relPath = path.relative(rootDir, sourcePath);
+            // Disallow reading paths outside rootDir.
+            if (relPath.startsWith("../")) {
+              throw new Error(`Bad path: ${sourcePath}`);
+            }
+            return fs.promises.readFile(sourcePath, "utf8");
+          })
+        );
+        ++rewriteCount;
+        return fs.promises.writeFile(file, JSON.stringify(map));
+      }
+    })
+  ).then(
+    () => {
+      console.log(
+        `Rewrote ${rewriteCount} source maps in ${Date.now() - startTime}ms`
       );
-      ++rewriteCount;
-      return fs.promises.writeFile(file, JSON.stringify(map));
+    },
+    (error) => {
+      console.error(error);
+      process.exit(-1);
     }
-  })).then(() => {
-    console.log(`Rewrote ${
-      rewriteCount
-    } source maps in ${
-      Date.now() - startTime
-    }ms`);
-  }, error => {
-    console.error(error);
-    process.exit(-1);
-  });
+  );
 });
diff --git a/config/rollup.config.js b/config/rollup.config.js
index 081c430d278..7917a340f56 100644
--- a/config/rollup.config.js
+++ b/config/rollup.config.js
@@ -1,38 +1,32 @@
-import path, { resolve, dirname } from 'path';
+import path, { resolve, dirname } from "path";
 import { promises as fs } from "fs";
 
-import nodeResolve from '@rollup/plugin-node-resolve';
-import { terser as minify } from 'rollup-plugin-terser';
+import nodeResolve from "@rollup/plugin-node-resolve";
+import { terser as minify } from "rollup-plugin-terser";
 
-const entryPoints = require('./entryPoints');
-const distDir = './dist';
+const entryPoints = require("./entryPoints");
+const distDir = "./dist";
 
 function isExternal(id, parentId, entryPointsAreExternal = true) {
-  let posixId = toPosixPath(id)
+  let posixId = toPosixPath(id);
   const posixParentId = toPosixPath(parentId);
   // Rollup v2.26.8 started passing absolute id strings to this function, thanks
   // apparently to https://github.com/rollup/rollup/pull/3753, so we relativize
   // the id again in those cases.
   if (path.isAbsolute(id)) {
-    posixId = path.posix.relative(
-      path.posix.dirname(posixParentId),
-      posixId,
-    );
+    posixId = path.posix.relative(path.posix.dirname(posixParentId), posixId);
     if (!posixId.startsWith(".")) {
       posixId = "./" + posixId;
     }
   }
 
-  const isRelative =
-    posixId.startsWith("./") ||
-    posixId.startsWith("../");
+  const isRelative = posixId.startsWith("./") || posixId.startsWith("../");
 
   if (!isRelative) {
     return true;
   }
 
-  if (entryPointsAreExternal &&
-      entryPoints.check(posixId, posixParentId)) {
+  if (entryPointsAreExternal && entryPoints.check(posixId, posixParentId)) {
     return true;
   }
 
@@ -43,14 +37,14 @@ function isExternal(id, parentId, entryPointsAreExternal = true) {
 function toPosixPath(p) {
   // Sometimes, you can have a path like \Users\IEUser on windows, and this
   // actually means you want C:\Users\IEUser
-  if (p[0] === '\\') {
+  if (p[0] === "\\") {
     p = process.env.SystemDrive + p;
   }
 
-  p = p.replace(/\\/g, '/');
-  if (p[1] === ':') {
+  p = p.replace(/\\/g, "/");
+  if (p[1] === ":") {
     // Transform "C:/bla/bla" to "/c/bla/bla"
-    p = '/' + p[0] + p.slice(2);
+    p = "/" + p[0] + p.slice(2);
   }
 
   return p;
@@ -64,14 +58,12 @@ function prepareCJS(input, output) {
     },
     output: {
       file: output,
-      format: 'cjs',
+      format: "cjs",
       sourcemap: true,
-      exports: 'named',
+      exports: "named",
       externalLiveBindings: false,
     },
-    plugins: [
-      nodeResolve(),
-    ],
+    plugins: [nodeResolve()],
   };
 }
 
@@ -79,8 +71,8 @@ function prepareCJSMinified(input) {
   return {
     input,
     output: {
-      file: input.replace('.cjs', '.min.cjs'),
-      format: 'cjs',
+      file: input.replace(".cjs", ".min.cjs"),
+      format: "cjs",
     },
     plugins: [
       minify({
@@ -90,7 +82,7 @@ function prepareCJSMinified(input) {
         compress: {
           toplevel: true,
           global_defs: {
-            '@globalThis.__DEV__': 'false',
+            "@globalThis.__DEV__": "false",
           },
         },
       }),
@@ -113,44 +105,44 @@ function prepareBundle({
     // external(id, parentId) {}
     output: {
       file: outputFile,
-      format: 'cjs',
+      format: "cjs",
       sourcemap: true,
-      exports: 'named',
+      exports: "named",
       externalLiveBindings: false,
     },
     plugins: [
       {
-        name: 'externalize-dependency',
+        name: "externalize-dependency",
         resolveId(id, parentId) {
           if (!parentId) {
             return null;
           }
           function removeIndex(filename) {
             if (filename.endsWith(`${path.sep}index.js`)) {
-              return filename.slice(0, -`${path.sep}index.js`.length)
+              return filename.slice(0, -`${path.sep}index.js`.length);
             }
-            return filename
+            return filename;
           }
 
-          const external = isExternal(id, parentId, true)
+          const external = isExternal(id, parentId, true);
           if (external) {
             if (id.startsWith(".")) {
-              return { id: removeIndex(resolve(dirname(parentId), id)), external: true };
+              return {
+                id: removeIndex(resolve(dirname(parentId), id)),
+                external: true,
+              };
             }
             return { id: removeIndex(id), external: true };
           }
           return null;
-        }
+        },
       },
       extensions ? nodeResolve({ extensions }) : nodeResolve(),
       {
         name: "copy *.cjs to *.cjs.native.js",
         async writeBundle({ file }) {
           const buffer = await fs.readFile(file);
-          await fs.writeFile(
-            file + ".native.js",
-            buffer,
-          );
+          await fs.writeFile(file + ".native.js", buffer);
         },
       },
     ],
@@ -160,11 +152,6 @@ function prepareBundle({
 export default [
   ...entryPoints.map(prepareBundle),
   // Convert the ESM entry point to a single CJS bundle.
-  prepareCJS(
-    './dist/index.js',
-    './dist/apollo-client.cjs',
-  ),
-  prepareCJSMinified(
-    './dist/apollo-client.cjs',
-  ),
+  prepareCJS("./dist/index.js", "./dist/apollo-client.cjs"),
+  prepareCJSMinified("./dist/apollo-client.cjs"),
 ];
diff --git a/config/tsconfig.json b/config/tsconfig.json
index d8975964558..39e1fe94587 100644
--- a/config/tsconfig.json
+++ b/config/tsconfig.json
@@ -20,6 +20,6 @@
     // respect this option unless the source maps are inlined into the
     // source files, which we definitely do not want. Instead, we use the
     // config/rewriteSourceMaps.ts script to add sourcesContent.
-    "inlineSources": true,
-  },
+    "inlineSources": true
+  }
 }
diff --git a/config/version.js b/config/version.js
index 0abf54fe5c9..de66893159c 100644
--- a/config/version.js
+++ b/config/version.js
@@ -7,8 +7,9 @@ const pkgJsonPath = path.join(__dirname, "..", "package.json");
 
 const { version } = JSON.parse(fs.readFileSync(pkgJsonPath));
 assert.strictEqual(
-  typeof version, "string",
-  '"version" field missing from package.json',
+  typeof version,
+  "string",
+  '"version" field missing from package.json'
 );
 
 switch (process.argv[2]) {
@@ -18,8 +19,9 @@ switch (process.argv[2]) {
       .replace(/\blocal\b/, version);
 
     assert.notEqual(
-      updated.indexOf(version), -1,
-      "Failed to update dist/version.js with @apollo/client version",
+      updated.indexOf(version),
+      -1,
+      "Failed to update dist/version.js with @apollo/client version"
     );
 
     fs.writeFileSync(versionPath, updated);
@@ -28,15 +30,16 @@ switch (process.argv[2]) {
   }
 
   case "verify": {
-    const {
-      ApolloClient,
-      InMemoryCache,
-    } = require(path.join(distRoot, "core", "core.cjs"));
+    const { ApolloClient, InMemoryCache } = require(path.join(
+      distRoot,
+      "core",
+      "core.cjs"
+    ));
 
     // Though this may seem like overkill, verifying that ApolloClient is
     // constructible in Node.js is actually pretty useful, too!
     const client = new ApolloClient({
-      cache: new InMemoryCache,
+      cache: new InMemoryCache(),
     });
 
     // Probably not necessary, but it seems wise to clean up any resources
@@ -50,17 +53,16 @@ switch (process.argv[2]) {
     // convenient because dist/version.js uses ECMAScript module syntax, and is
     // thus not importable in all versions of Node.js.
     assert.strictEqual(
-      client.version, version,
-      "Failed to update dist/version.js and dist/core/core.cjs",
+      client.version,
+      version,
+      "Failed to update dist/version.js and dist/core/core.cjs"
     );
 
     break;
   }
 
   default:
-    throw new Error(
-      "Pass either 'update' or 'verify' to config/version.js"
-    );
+    throw new Error("Pass either 'update' or 'verify' to config/version.js");
 }
 
 console.log("ok");
diff --git a/integration-tests/browser-esm/html/jsdeliver-esm.html b/integration-tests/browser-esm/html/jsdeliver-esm.html
index 18a50afacc2..8d0109854d0 100644
--- a/integration-tests/browser-esm/html/jsdeliver-esm.html
+++ b/integration-tests/browser-esm/html/jsdeliver-esm.html
@@ -1,43 +1,47 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
+  <head></head>
+  <script type="module">
+    // give playwright time to load
+    await new Promise((r) => setTimeout(r, 100));
 
-<head></head>
-<script type="module">
-  // give playwright time to load
-  await new Promise(r => setTimeout(r, 100))
-
-  import { ApolloClient, InMemoryCache, gql } from "https://cdn.jsdelivr.net/npm/@apollo/client@0.0.0-pr-10915-20230616125401/+esm";
-  const client = new ApolloClient({
-    uri: "https://main--hack-the-e-commerce.apollographos.net/graphql",
-    cache: new InMemoryCache(),
-  });
-  client.query({
-    query: gql`
-    query {
-      products {
-        id
-        title
-      }
-    }
-    `})
-    .then(r => {
-      const main = document.querySelector('main')
-      const ul = document.createElement('ul')
-      main.replaceChildren(ul)
-      r.data.products.forEach(p => {
-        const li = document.createElement('li')
-        li.textContent = p.title
-        ul.appendChild(li)
+    import {
+      ApolloClient,
+      InMemoryCache,
+      gql,
+    } from "https://cdn.jsdelivr.net/npm/@apollo/client@0.0.0-pr-10915-20230616125401/+esm";
+    const client = new ApolloClient({
+      uri: "https://main--hack-the-e-commerce.apollographos.net/graphql",
+      cache: new InMemoryCache(),
+    });
+    client
+      .query({
+        query: gql`
+          query {
+            products {
+              id
+              title
+            }
+          }
+        `,
       })
-    })
-    .catch(console.error)
-</script>
-
-<body>
-  <h1>https://cdn.jsdelivr.net/npm/@apollo/client/+esm</h1>
-  <main>
-    <p>loading</p>
-  </main>
-</body>
+      .then((r) => {
+        const main = document.querySelector("main");
+        const ul = document.createElement("ul");
+        main.replaceChildren(ul);
+        r.data.products.forEach((p) => {
+          const li = document.createElement("li");
+          li.textContent = p.title;
+          ul.appendChild(li);
+        });
+      })
+      .catch(console.error);
+  </script>
 
+  <body>
+    <h1>https://cdn.jsdelivr.net/npm/@apollo/client/+esm</h1>
+    <main>
+      <p>loading</p>
+    </main>
+  </body>
 </html>
diff --git a/integration-tests/browser-esm/html/jspm-prepared.html b/integration-tests/browser-esm/html/jspm-prepared.html
index aad2bbbd48a..7395ff614af 100644
--- a/integration-tests/browser-esm/html/jspm-prepared.html
+++ b/integration-tests/browser-esm/html/jspm-prepared.html
@@ -1,66 +1,66 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
-
-<head></head>
-<script type="importmap">
-  {
-    "imports": {
-      "@apollo/client": "https://ga.jspm.io/npm:@apollo/client@0.0.0-pr-10915-20230616125401/index.js"
-    },
-    "scopes": {
-      "https://ga.jspm.io/": {
-        "@wry/context": "https://ga.jspm.io/npm:@wry/context@0.7.3/lib/index.js",
-        "@wry/equality": "https://ga.jspm.io/npm:@wry/equality@0.5.6/lib/index.js",
-        "@wry/trie": "https://ga.jspm.io/npm:@wry/trie@0.4.3/lib/index.js",
-        "graphql": "https://ga.jspm.io/npm:graphql@16.6.0/index.mjs",
-        "graphql-tag": "https://ga.jspm.io/npm:graphql-tag@2.12.6/lib/index.js",
-        "optimism": "https://ga.jspm.io/npm:optimism@0.17.5/lib/index.js",
-        "react": "https://ga.jspm.io/npm:react@18.2.0/dev.index.js",
-        "symbol-observable": "https://ga.jspm.io/npm:symbol-observable@4.0.0/lib/index.js",
-        "ts-invariant": "https://ga.jspm.io/npm:ts-invariant@0.10.3/lib/invariant.js",
-        "ts-invariant/process/index.js": "https://ga.jspm.io/npm:ts-invariant@0.10.3/process/index.js",
-        "tslib": "https://ga.jspm.io/npm:tslib@2.5.3/tslib.es6.mjs",
-        "zen-observable-ts": "https://ga.jspm.io/npm:zen-observable-ts@1.2.5/module.js"
+  <head></head>
+  <script type="importmap">
+    {
+      "imports": {
+        "@apollo/client": "https://ga.jspm.io/npm:@apollo/client@0.0.0-pr-10915-20230616125401/index.js"
+      },
+      "scopes": {
+        "https://ga.jspm.io/": {
+          "@wry/context": "https://ga.jspm.io/npm:@wry/context@0.7.3/lib/index.js",
+          "@wry/equality": "https://ga.jspm.io/npm:@wry/equality@0.5.6/lib/index.js",
+          "@wry/trie": "https://ga.jspm.io/npm:@wry/trie@0.4.3/lib/index.js",
+          "graphql": "https://ga.jspm.io/npm:graphql@16.6.0/index.mjs",
+          "graphql-tag": "https://ga.jspm.io/npm:graphql-tag@2.12.6/lib/index.js",
+          "optimism": "https://ga.jspm.io/npm:optimism@0.17.5/lib/index.js",
+          "react": "https://ga.jspm.io/npm:react@18.2.0/dev.index.js",
+          "symbol-observable": "https://ga.jspm.io/npm:symbol-observable@4.0.0/lib/index.js",
+          "ts-invariant": "https://ga.jspm.io/npm:ts-invariant@0.10.3/lib/invariant.js",
+          "ts-invariant/process/index.js": "https://ga.jspm.io/npm:ts-invariant@0.10.3/process/index.js",
+          "tslib": "https://ga.jspm.io/npm:tslib@2.5.3/tslib.es6.mjs",
+          "zen-observable-ts": "https://ga.jspm.io/npm:zen-observable-ts@1.2.5/module.js"
+        }
       }
     }
-  }
-</script>
-<script type="module">
-  // give playwright time to load
-  await new Promise(r => setTimeout(r, 100))
+  </script>
+  <script type="module">
+    // give playwright time to load
+    await new Promise((r) => setTimeout(r, 100));
 
-  import { ApolloClient, InMemoryCache, gql } from "@apollo/client";
-  const client = new ApolloClient({
-    uri: "https://main--hack-the-e-commerce.apollographos.net/graphql",
-    cache: new InMemoryCache(),
-  });
-  client.query({
-    query: gql`
-    query {
-      products {
-        id
-        title
-      }
-    }
-    `})
-    .then(r => {
-      const main = document.querySelector('main')
-      const ul = document.createElement('ul')
-      main.replaceChildren(ul)
-      r.data.products.forEach(p => {
-        const li = document.createElement('li')
-        li.textContent = p.title
-        ul.appendChild(li)
+    import { ApolloClient, InMemoryCache, gql } from "@apollo/client";
+    const client = new ApolloClient({
+      uri: "https://main--hack-the-e-commerce.apollographos.net/graphql",
+      cache: new InMemoryCache(),
+    });
+    client
+      .query({
+        query: gql`
+          query {
+            products {
+              id
+              title
+            }
+          }
+        `,
       })
-    })
-    .catch(console.error)
-</script>
-
-<body>
-  <h1>https://ga.jspm.io/npm:@apollo/client/index.js</h1>
-  <main>
-    <p>loading</p>
-  </main>
-</body>
+      .then((r) => {
+        const main = document.querySelector("main");
+        const ul = document.createElement("ul");
+        main.replaceChildren(ul);
+        r.data.products.forEach((p) => {
+          const li = document.createElement("li");
+          li.textContent = p.title;
+          ul.appendChild(li);
+        });
+      })
+      .catch(console.error);
+  </script>
 
+  <body>
+    <h1>https://ga.jspm.io/npm:@apollo/client/index.js</h1>
+    <main>
+      <p>loading</p>
+    </main>
+  </body>
 </html>
diff --git a/integration-tests/browser-esm/html/unpkg-unmangled.html b/integration-tests/browser-esm/html/unpkg-unmangled.html
index 526eab19b07..0e7de49a86b 100644
--- a/integration-tests/browser-esm/html/unpkg-unmangled.html
+++ b/integration-tests/browser-esm/html/unpkg-unmangled.html
@@ -1,62 +1,62 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
-
-<head></head>
-<script type="importmap">
-  {
-    "imports": {
-      "@apollo/client": "https://unpkg.com/@apollo/client@0.0.0-pr-10915-20230616125401/index.js",
-      "@wry/context": "https://unpkg.com/@wry/context@0.7.3/lib/index.js",
-      "@wry/equality": "https://unpkg.com/@wry/equality@0.5.6/lib/index.js",
-      "@wry/trie": "https://unpkg.com/@wry/trie@0.4.3/lib/index.js",
-      "graphql": "https://unpkg.com/graphql@16.6.0/index.mjs",
-      "graphql-tag": "https://unpkg.com/graphql-tag@2.12.6/lib/index.js",
-      "optimism": "https://unpkg.com/optimism@0.17.5/lib/index.js",
-      "react": "https://ga.jspm.io/npm:react@18.2.0/dev.index.js",
-      "symbol-observable": "https://ga.jspm.io/npm:symbol-observable@4.0.0/lib/index.js",
-      "ts-invariant": "https://unpkg.com/ts-invariant@0.10.3/lib/invariant.js",
-      "ts-invariant/process/index.js": "https://unpkg.com/ts-invariant@0.10.3/process/index.js",
-      "tslib": "https://unpkg.com/tslib@2.5.3/tslib.es6.mjs",
-      "zen-observable-ts": "https://unpkg.com/zen-observable-ts@1.2.5/module.js"
-    }
-  }
-</script>
-<script type="module">
-  // give playwright time to load
-  await new Promise(r => setTimeout(r, 100))
-
-  import { ApolloClient, InMemoryCache, gql } from "@apollo/client";
-  const client = new ApolloClient({
-    uri: "https://main--hack-the-e-commerce.apollographos.net/graphql",
-    cache: new InMemoryCache(),
-  });
-  client.query({
-    query: gql`
-    query {
-      products {
-        id
-        title
+  <head></head>
+  <script type="importmap">
+    {
+      "imports": {
+        "@apollo/client": "https://unpkg.com/@apollo/client@0.0.0-pr-10915-20230616125401/index.js",
+        "@wry/context": "https://unpkg.com/@wry/context@0.7.3/lib/index.js",
+        "@wry/equality": "https://unpkg.com/@wry/equality@0.5.6/lib/index.js",
+        "@wry/trie": "https://unpkg.com/@wry/trie@0.4.3/lib/index.js",
+        "graphql": "https://unpkg.com/graphql@16.6.0/index.mjs",
+        "graphql-tag": "https://unpkg.com/graphql-tag@2.12.6/lib/index.js",
+        "optimism": "https://unpkg.com/optimism@0.17.5/lib/index.js",
+        "react": "https://ga.jspm.io/npm:react@18.2.0/dev.index.js",
+        "symbol-observable": "https://ga.jspm.io/npm:symbol-observable@4.0.0/lib/index.js",
+        "ts-invariant": "https://unpkg.com/ts-invariant@0.10.3/lib/invariant.js",
+        "ts-invariant/process/index.js": "https://unpkg.com/ts-invariant@0.10.3/process/index.js",
+        "tslib": "https://unpkg.com/tslib@2.5.3/tslib.es6.mjs",
+        "zen-observable-ts": "https://unpkg.com/zen-observable-ts@1.2.5/module.js"
       }
     }
-    `})
-    .then(r => {
-      const main = document.querySelector('main')
-      const ul = document.createElement('ul')
-      main.replaceChildren(ul)
-      r.data.products.forEach(p => {
-        const li = document.createElement('li')
-        li.textContent = p.title
-        ul.appendChild(li)
-      })
-    })
-    .catch(console.error)
-</script>
+  </script>
+  <script type="module">
+    // give playwright time to load
+    await new Promise((r) => setTimeout(r, 100));
 
-<body>
-  <h1>https://unpkg.com/@apollo/client/index.js</h1>
-  <main>
-    <p>loading</p>
-  </main>
-</body>
+    import { ApolloClient, InMemoryCache, gql } from "@apollo/client";
+    const client = new ApolloClient({
+      uri: "https://main--hack-the-e-commerce.apollographos.net/graphql",
+      cache: new InMemoryCache(),
+    });
+    client
+      .query({
+        query: gql`
+          query {
+            products {
+              id
+              title
+            }
+          }
+        `,
+      })
+      .then((r) => {
+        const main = document.querySelector("main");
+        const ul = document.createElement("ul");
+        main.replaceChildren(ul);
+        r.data.products.forEach((p) => {
+          const li = document.createElement("li");
+          li.textContent = p.title;
+          ul.appendChild(li);
+        });
+      })
+      .catch(console.error);
+  </script>
 
+  <body>
+    <h1>https://unpkg.com/@apollo/client/index.js</h1>
+    <main>
+      <p>loading</p>
+    </main>
+  </body>
 </html>
diff --git a/integration-tests/browser-esm/playwright.config.ts b/integration-tests/browser-esm/playwright.config.ts
index 2dba68c3fe8..87e14a4b00c 100644
--- a/integration-tests/browser-esm/playwright.config.ts
+++ b/integration-tests/browser-esm/playwright.config.ts
@@ -1,4 +1,4 @@
-import { baseConfig } from 'shared/playwright.config';
-import { defineConfig } from '@playwright/test';
+import { baseConfig } from "shared/playwright.config";
+import { defineConfig } from "@playwright/test";
 
 export default defineConfig(baseConfig);
diff --git a/integration-tests/browser-esm/tests/playwright/jsdeliver-esm.test.ts b/integration-tests/browser-esm/tests/playwright/jsdeliver-esm.test.ts
index acefc15a6dd..fc382ebfc7a 100644
--- a/integration-tests/browser-esm/tests/playwright/jsdeliver-esm.test.ts
+++ b/integration-tests/browser-esm/tests/playwright/jsdeliver-esm.test.ts
@@ -1,10 +1,10 @@
-import { expect } from '@playwright/test';
-import { test } from 'shared/fixture';
+import { expect } from "@playwright/test";
+import { test } from "shared/fixture";
 
-test('Basic Test', async ({ page, withHar }) => {
-  await page.goto('http://localhost:3000/jsdeliver-esm.html');
+test("Basic Test", async ({ page, withHar }) => {
+  await page.goto("http://localhost:3000/jsdeliver-esm.html");
 
-  await expect(page.getByText('loading')).toBeVisible();
-  await expect(page.getByText('loading')).not.toBeVisible({ timeout: 10000 });
-  await expect(page.getByText('Soft Warm Apollo Beanie')).toBeVisible();
+  await expect(page.getByText("loading")).toBeVisible();
+  await expect(page.getByText("loading")).not.toBeVisible({ timeout: 10000 });
+  await expect(page.getByText("Soft Warm Apollo Beanie")).toBeVisible();
 });
diff --git a/integration-tests/browser-esm/tests/playwright/jspm-prepared.test.ts b/integration-tests/browser-esm/tests/playwright/jspm-prepared.test.ts
index ec273be797f..6d18d39e864 100644
--- a/integration-tests/browser-esm/tests/playwright/jspm-prepared.test.ts
+++ b/integration-tests/browser-esm/tests/playwright/jspm-prepared.test.ts
@@ -1,10 +1,10 @@
-import { expect } from '@playwright/test';
-import { test } from 'shared/fixture';
+import { expect } from "@playwright/test";
+import { test } from "shared/fixture";
 
-test('Basic Test', async ({ page, withHar }) => {
-  await page.goto('http://localhost:3000/jspm-prepared.html');
+test("Basic Test", async ({ page, withHar }) => {
+  await page.goto("http://localhost:3000/jspm-prepared.html");
 
-  await expect(page.getByText('loading')).toBeVisible();
-  await expect(page.getByText('loading')).not.toBeVisible({ timeout: 10000 });
-  await expect(page.getByText('Soft Warm Apollo Beanie')).toBeVisible();
+  await expect(page.getByText("loading")).toBeVisible();
+  await expect(page.getByText("loading")).not.toBeVisible({ timeout: 10000 });
+  await expect(page.getByText("Soft Warm Apollo Beanie")).toBeVisible();
 });
diff --git a/integration-tests/browser-esm/tests/playwright/unpkg-unmangled.test.ts b/integration-tests/browser-esm/tests/playwright/unpkg-unmangled.test.ts
index ab495d74812..0ab77f15c66 100644
--- a/integration-tests/browser-esm/tests/playwright/unpkg-unmangled.test.ts
+++ b/integration-tests/browser-esm/tests/playwright/unpkg-unmangled.test.ts
@@ -1,12 +1,12 @@
-import { expect } from '@playwright/test';
-import { test } from 'shared/fixture';
+import { expect } from "@playwright/test";
+import { test } from "shared/fixture";
 
-test('Basic Test', async ({ withHar }) => {
-  await withHar.goto('http://localhost:3000/unpkg-unmangled.html');
+test("Basic Test", async ({ withHar }) => {
+  await withHar.goto("http://localhost:3000/unpkg-unmangled.html");
 
-  await expect(withHar.getByText('loading')).toBeVisible();
-  await expect(withHar.getByText('loading')).not.toBeVisible({
+  await expect(withHar.getByText("loading")).toBeVisible();
+  await expect(withHar.getByText("loading")).not.toBeVisible({
     timeout: 10000,
   });
-  await expect(withHar.getByText('Soft Warm Apollo Beanie')).toBeVisible();
+  await expect(withHar.getByText("Soft Warm Apollo Beanie")).toBeVisible();
 });
diff --git a/integration-tests/cra4/playwright.config.ts b/integration-tests/cra4/playwright.config.ts
index 2dba68c3fe8..87e14a4b00c 100644
--- a/integration-tests/cra4/playwright.config.ts
+++ b/integration-tests/cra4/playwright.config.ts
@@ -1,4 +1,4 @@
-import { baseConfig } from 'shared/playwright.config';
-import { defineConfig } from '@playwright/test';
+import { baseConfig } from "shared/playwright.config";
+import { defineConfig } from "@playwright/test";
 
 export default defineConfig(baseConfig);
diff --git a/integration-tests/cra4/public/index.html b/integration-tests/cra4/public/index.html
index 79a9558d087..6a5b8179788 100644
--- a/integration-tests/cra4/public/index.html
+++ b/integration-tests/cra4/public/index.html
@@ -1,17 +1,19 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="theme-color" content="#000000" />
-  <meta name="description" content="Web site created using create-react-app" />
-  <!--
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-  <!--
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -20,13 +22,13 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-  <title>Test App</title>
-</head>
+    <title>Test App</title>
+  </head>
 
-<body>
-  <noscript>You need to enable JavaScript to run this app.</noscript>
-  <div id="root"></div>
-  <!--
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -36,6 +38,5 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-</body>
-
+  </body>
 </html>
diff --git a/integration-tests/cra4/src/App.tsx b/integration-tests/cra4/src/App.tsx
index e411245729a..cf87849afbd 100644
--- a/integration-tests/cra4/src/App.tsx
+++ b/integration-tests/cra4/src/App.tsx
@@ -1,4 +1,4 @@
-import type { TypedDocumentNode } from '@apollo/client';
+import type { TypedDocumentNode } from "@apollo/client";
 
 import {
   useQuery,
@@ -9,7 +9,7 @@ import {
   ApolloLink,
   Observable,
   HttpLink,
-} from '@apollo/client';
+} from "@apollo/client";
 
 const delayLink = new ApolloLink((operation, forward) => {
   return new Observable((observer) => {
@@ -22,7 +22,7 @@ const delayLink = new ApolloLink((operation, forward) => {
 });
 
 const httpLink = new HttpLink({
-  uri: 'https://main--hack-the-e-commerce.apollographos.net/graphql',
+  uri: "https://main--hack-the-e-commerce.apollographos.net/graphql",
 });
 
 const client = new ApolloClient({
@@ -56,11 +56,7 @@ function Main() {
   const { data } = useQuery(QUERY);
 
   return data ? (
-    <ul>
-      {data?.products.map(({ id, title }) => (
-        <li key={id}>{title}</li>
-      ))}
-    </ul>
+    <ul>{data?.products.map(({ id, title }) => <li key={id}>{title}</li>)}</ul>
   ) : (
     <>loading</>
   );
diff --git a/integration-tests/cra4/src/index.tsx b/integration-tests/cra4/src/index.tsx
index d8c4aaa3581..e73156e93e3 100644
--- a/integration-tests/cra4/src/index.tsx
+++ b/integration-tests/cra4/src/index.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
 
 // Initialize the msw worker, wait for the service worker registration to resolve, then mount
 async function render() {
   const rootNode = ReactDOM.createRoot(
-    document.getElementById('root') as HTMLElement
+    document.getElementById("root") as HTMLElement
   );
 
   rootNode.render(
diff --git a/integration-tests/cra4/tests/playwright/apollo-client.test.ts b/integration-tests/cra4/tests/playwright/apollo-client.test.ts
index 56be036d4f5..a37db778140 100644
--- a/integration-tests/cra4/tests/playwright/apollo-client.test.ts
+++ b/integration-tests/cra4/tests/playwright/apollo-client.test.ts
@@ -1,10 +1,10 @@
-import { expect } from '@playwright/test';
-import { test } from 'shared/fixture';
+import { expect } from "@playwright/test";
+import { test } from "shared/fixture";
 
-test('Basic Test', async ({ page, withHar }) => {
-  await page.goto('http://localhost:3000');
+test("Basic Test", async ({ page, withHar }) => {
+  await page.goto("http://localhost:3000");
 
-  await expect(page.getByText('loading')).toBeVisible();
-  await expect(page.getByText('loading')).not.toBeVisible();
-  await expect(page.getByText('Soft Warm Apollo Beanie')).toBeVisible();
+  await expect(page.getByText("loading")).toBeVisible();
+  await expect(page.getByText("loading")).not.toBeVisible();
+  await expect(page.getByText("Soft Warm Apollo Beanie")).toBeVisible();
 });
diff --git a/integration-tests/cra4/tsconfig.json b/integration-tests/cra4/tsconfig.json
index a273b0cfc0e..9d379a3c4af 100644
--- a/integration-tests/cra4/tsconfig.json
+++ b/integration-tests/cra4/tsconfig.json
@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -20,7 +16,5 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"]
 }
diff --git a/integration-tests/cra5/playwright.config.ts b/integration-tests/cra5/playwright.config.ts
index 2dba68c3fe8..87e14a4b00c 100644
--- a/integration-tests/cra5/playwright.config.ts
+++ b/integration-tests/cra5/playwright.config.ts
@@ -1,4 +1,4 @@
-import { baseConfig } from 'shared/playwright.config';
-import { defineConfig } from '@playwright/test';
+import { baseConfig } from "shared/playwright.config";
+import { defineConfig } from "@playwright/test";
 
 export default defineConfig(baseConfig);
diff --git a/integration-tests/cra5/public/index.html b/integration-tests/cra5/public/index.html
index 2aed6ed2183..90660254517 100644
--- a/integration-tests/cra5/public/index.html
+++ b/integration-tests/cra5/public/index.html
@@ -1,12 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="theme-color" content="#000000" />
-  <meta name="description" content="Web site created using create-react-app" />
-  <!--
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -15,13 +17,13 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-  <title>React App</title>
-</head>
+    <title>React App</title>
+  </head>
 
-<body>
-  <noscript>You need to enable JavaScript to run this app.</noscript>
-  <div id="root"></div>
-  <!--
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -31,6 +33,5 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-</body>
-
+  </body>
 </html>
diff --git a/integration-tests/cra5/src/App.tsx b/integration-tests/cra5/src/App.tsx
index e411245729a..cf87849afbd 100644
--- a/integration-tests/cra5/src/App.tsx
+++ b/integration-tests/cra5/src/App.tsx
@@ -1,4 +1,4 @@
-import type { TypedDocumentNode } from '@apollo/client';
+import type { TypedDocumentNode } from "@apollo/client";
 
 import {
   useQuery,
@@ -9,7 +9,7 @@ import {
   ApolloLink,
   Observable,
   HttpLink,
-} from '@apollo/client';
+} from "@apollo/client";
 
 const delayLink = new ApolloLink((operation, forward) => {
   return new Observable((observer) => {
@@ -22,7 +22,7 @@ const delayLink = new ApolloLink((operation, forward) => {
 });
 
 const httpLink = new HttpLink({
-  uri: 'https://main--hack-the-e-commerce.apollographos.net/graphql',
+  uri: "https://main--hack-the-e-commerce.apollographos.net/graphql",
 });
 
 const client = new ApolloClient({
@@ -56,11 +56,7 @@ function Main() {
   const { data } = useQuery(QUERY);
 
   return data ? (
-    <ul>
-      {data?.products.map(({ id, title }) => (
-        <li key={id}>{title}</li>
-      ))}
-    </ul>
+    <ul>{data?.products.map(({ id, title }) => <li key={id}>{title}</li>)}</ul>
   ) : (
     <>loading</>
   );
diff --git a/integration-tests/cra5/src/index.tsx b/integration-tests/cra5/src/index.tsx
index 88e8a31a441..153cce06c5a 100644
--- a/integration-tests/cra5/src/index.tsx
+++ b/integration-tests/cra5/src/index.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
 
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+  document.getElementById("root") as HTMLElement
 );
 root.render(
   <React.StrictMode>
diff --git a/integration-tests/cra5/tests/playwright/apollo-client.test.ts b/integration-tests/cra5/tests/playwright/apollo-client.test.ts
index 56be036d4f5..a37db778140 100644
--- a/integration-tests/cra5/tests/playwright/apollo-client.test.ts
+++ b/integration-tests/cra5/tests/playwright/apollo-client.test.ts
@@ -1,10 +1,10 @@
-import { expect } from '@playwright/test';
-import { test } from 'shared/fixture';
+import { expect } from "@playwright/test";
+import { test } from "shared/fixture";
 
-test('Basic Test', async ({ page, withHar }) => {
-  await page.goto('http://localhost:3000');
+test("Basic Test", async ({ page, withHar }) => {
+  await page.goto("http://localhost:3000");
 
-  await expect(page.getByText('loading')).toBeVisible();
-  await expect(page.getByText('loading')).not.toBeVisible();
-  await expect(page.getByText('Soft Warm Apollo Beanie')).toBeVisible();
+  await expect(page.getByText("loading")).toBeVisible();
+  await expect(page.getByText("loading")).not.toBeVisible();
+  await expect(page.getByText("Soft Warm Apollo Beanie")).toBeVisible();
 });
diff --git a/integration-tests/cra5/tsconfig.json b/integration-tests/cra5/tsconfig.json
index a273b0cfc0e..9d379a3c4af 100644
--- a/integration-tests/cra5/tsconfig.json
+++ b/integration-tests/cra5/tsconfig.json
@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -20,7 +16,5 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"]
 }
diff --git a/integration-tests/next/next.config.js b/integration-tests/next/next.config.js
index 767719fc4fb..658404ac690 100644
--- a/integration-tests/next/next.config.js
+++ b/integration-tests/next/next.config.js
@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/integration-tests/next/playwright.config.ts b/integration-tests/next/playwright.config.ts
index 2dba68c3fe8..87e14a4b00c 100644
--- a/integration-tests/next/playwright.config.ts
+++ b/integration-tests/next/playwright.config.ts
@@ -1,4 +1,4 @@
-import { baseConfig } from 'shared/playwright.config';
-import { defineConfig } from '@playwright/test';
+import { baseConfig } from "shared/playwright.config";
+import { defineConfig } from "@playwright/test";
 
 export default defineConfig(baseConfig);
diff --git a/integration-tests/next/src/app/cc/ApolloWrapper.tsx b/integration-tests/next/src/app/cc/ApolloWrapper.tsx
index 3050c2a2e40..f5430c2371d 100644
--- a/integration-tests/next/src/app/cc/ApolloWrapper.tsx
+++ b/integration-tests/next/src/app/cc/ApolloWrapper.tsx
@@ -1,34 +1,32 @@
-'use client';
-import React from 'react';
-import { HttpLink } from '@apollo/client';
+"use client";
+import React from "react";
+import { HttpLink } from "@apollo/client";
 import {
   ApolloNextAppProvider,
   NextSSRInMemoryCache,
   NextSSRApolloClient,
-} from '@apollo/experimental-nextjs-app-support/ssr';
+} from "@apollo/experimental-nextjs-app-support/ssr";
 
-import { loadErrorMessages, loadDevMessages } from '@apollo/client/dev';
-import { setVerbosity } from 'ts-invariant';
-import { schemaLink } from '@/libs/schemaLink';
+import { loadErrorMessages, loadDevMessages } from "@apollo/client/dev";
+import { setVerbosity } from "ts-invariant";
+import { schemaLink } from "@/libs/schemaLink";
 
 //if (process.env.NODE_ENV === 'development') {
-setVerbosity('debug');
+setVerbosity("debug");
 loadDevMessages();
 loadErrorMessages();
 //}
 
 export function ApolloWrapper({ children }: React.PropsWithChildren<{}>) {
   return (
-    <ApolloNextAppProvider
-      makeClient={makeClient}
-    >
+    <ApolloNextAppProvider makeClient={makeClient}>
       {children}
     </ApolloNextAppProvider>
   );
 
   function makeClient() {
     const httpLink = new HttpLink({
-      uri: 'https://main--hack-the-e-commerce.apollographos.net/graphql',
+      uri: "https://main--hack-the-e-commerce.apollographos.net/graphql",
     });
 
     return new NextSSRApolloClient({
diff --git a/integration-tests/next/src/app/cc/layout.tsx b/integration-tests/next/src/app/cc/layout.tsx
index e13903f16e2..bc8642b3a3d 100644
--- a/integration-tests/next/src/app/cc/layout.tsx
+++ b/integration-tests/next/src/app/cc/layout.tsx
@@ -1,4 +1,4 @@
-import { ApolloWrapper } from './ApolloWrapper';
+import { ApolloWrapper } from "./ApolloWrapper";
 
 export default async function Layout({
   children,
diff --git a/integration-tests/next/src/app/cc/page.tsx b/integration-tests/next/src/app/cc/page.tsx
index 29b19b11bc5..8977c8bfbe3 100644
--- a/integration-tests/next/src/app/cc/page.tsx
+++ b/integration-tests/next/src/app/cc/page.tsx
@@ -1,8 +1,8 @@
-'use client';
+"use client";
 
-import { useSuspenseQuery } from '@apollo/experimental-nextjs-app-support/ssr';
-import type { TypedDocumentNode } from '@apollo/client';
-import { gql } from '@apollo/client';
+import { useSuspenseQuery } from "@apollo/experimental-nextjs-app-support/ssr";
+import type { TypedDocumentNode } from "@apollo/client";
+import { gql } from "@apollo/client";
 
 const QUERY: TypedDocumentNode<{
   products: {
diff --git a/integration-tests/next/src/app/client.ts b/integration-tests/next/src/app/client.ts
index 844a5b97930..b43496b26de 100644
--- a/integration-tests/next/src/app/client.ts
+++ b/integration-tests/next/src/app/client.ts
@@ -1,6 +1,6 @@
-import { schemaLink } from '@/libs/schemaLink';
-import { ApolloClient, InMemoryCache } from '@apollo/client';
-import { registerApolloClient } from '@apollo/experimental-nextjs-app-support/rsc';
+import { schemaLink } from "@/libs/schemaLink";
+import { ApolloClient, InMemoryCache } from "@apollo/client";
+import { registerApolloClient } from "@apollo/experimental-nextjs-app-support/rsc";
 
 export const { getClient } = registerApolloClient(() => {
   return new ApolloClient({
diff --git a/integration-tests/next/src/app/layout.tsx b/integration-tests/next/src/app/layout.tsx
index e77f1373af7..7e3b1753e2a 100644
--- a/integration-tests/next/src/app/layout.tsx
+++ b/integration-tests/next/src/app/layout.tsx
@@ -1,6 +1,6 @@
 export const metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  title: "Create Next App",
+  description: "Generated by create next app",
 };
 
 export default function RootLayout({
diff --git a/integration-tests/next/src/app/page.tsx b/integration-tests/next/src/app/page.tsx
index c1a10df84c7..96bd69a7efa 100644
--- a/integration-tests/next/src/app/page.tsx
+++ b/integration-tests/next/src/app/page.tsx
@@ -1,6 +1,6 @@
-import type { TypedDocumentNode } from '@apollo/client';
-import { gql } from '@apollo/client';
-import { getClient } from './client';
+import type { TypedDocumentNode } from "@apollo/client";
+import { gql } from "@apollo/client";
+import { getClient } from "./client";
 
 const QUERY: TypedDocumentNode<{
   products: {
diff --git a/integration-tests/next/src/libs/apolloClient.ts b/integration-tests/next/src/libs/apolloClient.ts
index ec92057546c..96a17171142 100644
--- a/integration-tests/next/src/libs/apolloClient.ts
+++ b/integration-tests/next/src/libs/apolloClient.ts
@@ -1,5 +1,5 @@
-import { useRef } from 'react';
-import type { NormalizedCacheObject } from '@apollo/client';
+import { useRef } from "react";
+import type { NormalizedCacheObject } from "@apollo/client";
 import {
   ApolloClient,
   HttpLink,
@@ -7,14 +7,14 @@ import {
   from,
   ApolloLink,
   Observable,
-} from '@apollo/client';
-import { onError } from '@apollo/client/link/error';
-import merge from 'deepmerge';
-import isEqual from 'lodash/isEqual';
-import type { GetServerSidePropsResult } from 'next';
-import { schemaLink } from './schemaLink';
+} from "@apollo/client";
+import { onError } from "@apollo/client/link/error";
+import merge from "deepmerge";
+import isEqual from "lodash/isEqual";
+import type { GetServerSidePropsResult } from "next";
+import { schemaLink } from "./schemaLink";
 
-export const APOLLO_STATE_PROP_NAME = '__APOLLO_STATE__';
+export const APOLLO_STATE_PROP_NAME = "__APOLLO_STATE__";
 
 let apolloClient: ApolloClient<NormalizedCacheObject>;
 
@@ -39,13 +39,17 @@ const delayLink = new ApolloLink((operation, forward) => {
 });
 
 const httpLink = new HttpLink({
-  uri: 'https://main--hack-the-e-commerce.apollographos.net/graphql',
+  uri: "https://main--hack-the-e-commerce.apollographos.net/graphql",
 });
 
 function createApolloClient() {
   return new ApolloClient({
-    ssrMode: typeof window === 'undefined',
-    link: from([errorLink, delayLink, typeof window === "undefined" ? schemaLink : httpLink]),
+    ssrMode: typeof window === "undefined",
+    link: from([
+      errorLink,
+      delayLink,
+      typeof window === "undefined" ? schemaLink : httpLink,
+    ]),
     cache: new InMemoryCache(),
   });
 }
@@ -75,7 +79,7 @@ export function initializeApollo(
     _apolloClient.cache.restore(data);
   }
   // For SSG and SSR always create a new Apollo Client
-  if (typeof window === 'undefined') return _apolloClient;
+  if (typeof window === "undefined") return _apolloClient;
   // Create the Apollo Client once in the client
   if (!apolloClient) apolloClient = _apolloClient;
   return _apolloClient;
diff --git a/integration-tests/next/src/libs/schemaLink.ts b/integration-tests/next/src/libs/schemaLink.ts
index 150a9abb867..9e7b7b96e53 100644
--- a/integration-tests/next/src/libs/schemaLink.ts
+++ b/integration-tests/next/src/libs/schemaLink.ts
@@ -1,6 +1,6 @@
 import { makeExecutableSchema } from "@graphql-tools/schema";
 import { gql } from "graphql-tag";
-import { SchemaLink } from '@apollo/client/link/schema'
+import { SchemaLink } from "@apollo/client/link/schema";
 
 const typeDefs = gql`
   type Product {
@@ -48,4 +48,4 @@ export const schema = makeExecutableSchema({
   resolvers,
 });
 
-export const schemaLink = new SchemaLink({ schema });
\ No newline at end of file
+export const schemaLink = new SchemaLink({ schema });
diff --git a/integration-tests/next/src/pages/_app.tsx b/integration-tests/next/src/pages/_app.tsx
index 99739d91bc3..48c3fa2e958 100644
--- a/integration-tests/next/src/pages/_app.tsx
+++ b/integration-tests/next/src/pages/_app.tsx
@@ -1,6 +1,6 @@
-import { ApolloProvider } from '@apollo/client';
-import { useApollo } from '../libs/apolloClient';
-import type { AppProps } from 'next/app';
+import { ApolloProvider } from "@apollo/client";
+import { useApollo } from "../libs/apolloClient";
+import type { AppProps } from "next/app";
 
 export default function App({ Component, pageProps }: AppProps) {
   const apolloClient = useApollo(pageProps);
diff --git a/integration-tests/next/src/pages/pages-no-ssr.tsx b/integration-tests/next/src/pages/pages-no-ssr.tsx
index c12827fb6fc..0e6e43e297f 100644
--- a/integration-tests/next/src/pages/pages-no-ssr.tsx
+++ b/integration-tests/next/src/pages/pages-no-ssr.tsx
@@ -1,7 +1,7 @@
-'use client';
+"use client";
 
-import type { TypedDocumentNode } from '@apollo/client';
-import { gql, useQuery } from '@apollo/client';
+import type { TypedDocumentNode } from "@apollo/client";
+import { gql, useQuery } from "@apollo/client";
 
 const QUERY: TypedDocumentNode<{
   products: {
diff --git a/integration-tests/next/src/pages/pages.tsx b/integration-tests/next/src/pages/pages.tsx
index 156ed31fd61..9bbc5e035dc 100644
--- a/integration-tests/next/src/pages/pages.tsx
+++ b/integration-tests/next/src/pages/pages.tsx
@@ -1,9 +1,9 @@
-'use client';
+"use client";
 
-import type { TypedDocumentNode } from '@apollo/client';
-import { gql, useQuery } from '@apollo/client';
-import type { GetStaticProps } from 'next';
-import { addApolloState, initializeApollo } from '@/libs/apolloClient';
+import type { TypedDocumentNode } from "@apollo/client";
+import { gql, useQuery } from "@apollo/client";
+import type { GetStaticProps } from "next";
+import { addApolloState, initializeApollo } from "@/libs/apolloClient";
 
 const QUERY: TypedDocumentNode<{
   products: {
@@ -23,7 +23,7 @@ export default function Page() {
   const { data } = useQuery(QUERY);
 
   if (!data) {
-    throw new Error('should not happen, we have getServerSideProps!');
+    throw new Error("should not happen, we have getServerSideProps!");
   }
 
   return (
diff --git a/integration-tests/next/tests/playwright/apollo-client.test.ts b/integration-tests/next/tests/playwright/apollo-client.test.ts
index ebc61965a06..cf4878116c0 100644
--- a/integration-tests/next/tests/playwright/apollo-client.test.ts
+++ b/integration-tests/next/tests/playwright/apollo-client.test.ts
@@ -1,28 +1,28 @@
-import { expect } from '@playwright/test';
-import { test } from 'shared/fixture';
+import { expect } from "@playwright/test";
+import { test } from "shared/fixture";
 
-test('RSC', async ({ page, blockRequest }) => {
-  await page.goto('http://localhost:3000');
+test("RSC", async ({ page, blockRequest }) => {
+  await page.goto("http://localhost:3000");
 
-  await expect(page.getByText('Soft Warm Apollo Beanie')).toBeVisible();
+  await expect(page.getByText("Soft Warm Apollo Beanie")).toBeVisible();
 });
 
-test('CC', async ({ page, blockRequest }) => {
-  await page.goto('http://localhost:3000/cc');
+test("CC", async ({ page, blockRequest }) => {
+  await page.goto("http://localhost:3000/cc");
 
-  await expect(page.getByText('Soft Warm Apollo Beanie')).toBeVisible();
+  await expect(page.getByText("Soft Warm Apollo Beanie")).toBeVisible();
 });
 
-test('Pages', async ({ page, blockRequest }) => {
-  await page.goto('http://localhost:3000/pages');
+test("Pages", async ({ page, blockRequest }) => {
+  await page.goto("http://localhost:3000/pages");
 
-  await expect(page.getByText('Soft Warm Apollo Beanie')).toBeVisible();
+  await expect(page.getByText("Soft Warm Apollo Beanie")).toBeVisible();
 });
 
-test('Pages without SSR', async ({ page, withHar }) => {
-  await page.goto('http://localhost:3000/pages-no-ssr');
+test("Pages without SSR", async ({ page, withHar }) => {
+  await page.goto("http://localhost:3000/pages-no-ssr");
 
-  await expect(page.getByText('loading')).toBeVisible();
-  await expect(page.getByText('loading')).not.toBeVisible();
-  await expect(page.getByText('Soft Warm Apollo Beanie')).toBeVisible();
+  await expect(page.getByText("loading")).toBeVisible();
+  await expect(page.getByText("loading")).not.toBeVisible();
+  await expect(page.getByText("Soft Warm Apollo Beanie")).toBeVisible();
 });
diff --git a/integration-tests/node-esm/test-cjs.cjs b/integration-tests/node-esm/test-cjs.cjs
index b969590ff49..9cd00f4913c 100644
--- a/integration-tests/node-esm/test-cjs.cjs
+++ b/integration-tests/node-esm/test-cjs.cjs
@@ -1,11 +1,11 @@
-const assert = require('node:assert');
-const path = require('path');
+const assert = require("node:assert");
+const path = require("path");
 
-const { ApolloClient } = require('@apollo/client');
-const { useQuery } = require('@apollo/client/react');
-const { HttpLink } = require('@apollo/client/link/http');
+const { ApolloClient } = require("@apollo/client");
+const { useQuery } = require("@apollo/client/react");
+const { HttpLink } = require("@apollo/client/link/http");
 
-console.log('Testing Node with CJS imports...');
+console.log("Testing Node with CJS imports...");
 
 function checkFunctionName(fn, name, category) {
   console.log(`Checking ${category} '${name}' === '${fn.name}'`);
@@ -16,9 +16,9 @@ function checkFunctionName(fn, name, category) {
 }
 
 const entries = [
-  [ApolloClient, 'ApolloClient', 'Barrel Import'],
-  [useQuery, 'useQuery', 'Apollo React'],
-  [HttpLink, 'HttpLink', 'Link'],
+  [ApolloClient, "ApolloClient", "Barrel Import"],
+  [useQuery, "useQuery", "Apollo React"],
+  [HttpLink, "HttpLink", "Link"],
 ];
 
 for (let [fn, name, category] of entries) {
@@ -30,9 +30,9 @@ for (let [fn, name, category] of entries) {
 }
 
 const moduleNames = [
-  ['@apollo/client', '/main.cjs'],
-  ['@apollo/client/react', '/react/react.cjs'],
-  ['@apollo/client/link/http', '/link/http/http.cjs'],
+  ["@apollo/client", "/main.cjs"],
+  ["@apollo/client/react", "/react/react.cjs"],
+  ["@apollo/client/link/http", "/link/http/http.cjs"],
 ];
 
 for (let [moduleName, expectedFilename] of moduleNames) {
@@ -42,4 +42,4 @@ for (let [moduleName, expectedFilename] of moduleNames) {
   assert(posixPath.endsWith(expectedFilename));
 }
 
-console.log('CJS test succeeded');
+console.log("CJS test succeeded");
diff --git a/integration-tests/node-esm/test-esm.mjs b/integration-tests/node-esm/test-esm.mjs
index 7b7629267b7..22d59040d08 100644
--- a/integration-tests/node-esm/test-esm.mjs
+++ b/integration-tests/node-esm/test-esm.mjs
@@ -1,15 +1,15 @@
 // TODO This entire file doesn't work yet without appending `/index.js` to all imports manually!
 
-import assert from 'node:assert';
-import path from 'path';
-import { importMetaResolve } from 'resolve-esm';
+import assert from "node:assert";
+import path from "path";
+import { importMetaResolve } from "resolve-esm";
 
-import { ApolloClient } from '@apollo/client/index.js';
-import { useQuery } from '@apollo/client/react/index.js';
-import { HttpLink } from '@apollo/client/link/http/index.js';
+import { ApolloClient } from "@apollo/client/index.js";
+import { useQuery } from "@apollo/client/react/index.js";
+import { HttpLink } from "@apollo/client/link/http/index.js";
 
 console.log(
-  'Testing Node with ESM imports...  (user-side workaround with `/index.js)'
+  "Testing Node with ESM imports...  (user-side workaround with `/index.js)"
 );
 
 function checkFunctionName(fn, name, category) {
@@ -21,9 +21,9 @@ function checkFunctionName(fn, name, category) {
 }
 
 const entries = [
-  [ApolloClient, 'ApolloClient', 'Barrel Import'],
-  [useQuery, 'useQuery', 'Apollo React'],
-  [HttpLink, 'HttpLink', 'Link'],
+  [ApolloClient, "ApolloClient", "Barrel Import"],
+  [useQuery, "useQuery", "Apollo React"],
+  [HttpLink, "HttpLink", "Link"],
 ];
 
 for (let [fn, name, category] of entries) {
@@ -35,9 +35,9 @@ for (let [fn, name, category] of entries) {
 }
 
 const moduleNames = [
-  ['@apollo/client/index.js', '/index.js'],
-  ['@apollo/client/react/index.js', '/react/index.js'],
-  ['@apollo/client/link/http/index.js', '/link/http/index.js'],
+  ["@apollo/client/index.js", "/index.js"],
+  ["@apollo/client/react/index.js", "/react/index.js"],
+  ["@apollo/client/link/http/index.js", "/link/http/index.js"],
 ];
 
 (async () => {
diff --git a/integration-tests/node-standard/test-cjs.js b/integration-tests/node-standard/test-cjs.js
index b969590ff49..9cd00f4913c 100644
--- a/integration-tests/node-standard/test-cjs.js
+++ b/integration-tests/node-standard/test-cjs.js
@@ -1,11 +1,11 @@
-const assert = require('node:assert');
-const path = require('path');
+const assert = require("node:assert");
+const path = require("path");
 
-const { ApolloClient } = require('@apollo/client');
-const { useQuery } = require('@apollo/client/react');
-const { HttpLink } = require('@apollo/client/link/http');
+const { ApolloClient } = require("@apollo/client");
+const { useQuery } = require("@apollo/client/react");
+const { HttpLink } = require("@apollo/client/link/http");
 
-console.log('Testing Node with CJS imports...');
+console.log("Testing Node with CJS imports...");
 
 function checkFunctionName(fn, name, category) {
   console.log(`Checking ${category} '${name}' === '${fn.name}'`);
@@ -16,9 +16,9 @@ function checkFunctionName(fn, name, category) {
 }
 
 const entries = [
-  [ApolloClient, 'ApolloClient', 'Barrel Import'],
-  [useQuery, 'useQuery', 'Apollo React'],
-  [HttpLink, 'HttpLink', 'Link'],
+  [ApolloClient, "ApolloClient", "Barrel Import"],
+  [useQuery, "useQuery", "Apollo React"],
+  [HttpLink, "HttpLink", "Link"],
 ];
 
 for (let [fn, name, category] of entries) {
@@ -30,9 +30,9 @@ for (let [fn, name, category] of entries) {
 }
 
 const moduleNames = [
-  ['@apollo/client', '/main.cjs'],
-  ['@apollo/client/react', '/react/react.cjs'],
-  ['@apollo/client/link/http', '/link/http/http.cjs'],
+  ["@apollo/client", "/main.cjs"],
+  ["@apollo/client/react", "/react/react.cjs"],
+  ["@apollo/client/link/http", "/link/http/http.cjs"],
 ];
 
 for (let [moduleName, expectedFilename] of moduleNames) {
@@ -42,4 +42,4 @@ for (let [moduleName, expectedFilename] of moduleNames) {
   assert(posixPath.endsWith(expectedFilename));
 }
 
-console.log('CJS test succeeded');
+console.log("CJS test succeeded");
diff --git a/integration-tests/node-standard/test-esm.mjs b/integration-tests/node-standard/test-esm.mjs
index 785459db69b..3923818778e 100644
--- a/integration-tests/node-standard/test-esm.mjs
+++ b/integration-tests/node-standard/test-esm.mjs
@@ -1,15 +1,15 @@
 // TODO This entire file doesn't work yet without appending `/index.js` to all imports manually!
 
-import assert from 'node:assert';
-import path from 'path';
-import { importMetaResolve } from 'resolve-esm';
+import assert from "node:assert";
+import path from "path";
+import { importMetaResolve } from "resolve-esm";
 
-import { ApolloClient } from '@apollo/client/index.js';
-import { useQuery } from '@apollo/client/react/index.js';
-import { HttpLink } from '@apollo/client/link/http/index.js';
+import { ApolloClient } from "@apollo/client/index.js";
+import { useQuery } from "@apollo/client/react/index.js";
+import { HttpLink } from "@apollo/client/link/http/index.js";
 
 console.log(
-  'Testing Node with ESM imports... (user-side workaround with `/index.js)'
+  "Testing Node with ESM imports... (user-side workaround with `/index.js)"
 );
 
 function checkFunctionName(fn, name, category) {
@@ -21,9 +21,9 @@ function checkFunctionName(fn, name, category) {
 }
 
 const entries = [
-  [ApolloClient, 'ApolloClient', 'Barrel Import'],
-  [useQuery, 'useQuery', 'Apollo React'],
-  [HttpLink, 'HttpLink', 'Link'],
+  [ApolloClient, "ApolloClient", "Barrel Import"],
+  [useQuery, "useQuery", "Apollo React"],
+  [HttpLink, "HttpLink", "Link"],
 ];
 
 for (let [fn, name, category] of entries) {
@@ -35,9 +35,9 @@ for (let [fn, name, category] of entries) {
 }
 
 const moduleNames = [
-  ['@apollo/client/index.js', '/index.js'],
-  ['@apollo/client/react/index.js', '/react/index.js'],
-  ['@apollo/client/link/http/index.js', '/link/http/index.js'],
+  ["@apollo/client/index.js", "/index.js"],
+  ["@apollo/client/react/index.js", "/react/index.js"],
+  ["@apollo/client/link/http/index.js", "/link/http/index.js"],
 ];
 
 (async () => {
diff --git a/integration-tests/shared/fixture.ts b/integration-tests/shared/fixture.ts
index ffc9a4eebf9..2a074187b7c 100644
--- a/integration-tests/shared/fixture.ts
+++ b/integration-tests/shared/fixture.ts
@@ -1,26 +1,26 @@
-import { test as base, expect } from '@playwright/test';
+import { test as base, expect } from "@playwright/test";
 
 export const test = base.extend<{
-  withHar: import('@playwright/test').Page;
-  blockRequest: import('@playwright/test').Page;
+  withHar: import("@playwright/test").Page;
+  blockRequest: import("@playwright/test").Page;
 }>({
   page: async ({ page }, use) => {
-    page.on('pageerror', (error) => {
-      expect(error.stack || error).toBe('no error');
+    page.on("pageerror", (error) => {
+      expect(error.stack || error).toBe("no error");
     });
     await use(page);
   },
   withHar: async ({ page }, use) => {
-    await page.routeFromHAR('../api.har', {
-      url: '**/graphql',
-      notFound: 'abort',
+    await page.routeFromHAR("../api.har", {
+      url: "**/graphql",
+      notFound: "abort",
     });
     await use(page);
   },
   blockRequest: async ({ page }, use) => {
-    await page.routeFromHAR('../empty.har', {
-      url: '**/graphql',
-      notFound: 'abort',
+    await page.routeFromHAR("../empty.har", {
+      url: "**/graphql",
+      notFound: "abort",
     });
     await use(page);
   },
diff --git a/integration-tests/shared/playwright.config.ts b/integration-tests/shared/playwright.config.ts
index 4d83fb2ad5a..05f49089f5e 100644
--- a/integration-tests/shared/playwright.config.ts
+++ b/integration-tests/shared/playwright.config.ts
@@ -1,7 +1,7 @@
 export const baseConfig = {
   webServer: {
-    command: 'yarn serve-app',
-    url: 'http://localhost:3000',
+    command: "yarn serve-app",
+    url: "http://localhost:3000",
     timeout: 120 * 1000,
     reuseExistingServer: !process.env.CI,
   },
@@ -11,5 +11,5 @@ export const baseConfig = {
     viewport: { width: 1280, height: 720 },
     ignoreHTTPSErrors: true,
   },
-  testDir: 'tests/playwright/',
+  testDir: "tests/playwright/",
 } as const;
diff --git a/integration-tests/vite-swc/index.html b/integration-tests/vite-swc/index.html
index e4b5d91060e..d5279fc3842 100644
--- a/integration-tests/vite-swc/index.html
+++ b/integration-tests/vite-swc/index.html
@@ -1,15 +1,13 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Vite + React + TS</title>
-</head>
-
-<body>
-  <div id="root"></div>
-  <script type="module" src="/src/main.tsx"></script>
-</body>
-
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
 </html>
diff --git a/integration-tests/vite-swc/playwright.config.ts b/integration-tests/vite-swc/playwright.config.ts
index 529168edd81..606e059e375 100644
--- a/integration-tests/vite-swc/playwright.config.ts
+++ b/integration-tests/vite-swc/playwright.config.ts
@@ -1,4 +1,4 @@
-import { baseConfig } from 'shared/playwright.config.ts';
-import { defineConfig } from '@playwright/test';
+import { baseConfig } from "shared/playwright.config.ts";
+import { defineConfig } from "@playwright/test";
 
 export default defineConfig(baseConfig);
diff --git a/integration-tests/vite-swc/src/App.tsx b/integration-tests/vite-swc/src/App.tsx
index e411245729a..cf87849afbd 100644
--- a/integration-tests/vite-swc/src/App.tsx
+++ b/integration-tests/vite-swc/src/App.tsx
@@ -1,4 +1,4 @@
-import type { TypedDocumentNode } from '@apollo/client';
+import type { TypedDocumentNode } from "@apollo/client";
 
 import {
   useQuery,
@@ -9,7 +9,7 @@ import {
   ApolloLink,
   Observable,
   HttpLink,
-} from '@apollo/client';
+} from "@apollo/client";
 
 const delayLink = new ApolloLink((operation, forward) => {
   return new Observable((observer) => {
@@ -22,7 +22,7 @@ const delayLink = new ApolloLink((operation, forward) => {
 });
 
 const httpLink = new HttpLink({
-  uri: 'https://main--hack-the-e-commerce.apollographos.net/graphql',
+  uri: "https://main--hack-the-e-commerce.apollographos.net/graphql",
 });
 
 const client = new ApolloClient({
@@ -56,11 +56,7 @@ function Main() {
   const { data } = useQuery(QUERY);
 
   return data ? (
-    <ul>
-      {data?.products.map(({ id, title }) => (
-        <li key={id}>{title}</li>
-      ))}
-    </ul>
+    <ul>{data?.products.map(({ id, title }) => <li key={id}>{title}</li>)}</ul>
   ) : (
     <>loading</>
   );
diff --git a/integration-tests/vite-swc/src/main.tsx b/integration-tests/vite-swc/src/main.tsx
index a6ac0e20918..64eacd7a146 100644
--- a/integration-tests/vite-swc/src/main.tsx
+++ b/integration-tests/vite-swc/src/main.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App.tsx';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
 
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
diff --git a/integration-tests/vite-swc/tests/playwright/apollo-client.test.ts b/integration-tests/vite-swc/tests/playwright/apollo-client.test.ts
index 7ffb0760a55..4b210a249cb 100644
--- a/integration-tests/vite-swc/tests/playwright/apollo-client.test.ts
+++ b/integration-tests/vite-swc/tests/playwright/apollo-client.test.ts
@@ -1,10 +1,10 @@
-import { expect } from '@playwright/test';
-import { test } from 'shared/fixture.ts';
+import { expect } from "@playwright/test";
+import { test } from "shared/fixture.ts";
 
-test('Basic Test', async ({ page, withHar }) => {
-  await page.goto('http://localhost:3000');
+test("Basic Test", async ({ page, withHar }) => {
+  await page.goto("http://localhost:3000");
 
-  await expect(page.getByText('loading')).toBeVisible();
-  await expect(page.getByText('loading')).not.toBeVisible();
-  await expect(page.getByText('Soft Warm Apollo Beanie')).toBeVisible();
+  await expect(page.getByText("loading")).toBeVisible();
+  await expect(page.getByText("loading")).not.toBeVisible();
+  await expect(page.getByText("Soft Warm Apollo Beanie")).toBeVisible();
 });
diff --git a/integration-tests/vite-swc/vite.config.ts b/integration-tests/vite-swc/vite.config.ts
index 861b04b3560..d366e8c8d7c 100644
--- a/integration-tests/vite-swc/vite.config.ts
+++ b/integration-tests/vite-swc/vite.config.ts
@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react-swc'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+});
diff --git a/integration-tests/vite/index.html b/integration-tests/vite/index.html
index e4b5d91060e..d5279fc3842 100644
--- a/integration-tests/vite/index.html
+++ b/integration-tests/vite/index.html
@@ -1,15 +1,13 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Vite + React + TS</title>
-</head>
-
-<body>
-  <div id="root"></div>
-  <script type="module" src="/src/main.tsx"></script>
-</body>
-
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
 </html>
diff --git a/integration-tests/vite/playwright.config.ts b/integration-tests/vite/playwright.config.ts
index 529168edd81..606e059e375 100644
--- a/integration-tests/vite/playwright.config.ts
+++ b/integration-tests/vite/playwright.config.ts
@@ -1,4 +1,4 @@
-import { baseConfig } from 'shared/playwright.config.ts';
-import { defineConfig } from '@playwright/test';
+import { baseConfig } from "shared/playwright.config.ts";
+import { defineConfig } from "@playwright/test";
 
 export default defineConfig(baseConfig);
diff --git a/integration-tests/vite/src/App.tsx b/integration-tests/vite/src/App.tsx
index e411245729a..cf87849afbd 100644
--- a/integration-tests/vite/src/App.tsx
+++ b/integration-tests/vite/src/App.tsx
@@ -1,4 +1,4 @@
-import type { TypedDocumentNode } from '@apollo/client';
+import type { TypedDocumentNode } from "@apollo/client";
 
 import {
   useQuery,
@@ -9,7 +9,7 @@ import {
   ApolloLink,
   Observable,
   HttpLink,
-} from '@apollo/client';
+} from "@apollo/client";
 
 const delayLink = new ApolloLink((operation, forward) => {
   return new Observable((observer) => {
@@ -22,7 +22,7 @@ const delayLink = new ApolloLink((operation, forward) => {
 });
 
 const httpLink = new HttpLink({
-  uri: 'https://main--hack-the-e-commerce.apollographos.net/graphql',
+  uri: "https://main--hack-the-e-commerce.apollographos.net/graphql",
 });
 
 const client = new ApolloClient({
@@ -56,11 +56,7 @@ function Main() {
   const { data } = useQuery(QUERY);
 
   return data ? (
-    <ul>
-      {data?.products.map(({ id, title }) => (
-        <li key={id}>{title}</li>
-      ))}
-    </ul>
+    <ul>{data?.products.map(({ id, title }) => <li key={id}>{title}</li>)}</ul>
   ) : (
     <>loading</>
   );
diff --git a/integration-tests/vite/src/main.tsx b/integration-tests/vite/src/main.tsx
index 80d56b3d540..64eacd7a146 100644
--- a/integration-tests/vite/src/main.tsx
+++ b/integration-tests/vite/src/main.tsx
@@ -1,9 +1,9 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
 
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-)
+  </React.StrictMode>
+);
diff --git a/integration-tests/vite/tests/playwright/apollo-client.test.ts b/integration-tests/vite/tests/playwright/apollo-client.test.ts
index 7ffb0760a55..4b210a249cb 100644
--- a/integration-tests/vite/tests/playwright/apollo-client.test.ts
+++ b/integration-tests/vite/tests/playwright/apollo-client.test.ts
@@ -1,10 +1,10 @@
-import { expect } from '@playwright/test';
-import { test } from 'shared/fixture.ts';
+import { expect } from "@playwright/test";
+import { test } from "shared/fixture.ts";
 
-test('Basic Test', async ({ page, withHar }) => {
-  await page.goto('http://localhost:3000');
+test("Basic Test", async ({ page, withHar }) => {
+  await page.goto("http://localhost:3000");
 
-  await expect(page.getByText('loading')).toBeVisible();
-  await expect(page.getByText('loading')).not.toBeVisible();
-  await expect(page.getByText('Soft Warm Apollo Beanie')).toBeVisible();
+  await expect(page.getByText("loading")).toBeVisible();
+  await expect(page.getByText("loading")).not.toBeVisible();
+  await expect(page.getByText("Soft Warm Apollo Beanie")).toBeVisible();
 });
diff --git a/integration-tests/vite/vite.config.ts b/integration-tests/vite/vite.config.ts
index 5a33944a9b4..9cc50ead1c0 100644
--- a/integration-tests/vite/vite.config.ts
+++ b/integration-tests/vite/vite.config.ts
@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+});
diff --git a/package-lock.json b/package-lock.json
index b4d2b07fb12..61be262566d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -68,7 +68,7 @@
         "jest-junit": "16.0.0",
         "lodash": "4.17.21",
         "patch-package": "7.0.0",
-        "prettier": "2.7.1",
+        "prettier": "^3.0.0",
         "react": "18.2.0",
         "react-17": "npm:react@^17",
         "react-dom": "18.2.0",
@@ -784,6 +784,21 @@
         "semver": "^7.5.3"
       }
     },
+    "node_modules/@changesets/apply-release-plan/node_modules/prettier": {
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/@changesets/apply-release-plan/node_modules/semver": {
       "version": "7.5.3",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz",
@@ -1212,6 +1227,21 @@
         "prettier": "^2.7.1"
       }
     },
+    "node_modules/@changesets/write/node_modules/prettier": {
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/@colors/colors": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
@@ -9217,15 +9247,15 @@
       }
     },
     "node_modules/prettier": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz",
-      "integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.0.tgz",
+      "integrity": "sha512-zBf5eHpwHOGPC47h0zrPyNn+eAEIdEzfywMoYn2XPi0P44Zp0tSq64rq0xAREh4auw2cJZHo9QUob+NqCQky4g==",
       "dev": true,
       "bin": {
-        "prettier": "bin-prettier.js"
+        "prettier": "bin/prettier.cjs"
       },
       "engines": {
-        "node": ">=10.13.0"
+        "node": ">=14"
       },
       "funding": {
         "url": "https://github.com/prettier/prettier?sponsor=1"
diff --git a/package.json b/package.json
index 472eb0a59b2..2d5af70ea26 100644
--- a/package.json
+++ b/package.json
@@ -143,7 +143,7 @@
     "jest-junit": "16.0.0",
     "lodash": "4.17.21",
     "patch-package": "7.0.0",
-    "prettier": "2.7.1",
+    "prettier": "^3.0.0",
     "react": "18.2.0",
     "react-17": "npm:react@^17",
     "react-dom": "18.2.0",
@@ -169,13 +169,5 @@
   },
   "publishConfig": {
     "access": "public"
-  },
-  "prettier": {
-    "bracketSpacing": true,
-    "printWidth": 80,
-    "semi": true,
-    "singleQuote": true,
-    "tabWidth": 2,
-    "trailingComma": "es5"
   }
 }
diff --git a/src/core/__tests__/equalByQuery.ts b/src/core/__tests__/equalByQuery.ts
index b3028591b78..29d75d201a5 100644
--- a/src/core/__tests__/equalByQuery.ts
+++ b/src/core/__tests__/equalByQuery.ts
@@ -14,65 +14,49 @@ describe("equalByQuery", () => {
       }
     `;
 
-    expect(equalByQuery(
-      query,
-      { data: { hello: "hi" } },
-      { data: { hello: "hi" } },
-    )).toBe(true);
-
-    expect(equalByQuery(
-      query,
-      { data: { hello: "hi", unrelated: 1 } },
-      { data: { hello: "hi", unrelated: 100 } },
-    )).toBe(true);
-
-    expect(equalByQuery(
-      query,
-      { data: { hello: "hi" } },
-      { data: { hello: "hey" } },
-    )).toBe(false);
-
-    expect(equalByQuery(
-      query,
-      { data: {} },
-      { data: { hello: "hi" } },
-    )).toBe(false);
-
-    expect(equalByQuery(
-      query,
-      { data: { hello: "hi" } },
-      { data: {} },
-    )).toBe(false);
-
-    expect(equalByQuery(
-      query,
-      { data: { hello: "hi" } },
-      { data: null },
-    )).toBe(false);
-
-    expect(equalByQuery(
-      query,
-      { data: null },
-      { data: { hello: "hi" } },
-    )).toBe(false);
-
-    expect(equalByQuery(
-      query,
-      { data: null },
-      { data: null },
-    )).toBe(true);
-
-    expect(equalByQuery(
-      query,
-      { data: {} },
-      { data: {} },
-    )).toBe(true);
-
-    expect(equalByQuery(
-      query,
-      { data: { unrelated: "whatever" } },
-      { data: { unrelated: "no matter" } },
-    )).toBe(true);
+    expect(
+      equalByQuery(query, { data: { hello: "hi" } }, { data: { hello: "hi" } })
+    ).toBe(true);
+
+    expect(
+      equalByQuery(
+        query,
+        { data: { hello: "hi", unrelated: 1 } },
+        { data: { hello: "hi", unrelated: 100 } }
+      )
+    ).toBe(true);
+
+    expect(
+      equalByQuery(query, { data: { hello: "hi" } }, { data: { hello: "hey" } })
+    ).toBe(false);
+
+    expect(equalByQuery(query, { data: {} }, { data: { hello: "hi" } })).toBe(
+      false
+    );
+
+    expect(equalByQuery(query, { data: { hello: "hi" } }, { data: {} })).toBe(
+      false
+    );
+
+    expect(equalByQuery(query, { data: { hello: "hi" } }, { data: null })).toBe(
+      false
+    );
+
+    expect(equalByQuery(query, { data: null }, { data: { hello: "hi" } })).toBe(
+      false
+    );
+
+    expect(equalByQuery(query, { data: null }, { data: null })).toBe(true);
+
+    expect(equalByQuery(query, { data: {} }, { data: {} })).toBe(true);
+
+    expect(
+      equalByQuery(
+        query,
+        { data: { unrelated: "whatever" } },
+        { data: { unrelated: "no matter" } }
+      )
+    ).toBe(true);
   });
 
   it("is not confused by properties in different orders", () => {
@@ -84,17 +68,21 @@ describe("equalByQuery", () => {
       }
     `;
 
-    expect(equalByQuery(
-      query,
-      { data: { a: 1, b: 2, c: 3 } },
-      { data: { b: 2, c: 3, a: 1 } },
-    )).toBe(true);
-
-    expect(equalByQuery(
-      query,
-      { data: { d: "bogus", a: 1, b: 2, c: 3 } },
-      { data: { b: 2, c: 3, a: 1, d: "also bogus" } },
-    )).toBe(true);
+    expect(
+      equalByQuery(
+        query,
+        { data: { a: 1, b: 2, c: 3 } },
+        { data: { b: 2, c: 3, a: 1 } }
+      )
+    ).toBe(true);
+
+    expect(
+      equalByQuery(
+        query,
+        { data: { d: "bogus", a: 1, b: 2, c: 3 } },
+        { data: { b: 2, c: 3, a: 1, d: "also bogus" } }
+      )
+    ).toBe(true);
   });
 
   it("respects the @nonreactive directive on fields", () => {
@@ -106,17 +94,21 @@ describe("equalByQuery", () => {
       }
     `;
 
-    expect(equalByQuery(
-      query,
-      { data: { a: 1, b: 2, c: 3 } },
-      { data: { a: 1, b: 2, c: "different" } },
-    )).toBe(true);
-
-    expect(equalByQuery(
-      query,
-      { data: { a: 1, b: 2, c: 3 } },
-      { data: { a: "different", b: 2, c: 4 } },
-    )).toBe(false);
+    expect(
+      equalByQuery(
+        query,
+        { data: { a: 1, b: 2, c: 3 } },
+        { data: { a: 1, b: 2, c: "different" } }
+      )
+    ).toBe(true);
+
+    expect(
+      equalByQuery(
+        query,
+        { data: { a: 1, b: 2, c: 3 } },
+        { data: { a: "different", b: 2, c: 4 } }
+      )
+    ).toBe(false);
   });
 
   describe("@skip and @include directives", () => {
@@ -128,120 +120,148 @@ describe("equalByQuery", () => {
     // execution of nonreactive fields/subtrees on the server.
     it("respects @skip directive, depending on variables", () => {
       const skipQuery = gql`
-        query SkipC ($condition: Boolean!) {
+        query SkipC($condition: Boolean!) {
           a
           b
           c @skip(if: $condition)
         }
       `;
 
-      expect(equalByQuery(
-        skipQuery,
-        { data: { a: 1, b: 2, c: 3 } },
-        { data: { a: 1, b: 2, c: 3 } },
-        { condition: false },
-      )).toBe(true);
-
-      expect(equalByQuery(
-        skipQuery,
-        { data: { a: 1, b: 2, c: 3 } },
-        { data: { a: 1, b: 2 } },
-        { condition: false },
-      )).toBe(false);
-
-      expect(equalByQuery(
-        skipQuery,
-        { data: { a: 1, b: 2, c: 3 } },
-        { data: { a: 1, b: 2 } },
-        { condition: true },
-      )).toBe(true);
-
-      expect(equalByQuery(
-        skipQuery,
-        { data: { a: 1, b: 2 } },
-        { data: { a: 1, b: 2, c: 3 } },
-        { condition: false },
-      )).toBe(false);
-
-      expect(equalByQuery(
-        skipQuery,
-        { data: { a: 1, b: 2 } },
-        { data: { a: 1, b: 2, c: 3 } },
-        { condition: true },
-      )).toBe(true);
-
-      expect(equalByQuery(
-        skipQuery,
-        { data: { a: 1, b: 2 } },
-        { data: { a: 1, b: 2 } },
-        { condition: false },
-      )).toBe(true);
-
-      expect(equalByQuery(
-        skipQuery,
-        { data: { a: 1, b: 2 } },
-        { data: { a: 1, b: 2 } },
-        { condition: true },
-      )).toBe(true);
+      expect(
+        equalByQuery(
+          skipQuery,
+          { data: { a: 1, b: 2, c: 3 } },
+          { data: { a: 1, b: 2, c: 3 } },
+          { condition: false }
+        )
+      ).toBe(true);
+
+      expect(
+        equalByQuery(
+          skipQuery,
+          { data: { a: 1, b: 2, c: 3 } },
+          { data: { a: 1, b: 2 } },
+          { condition: false }
+        )
+      ).toBe(false);
+
+      expect(
+        equalByQuery(
+          skipQuery,
+          { data: { a: 1, b: 2, c: 3 } },
+          { data: { a: 1, b: 2 } },
+          { condition: true }
+        )
+      ).toBe(true);
+
+      expect(
+        equalByQuery(
+          skipQuery,
+          { data: { a: 1, b: 2 } },
+          { data: { a: 1, b: 2, c: 3 } },
+          { condition: false }
+        )
+      ).toBe(false);
+
+      expect(
+        equalByQuery(
+          skipQuery,
+          { data: { a: 1, b: 2 } },
+          { data: { a: 1, b: 2, c: 3 } },
+          { condition: true }
+        )
+      ).toBe(true);
+
+      expect(
+        equalByQuery(
+          skipQuery,
+          { data: { a: 1, b: 2 } },
+          { data: { a: 1, b: 2 } },
+          { condition: false }
+        )
+      ).toBe(true);
+
+      expect(
+        equalByQuery(
+          skipQuery,
+          { data: { a: 1, b: 2 } },
+          { data: { a: 1, b: 2 } },
+          { condition: true }
+        )
+      ).toBe(true);
     });
 
     it("respects @include directive, depending on variables", () => {
       const includeQuery = gql`
-        query IncludeC ($condition: Boolean!) {
+        query IncludeC($condition: Boolean!) {
           a
           b
           c @include(if: $condition)
         }
       `;
 
-      expect(equalByQuery(
-        includeQuery,
-        { data: { a: 1, b: 2, c: 3 } },
-        { data: { a: 1, b: 2, c: 3 } },
-        { condition: true },
-      )).toBe(true);
-
-      expect(equalByQuery(
-        includeQuery,
-        { data: { a: 1, b: 2, c: 3 } },
-        { data: { a: 1, b: 2 } },
-        { condition: true },
-      )).toBe(false);
-
-      expect(equalByQuery(
-        includeQuery,
-        { data: { a: 1, b: 2, c: 3 } },
-        { data: { a: 1, b: 2 } },
-        { condition: false },
-      )).toBe(true);
-
-      expect(equalByQuery(
-        includeQuery,
-        { data: { a: 1, b: 2 } },
-        { data: { a: 1, b: 2, c: 3 } },
-        { condition: true },
-      )).toBe(false);
-
-      expect(equalByQuery(
-        includeQuery,
-        { data: { a: 1, b: 2 } },
-        { data: { a: 1, b: 2, c: 3 } },
-        { condition: false },
-      )).toBe(true);
-
-      expect(equalByQuery(
-        includeQuery,
-        { data: { a: 1, b: 2 } },
-        { data: { a: 1, b: 2 } },
-        { condition: true },
-      )).toBe(true);
-
-      expect(equalByQuery(
-        includeQuery,
-        { data: { a: 1, b: 2 } },
-        { data: { a: 1, b: 2 } },
-        { condition: false },
-      )).toBe(true);
+      expect(
+        equalByQuery(
+          includeQuery,
+          { data: { a: 1, b: 2, c: 3 } },
+          { data: { a: 1, b: 2, c: 3 } },
+          { condition: true }
+        )
+      ).toBe(true);
+
+      expect(
+        equalByQuery(
+          includeQuery,
+          { data: { a: 1, b: 2, c: 3 } },
+          { data: { a: 1, b: 2 } },
+          { condition: true }
+        )
+      ).toBe(false);
+
+      expect(
+        equalByQuery(
+          includeQuery,
+          { data: { a: 1, b: 2, c: 3 } },
+          { data: { a: 1, b: 2 } },
+          { condition: false }
+        )
+      ).toBe(true);
+
+      expect(
+        equalByQuery(
+          includeQuery,
+          { data: { a: 1, b: 2 } },
+          { data: { a: 1, b: 2, c: 3 } },
+          { condition: true }
+        )
+      ).toBe(false);
+
+      expect(
+        equalByQuery(
+          includeQuery,
+          { data: { a: 1, b: 2 } },
+          { data: { a: 1, b: 2, c: 3 } },
+          { condition: false }
+        )
+      ).toBe(true);
+
+      expect(
+        equalByQuery(
+          includeQuery,
+          { data: { a: 1, b: 2 } },
+          { data: { a: 1, b: 2 } },
+          { condition: true }
+        )
+      ).toBe(true);
+
+      expect(
+        equalByQuery(
+          includeQuery,
+          { data: { a: 1, b: 2 } },
+          { data: { a: 1, b: 2 } },
+          { condition: false }
+        )
+      ).toBe(true);
     });
   });
 
@@ -258,53 +278,69 @@ describe("equalByQuery", () => {
     const oopsError = new GraphQLError("oops");
     const differentError = new GraphQLError("different");
 
-    expect(equalByQuery(
-      query,
-      { data: data123 },
-      { data: data123, errors: [oopsError] },
-    )).toBe(false);
-
-    expect(equalByQuery(
-      query,
-      { data: data123, errors: [oopsError] },
-      { data: data123 },
-    )).toBe(false);
-
-    expect(equalByQuery(
-      query,
-      { data: data123, errors: [oopsError] },
-      { data: data123, errors: [oopsError] },
-    )).toBe(true);
-
-    expect(equalByQuery(
-      query,
-      { data: data123, errors: [oopsError] },
-      { data: data123, errors: [differentError] },
-    )).toBe(false);
-
-    expect(equalByQuery(
-      query,
-      { data: data123, errors: [oopsError] },
-      { data: data123, errors: [oopsError] },
-    )).toBe(true);
-
-    expect(equalByQuery(
-      query,
-      { data: data123, errors: [oopsError] },
-      { data: { ...data123, b: 100 }, errors: [oopsError] },
-    )).toBe(true);
-
-    expect(equalByQuery(
-      query,
-      { data: data123, errors: [] },
-      { data: data123, errors: [] },
-    )).toBe(true);
-
-    expect(equalByQuery(
-      query,
-      { data: data123, errors: [] },
-      { data: { ...data123, b: 100 }, errors: [] },
-    )).toBe(true);
+    expect(
+      equalByQuery(
+        query,
+        { data: data123 },
+        { data: data123, errors: [oopsError] }
+      )
+    ).toBe(false);
+
+    expect(
+      equalByQuery(
+        query,
+        { data: data123, errors: [oopsError] },
+        { data: data123 }
+      )
+    ).toBe(false);
+
+    expect(
+      equalByQuery(
+        query,
+        { data: data123, errors: [oopsError] },
+        { data: data123, errors: [oopsError] }
+      )
+    ).toBe(true);
+
+    expect(
+      equalByQuery(
+        query,
+        { data: data123, errors: [oopsError] },
+        { data: data123, errors: [differentError] }
+      )
+    ).toBe(false);
+
+    expect(
+      equalByQuery(
+        query,
+        { data: data123, errors: [oopsError] },
+        { data: data123, errors: [oopsError] }
+      )
+    ).toBe(true);
+
+    expect(
+      equalByQuery(
+        query,
+        { data: data123, errors: [oopsError] },
+        { data: { ...data123, b: 100 }, errors: [oopsError] }
+      )
+    ).toBe(true);
+
+    expect(
+      equalByQuery(
+        query,
+        { data: data123, errors: [] },
+        { data: data123, errors: [] }
+      )
+    ).toBe(true);
+
+    expect(
+      equalByQuery(
+        query,
+        { data: data123, errors: [] },
+        { data: { ...data123, b: 100 }, errors: [] }
+      )
+    ).toBe(true);
   });
 
   it("respects the @nonreactive directive on inline fragments", () => {
@@ -318,17 +354,21 @@ describe("equalByQuery", () => {
       }
     `;
 
-    expect(equalByQuery(
-      query,
-      { data: { a: 1, b: 2, c: 3 } },
-      { data: { a: 1, b: 20, c: 30 } },
-    )).toBe(true);
-
-    expect(equalByQuery(
-      query,
-      { data: { a: 1, b: 2, c: 3 } },
-      { data: { a: 10, b: 20, c: 30 } },
-    )).toBe(false);
+    expect(
+      equalByQuery(
+        query,
+        { data: { a: 1, b: 2, c: 3 } },
+        { data: { a: 1, b: 20, c: 30 } }
+      )
+    ).toBe(true);
+
+    expect(
+      equalByQuery(
+        query,
+        { data: { a: 1, b: 2, c: 3 } },
+        { data: { a: 10, b: 20, c: 30 } }
+      )
+    ).toBe(false);
   });
 
   it("respects the @nonreactive directive on named fragment ...spreads", () => {
@@ -344,29 +384,37 @@ describe("equalByQuery", () => {
       }
     `;
 
-    expect(equalByQuery(
-      query,
-      { data: { a: 1, b: 2, c: 3 } },
-      { data: { a: 1, b: 2, c: 30 } },
-    )).toBe(true);
-
-    expect(equalByQuery(
-      query,
-      { data: { a: 1, b: 2, c: 3 } },
-      { data: { a: 1, b: 20, c: 3 } },
-    )).toBe(true);
-
-    expect(equalByQuery(
-      query,
-      { data: { a: 1, b: 2, c: 3 } },
-      { data: { a: 1, b: 20, c: 30 } },
-    )).toBe(true);
-
-    expect(equalByQuery(
-      query,
-      { data: { a: 1, b: 2, c: 3 } },
-      { data: { a: 10, b: 20, c: 30 } },
-    )).toBe(false);
+    expect(
+      equalByQuery(
+        query,
+        { data: { a: 1, b: 2, c: 3 } },
+        { data: { a: 1, b: 2, c: 30 } }
+      )
+    ).toBe(true);
+
+    expect(
+      equalByQuery(
+        query,
+        { data: { a: 1, b: 2, c: 3 } },
+        { data: { a: 1, b: 20, c: 3 } }
+      )
+    ).toBe(true);
+
+    expect(
+      equalByQuery(
+        query,
+        { data: { a: 1, b: 2, c: 3 } },
+        { data: { a: 1, b: 20, c: 30 } }
+      )
+    ).toBe(true);
+
+    expect(
+      equalByQuery(
+        query,
+        { data: { a: 1, b: 2, c: 3 } },
+        { data: { a: 10, b: 20, c: 30 } }
+      )
+    ).toBe(false);
   });
 
   it("respects the @nonreactive directive on named fragment definitions", () => {
@@ -382,29 +430,37 @@ describe("equalByQuery", () => {
       }
     `;
 
-    expect(equalByQuery(
-      query,
-      { data: { a: 1, b: 2, c: 3 } },
-      { data: { a: 1, b: 2, c: 30 } },
-    )).toBe(true);
-
-    expect(equalByQuery(
-      query,
-      { data: { a: 1, b: 2, c: 3 } },
-      { data: { a: 1, b: 20, c: 3 } },
-    )).toBe(true);
-
-    expect(equalByQuery(
-      query,
-      { data: { a: 1, b: 2, c: 3 } },
-      { data: { a: 1, b: 20, c: 30 } },
-    )).toBe(true);
-
-    expect(equalByQuery(
-      query,
-      { data: { a: 1, b: 2, c: 3 } },
-      { data: { a: 10, b: 20, c: 30 } },
-    )).toBe(false);
+    expect(
+      equalByQuery(
+        query,
+        { data: { a: 1, b: 2, c: 3 } },
+        { data: { a: 1, b: 2, c: 30 } }
+      )
+    ).toBe(true);
+
+    expect(
+      equalByQuery(
+        query,
+        { data: { a: 1, b: 2, c: 3 } },
+        { data: { a: 1, b: 20, c: 3 } }
+      )
+    ).toBe(true);
+
+    expect(
+      equalByQuery(
+        query,
+        { data: { a: 1, b: 2, c: 3 } },
+        { data: { a: 1, b: 20, c: 30 } }
+      )
+    ).toBe(true);
+
+    expect(
+      equalByQuery(
+        query,
+        { data: { a: 1, b: 2, c: 3 } },
+        { data: { a: 10, b: 20, c: 30 } }
+      )
+    ).toBe(false);
   });
 
   it("traverses fragments without @nonreactive", () => {
@@ -420,41 +476,53 @@ describe("equalByQuery", () => {
       }
     `;
 
-    expect(equalByQuery(
-      query,
-      { data: { a: 1, b: 2, c: 3 } },
-      { data: { a: 1, b: 2, c: 3 } },
-    )).toBe(true);
-
-    expect(equalByQuery(
-      query,
-      { data: { a: 1, b: 2, c: 3 } },
-      { data: { c: 3, a: 1, b: 2 } },
-    )).toBe(true);
-
-    expect(equalByQuery(
-      query,
-      { data: { a: 1, b: 2, c: 3 } },
-      { data: { a: 1, b: 2, c: 30 } },
-    )).toBe(false);
-
-    expect(equalByQuery(
-      query,
-      { data: { a: 1, b: 2, c: 3 } },
-      { data: { a: 1, b: 20, c: 3 } },
-    )).toBe(false);
-
-    expect(equalByQuery(
-      query,
-      { data: { a: 1, b: 2, c: 3 } },
-      { data: { a: 1, b: 20, c: 30 } },
-    )).toBe(false);
-
-    expect(equalByQuery(
-      query,
-      { data: { a: 1, b: 2, c: 3 } },
-      { data: { a: 10, b: 20, c: 30 } },
-    )).toBe(false);
+    expect(
+      equalByQuery(
+        query,
+        { data: { a: 1, b: 2, c: 3 } },
+        { data: { a: 1, b: 2, c: 3 } }
+      )
+    ).toBe(true);
+
+    expect(
+      equalByQuery(
+        query,
+        { data: { a: 1, b: 2, c: 3 } },
+        { data: { c: 3, a: 1, b: 2 } }
+      )
+    ).toBe(true);
+
+    expect(
+      equalByQuery(
+        query,
+        { data: { a: 1, b: 2, c: 3 } },
+        { data: { a: 1, b: 2, c: 30 } }
+      )
+    ).toBe(false);
+
+    expect(
+      equalByQuery(
+        query,
+        { data: { a: 1, b: 2, c: 3 } },
+        { data: { a: 1, b: 20, c: 3 } }
+      )
+    ).toBe(false);
+
+    expect(
+      equalByQuery(
+        query,
+        { data: { a: 1, b: 2, c: 3 } },
+        { data: { a: 1, b: 20, c: 30 } }
+      )
+    ).toBe(false);
+
+    expect(
+      equalByQuery(
+        query,
+        { data: { a: 1, b: 2, c: 3 } },
+        { data: { a: 10, b: 20, c: 30 } }
+      )
+    ).toBe(false);
   });
 
   type Thing = {
@@ -539,99 +607,116 @@ describe("equalByQuery", () => {
         }
       }
     `,
-  ])("iterates over array-valued result fields ignoring @nonreactive (%#)", query => {
-    let nextVolatileIntegerPart = 0;
-    const makeThing = (id: string, stable = 1): Thing => ({
-      __typename: "Thing",
-      id,
-      stable,
-      // Thing.volatile is always a different randomized number, which normally
-      // would threatens any deep comparison of Thing objects. These test cases
-      // demonstrate (among other things) that we can make the result comparison
-      // insensitive to this volatility by marking the volatile field with the
-      // @nonreactive directive.
-      volatile: (nextVolatileIntegerPart++) + Math.random(),
-    });
-
-    const makeThings = (lettersToSplit: string, stable: number = 1): Thing[] =>
-      lettersToSplit.split("").map(id => makeThing(id, stable));
-
-    expect(equalByQuery(
-      query,
-      { data: { things: makeThings("abc") } },
-      { data: { things: [makeThing("a"), makeThing("b"), makeThing("c")] } },
-    )).toBe(true);
-
-    expect(equalByQuery(
-      query,
-      { data: { things: makeThings("abcdefg", 2) } },
-      { data: { things: makeThings("abcdefg") } },
-    )).toBe(false);
-
-    expect(equalByQuery(
-      query,
-      { data: { things: makeThings("abcdefg", 2) } },
-      { data: { things: makeThings("abcdefg", 3) } },
-    )).toBe(false);
-
-    expect(equalByQuery(
-      query,
-      { data: { things: makeThings("abcdefg", 3) } },
-      { data: { things: makeThings("abcdefg", 3) } },
-    )).toBe(true);
-
-    expect(equalByQuery(
-      query,
-      { data: { things: makeThings("ab", 2345) } },
-      { data: { things: [makeThing("a"), makeThing("b", 2345)] } },
-    )).toBe(false);
-
-    expect(equalByQuery(
-      query,
-      { data: { things: makeThings("ab", 3456) } },
-      { data: { things: [makeThing("a", 3456), makeThing("b")] } },
-    )).toBe(false);
-
-    expect(equalByQuery(
-      query,
-      { data: { things: makeThings("ab", 3456) } },
-      { data: { things: [makeThing("a", 3456), makeThing("b", 3456)] } },
-    )).toBe(true);
-
-    expect(equalByQuery(
-      query,
-      { data: { things: makeThings("abc") } },
-      { data: { things: "not an array" } },
-    )).toBe(false);
-
-    expect(equalByQuery(
-      query,
-      { data: { things: {} } },
-      { data: { things: [] } },
-    )).toBe(false);
-
-    expect(equalByQuery(
-      query,
-      { data: { things: [] } },
-      { data: { things: {} } },
-    )).toBe(false);
-
-    expect(equalByQuery(
-      query,
-      { data: { things: [] } },
-      { data: { things: [] } },
-    )).toBe(true);
-
-    expect(equalByQuery(
-      query,
-      // There's nothing inherently array-like about the Query.things field as
-      // it's represented in query syntax, since `query { things { id } }` could
-      // (depending on the server/schema) return a single object for the things
-      // field, rather than an array. Although this might seem like a strange
-      // edge case to test, it demonstrates the equalByQuery function can handle
-      // any combination of array/non-array values.
-      { data: { things: {} } },
-      { data: { things: {} } },
-    )).toBe(true);
-  });
+  ])(
+    "iterates over array-valued result fields ignoring @nonreactive (%#)",
+    (query) => {
+      let nextVolatileIntegerPart = 0;
+      const makeThing = (id: string, stable = 1): Thing => ({
+        __typename: "Thing",
+        id,
+        stable,
+        // Thing.volatile is always a different randomized number, which normally
+        // would threatens any deep comparison of Thing objects. These test cases
+        // demonstrate (among other things) that we can make the result comparison
+        // insensitive to this volatility by marking the volatile field with the
+        // @nonreactive directive.
+        volatile: nextVolatileIntegerPart++ + Math.random(),
+      });
+
+      const makeThings = (
+        lettersToSplit: string,
+        stable: number = 1
+      ): Thing[] => lettersToSplit.split("").map((id) => makeThing(id, stable));
+
+      expect(
+        equalByQuery(
+          query,
+          { data: { things: makeThings("abc") } },
+          { data: { things: [makeThing("a"), makeThing("b"), makeThing("c")] } }
+        )
+      ).toBe(true);
+
+      expect(
+        equalByQuery(
+          query,
+          { data: { things: makeThings("abcdefg", 2) } },
+          { data: { things: makeThings("abcdefg") } }
+        )
+      ).toBe(false);
+
+      expect(
+        equalByQuery(
+          query,
+          { data: { things: makeThings("abcdefg", 2) } },
+          { data: { things: makeThings("abcdefg", 3) } }
+        )
+      ).toBe(false);
+
+      expect(
+        equalByQuery(
+          query,
+          { data: { things: makeThings("abcdefg", 3) } },
+          { data: { things: makeThings("abcdefg", 3) } }
+        )
+      ).toBe(true);
+
+      expect(
+        equalByQuery(
+          query,
+          { data: { things: makeThings("ab", 2345) } },
+          { data: { things: [makeThing("a"), makeThing("b", 2345)] } }
+        )
+      ).toBe(false);
+
+      expect(
+        equalByQuery(
+          query,
+          { data: { things: makeThings("ab", 3456) } },
+          { data: { things: [makeThing("a", 3456), makeThing("b")] } }
+        )
+      ).toBe(false);
+
+      expect(
+        equalByQuery(
+          query,
+          { data: { things: makeThings("ab", 3456) } },
+          { data: { things: [makeThing("a", 3456), makeThing("b", 3456)] } }
+        )
+      ).toBe(true);
+
+      expect(
+        equalByQuery(
+          query,
+          { data: { things: makeThings("abc") } },
+          { data: { things: "not an array" } }
+        )
+      ).toBe(false);
+
+      expect(
+        equalByQuery(query, { data: { things: {} } }, { data: { things: [] } })
+      ).toBe(false);
+
+      expect(
+        equalByQuery(query, { data: { things: [] } }, { data: { things: {} } })
+      ).toBe(false);
+
+      expect(
+        equalByQuery(query, { data: { things: [] } }, { data: { things: [] } })
+      ).toBe(true);
+
+      expect(
+        equalByQuery(
+          query,
+          // There's nothing inherently array-like about the Query.things field as
+          // it's represented in query syntax, since `query { things { id } }` could
+          // (depending on the server/schema) return a single object for the things
+          // field, rather than an array. Although this might seem like a strange
+          // edge case to test, it demonstrates the equalByQuery function can handle
+          // any combination of array/non-array values.
+          { data: { things: {} } },
+          { data: { things: {} } }
+        )
+      ).toBe(true);
+    }
+  );
 });
diff --git a/src/core/equalByQuery.ts b/src/core/equalByQuery.ts
index 0ac40c95558..d971061fdcf 100644
--- a/src/core/equalByQuery.ts
+++ b/src/core/equalByQuery.ts
@@ -1,4 +1,4 @@
-import equal from '@wry/equality';
+import equal from "@wry/equality";
 
 import type {
   DirectiveNode,
@@ -9,11 +9,11 @@ import type {
   InlineFragmentNode,
   SelectionNode,
   SelectionSetNode,
-} from 'graphql';
+} from "graphql";
 
-import type { ApolloQueryResult, OperationVariables } from './types.js';
+import type { ApolloQueryResult, OperationVariables } from "./types.js";
 
-import type { FragmentMap } from '../utilities/index.js';
+import type { FragmentMap } from "../utilities/index.js";
 import {
   createFragmentMap,
   getFragmentDefinitions,
@@ -22,7 +22,7 @@ import {
   isField,
   resultKeyNameFromField,
   shouldInclude,
-} from '../utilities/index.js';
+} from "../utilities/index.js";
 
 // Returns true if aResult and bResult are deeply equal according to the fields
 // selected by the given query, ignoring any fields marked as @nonreactive.
@@ -152,5 +152,5 @@ function selectionHasNonreactiveDirective(
 }
 
 function directiveIsNonreactive(dir: DirectiveNode): boolean {
-  return dir.name.value === 'nonreactive';
+  return dir.name.value === "nonreactive";
 }
diff --git a/src/dev/index.ts b/src/dev/index.ts
index 47b8d089dbd..7d6b01f873f 100644
--- a/src/dev/index.ts
+++ b/src/dev/index.ts
@@ -1,3 +1,3 @@
-export { loadDevMessages } from './loadDevMessages.js';
-export { loadErrorMessageHandler } from './loadErrorMessageHandler.js';
-export { loadErrorMessages } from './loadErrorMessages.js';
+export { loadDevMessages } from "./loadDevMessages.js";
+export { loadErrorMessageHandler } from "./loadErrorMessageHandler.js";
+export { loadErrorMessages } from "./loadErrorMessages.js";
diff --git a/src/dev/loadDevMessages.ts b/src/dev/loadDevMessages.ts
index 5ad1aa130aa..f39d742231b 100644
--- a/src/dev/loadDevMessages.ts
+++ b/src/dev/loadDevMessages.ts
@@ -1,5 +1,5 @@
-import { devDebug, devError, devLog, devWarn } from '../invariantErrorCodes.js';
-import { loadErrorMessageHandler } from './loadErrorMessageHandler.js';
+import { devDebug, devError, devLog, devWarn } from "../invariantErrorCodes.js";
+import { loadErrorMessageHandler } from "./loadErrorMessageHandler.js";
 
 export function loadDevMessages() {
   loadErrorMessageHandler(devDebug, devError, devLog, devWarn);
diff --git a/src/dev/loadErrorMessageHandler.ts b/src/dev/loadErrorMessageHandler.ts
index 120f7d43919..6dc7743ef2c 100644
--- a/src/dev/loadErrorMessageHandler.ts
+++ b/src/dev/loadErrorMessageHandler.ts
@@ -1,6 +1,6 @@
-import type { ErrorCodes } from '../invariantErrorCodes.js';
-import { global } from '../utilities/globals/index.js';
-import { ApolloErrorMessageHandler } from '../utilities/globals/invariantWrappers.js';
+import type { ErrorCodes } from "../invariantErrorCodes.js";
+import { global } from "../utilities/globals/index.js";
+import { ApolloErrorMessageHandler } from "../utilities/globals/invariantWrappers.js";
 
 export function loadErrorMessageHandler(...errorCodes: ErrorCodes[]) {
   if (!global[ApolloErrorMessageHandler]) {
@@ -14,13 +14,13 @@ export function loadErrorMessageHandler(...errorCodes: ErrorCodes[]) {
   return global[ApolloErrorMessageHandler];
 
   function handler(message: string | number, args: unknown[]) {
-    if (typeof message === 'number') {
+    if (typeof message === "number") {
       const definition = global[ApolloErrorMessageHandler]![message];
       if (!message || !definition.message) return;
       message = definition.message;
     }
     return args.reduce<string>(
-      (msg, arg) => msg.replace('%s', String(arg)),
+      (msg, arg) => msg.replace("%s", String(arg)),
       String(message)
     );
   }
diff --git a/src/dev/loadErrorMessages.ts b/src/dev/loadErrorMessages.ts
index fa64ef81735..a2c08706362 100644
--- a/src/dev/loadErrorMessages.ts
+++ b/src/dev/loadErrorMessages.ts
@@ -1,5 +1,5 @@
-import { errorCodes } from '../invariantErrorCodes.js';
-import { loadErrorMessageHandler } from './loadErrorMessageHandler.js';
+import { errorCodes } from "../invariantErrorCodes.js";
+import { loadErrorMessageHandler } from "./loadErrorMessageHandler.js";
 
 export function loadErrorMessages() {
   loadErrorMessageHandler(errorCodes);
diff --git a/src/link/remove-typename/__tests__/removeTypenameFromVariables.ts b/src/link/remove-typename/__tests__/removeTypenameFromVariables.ts
index e7f7aedf14a..b067e539cb0 100644
--- a/src/link/remove-typename/__tests__/removeTypenameFromVariables.ts
+++ b/src/link/remove-typename/__tests__/removeTypenameFromVariables.ts
@@ -1,13 +1,13 @@
 import {
   KEEP,
   removeTypenameFromVariables,
-} from '../removeTypenameFromVariables';
-import { ApolloLink, Operation } from '../../core';
-import { Observable, gql } from '../../../core';
-import { createOperation, toPromise } from '../../utils';
+} from "../removeTypenameFromVariables";
+import { ApolloLink, Operation } from "../../core";
+import { Observable, gql } from "../../../core";
+import { createOperation, toPromise } from "../../utils";
 
-type PartialOperation = Partial<Pick<Operation, 'variables'>> &
-  Pick<Operation, 'query'>;
+type PartialOperation = Partial<Pick<Operation, "variables">> &
+  Pick<Operation, "query">;
 
 // Since this link modifies the `operation` and we only care to test against
 // the changed operation, we use a custom `execute` helper here instead of the
@@ -26,7 +26,7 @@ async function execute(link: ApolloLink, operation: PartialOperation) {
   return data as Operation;
 }
 
-test('strips all __typename keys by default', async () => {
+test("strips all __typename keys by default", async () => {
   const query = gql`
     query Test($foo: FooInput!, $bar: BarInput!) {
       someField(foo: $foo, bar: $bar)
@@ -39,20 +39,20 @@ test('strips all __typename keys by default', async () => {
     query,
     variables: {
       foo: {
-        __typename: 'Foo',
+        __typename: "Foo",
         foo: true,
-        bar: 'Bar',
-        baz: { __typename: 'Baz', baz: true },
-        qux: [{ __typename: 'Qux', qux: 0 }],
+        bar: "Bar",
+        baz: { __typename: "Baz", baz: true },
+        qux: [{ __typename: "Qux", qux: 0 }],
       },
-      bar: [{ __typename: 'Bar', bar: true }],
+      bar: [{ __typename: "Bar", bar: true }],
     },
   });
 
   expect(variables).toStrictEqual({
     foo: {
       foo: true,
-      bar: 'Bar',
+      bar: "Bar",
       baz: { baz: true },
       qux: [{ qux: 0 }],
     },
@@ -60,7 +60,7 @@ test('strips all __typename keys by default', async () => {
   });
 });
 
-test('does nothing when no variables are passed', async () => {
+test("does nothing when no variables are passed", async () => {
   const query = gql`
     query Test {
       foo {
@@ -77,7 +77,7 @@ test('does nothing when no variables are passed', async () => {
   expect(resultOperation).toBe(operation);
 });
 
-test('does nothing when no variables are passed even if variables are declared in the document', async () => {
+test("does nothing when no variables are passed even if variables are declared in the document", async () => {
   const query = gql`
     query Test($unused: Boolean) {
       foo {
@@ -94,7 +94,7 @@ test('does nothing when no variables are passed even if variables are declared i
   expect(resultOperation).toBe(operation);
 });
 
-test('keeps __typename for variables with types defined by `except`', async () => {
+test("keeps __typename for variables with types defined by `except`", async () => {
   const query = gql`
     query Test($foo: JSON, $bar: BarInput) {
       someField(foo: $foo, bar: $bar)
@@ -111,25 +111,25 @@ test('keeps __typename for variables with types defined by `except`', async () =
     query,
     variables: {
       foo: {
-        __typename: 'Foo',
+        __typename: "Foo",
         foo: true,
-        baz: { __typename: 'Baz', baz: true },
+        baz: { __typename: "Baz", baz: true },
       },
-      bar: { __typename: 'Bar', bar: true },
+      bar: { __typename: "Bar", bar: true },
     },
   });
 
   expect(variables).toStrictEqual({
     foo: {
-      __typename: 'Foo',
+      __typename: "Foo",
       foo: true,
-      baz: { __typename: 'Baz', baz: true },
+      baz: { __typename: "Baz", baz: true },
     },
     bar: { bar: true },
   });
 });
 
-test('keeps __typename in all variables with types configured with `except`', async () => {
+test("keeps __typename in all variables with types configured with `except`", async () => {
   const query = gql`
     query Test($foo: JSON, $bar: Config, $baz: BazInput) {
       someField(foo: $foo, bar: $bar, baz: $baz)
@@ -146,20 +146,20 @@ test('keeps __typename in all variables with types configured with `except`', as
   const { variables } = await execute(link, {
     query,
     variables: {
-      foo: { __typename: 'Foo', foo: true },
-      bar: { __typename: 'Bar', bar: true },
-      baz: { __typename: 'Baz', baz: true },
+      foo: { __typename: "Foo", foo: true },
+      bar: { __typename: "Bar", bar: true },
+      baz: { __typename: "Baz", baz: true },
     },
   });
 
   expect(variables).toStrictEqual({
-    foo: { __typename: 'Foo', foo: true },
-    bar: { __typename: 'Bar', bar: true },
+    foo: { __typename: "Foo", foo: true },
+    bar: { __typename: "Bar", bar: true },
     baz: { baz: true },
   });
 });
 
-test('handles variable declarations declared as non null and list types', async () => {
+test("handles variable declarations declared as non null and list types", async () => {
   const query = gql`
     query Test($foo: JSON!, $bar: [JSON], $baz: [JSON!]!, $qux: QuxInput!) {
       someField(foo: $foo, bar: $bar, baz: $baz)
@@ -175,32 +175,32 @@ test('handles variable declarations declared as non null and list types', async
   const { variables } = await execute(link, {
     query,
     variables: {
-      foo: { __typename: 'Foo', foo: true },
+      foo: { __typename: "Foo", foo: true },
       bar: [
-        { __typename: 'Bar', bar: true, baz: { __typename: 'Baz', baz: true } },
+        { __typename: "Bar", bar: true, baz: { __typename: "Baz", baz: true } },
       ],
       baz: [
-        { __typename: 'Baz', baz: true },
-        { __typename: 'Baz', baz: true },
+        { __typename: "Baz", baz: true },
+        { __typename: "Baz", baz: true },
       ],
-      qux: { __typename: 'Qux', qux: true },
+      qux: { __typename: "Qux", qux: true },
     },
   });
 
   expect(variables).toStrictEqual({
-    foo: { __typename: 'Foo', foo: true },
+    foo: { __typename: "Foo", foo: true },
     bar: [
-      { __typename: 'Bar', bar: true, baz: { __typename: 'Baz', baz: true } },
+      { __typename: "Bar", bar: true, baz: { __typename: "Baz", baz: true } },
     ],
     baz: [
-      { __typename: 'Baz', baz: true },
-      { __typename: 'Baz', baz: true },
+      { __typename: "Baz", baz: true },
+      { __typename: "Baz", baz: true },
     ],
     qux: { qux: true },
   });
 });
 
-test('keeps __typename at configured fields under input object types', async () => {
+test("keeps __typename at configured fields under input object types", async () => {
   const query = gql`
     query Test($foo: FooInput) {
       someField(foo: $foo)
@@ -220,18 +220,18 @@ test('keeps __typename at configured fields under input object types', async ()
     query,
     variables: {
       foo: {
-        __typename: 'Foo',
+        __typename: "Foo",
         aa: true,
         bar: {
-          __typename: 'Bar',
+          __typename: "Bar",
           bb: true,
         },
         baz: {
-          __typename: 'Baz',
+          __typename: "Baz",
           cc: true,
         },
         qux: {
-          __typename: 'Qux',
+          __typename: "Qux",
           dd: true,
         },
       },
@@ -242,11 +242,11 @@ test('keeps __typename at configured fields under input object types', async ()
     foo: {
       aa: true,
       bar: {
-        __typename: 'Bar',
+        __typename: "Bar",
         bb: true,
       },
       baz: {
-        __typename: 'Baz',
+        __typename: "Baz",
         cc: true,
       },
       qux: {
@@ -256,7 +256,7 @@ test('keeps __typename at configured fields under input object types', async ()
   });
 });
 
-test('keeps __typename at a deeply nested field', async () => {
+test("keeps __typename at a deeply nested field", async () => {
   const query = gql`
     query Test($foo: FooInput) {
       someField(foo: $foo)
@@ -279,13 +279,13 @@ test('keeps __typename at a deeply nested field', async () => {
     query,
     variables: {
       foo: {
-        __typename: 'Foo',
+        __typename: "Foo",
         bar: {
-          __typename: 'Bar',
+          __typename: "Bar",
           baz: {
-            __typename: 'Baz',
+            __typename: "Baz",
             qux: {
-              __typename: 'Qux',
+              __typename: "Qux",
               quux: true,
             },
           },
@@ -299,7 +299,7 @@ test('keeps __typename at a deeply nested field', async () => {
       bar: {
         baz: {
           qux: {
-            __typename: 'Qux',
+            __typename: "Qux",
             quux: true,
           },
         },
@@ -308,7 +308,7 @@ test('keeps __typename at a deeply nested field', async () => {
   });
 });
 
-test('handles configured fields varying nesting levels', async () => {
+test("handles configured fields varying nesting levels", async () => {
   const query = gql`
     query Test($foo: FooInput) {
       someField(foo: $foo)
@@ -330,15 +330,15 @@ test('handles configured fields varying nesting levels', async () => {
     query,
     variables: {
       foo: {
-        __typename: 'Foo',
+        __typename: "Foo",
         bar: {
-          __typename: 'Bar',
+          __typename: "Bar",
           aa: true,
         },
         baz: {
-          __typename: 'Baz',
+          __typename: "Baz",
           qux: {
-            __typename: 'Qux',
+            __typename: "Qux",
             quux: true,
           },
         },
@@ -349,12 +349,12 @@ test('handles configured fields varying nesting levels', async () => {
   expect(variables).toStrictEqual({
     foo: {
       bar: {
-        __typename: 'Bar',
+        __typename: "Bar",
         aa: true,
       },
       baz: {
         qux: {
-          __typename: 'Qux',
+          __typename: "Qux",
           quux: true,
         },
       },
@@ -362,7 +362,7 @@ test('handles configured fields varying nesting levels', async () => {
   });
 });
 
-test('handles multiple configured types with fields', async () => {
+test("handles multiple configured types with fields", async () => {
   const query = gql`
     query Test($foo: FooInput, $baz: BazInput) {
       someField(foo: $foo, baz: $baz)
@@ -384,16 +384,16 @@ test('handles multiple configured types with fields', async () => {
     query,
     variables: {
       foo: {
-        __typename: 'Foo',
+        __typename: "Foo",
         bar: {
-          __typename: 'Bar',
+          __typename: "Bar",
           aa: true,
         },
       },
       baz: {
-        __typename: 'Bar',
+        __typename: "Bar",
         qux: {
-          __typename: 'Qux',
+          __typename: "Qux",
           bb: true,
         },
       },
@@ -403,20 +403,20 @@ test('handles multiple configured types with fields', async () => {
   expect(variables).toStrictEqual({
     foo: {
       bar: {
-        __typename: 'Bar',
+        __typename: "Bar",
         aa: true,
       },
     },
     baz: {
       qux: {
-        __typename: 'Qux',
+        __typename: "Qux",
         bb: true,
       },
     },
   });
 });
 
-test('handles when __typename is not present in all paths', async () => {
+test("handles when __typename is not present in all paths", async () => {
   const query = gql`
     query Test($foo: JSON, $bar: BarInput) {
       someField(foo: $foo, bar: $bar)
@@ -434,24 +434,24 @@ test('handles when __typename is not present in all paths', async () => {
     variables: {
       foo: {
         foo: true,
-        baz: { __typename: 'Baz', baz: true },
+        baz: { __typename: "Baz", baz: true },
       },
       bar: { bar: true },
-      qux: { __typename: 'Qux', bar: true },
+      qux: { __typename: "Qux", bar: true },
     },
   });
 
   expect(variables).toStrictEqual({
     foo: {
       foo: true,
-      baz: { __typename: 'Baz', baz: true },
+      baz: { __typename: "Baz", baz: true },
     },
     bar: { bar: true },
     qux: { bar: true },
   });
 });
 
-test('handles when __typename is not present in variables', async () => {
+test("handles when __typename is not present in variables", async () => {
   const query = gql`
     query Test($foo: JSON, $bar: BarInput) {
       someField(foo: $foo, bar: $bar)
@@ -486,7 +486,7 @@ test('handles when __typename is not present in variables', async () => {
   });
 });
 
-test('handles when declared variables are unused', async () => {
+test("handles when declared variables are unused", async () => {
   const query = gql`
     query Test($foo: FooInput, $unused: JSON) {
       someField(foo: $foo, bar: $bar)
@@ -503,9 +503,9 @@ test('handles when declared variables are unused', async () => {
     query,
     variables: {
       foo: {
-        __typename: 'Foo',
+        __typename: "Foo",
         foo: true,
-        baz: { __typename: 'Bar', baz: true },
+        baz: { __typename: "Bar", baz: true },
       },
     },
   });
@@ -518,7 +518,7 @@ test('handles when declared variables are unused', async () => {
   });
 });
 
-test('ensures operation.getContext and operation.setContext functions are properly forwarded', async () => {
+test("ensures operation.getContext and operation.setContext functions are properly forwarded", async () => {
   const query = gql`
     query Test($foo: FooInput) {
       someField(foo: $foo)
@@ -530,11 +530,11 @@ test('ensures operation.getContext and operation.setContext functions are proper
   const operationWithoutVariables = await execute(link, { query });
   const operationWithVariables = await execute(link, {
     query,
-    variables: { foo: { __typename: 'FooInput', bar: true } },
+    variables: { foo: { __typename: "FooInput", bar: true } },
   });
 
-  expect(typeof operationWithoutVariables.getContext).toBe('function');
-  expect(typeof operationWithoutVariables.setContext).toBe('function');
-  expect(typeof operationWithVariables.getContext).toBe('function');
-  expect(typeof operationWithVariables.setContext).toBe('function');
+  expect(typeof operationWithoutVariables.getContext).toBe("function");
+  expect(typeof operationWithoutVariables.setContext).toBe("function");
+  expect(typeof operationWithVariables.getContext).toBe("function");
+  expect(typeof operationWithVariables.setContext).toBe("function");
 });
diff --git a/src/link/remove-typename/index.ts b/src/link/remove-typename/index.ts
index e84f627bf7a..372216a8475 100644
--- a/src/link/remove-typename/index.ts
+++ b/src/link/remove-typename/index.ts
@@ -2,4 +2,4 @@ export {
   removeTypenameFromVariables,
   KEEP,
   RemoveTypenameFromVariablesOptions,
-} from './removeTypenameFromVariables.js';
+} from "./removeTypenameFromVariables.js";
diff --git a/src/link/remove-typename/removeTypenameFromVariables.ts b/src/link/remove-typename/removeTypenameFromVariables.ts
index 50a79c64dd6..f8362dddbc3 100644
--- a/src/link/remove-typename/removeTypenameFromVariables.ts
+++ b/src/link/remove-typename/removeTypenameFromVariables.ts
@@ -1,11 +1,11 @@
-import { wrap } from 'optimism';
-import type { DocumentNode, TypeNode } from 'graphql';
-import { Kind, visit } from 'graphql';
-import { ApolloLink } from '../core/index.js';
-import { stripTypename, isPlainObject } from '../../utilities/index.js';
-import type { OperationVariables } from '../../core/index.js';
+import { wrap } from "optimism";
+import type { DocumentNode, TypeNode } from "graphql";
+import { Kind, visit } from "graphql";
+import { ApolloLink } from "../core/index.js";
+import { stripTypename, isPlainObject } from "../../utilities/index.js";
+import type { OperationVariables } from "../../core/index.js";
 
-export const KEEP = '__KEEP';
+export const KEEP = "__KEEP";
 
 interface KeepTypenameConfig {
   [key: string]: typeof KEEP | KeepTypenameConfig;
@@ -75,7 +75,7 @@ function maybeStripTypename(
     Object.keys(value).forEach((key) => {
       const child = value[key];
 
-      if (key === '__typename') {
+      if (key === "__typename") {
         return;
       }
 
diff --git a/src/react/cache/QueryReference.ts b/src/react/cache/QueryReference.ts
index 36b9a94a67a..7951771ead3 100644
--- a/src/react/cache/QueryReference.ts
+++ b/src/react/cache/QueryReference.ts
@@ -1,24 +1,24 @@
-import { equal } from '@wry/equality';
+import { equal } from "@wry/equality";
 import type {
   ApolloError,
   ApolloQueryResult,
   ObservableQuery,
   OperationVariables,
   WatchQueryOptions,
-} from '../../core/index.js';
-import { isNetworkRequestSettled } from '../../core/index.js';
-import type { ObservableSubscription } from '../../utilities/index.js';
+} from "../../core/index.js";
+import { isNetworkRequestSettled } from "../../core/index.js";
+import type { ObservableSubscription } from "../../utilities/index.js";
 import {
   createFulfilledPromise,
   createRejectedPromise,
-} from '../../utilities/index.js';
-import type { CacheKey } from './types.js';
-import type { useBackgroundQuery, useReadQuery } from '../hooks/index.js';
+} from "../../utilities/index.js";
+import type { CacheKey } from "./types.js";
+import type { useBackgroundQuery, useReadQuery } from "../hooks/index.js";
 
 type Listener<TData> = (promise: Promise<ApolloQueryResult<TData>>) => void;
 
 type FetchMoreOptions<TData> = Parameters<
-  ObservableQuery<TData>['fetchMore']
+  ObservableQuery<TData>["fetchMore"]
 >[0];
 
 export const QUERY_REFERENCE_SYMBOL: unique symbol = Symbol();
@@ -38,12 +38,12 @@ interface InternalQueryReferenceOptions {
 }
 
 const OBSERVED_CHANGED_OPTIONS: Array<keyof WatchQueryOptions> = [
-  'canonizeResults',
-  'context',
-  'errorPolicy',
-  'fetchPolicy',
-  'refetchWritePolicy',
-  'returnPartialData',
+  "canonizeResults",
+  "context",
+  "errorPolicy",
+  "fetchPolicy",
+  "refetchWritePolicy",
+  "returnPartialData",
 ];
 
 export class InternalQueryReference<TData = unknown> {
@@ -57,7 +57,7 @@ export class InternalQueryReference<TData = unknown> {
   private subscription: ObservableSubscription;
   private listeners = new Set<Listener<TData>>();
   private autoDisposeTimeoutId: NodeJS.Timeout;
-  private status: 'idle' | 'loading' = 'loading';
+  private status: "idle" | "loading" = "loading";
 
   private resolve: ((result: ApolloQueryResult<TData>) => void) | undefined;
   private reject: ((error: unknown) => void) | undefined;
@@ -87,7 +87,7 @@ export class InternalQueryReference<TData = unknown> {
         (!this.result.partial || this.watchQueryOptions.returnPartialData))
     ) {
       this.promise = createFulfilledPromise(this.result);
-      this.status = 'idle';
+      this.status = "idle";
     } else {
       this.promise = new Promise((resolve, reject) => {
         this.resolve = resolve;
@@ -154,7 +154,7 @@ export class InternalQueryReference<TData = unknown> {
     // "standby" is used when `skip` is set to `true`. Detect when we've
     // enabled the query (i.e. `skip` is `false`) to execute a network request.
     if (
-      currentFetchPolicy === 'standby' &&
+      currentFetchPolicy === "standby" &&
       currentFetchPolicy !== watchQueryOptions.fetchPolicy
     ) {
       this.initiateFetch(this.observable.reobserve(watchQueryOptions));
@@ -197,18 +197,18 @@ export class InternalQueryReference<TData = unknown> {
 
   private handleNext(result: ApolloQueryResult<TData>) {
     switch (this.status) {
-      case 'loading': {
+      case "loading": {
         // Maintain the last successful `data` value if the next result does not
         // have one.
         if (result.data === void 0) {
           result.data = this.result.data;
         }
-        this.status = 'idle';
+        this.status = "idle";
         this.result = result;
         this.resolve?.(result);
         break;
       }
-      case 'idle': {
+      case "idle": {
         if (result.data === this.result.data) {
           return;
         }
@@ -229,12 +229,12 @@ export class InternalQueryReference<TData = unknown> {
 
   private handleError(error: ApolloError) {
     switch (this.status) {
-      case 'loading': {
-        this.status = 'idle';
+      case "loading": {
+        this.status = "idle";
         this.reject?.(error);
         break;
       }
-      case 'idle': {
+      case "idle": {
         this.promise = createRejectedPromise(error);
         this.deliver(this.promise);
       }
@@ -246,7 +246,7 @@ export class InternalQueryReference<TData = unknown> {
   }
 
   private initiateFetch(returnedPromise: Promise<ApolloQueryResult<TData>>) {
-    this.status = 'loading';
+    this.status = "loading";
 
     this.promise = new Promise((resolve, reject) => {
       this.resolve = resolve;
@@ -262,8 +262,8 @@ export class InternalQueryReference<TData = unknown> {
     // promise is resolved correctly.
     returnedPromise
       .then((result) => {
-        if (this.status === 'loading') {
-          this.status = 'idle';
+        if (this.status === "loading") {
+          this.status = "idle";
           this.result = result;
           this.resolve?.(result);
         }
diff --git a/src/react/cache/SuspenseCache.ts b/src/react/cache/SuspenseCache.ts
index b5a3b05ba6f..e5f8036ecea 100644
--- a/src/react/cache/SuspenseCache.ts
+++ b/src/react/cache/SuspenseCache.ts
@@ -1,8 +1,8 @@
-import { Trie } from '@wry/trie';
-import type { ObservableQuery } from '../../core/index.js';
-import { canUseWeakMap } from '../../utilities/index.js';
-import { InternalQueryReference } from './QueryReference.js';
-import type { CacheKey } from './types.js';
+import { Trie } from "@wry/trie";
+import type { ObservableQuery } from "../../core/index.js";
+import { canUseWeakMap } from "../../utilities/index.js";
+import { InternalQueryReference } from "./QueryReference.js";
+import type { CacheKey } from "./types.js";
 
 export interface SuspenseCacheOptions {
   /**
@@ -19,7 +19,9 @@ export interface SuspenseCacheOptions {
 }
 
 export class SuspenseCache {
-  private queryRefs = new Trie<{ current?: InternalQueryReference }>(canUseWeakMap);
+  private queryRefs = new Trie<{ current?: InternalQueryReference }>(
+    canUseWeakMap
+  );
   private options: SuspenseCacheOptions;
 
   constructor(options: SuspenseCacheOptions = Object.create(null)) {
diff --git a/src/react/cache/getSuspenseCache.ts b/src/react/cache/getSuspenseCache.ts
index b696a5366f7..93fbc72b98a 100644
--- a/src/react/cache/getSuspenseCache.ts
+++ b/src/react/cache/getSuspenseCache.ts
@@ -1,8 +1,8 @@
-import type { SuspenseCacheOptions } from './index.js';
-import { SuspenseCache } from './SuspenseCache.js';
-import type { ApolloClient } from '../../core/ApolloClient.js';
+import type { SuspenseCacheOptions } from "./index.js";
+import { SuspenseCache } from "./SuspenseCache.js";
+import type { ApolloClient } from "../../core/ApolloClient.js";
 
-declare module '../../core/ApolloClient.js' {
+declare module "../../core/ApolloClient.js" {
   interface DefaultOptions {
     react?: {
       suspense?: Readonly<SuspenseCacheOptions>;
@@ -10,7 +10,7 @@ declare module '../../core/ApolloClient.js' {
   }
 }
 
-const suspenseCacheSymbol = Symbol.for('apollo.suspenseCache');
+const suspenseCacheSymbol = Symbol.for("apollo.suspenseCache");
 
 export function getSuspenseCache(
   client: ApolloClient<object> & {
diff --git a/src/react/cache/index.ts b/src/react/cache/index.ts
index 1ed99e6512f..95a1a1c9c86 100644
--- a/src/react/cache/index.ts
+++ b/src/react/cache/index.ts
@@ -1,27 +1,27 @@
-export type { SuspenseCacheOptions } from './SuspenseCache.js';
-export { getSuspenseCache } from './getSuspenseCache.js';
+export type { SuspenseCacheOptions } from "./SuspenseCache.js";
+export { getSuspenseCache } from "./getSuspenseCache.js";
 
-import { SuspenseCache as RealSuspenseCache } from './SuspenseCache.js';
+import { SuspenseCache as RealSuspenseCache } from "./SuspenseCache.js";
 
 // TODO: remove export with release 3.8
 // replace with
 // export type { SuspenseCache } from './SuspenseCache.js';
 /**
- * @deprecated 
+ * @deprecated
  * It is no longer necessary to create a `SuspenseCache` instance and pass it into the `ApolloProvider`.
  * Please remove this code from your application.
- *  
+ *
  * This export will be removed with the final 3.8 release.
  */
 export class SuspenseCache extends RealSuspenseCache {
-  constructor(){
+  constructor() {
     super();
     // throwing an error here instead of using invariant - we do not want this error
     // message to be link-ified, but to directly show up as bold as possible
     throw new Error(
-      'It is no longer necessary to create a `SuspenseCache` instance and pass it into the `ApolloProvider`.\n' + 
-      'Please remove this code from your application. \n\n' + 
-      'This export will be removed with the final 3.8 release.'
+      "It is no longer necessary to create a `SuspenseCache` instance and pass it into the `ApolloProvider`.\n" +
+        "Please remove this code from your application. \n\n" +
+        "This export will be removed with the final 3.8 release."
     );
   }
-}
\ No newline at end of file
+}
diff --git a/src/react/cache/types.ts b/src/react/cache/types.ts
index 65b75ec8704..e9e0ba8b826 100644
--- a/src/react/cache/types.ts
+++ b/src/react/cache/types.ts
@@ -1,3 +1,7 @@
 import type { DocumentNode } from "graphql";
 
-export type CacheKey = [query: DocumentNode, stringifiedVariables: string, ...queryKey: any[]];
+export type CacheKey = [
+  query: DocumentNode,
+  stringifiedVariables: string,
+  ...queryKey: any[],
+];
diff --git a/src/react/components/Mutation.tsx b/src/react/components/Mutation.tsx
index 96a150be61d..492e0089312 100644
--- a/src/react/components/Mutation.tsx
+++ b/src/react/components/Mutation.tsx
@@ -1,8 +1,8 @@
-import * as PropTypes from 'prop-types';
+import * as PropTypes from "prop-types";
 
-import type { OperationVariables } from '../../core/index.js';
-import type { MutationComponentOptions } from './types.js';
-import { useMutation } from '../hooks/index.js';
+import type { OperationVariables } from "../../core/index.js";
+import type { MutationComponentOptions } from "./types.js";
+import { useMutation } from "../hooks/index.js";
 
 export function Mutation<TData = any, TVariables = OperationVariables>(
   props: MutationComponentOptions<TData, TVariables>
@@ -23,7 +23,7 @@ Mutation.propTypes = {
     PropTypes.arrayOf(
       PropTypes.oneOfType([PropTypes.string, PropTypes.object])
     ),
-    PropTypes.func
+    PropTypes.func,
   ]),
   awaitRefetchQueries: PropTypes.bool,
   update: PropTypes.func,
diff --git a/src/react/components/Query.tsx b/src/react/components/Query.tsx
index 7332577e2bf..1e5611f646a 100644
--- a/src/react/components/Query.tsx
+++ b/src/react/components/Query.tsx
@@ -1,12 +1,13 @@
-import * as PropTypes from 'prop-types';
+import * as PropTypes from "prop-types";
 
-import type { OperationVariables } from '../../core/index.js';
-import type { QueryComponentOptions } from './types.js';
-import { useQuery } from '../hooks/index.js';
+import type { OperationVariables } from "../../core/index.js";
+import type { QueryComponentOptions } from "./types.js";
+import { useQuery } from "../hooks/index.js";
 
-export function Query<TData = any, TVariables extends OperationVariables = OperationVariables>(
-  props: QueryComponentOptions<TData, TVariables>
-) {
+export function Query<
+  TData = any,
+  TVariables extends OperationVariables = OperationVariables,
+>(props: QueryComponentOptions<TData, TVariables>) {
   const { children, query, ...options } = props;
   const result = useQuery(query, options);
   return result ? children(result as any) : null;
@@ -28,5 +29,5 @@ Query.propTypes = {
   variables: PropTypes.object,
   ssr: PropTypes.bool,
   partialRefetch: PropTypes.bool,
-  returnPartialData: PropTypes.bool
+  returnPartialData: PropTypes.bool,
 } as Query<any, any>["propTypes"];
diff --git a/src/react/components/Subscription.tsx b/src/react/components/Subscription.tsx
index fe262391bd8..5701cdcb01d 100644
--- a/src/react/components/Subscription.tsx
+++ b/src/react/components/Subscription.tsx
@@ -1,18 +1,21 @@
-import * as PropTypes from 'prop-types';
+import * as PropTypes from "prop-types";
 
-import type { OperationVariables } from '../../core/index.js';
-import type { SubscriptionComponentOptions } from './types.js';
-import { useSubscription } from '../hooks/index.js';
+import type { OperationVariables } from "../../core/index.js";
+import type { SubscriptionComponentOptions } from "./types.js";
+import { useSubscription } from "../hooks/index.js";
 
-export function Subscription<TData = any, TVariables extends OperationVariables = OperationVariables>(
-  props: SubscriptionComponentOptions<TData, TVariables>
-) {
+export function Subscription<
+  TData = any,
+  TVariables extends OperationVariables = OperationVariables,
+>(props: SubscriptionComponentOptions<TData, TVariables>) {
   const result = useSubscription(props.subscription, props);
   return props.children && result ? props.children(result) : null;
 }
 
 export interface Subscription<TData, TVariables extends OperationVariables> {
-  propTypes: PropTypes.InferProps<SubscriptionComponentOptions<TData, TVariables>>;
+  propTypes: PropTypes.InferProps<
+    SubscriptionComponentOptions<TData, TVariables>
+  >;
 }
 
 Subscription.propTypes = {
@@ -23,5 +26,5 @@ Subscription.propTypes = {
   onData: PropTypes.func,
   onSubscriptionComplete: PropTypes.func,
   onComplete: PropTypes.func,
-  shouldResubscribe: PropTypes.oneOfType([PropTypes.func, PropTypes.bool])
+  shouldResubscribe: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
 } as Subscription<any, any>["propTypes"];
diff --git a/src/react/components/__tests__/client/Mutation.test.tsx b/src/react/components/__tests__/client/Mutation.test.tsx
index e0e08f83e4f..80c75f99506 100644
--- a/src/react/components/__tests__/client/Mutation.test.tsx
+++ b/src/react/components/__tests__/client/Mutation.test.tsx
@@ -1,21 +1,21 @@
-import React, { useState, PropsWithChildren } from 'react';
-import gql from 'graphql-tag';
-import { ExecutionResult, GraphQLError } from 'graphql';
-import userEvent from '@testing-library/user-event';
-import { render, screen, waitFor, act } from '@testing-library/react';
-
-import { ApolloClient } from '../../../../core';
-import { ApolloError } from '../../../../errors';
-import { DataProxy, InMemoryCache as Cache } from '../../../../cache';
-import { ApolloProvider } from '../../../context';
+import React, { useState, PropsWithChildren } from "react";
+import gql from "graphql-tag";
+import { ExecutionResult, GraphQLError } from "graphql";
+import userEvent from "@testing-library/user-event";
+import { render, screen, waitFor, act } from "@testing-library/react";
+
+import { ApolloClient } from "../../../../core";
+import { ApolloError } from "../../../../errors";
+import { DataProxy, InMemoryCache as Cache } from "../../../../cache";
+import { ApolloProvider } from "../../../context";
 import {
   itAsync,
   MockedProvider,
   MockLink,
   mockSingleLink,
-} from '../../../../testing';
-import { Query } from '../../Query';
-import { Mutation } from '../../Mutation';
+} from "../../../../testing";
+import { Query } from "../../Query";
+import { Mutation } from "../../Mutation";
 
 const mutation = gql`
   mutation createTodo($text: String!) {
@@ -41,79 +41,79 @@ type Data = {
 
 const data: Data = {
   createTodo: {
-    __typename: 'Todo',
-    id: '99',
-    text: 'This one was created with a mutation.',
-    completed: true
+    __typename: "Todo",
+    id: "99",
+    text: "This one was created with a mutation.",
+    completed: true,
   },
-  __typename: 'Mutation'
+  __typename: "Mutation",
 };
 
 const data2: Data = {
   createTodo: {
-    __typename: 'Todo',
-    id: '100',
-    text: 'This one was created with a mutation.',
-    completed: true
+    __typename: "Todo",
+    id: "100",
+    text: "This one was created with a mutation.",
+    completed: true,
   },
-  __typename: 'Mutation'
+  __typename: "Mutation",
 };
 
 const mocks = [
   {
     request: { query: mutation },
-    result: { data }
+    result: { data },
   },
   {
     request: { query: mutation },
-    result: { data: data2 }
-  }
+    result: { data: data2 },
+  },
 ];
 
 const cache = new Cache({ addTypename: false });
 
-describe('General Mutation testing', () => {
-  it('pick prop client over context client', async () => {
+describe("General Mutation testing", () => {
+  it("pick prop client over context client", async () => {
     const mock = (text: string) => [
       {
         request: { query: mutation },
         result: {
           data: {
             createTodo: {
-              __typename: 'Todo',
-              id: '99',
+              __typename: "Todo",
+              id: "99",
               text,
-              completed: true
+              completed: true,
             },
-            __typename: 'Mutation'
-          }
-        }
+            __typename: "Mutation",
+          },
+        },
       },
       {
         request: { query: mutation },
         result: {
           data: {
             createTodo: {
-              __typename: 'Todo',
-              id: '100',
+              __typename: "Todo",
+              id: "100",
               text,
-              completed: true
+              completed: true,
             },
-            __typename: 'Mutation'
-          }
-        }
-      }
+            __typename: "Mutation",
+          },
+        },
+      },
     ];
 
-    const mocksProps = mock('This is the result of the prop client mutation.');
+    const mocksProps = mock("This is the result of the prop client mutation.");
     const mocksContext = mock(
-      'This is the result of the context client mutation.'
+      "This is the result of the context client mutation."
     );
 
     function mockClient(m: any) {
       return new ApolloClient({
         link: new MockLink(m, false),
-        cache: new Cache({ addTypename: false })
+        cache: new Cache({ addTypename: false }),
       });
     }
 
@@ -134,48 +134,66 @@ describe('General Mutation testing', () => {
     };
 
     const { rerender } = render(<Component />);
-    await waitFor(() => {
-      screen.getByText('Create');
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        screen.getByText("Create");
+      },
+      { interval: 1 }
+    );
 
     // context client mutation
-    await userEvent.click(screen.getByText('Create'));
+    await userEvent.click(screen.getByText("Create"));
 
-    await waitFor(() => {
-      expect(spy).toHaveBeenCalledWith(mocksContext[0].result);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(spy).toHaveBeenCalledWith(mocksContext[0].result);
+      },
+      { interval: 1 }
+    );
 
     // props client mutation
     rerender(<Component propsClient={propsClient} />);
 
-    await userEvent.click(screen.getByText('Create'));
+    await userEvent.click(screen.getByText("Create"));
 
-    await waitFor(() => {
-      expect(spy).toHaveBeenCalledWith(mocksProps[0].result);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(spy).toHaveBeenCalledWith(mocksProps[0].result);
+      },
+      { interval: 1 }
+    );
 
     // context client mutation
     rerender(<Component propsClient={undefined} />);
-    await userEvent.click(screen.getByText('Create'));
+    await userEvent.click(screen.getByText("Create"));
 
-    await waitFor(() => {
-      expect(spy).toHaveBeenCalledWith(mocksContext[1].result);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(spy).toHaveBeenCalledWith(mocksContext[1].result);
+      },
+      { interval: 1 }
+    );
 
     // props client mutation
     rerender(<Component propsClient={propsClient} />);
-    await userEvent.click(screen.getByText('Create'));
+    await userEvent.click(screen.getByText("Create"));
 
-    await waitFor(() => {
-      expect(spy).toHaveBeenCalledWith(mocksProps[1].result);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(spy).toHaveBeenCalledWith(mocksProps[1].result);
+      },
+      { interval: 1 }
+    );
 
-    await waitFor(() => {
-      expect(spy).toHaveBeenCalledTimes(4);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(spy).toHaveBeenCalledTimes(4);
+      },
+      { interval: 1 }
+    );
   });
 
-  itAsync('performs a mutation', (resolve, reject) => {
+  itAsync("performs a mutation", (resolve, reject) => {
     let count = 0;
     const Component = () => (
       <Mutation mutation={mutation}>
@@ -213,37 +231,40 @@ describe('General Mutation testing', () => {
     }).then(resolve, reject);
   });
 
-  itAsync('can bind only the mutation and not rerender by props', (resolve, reject) => {
-    let count = 0;
-    const Component = () => (
-      <Mutation mutation={mutation} ignoreResults>
-        {(createTodo: any, result: any) => {
-          if (count === 0) {
-            expect(result.loading).toEqual(false);
-            expect(result.called).toEqual(false);
-            setTimeout(() => {
-              createTodo().then((r: any) => {
-                expect(r!.data).toEqual(data);
-                resolve();
+  itAsync(
+    "can bind only the mutation and not rerender by props",
+    (resolve, reject) => {
+      let count = 0;
+      const Component = () => (
+        <Mutation mutation={mutation} ignoreResults>
+          {(createTodo: any, result: any) => {
+            if (count === 0) {
+              expect(result.loading).toEqual(false);
+              expect(result.called).toEqual(false);
+              setTimeout(() => {
+                createTodo().then((r: any) => {
+                  expect(r!.data).toEqual(data);
+                  resolve();
+                });
               });
-            });
-          } else if (count === 1) {
-            reject('rerender happened with ignoreResults turned on');
-          }
-          count++;
-          return <div />;
-        }}
-      </Mutation>
-    );
+            } else if (count === 1) {
+              reject("rerender happened with ignoreResults turned on");
+            }
+            count++;
+            return <div />;
+          }}
+        </Mutation>
+      );
 
-    render(
-      <MockedProvider mocks={mocks}>
-        <Component />
-      </MockedProvider>
-    );
-  });
+      render(
+        <MockedProvider mocks={mocks}>
+          <Component />
+        </MockedProvider>
+      );
+    }
+  );
 
-  it('returns a resolved promise when calling the mutation function', async () => {
+  it("returns a resolved promise when calling the mutation function", async () => {
     let called = false;
     let result: any;
     const Component = () => (
@@ -251,7 +272,7 @@ describe('General Mutation testing', () => {
         {(createTodo: any) => {
           if (!called) {
             createTodo().then((_result: any) => {
-              result = _result
+              result = _result;
             });
           }
           called = true;
@@ -269,10 +290,10 @@ describe('General Mutation testing', () => {
 
     await waitFor(() => {
       expect(result!.data).toEqual(data);
-    })
+    });
   });
 
-  it('returns rejected promise when calling the mutation function', async () => {
+  it("returns rejected promise when calling the mutation function", async () => {
     let done = false;
     let called = false;
     const Component = () => (
@@ -280,7 +301,7 @@ describe('General Mutation testing', () => {
         {(createTodo: any) => {
           if (!called) {
             createTodo().catch((error: any) => {
-              expect(error).toEqual(new Error('Error 1'));
+              expect(error).toEqual(new Error("Error 1"));
               done = true;
             });
           }
@@ -294,8 +315,8 @@ describe('General Mutation testing', () => {
     const mocksWithErrors = [
       {
         request: { query: mutation },
-        error: new Error('Error 1')
-      }
+        error: new Error("Error 1"),
+      },
     ];
 
     render(
@@ -309,7 +330,7 @@ describe('General Mutation testing', () => {
     });
   });
 
-  it('only shows result for the latest mutation that is in flight', async () => {
+  it("only shows result for the latest mutation that is in flight", async () => {
     let count = 0;
 
     const onCompleted = (dataMutation: Data) => {
@@ -352,14 +373,14 @@ describe('General Mutation testing', () => {
     });
   });
 
-  it('only shows the error for the latest mutation in flight', async () => {
+  it("only shows the error for the latest mutation in flight", async () => {
     let count = 0;
 
     const onError = (error: Error) => {
       if (count === 1) {
-        expect(error).toEqual(new Error('Error 1'));
+        expect(error).toEqual(new Error("Error 1"));
       } else if (count === 3) {
-        expect(error).toEqual(new Error('Error 2'));
+        expect(error).toEqual(new Error("Error 2"));
       }
     };
     const Component = () => (
@@ -377,7 +398,7 @@ describe('General Mutation testing', () => {
             expect(result.loading).toEqual(false);
             expect(result.data).toEqual(undefined);
             expect(result.called).toEqual(true);
-            expect(result.error).toEqual(new Error('Error 2'));
+            expect(result.error).toEqual(new Error("Error 2"));
           }
           count++;
           return <div />;
@@ -388,12 +409,12 @@ describe('General Mutation testing', () => {
     const mocksWithErrors = [
       {
         request: { query: mutation },
-        error: new Error('Error 2')
+        error: new Error("Error 2"),
       },
       {
         request: { query: mutation },
-        error: new Error('Error 2')
-      }
+        error: new Error("Error 2"),
+      },
     ];
 
     render(
@@ -407,19 +428,19 @@ describe('General Mutation testing', () => {
     });
   });
 
-  it('calls the onCompleted prop as soon as the mutation is complete', async () => {
+  it("calls the onCompleted prop as soon as the mutation is complete", async () => {
     let onCompletedCalled = false;
 
     class Component extends React.Component {
       state = {
-        mutationDone: false
+        mutationDone: false,
       };
 
       onCompleted = (mutationData: Data) => {
         expect(mutationData).toEqual(data);
         onCompletedCalled = true;
         this.setState({
-          mutationDone: true
+          mutationDone: true,
         });
       };
 
@@ -448,11 +469,11 @@ describe('General Mutation testing', () => {
     );
 
     await waitFor(() => {
-      expect(onCompletedCalled).toEqual(true)
+      expect(onCompletedCalled).toEqual(true);
     });
   });
 
-  it('renders result of the children render prop', () => {
+  it("renders result of the children render prop", () => {
     const Component = () => (
       <Mutation mutation={mutation}>{() => <div>result</div>}</Mutation>
     );
@@ -462,26 +483,24 @@ describe('General Mutation testing', () => {
         <Component />
       </MockedProvider>
     );
-    expect(screen.getByText('result')).toBeTruthy();
+    expect(screen.getByText("result")).toBeTruthy();
     // unmount here or else the mutation will resolve later and schedule an update that's not wrapped in act.
-    unmount()
+    unmount();
   });
 
-  it('renders an error state', async () => {
+  it("renders an error state", async () => {
     let count = 0;
     const Component = () => (
       <Mutation mutation={mutation}>
         {(createTodo: any, result: any) => {
           if (count === 0) {
             createTodo().catch((err: any) => {
-              expect(err).toEqual(new Error('error occurred'));
+              expect(err).toEqual(new Error("error occurred"));
             });
           } else if (count === 1) {
             expect(result.loading).toBeTruthy();
           } else if (count === 2) {
-            expect(result.error).toEqual(
-              new Error('error occurred')
-            );
+            expect(result.error).toEqual(new Error("error occurred"));
           }
           count++;
           return <div />;
@@ -492,8 +511,8 @@ describe('General Mutation testing', () => {
     const mockError = [
       {
         request: { query: mutation },
-        error: new Error('error occurred')
-      }
+        error: new Error("error occurred"),
+      },
     ];
 
     render(
@@ -507,11 +526,11 @@ describe('General Mutation testing', () => {
     });
   });
 
-  it('renders an error state and throws when encountering graphql errors', async () => {
+  it("renders an error state and throws when encountering graphql errors", async () => {
     let count = 0;
 
     const expectedError = new ApolloError({
-      graphQLErrors: [new GraphQLError('error occurred')]
+      graphQLErrors: [new GraphQLError("error occurred")],
     });
 
     const Component = () => (
@@ -520,7 +539,7 @@ describe('General Mutation testing', () => {
           if (count === 0) {
             createTodo()
               .then(() => {
-                throw new Error('Did not expect a result');
+                throw new Error("Did not expect a result");
               })
               .catch((e: any) => {
                 expect(e).toEqual(expectedError);
@@ -540,9 +559,9 @@ describe('General Mutation testing', () => {
       {
         request: { query: mutation },
         result: {
-          errors: [new GraphQLError('error occurred')]
-        }
-      }
+          errors: [new GraphQLError("error occurred")],
+        },
+      },
     ];
 
     render(
@@ -556,7 +575,7 @@ describe('General Mutation testing', () => {
     });
   });
 
-  it('renders an error state and does not throw when encountering graphql errors when errorPolicy=all', async () => {
+  it("renders an error state and does not throw when encountering graphql errors when errorPolicy=all", async () => {
     let count = 0;
     const Component = () => (
       <Mutation mutation={mutation}>
@@ -567,7 +586,7 @@ describe('General Mutation testing', () => {
                 if (fetchResult && fetchResult.errors) {
                   expect(fetchResult.errors.length).toEqual(1);
                   expect(fetchResult.errors[0]).toEqual(
-                    new GraphQLError('error occurred')
+                    new GraphQLError("error occurred")
                   );
                 } else {
                   throw new Error(
@@ -583,7 +602,7 @@ describe('General Mutation testing', () => {
           } else if (count === 2) {
             expect(result.error).toEqual(
               new ApolloError({
-                graphQLErrors: [new GraphQLError('error occurred')]
+                graphQLErrors: [new GraphQLError("error occurred")],
               })
             );
           }
@@ -597,14 +616,14 @@ describe('General Mutation testing', () => {
       {
         request: { query: mutation },
         result: {
-          errors: [new GraphQLError('error occurred')]
-        }
-      }
+          errors: [new GraphQLError("error occurred")],
+        },
+      },
     ];
 
     render(
       <MockedProvider
-        defaultOptions={{ mutate: { errorPolicy: 'all' } }}
+        defaultOptions={{ mutate: { errorPolicy: "all" } }}
         mocks={mockError}
       >
         <Component />
@@ -616,10 +635,10 @@ describe('General Mutation testing', () => {
     });
   });
 
-  it('renders an error state and throws when encountering network errors when errorPolicy=all', async () => {
+  it("renders an error state and throws when encountering network errors when errorPolicy=all", async () => {
     let count = 0;
     const expectedError = new ApolloError({
-      networkError: new Error('network error')
+      networkError: new Error("network error"),
     });
     const Component = () => (
       <Mutation mutation={mutation}>
@@ -627,7 +646,7 @@ describe('General Mutation testing', () => {
           if (count === 0) {
             createTodo()
               .then(() => {
-                throw new Error('Did not expect a result');
+                throw new Error("Did not expect a result");
               })
               .catch((e: any) => {
                 expect(e).toEqual(expectedError);
@@ -646,13 +665,13 @@ describe('General Mutation testing', () => {
     const mockError = [
       {
         request: { query: mutation },
-        error: new Error('network error')
-      }
+        error: new Error("network error"),
+      },
     ];
 
     render(
       <MockedProvider
-        defaultOptions={{ mutate: { errorPolicy: 'all' } }}
+        defaultOptions={{ mutate: { errorPolicy: "all" } }}
         mocks={mockError}
       >
         <Component />
@@ -664,16 +683,16 @@ describe('General Mutation testing', () => {
     });
   });
 
-  it('calls the onError prop if the mutation encounters an error', async () => {
+  it("calls the onError prop if the mutation encounters an error", async () => {
     let onRenderCalled = false;
 
     class Component extends React.Component {
       state = {
-        mutationError: false
+        mutationError: false,
       };
 
       onError = (error: Error) => {
-        expect(error.message).toMatch('error occurred');
+        expect(error.message).toMatch("error occurred");
         onRenderCalled = true;
         this.setState({ mutationError: true });
       };
@@ -701,8 +720,8 @@ describe('General Mutation testing', () => {
     const mockError = [
       {
         request: { query: mutation },
-        error: new Error('error occurred')
-      }
+        error: new Error("error occurred"),
+      },
     ];
 
     render(
@@ -716,9 +735,9 @@ describe('General Mutation testing', () => {
     });
   });
 
-  it('performs a mutation with variables prop', async () => {
+  it("performs a mutation with variables prop", async () => {
     const variables = {
-      text: 'play tennis'
+      text: "play tennis",
     };
 
     let count = 0;
@@ -744,8 +763,8 @@ describe('General Mutation testing', () => {
     const mocks1 = [
       {
         request: { query: mutation, variables },
-        result: { data }
-      }
+        result: { data },
+      },
     ];
 
     render(
@@ -759,9 +778,9 @@ describe('General Mutation testing', () => {
     });
   });
 
-  it('allows passing a variable to the mutate function', async () => {
+  it("allows passing a variable to the mutate function", async () => {
     const variables = {
-      text: 'play tennis'
+      text: "play tennis",
     };
 
     let count = 0;
@@ -787,8 +806,8 @@ describe('General Mutation testing', () => {
     const mocks1 = [
       {
         request: { query: mutation, variables },
-        result: { data }
-      }
+        result: { data },
+      },
     ];
 
     render(
@@ -802,21 +821,21 @@ describe('General Mutation testing', () => {
     });
   });
 
-  it('allows an optimistic response prop', async () => {
+  it("allows an optimistic response prop", async () => {
     const link = mockSingleLink(...mocks);
     const client = new ApolloClient({
       link,
-      cache
+      cache,
     });
 
     const optimisticResponse = {
       createTodo: {
-        id: '99',
-        text: 'This is an optimistic response',
+        id: "99",
+        text: "This is an optimistic response",
         completed: false,
-        __typename: 'Todo'
+        __typename: "Todo",
       },
-      __typename: 'Mutation'
+      __typename: "Mutation",
     };
 
     let count = 0;
@@ -826,7 +845,7 @@ describe('General Mutation testing', () => {
           if (count === 0) {
             createTodo();
             const dataInStore = client.cache.extract(true);
-            expect(dataInStore['Todo:99']).toEqual(
+            expect(dataInStore["Todo:99"]).toEqual(
               optimisticResponse.createTodo
             );
           } else if (count === 1) {
@@ -854,21 +873,21 @@ describe('General Mutation testing', () => {
     });
   });
 
-  it('allows passing an optimistic response to the mutate function', async () => {
+  it("allows passing an optimistic response to the mutate function", async () => {
     const link = mockSingleLink(...mocks);
     const client = new ApolloClient({
       link,
-      cache
+      cache,
     });
 
     const optimisticResponse = {
       createTodo: {
-        id: '99',
-        text: 'This is an optimistic response',
+        id: "99",
+        text: "This is an optimistic response",
         completed: false,
-        __typename: 'Todo'
+        __typename: "Todo",
       },
-      __typename: 'Mutation'
+      __typename: "Mutation",
     };
 
     let count = 0;
@@ -878,7 +897,7 @@ describe('General Mutation testing', () => {
           if (count === 0) {
             createTodo({ optimisticResponse });
             const dataInStore = client.cache.extract(true);
-            expect(dataInStore['Todo:99']).toEqual(
+            expect(dataInStore["Todo:99"]).toEqual(
               optimisticResponse.createTodo
             );
           } else if (count === 2) {
@@ -903,7 +922,7 @@ describe('General Mutation testing', () => {
     });
   });
 
-  it('allows a refetchQueries prop', async () => {
+  it("allows a refetchQueries prop", async () => {
     const query = gql`
       query getTodo {
         todo {
@@ -918,30 +937,30 @@ describe('General Mutation testing', () => {
 
     const queryData = {
       todo: {
-        id: '1',
-        text: 'todo from query',
+        id: "1",
+        text: "todo from query",
         completed: false,
-        __typename: 'Todo'
+        __typename: "Todo",
       },
-      __typename: 'Query'
+      __typename: "Query",
     };
 
     const mocksWithQuery = [
       ...mocks,
       {
         request: { query },
-        result: { data: queryData }
+        result: { data: queryData },
       },
       {
         request: { query },
-        result: { data: queryData }
+        result: { data: queryData },
       },
     ];
 
     const refetchQueries = [
       {
-        query
-      }
+        query,
+      },
     ];
 
     let renderCount = 0;
@@ -976,7 +995,7 @@ describe('General Mutation testing', () => {
     );
   });
 
-  it('allows a refetchQueries prop as string and variables have updated', async () => {
+  it("allows a refetchQueries prop as string and variables have updated", async () => {
     const query = gql`
       query people($first: Int) {
         allPeople(first: $first) {
@@ -989,44 +1008,46 @@ describe('General Mutation testing', () => {
 
     const peopleData1 = {
       allPeople: {
-        people: [{ name: 'Luke Skywalker', __typename: 'Person' }],
-        __typename: 'People'
-      }
+        people: [{ name: "Luke Skywalker", __typename: "Person" }],
+        __typename: "People",
+      },
     };
     const peopleData2 = {
       allPeople: {
-        people: [{ name: 'Han Solo', __typename: 'Person' }],
-        __typename: 'People'
-      }
+        people: [{ name: "Han Solo", __typename: "Person" }],
+        __typename: "People",
+      },
     };
     const peopleData3 = {
       allPeople: {
-        people: [{ name: 'Lord Vader', __typename: 'Person' }],
-        __typename: 'People'
-      }
+        people: [{ name: "Lord Vader", __typename: "Person" }],
+        __typename: "People",
+      },
     };
     const peopleMocks = [
       ...mocks,
       {
         request: { query, variables: { first: 1 } },
-        result: { data: peopleData1 }
+        result: { data: peopleData1 },
       },
       {
         request: { query, variables: { first: 2 } },
-        result: { data: peopleData2 }
+        result: { data: peopleData2 },
       },
       {
         request: { query, variables: { first: 2 } },
-        result: { data: peopleData3 }
-      }
+        result: { data: peopleData3 },
+      },
     ];
 
-    const refetchQueries = ['people'];
+    const refetchQueries = ["people"];
 
     let count = 0;
     let testFailures: any[] = [];
 
-    const Component: React.FC<PropsWithChildren<PropsWithChildren<any>>> = props => {
+    const Component: React.FC<PropsWithChildren<PropsWithChildren<any>>> = (
+      props
+    ) => {
       const [variables, setVariables] = useState(props.variables);
       return (
         <Mutation mutation={mutation} refetchQueries={refetchQueries}>
@@ -1055,7 +1076,7 @@ describe('General Mutation testing', () => {
                     expect(resultMutation.loading).toBe(true);
                   } else if (count === 5) {
                     // query refetched or mutation loaded
-                    // or both finished batched together 
+                    // or both finished batched together
                     // hard to make assumptions here
                   } else if (count === 6) {
                     // both loaded
@@ -1091,88 +1112,89 @@ describe('General Mutation testing', () => {
     });
   });
 
-  it('allows refetchQueries to be passed to the mutate function', () => new Promise((resolve, reject) => {
-    const query = gql`
-      query getTodo {
-        todo {
-          id
-          text
-          completed
+  it("allows refetchQueries to be passed to the mutate function", () =>
+    new Promise((resolve, reject) => {
+      const query = gql`
+        query getTodo {
+          todo {
+            id
+            text
+            completed
+            __typename
+          }
           __typename
         }
-        __typename
-      }
-    `;
-
-    const queryData = {
-      todo: {
-        id: '1',
-        text: 'todo from query',
-        completed: false,
-        __typename: 'Todo'
-      },
-      __typename: 'Query'
-    };
-
-    const mocksWithQuery = [
-      ...mocks,
-      {
-        request: { query },
-        result: { data: queryData }
-      },
-      {
-        request: { query },
-        result: { data: queryData }
-      },
-    ];
-
-    const refetchQueries = [
-      {
-        query
-      }
-    ];
+      `;
+
+      const queryData = {
+        todo: {
+          id: "1",
+          text: "todo from query",
+          completed: false,
+          __typename: "Todo",
+        },
+        __typename: "Query",
+      };
 
-    let count = 0;
-    const Component = () => (
-      <Mutation mutation={mutation}>
-        {(createTodo: any, resultMutation: any) => (
-          <Query query={query}>
-            {(resultQuery: any) => {
-              try {
-                if (count === 0) {
-                  setTimeout(() => createTodo({ refetchQueries }), 10);
-                } else if (count === 1) {
-                  expect(resultMutation.loading).toBe(false);
-                  expect(resultQuery.loading).toBe(false);
-                } else if (count === 2) {
-                  expect(resultMutation.loading).toBe(true);
-                  expect(resultQuery.data).toEqual(queryData);
-                } else if (count === 3) {
-                  expect(resultMutation.loading).toBe(false);
+      const mocksWithQuery = [
+        ...mocks,
+        {
+          request: { query },
+          result: { data: queryData },
+        },
+        {
+          request: { query },
+          result: { data: queryData },
+        },
+      ];
+
+      const refetchQueries = [
+        {
+          query,
+        },
+      ];
+
+      let count = 0;
+      const Component = () => (
+        <Mutation mutation={mutation}>
+          {(createTodo: any, resultMutation: any) => (
+            <Query query={query}>
+              {(resultQuery: any) => {
+                try {
+                  if (count === 0) {
+                    setTimeout(() => createTodo({ refetchQueries }), 10);
+                  } else if (count === 1) {
+                    expect(resultMutation.loading).toBe(false);
+                    expect(resultQuery.loading).toBe(false);
+                  } else if (count === 2) {
+                    expect(resultMutation.loading).toBe(true);
+                    expect(resultQuery.data).toEqual(queryData);
+                  } else if (count === 3) {
+                    expect(resultMutation.loading).toBe(false);
+                  }
+                  count++;
+                } catch (err) {
+                  reject(err);
                 }
-                count++;
-              } catch (err) {
-                reject(err);
-              }
-              return null;
-            }}
-          </Query>
-        )}
-      </Mutation>
-    );
+                return null;
+              }}
+            </Query>
+          )}
+        </Mutation>
+      );
 
-    render(
-      <MockedProvider mocks={mocksWithQuery}>
-        <Component />
-      </MockedProvider>
-    );
+      render(
+        <MockedProvider mocks={mocksWithQuery}>
+          <Component />
+        </MockedProvider>
+      );
 
-    waitFor(() => {
-      expect(count).toBe(4);
-    }).then(resolve, reject);
-  }));
+      waitFor(() => {
+        expect(count).toBe(4);
+      }).then(resolve, reject);
+    }));
 
-  it('has an update prop for updating the store after the mutation', async () => {
+  it("has an update prop for updating the store after the mutation", async () => {
     const update = (_proxy: DataProxy, response: ExecutionResult) => {
       expect(response.data).toEqual(data);
     };
@@ -1203,7 +1225,7 @@ describe('General Mutation testing', () => {
     });
   });
 
-  it('allows update to be passed to the mutate function', async () => {
+  it("allows update to be passed to the mutate function", async () => {
     const update = (_proxy: DataProxy, response: ExecutionResult) => {
       expect(response.data).toEqual(data);
     };
@@ -1230,17 +1252,17 @@ describe('General Mutation testing', () => {
     );
 
     await waitFor(() => {
-      expect(count).toBe(3)
+      expect(count).toBe(3);
     });
   });
 
-  it('allows for overriding the options passed in the props by passing them in the mutate function', async () => {
+  it("allows for overriding the options passed in the props by passing them in the mutate function", async () => {
     const variablesProp = {
-      text: 'play tennis'
+      text: "play tennis",
     };
 
     const variablesMutateFn = {
-      text: 'go swimming'
+      text: "go swimming",
     };
 
     let count = 0;
@@ -1263,12 +1285,12 @@ describe('General Mutation testing', () => {
     const mocks1 = [
       {
         request: { query: mutation, variables: variablesProp },
-        result: { data }
+        result: { data },
       },
       {
         request: { query: mutation, variables: variablesMutateFn },
-        result: { data: data2 }
-      }
+        result: { data: data2 },
+      },
     ];
 
     render(
@@ -1282,40 +1304,40 @@ describe('General Mutation testing', () => {
     });
   });
 
-  it('updates if the client changes', async () => {
+  it("updates if the client changes", async () => {
     const link1 = mockSingleLink({
       request: { query: mutation },
-      result: { data }
+      result: { data },
     });
     const client1 = new ApolloClient({
       link: link1,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     const data3 = {
       createTodo: {
-        __typename: 'Todo',
-        id: '100',
-        text: 'After updating client.',
-        completed: false
+        __typename: "Todo",
+        id: "100",
+        text: "After updating client.",
+        completed: false,
       },
-      __typename: 'Mutation'
+      __typename: "Mutation",
     };
 
     const link2 = mockSingleLink({
       request: { query: mutation },
-      result: { data: data3 }
+      result: { data: data3 },
     });
 
     const client2 = new ApolloClient({
       link: link2,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     let count = 0;
     class Component extends React.Component {
       state = {
-        client: client1
+        client: client1,
       };
 
       render() {
@@ -1331,7 +1353,7 @@ describe('General Mutation testing', () => {
                   expect(result.data).toEqual(data);
                   setTimeout(() => {
                     this.setState({
-                      client: client2
+                      client: client2,
                     });
                   });
                 } else if (count === 3) {
@@ -1356,23 +1378,23 @@ describe('General Mutation testing', () => {
     });
   });
 
-  it('uses client from props instead of one provided by context', () => {
+  it("uses client from props instead of one provided by context", () => {
     const link1 = mockSingleLink({
       request: { query: mutation },
-      result: { data }
+      result: { data },
     });
     const client1 = new ApolloClient({
       link: link1,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     const link2 = mockSingleLink({
       request: { query: mutation },
-      result: { data: data2 }
+      result: { data: data2 },
     });
     const client2 = new ApolloClient({
       link: link2,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     let count = 0;
@@ -1405,7 +1427,7 @@ describe('General Mutation testing', () => {
     });
   });
 
-  it('errors if a query is passed instead of a mutation', () => {
+  it("errors if a query is passed instead of a mutation", () => {
     const query = gql`
       query todos {
         todos {
@@ -1425,14 +1447,14 @@ describe('General Mutation testing', () => {
         </MockedProvider>
       );
     }).toThrowError(
-      'Running a Mutation requires a graphql Mutation, but a Query was used ' +
-        'instead.'
+      "Running a Mutation requires a graphql Mutation, but a Query was used " +
+        "instead."
     );
 
     console.log = errorLogger;
   });
 
-  it('errors when changing from mutation to a query', async () => {
+  it("errors when changing from mutation to a query", async () => {
     let didError = false;
     const query = gql`
       query todos {
@@ -1444,14 +1466,14 @@ describe('General Mutation testing', () => {
 
     class Component extends React.Component {
       state = {
-        query: mutation
+        query: mutation,
       };
 
       componentDidCatch(e: Error) {
         expect(e).toEqual(
           new Error(
-            'Running a Mutation requires a graphql Mutation, but a Query ' +
-              'was used instead.'
+            "Running a Mutation requires a graphql Mutation, but a Query " +
+              "was used instead."
           )
         );
         didError = true;
@@ -1462,7 +1484,7 @@ describe('General Mutation testing', () => {
             {() => {
               setTimeout(() => {
                 this.setState({
-                  query
+                  query,
                 });
               });
               return null;
@@ -1495,7 +1517,7 @@ describe('General Mutation testing', () => {
     console.log = errorLogger;
   });
 
-  it('errors if a subscription is passed instead of a mutation', () => {
+  it("errors if a subscription is passed instead of a mutation", () => {
     const subscription = gql`
       subscription todos {
         todos {
@@ -1515,14 +1537,14 @@ describe('General Mutation testing', () => {
         </MockedProvider>
       );
     }).toThrowError(
-      'Running a Mutation requires a graphql Mutation, but a Subscription ' +
-        'was used instead.'
+      "Running a Mutation requires a graphql Mutation, but a Subscription " +
+        "was used instead."
     );
 
     console.log = errorLogger;
   });
 
-  it('errors when changing from mutation to a subscription', async () => {
+  it("errors when changing from mutation to a subscription", async () => {
     let didError = false;
     const subscription = gql`
       subscription todos {
@@ -1534,14 +1556,14 @@ describe('General Mutation testing', () => {
 
     class Component extends React.Component {
       state = {
-        query: mutation
+        query: mutation,
       };
 
       componentDidCatch(e: Error) {
         expect(e).toEqual(
           new Error(
-            'Running a Mutation requires a graphql Mutation, but a ' +
-              'Subscription was used instead.'
+            "Running a Mutation requires a graphql Mutation, but a " +
+              "Subscription was used instead."
           )
         );
         didError = true;
@@ -1553,7 +1575,7 @@ describe('General Mutation testing', () => {
             {() => {
               setTimeout(() => {
                 this.setState({
-                  query: subscription
+                  query: subscription,
                 });
               });
               return null;
@@ -1585,22 +1607,25 @@ describe('General Mutation testing', () => {
     console.log = errorLogger;
   });
 
-  describe('after it has been unmounted', () => {
-    it('calls the onCompleted prop after the mutation is complete', async () => {
+  describe("after it has been unmounted", () => {
+    it("calls the onCompleted prop after the mutation is complete", async () => {
       let finished = false;
       let success = false;
-      const context = { "foo": "bar" }
+      const context = { foo: "bar" };
       const onCompletedFn = jest.fn();
       const checker = () => {
         setTimeout(() => {
           success = true;
-          expect(onCompletedFn).toHaveBeenCalledWith(data, expect.objectContaining({ context }));
+          expect(onCompletedFn).toHaveBeenCalledWith(
+            data,
+            expect.objectContaining({ context })
+          );
         }, 100);
       };
 
       class Component extends React.Component {
         state = {
-          called: false
+          called: false,
         };
 
         render() {
@@ -1615,7 +1640,7 @@ describe('General Mutation testing', () => {
                     createTodo({ context }).finally(() => {
                       finished = true;
                     });
-                    expect(onCompletedFn).toHaveBeenCalledWith
+                    expect(onCompletedFn).toHaveBeenCalledWith;
                     // eslint-disable-next-line testing-library/await-async-utils
                     this.setState({ called: true }, checker);
                   });
@@ -1633,32 +1658,38 @@ describe('General Mutation testing', () => {
         </MockedProvider>
       );
 
-      await waitFor(() => {
-        // TODO(fixme): The following line fixes the RTL lint rule error:
-        //
-        // expect(waitFor(() => finished)).resolves.toBe(true);
-        //
-        // ...however it also causes the test to fail against React 17.
-        // eslint-disable-next-line testing-library/await-async-utils
-        expect(finished).toBe(true);
-      }, { interval: 1 });
-      await waitFor(() => {
-        // TODO(fixme): The following line fixes the RTL lint rule error:
-        //
-        // expect(waitFor(() => success)).resolves.toBe(true);
-        //
-        // ...however it also causes the test to fail against React 17.
-        // eslint-disable-next-line testing-library/await-async-utils
-        expect(success).toBe(true);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          // TODO(fixme): The following line fixes the RTL lint rule error:
+          //
+          // expect(waitFor(() => finished)).resolves.toBe(true);
+          //
+          // ...however it also causes the test to fail against React 17.
+          // eslint-disable-next-line testing-library/await-async-utils
+          expect(finished).toBe(true);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          // TODO(fixme): The following line fixes the RTL lint rule error:
+          //
+          // expect(waitFor(() => success)).resolves.toBe(true);
+          //
+          // ...however it also causes the test to fail against React 17.
+          // eslint-disable-next-line testing-library/await-async-utils
+          expect(success).toBe(true);
+        },
+        { interval: 1 }
+      );
     });
   });
 
-  it('calls the onError prop if the mutation encounters an error', async () => {
+  it("calls the onError prop if the mutation encounters an error", async () => {
     let finished = false;
     let onErrorCalled = false;
     function onError(error: ApolloError) {
-      expect(error.message).toEqual('error occurred');
+      expect(error.message).toEqual("error occurred");
       onErrorCalled = true;
     }
 
@@ -1680,8 +1711,8 @@ describe('General Mutation testing', () => {
     const mockError = [
       {
         request: { query: mutation },
-        error: new Error('error occurred')
-      }
+        error: new Error("error occurred"),
+      },
     ];
 
     render(
@@ -1690,23 +1721,29 @@ describe('General Mutation testing', () => {
       </MockedProvider>
     );
 
-    await waitFor(() => {
-      // TODO(fixme): The following line fixes the RTL lint rule error:
-      //
-      // expect(waitFor(() => onErrorCalled)).resolves.toBe(true);
-      //
-      // ...however it also causes the test to fail against React 17.
-      // eslint-disable-next-line testing-library/await-async-utils
-      expect(onErrorCalled).toBe(true);
-    }, { interval: 1 });
-    await waitFor(() => {
-      // TODO(fixme): The following line fixes the RTL lint rule error:
-      //
-      // expect(waitFor(() => finished)).resolves.toBe(true);
-      //
-      // ...however it also causes the test to fail against React 17.
-      // eslint-disable-next-line testing-library/await-async-utils
-      expect(finished).toBe(true);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        // TODO(fixme): The following line fixes the RTL lint rule error:
+        //
+        // expect(waitFor(() => onErrorCalled)).resolves.toBe(true);
+        //
+        // ...however it also causes the test to fail against React 17.
+        // eslint-disable-next-line testing-library/await-async-utils
+        expect(onErrorCalled).toBe(true);
+      },
+      { interval: 1 }
+    );
+    await waitFor(
+      () => {
+        // TODO(fixme): The following line fixes the RTL lint rule error:
+        //
+        // expect(waitFor(() => finished)).resolves.toBe(true);
+        //
+        // ...however it also causes the test to fail against React 17.
+        // eslint-disable-next-line testing-library/await-async-utils
+        expect(finished).toBe(true);
+      },
+      { interval: 1 }
+    );
   });
 });
diff --git a/src/react/components/__tests__/client/Query.test.tsx b/src/react/components/__tests__/client/Query.test.tsx
index ea18591712f..5e788dd11aa 100644
--- a/src/react/components/__tests__/client/Query.test.tsx
+++ b/src/react/components/__tests__/client/Query.test.tsx
@@ -1,15 +1,15 @@
-import React from 'react';
-import gql from 'graphql-tag';
-import { DocumentNode } from 'graphql';
-import { render, screen, waitFor } from '@testing-library/react';
-
-import { ApolloClient, NetworkStatus } from '../../../../core';
-import { ApolloError } from '../../../../errors';
-import { ApolloLink } from '../../../../link/core';
-import { InMemoryCache } from '../../../../cache';
-import { ApolloProvider } from '../../../context';
-import { itAsync, MockedProvider, mockSingleLink } from '../../../../testing';
-import { Query } from '../../Query';
+import React from "react";
+import gql from "graphql-tag";
+import { DocumentNode } from "graphql";
+import { render, screen, waitFor } from "@testing-library/react";
+
+import { ApolloClient, NetworkStatus } from "../../../../core";
+import { ApolloError } from "../../../../errors";
+import { ApolloLink } from "../../../../link/core";
+import { InMemoryCache } from "../../../../cache";
+import { ApolloProvider } from "../../../context";
+import { itAsync, MockedProvider, mockSingleLink } from "../../../../testing";
+import { Query } from "../../Query";
 
 const allPeopleQuery: DocumentNode = gql`
   query people {
@@ -28,7 +28,7 @@ interface Data {
 }
 
 const allPeopleData: Data = {
-  allPeople: { people: [{ name: 'Luke Skywalker' }] },
+  allPeople: { people: [{ name: "Luke Skywalker" }] },
 };
 const allPeopleMocks = [
   {
@@ -39,8 +39,8 @@ const allPeopleMocks = [
 
 const AllPeopleQuery = Query;
 
-describe('Query component', () => {
-  itAsync('calls the children prop', (resolve, reject) => {
+describe("Query component", () => {
+  itAsync("calls the children prop", (resolve, reject) => {
     let finished = false;
     const link = mockSingleLink({
       request: { query: allPeopleQuery },
@@ -111,11 +111,11 @@ describe('Query component', () => {
     );
 
     waitFor(() => {
-      expect(finished).toBe(true)
+      expect(finished).toBe(true);
     }).then(resolve, reject);
   });
 
-  it('renders using the children prop', async () => {
+  it("renders using the children prop", async () => {
     const Component = () => (
       <Query query={allPeopleQuery}>{(_: any) => <div>test</div>}</Query>
     );
@@ -127,11 +127,11 @@ describe('Query component', () => {
     );
 
     await waitFor(() => {
-      expect(screen.getByText('test')).toBeTruthy();
+      expect(screen.getByText("test")).toBeTruthy();
     });
   });
 
-  describe('result provides', () => {
+  describe("result provides", () => {
     let consoleWarn = console.warn;
     beforeAll(() => {
       console.warn = () => null;
@@ -141,7 +141,7 @@ describe('Query component', () => {
       console.warn = consoleWarn;
     });
 
-    itAsync('client', (resolve, reject) => {
+    itAsync("client", (resolve, reject) => {
       let count = 0;
       const queryWithVariables: DocumentNode = gql`
         query people($first: Int) {
@@ -195,12 +195,12 @@ describe('Query component', () => {
       }).then(resolve, reject);
     });
 
-    itAsync('error', (resolve, reject) => {
+    itAsync("error", (resolve, reject) => {
       let finished = false;
       const mockError = [
         {
           request: { query: allPeopleQuery },
-          error: new Error('error occurred'),
+          error: new Error("error occurred"),
         },
       ];
 
@@ -211,9 +211,7 @@ describe('Query component', () => {
               return null;
             }
             try {
-              expect(result.error).toEqual(
-                new Error('error occurred')
-              );
+              expect(result.error).toEqual(new Error("error occurred"));
               finished = true;
             } catch (error) {
               reject(error);
@@ -234,7 +232,7 @@ describe('Query component', () => {
       }).then(resolve, reject);
     });
 
-    itAsync('refetch', (resolve, reject) => {
+    itAsync("refetch", (resolve, reject) => {
       const queryRefetch: DocumentNode = gql`
         query people($first: Int) {
           allPeople(first: $first) {
@@ -245,9 +243,9 @@ describe('Query component', () => {
         }
       `;
 
-      const data1 = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
-      const data2 = { allPeople: { people: [{ name: 'Han Solo' }] } };
-      const data3 = { allPeople: { people: [{ name: 'Darth Vader' }] } };
+      const data1 = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
+      const data2 = { allPeople: { people: [{ name: "Han Solo" }] } };
+      const data3 = { allPeople: { people: [{ name: "Darth Vader" }] } };
 
       const refetchVariables = {
         first: 1,
@@ -336,9 +334,9 @@ describe('Query component', () => {
       }).then(resolve, reject);
     });
 
-    itAsync('fetchMore', (resolve, reject) => {
-      const data1 = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
-      const data2 = { allPeople: { people: [{ name: 'Han Solo' }] } };
+    itAsync("fetchMore", (resolve, reject) => {
+      const data1 = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
+      const data2 = { allPeople: { people: [{ name: "Han Solo" }] } };
 
       const variables = {
         first: 2,
@@ -415,10 +413,10 @@ describe('Query component', () => {
       waitFor(() => expect(count).toBe(2)).then(resolve, reject);
     });
 
-    itAsync('startPolling', (resolve, reject) => {
-      const data1 = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
-      const data2 = { allPeople: { people: [{ name: 'Han Solo' }] } };
-      const data3 = { allPeople: { people: [{ name: 'Darth Vader' }] } };
+    itAsync("startPolling", (resolve, reject) => {
+      const data1 = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
+      const data2 = { allPeople: { people: [{ name: "Han Solo" }] } };
+      const data3 = { allPeople: { people: [{ name: "Darth Vader" }] } };
 
       const mocks = [
         {
@@ -480,10 +478,10 @@ describe('Query component', () => {
       waitFor(() => expect(count).toBe(3)).then(resolve, reject);
     });
 
-    itAsync('stopPolling', (resolve, reject) => {
-      const data1 = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
-      const data2 = { allPeople: { people: [{ name: 'Han Solo' }] } };
-      const data3 = { allPeople: { people: [{ name: 'Darth Vader' }] } };
+    itAsync("stopPolling", (resolve, reject) => {
+      const data1 = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
+      const data2 = { allPeople: { people: [{ name: "Han Solo" }] } };
+      const data3 = { allPeople: { people: [{ name: "Darth Vader" }] } };
 
       const mocks = [
         {
@@ -531,9 +529,9 @@ describe('Query component', () => {
       waitFor(() => expect(count).toBe(POLL_COUNT)).then(resolve, reject);
     });
 
-    itAsync('updateQuery', (resolve, reject) => {
-      const data1 = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
-      const data2 = { allPeople: { people: [{ name: 'Han Solo' }] } };
+    itAsync("updateQuery", (resolve, reject) => {
+      const data1 = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
+      const data2 = { allPeople: { people: [{ name: "Han Solo" }] } };
       const variables = {
         first: 2,
       };
@@ -594,11 +592,11 @@ describe('Query component', () => {
     });
   });
 
-  describe('props allow', () => {
-    it('custom fetch-policy', async () => {
+  describe("props allow", () => {
+    it("custom fetch-policy", async () => {
       let count = 0;
       const Component = () => (
-        <Query query={allPeopleQuery} fetchPolicy={'cache-only'}>
+        <Query query={allPeopleQuery} fetchPolicy={"cache-only"}>
           {(result: any) => {
             if (!result.loading) {
               expect(result.networkStatus).toBe(NetworkStatus.ready);
@@ -620,7 +618,7 @@ describe('Query component', () => {
       });
     });
 
-    it('default fetch-policy', async () => {
+    it("default fetch-policy", async () => {
       let count = 0;
       const Component = () => (
         <Query query={allPeopleQuery}>
@@ -636,7 +634,7 @@ describe('Query component', () => {
 
       render(
         <MockedProvider
-          defaultOptions={{ watchQuery: { fetchPolicy: 'cache-only' } }}
+          defaultOptions={{ watchQuery: { fetchPolicy: "cache-only" } }}
           mocks={allPeopleMocks}
         >
           <Component />
@@ -648,9 +646,9 @@ describe('Query component', () => {
       });
     });
 
-    itAsync('notifyOnNetworkStatusChange', (resolve, reject) => {
-      const data1 = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
-      const data2 = { allPeople: { people: [{ name: 'Han Solo' }] } };
+    itAsync("notifyOnNetworkStatusChange", (resolve, reject) => {
+      const data1 = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
+      const data2 = { allPeople: { people: [{ name: "Han Solo" }] } };
 
       const mocks = [
         {
@@ -700,14 +698,14 @@ describe('Query component', () => {
       );
 
       waitFor(() => {
-        expect(count).toBe(4)
+        expect(count).toBe(4);
       }).then(resolve, reject);
     });
 
-    itAsync('pollInterval', (resolve, reject) => {
-      const data1 = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
-      const data2 = { allPeople: { people: [{ name: 'Han Solo' }] } };
-      const data3 = { allPeople: { people: [{ name: 'Darth Vader' }] } };
+    itAsync("pollInterval", (resolve, reject) => {
+      const data1 = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
+      const data2 = { allPeople: { people: [{ name: "Han Solo" }] } };
+      const data3 = { allPeople: { people: [{ name: "Darth Vader" }] } };
 
       const mocks = [
         {
@@ -757,7 +755,7 @@ describe('Query component', () => {
       waitFor(() => expect(count).toBe(POLL_COUNT)).then(resolve, reject);
     });
 
-    itAsync('skip', (resolve, reject) => {
+    itAsync("skip", (resolve, reject) => {
       let finished = false;
       const Component = () => (
         <Query query={allPeopleQuery} skip>
@@ -786,7 +784,7 @@ describe('Query component', () => {
       }).then(resolve, reject);
     });
 
-    it('onCompleted with data', async () => {
+    it("onCompleted with data", async () => {
       const query = gql`
         query people($first: Int) {
           allPeople(first: $first) {
@@ -797,8 +795,8 @@ describe('Query component', () => {
         }
       `;
 
-      const data1 = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
-      const data2 = { allPeople: { people: [{ name: 'Han Solo' }] } };
+      const data1 = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
+      const data2 = { allPeople: { people: [{ name: "Han Solo" }] } };
       const mocks = [
         {
           request: { query, variables: { first: 1 } },
@@ -860,9 +858,9 @@ describe('Query component', () => {
       });
     });
 
-    itAsync('onError with data', (resolve, reject) => {
+    itAsync("onError with data", (resolve, reject) => {
       let finished = false;
-      const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
+      const data = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
 
       const mocks = [
         {
@@ -901,8 +899,8 @@ describe('Query component', () => {
     });
   });
 
-  describe('props disallow', () => {
-    it('Mutation provided as query', () => {
+  describe("props disallow", () => {
+    it("Mutation provided as query", () => {
       const mutation = gql`
         mutation submitRepository {
           submitRepository(repoFullName: "apollographql/apollo-client") {
@@ -921,14 +919,14 @@ describe('Query component', () => {
           </MockedProvider>
         );
       }).toThrowError(
-        'Running a Query requires a graphql Query, but a Mutation was used ' +
-          'instead.'
+        "Running a Query requires a graphql Query, but a Mutation was used " +
+          "instead."
       );
 
       console.error = errorLogger;
     });
 
-    it('Subscription provided as query', () => {
+    it("Subscription provided as query", () => {
       const subscription = gql`
         subscription onCommentAdded($repoFullName: String!) {
           commentAdded(repoFullName: $repoFullName) {
@@ -948,19 +946,19 @@ describe('Query component', () => {
           </MockedProvider>
         );
       }).toThrowError(
-        'Running a Query requires a graphql Query, but a Subscription was ' +
-          'used instead.'
+        "Running a Query requires a graphql Query, but a Subscription was " +
+          "used instead."
       );
 
       console.error = errorLogger;
     });
 
-    itAsync('onCompleted with error', (resolve, reject) => {
+    itAsync("onCompleted with error", (resolve, reject) => {
       let finished = false;
       const mockError = [
         {
           request: { query: allPeopleQuery },
-          error: new Error('error occurred'),
+          error: new Error("error occurred"),
         },
       ];
 
@@ -989,9 +987,9 @@ describe('Query component', () => {
       }).then(resolve, reject);
     });
 
-    it('onError with error', async () => {
+    it("onError with error", async () => {
       let finished = false;
-      const error = new Error('error occurred');
+      const error = new Error("error occurred");
       const mockError = [
         {
           request: { query: allPeopleQuery },
@@ -1024,8 +1022,8 @@ describe('Query component', () => {
     });
   });
 
-  describe('should update', () => {
-    itAsync('if props change', (resolve, reject) => {
+  describe("should update", () => {
+    itAsync("if props change", (resolve, reject) => {
       const query = gql`
         query people($first: Int) {
           allPeople(first: $first) {
@@ -1036,8 +1034,8 @@ describe('Query component', () => {
         }
       `;
 
-      const data1 = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
-      const data2 = { allPeople: { people: [{ name: 'Han Solo' }] } };
+      const data1 = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
+      const data2 = { allPeople: { people: [{ name: "Han Solo" }] } };
       const mocks = [
         {
           request: { query, variables: { first: 1 } },
@@ -1116,7 +1114,7 @@ describe('Query component', () => {
       waitFor(() => expect(count).toBe(4)).then(resolve, reject);
     });
 
-    itAsync('if the query changes', (resolve, reject) => {
+    itAsync("if the query changes", (resolve, reject) => {
       const query1 = allPeopleQuery;
       const query2 = gql`
         query people {
@@ -1129,8 +1127,8 @@ describe('Query component', () => {
         }
       `;
 
-      const data1 = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
-      const data2 = { allPeople: { people: [{ name: 'Han Solo', id: '1' }] } };
+      const data1 = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
+      const data2 = { allPeople: { people: [{ name: "Han Solo", id: "1" }] } };
       const mocks = [
         {
           request: { query: query1 },
@@ -1193,7 +1191,7 @@ describe('Query component', () => {
       waitFor(() => expect(count).toBe(2)).then(resolve, reject);
     });
 
-    it('with data while loading', async () => {
+    it("with data while loading", async () => {
       const query = gql`
         query people($first: Int) {
           allPeople(first: $first) {
@@ -1206,11 +1204,11 @@ describe('Query component', () => {
 
       const data1 = {
         allPeople: {
-          people: [{ name: 'Luke Skywalker' }],
+          people: [{ name: "Luke Skywalker" }],
         },
       };
       const data2 = {
-        allPeople: { people: [{ name: 'Han Solo' }] },
+        allPeople: { people: [{ name: "Han Solo" }] },
       };
       const mocks = [
         {
@@ -1256,7 +1254,9 @@ describe('Query component', () => {
                     case 3:
                       expect(result.loading).toBe(true);
                       expect(result.data).toBeUndefined();
-                      expect(result.networkStatus).toBe(NetworkStatus.setVariables);
+                      expect(result.networkStatus).toBe(
+                        NetworkStatus.setVariables
+                      );
                       break;
                     case 4:
                       expect(result.loading).toBe(false);
@@ -1281,125 +1281,128 @@ describe('Query component', () => {
       );
     });
 
-    itAsync('should update if a manual `refetch` is triggered after a state change', (resolve, reject) => {
-      const query: DocumentNode = gql`
-        query {
-          allPeople {
-            people {
-              name
+    itAsync(
+      "should update if a manual `refetch` is triggered after a state change",
+      (resolve, reject) => {
+        const query: DocumentNode = gql`
+          query {
+            allPeople {
+              people {
+                name
+              }
             }
           }
-        }
-      `;
+        `;
 
-      const data1 = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
+        const data1 = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
 
-      const link = mockSingleLink(
-        {
-          request: { query },
-          result: { data: data1 },
-        },
-        {
-          request: { query },
-          result: { data: data1 },
-        },
-        {
-          request: { query },
-          result: { data: data1 },
-        }
-      );
+        const link = mockSingleLink(
+          {
+            request: { query },
+            result: { data: data1 },
+          },
+          {
+            request: { query },
+            result: { data: data1 },
+          },
+          {
+            request: { query },
+            result: { data: data1 },
+          }
+        );
 
-      const client = new ApolloClient({
-        link,
-        cache: new InMemoryCache({ addTypename: false }),
-      });
+        const client = new ApolloClient({
+          link,
+          cache: new InMemoryCache({ addTypename: false }),
+        });
 
-      let count = 0;
+        let count = 0;
 
-      class SomeComponent extends React.Component {
-        constructor(props: any) {
-          super(props);
-          this.state = {
-            open: false,
-          };
-          this.toggle = this.toggle.bind(this);
-        }
+        class SomeComponent extends React.Component {
+          constructor(props: any) {
+            super(props);
+            this.state = {
+              open: false,
+            };
+            this.toggle = this.toggle.bind(this);
+          }
 
-        toggle() {
-          this.setState((prevState: any) => ({
-            open: !prevState.open,
-          }));
-        }
+          toggle() {
+            this.setState((prevState: any) => ({
+              open: !prevState.open,
+            }));
+          }
 
-        render() {
-          const { open } = this.state as any;
-          return (
-            <Query client={client} query={query} notifyOnNetworkStatusChange>
-              {(props: any) => {
-                try {
-                  switch (count) {
-                    case 0:
-                      // Loading first response
-                      expect(props.loading).toBe(true);
-                      expect(open).toBe(false);
-                      break;
-                    case 1:
-                      // First response loaded, change state value
-                      expect(props.data).toEqual(data1);
-                      expect(open).toBe(false);
-                      setTimeout(() => {
-                        this.toggle();
-                      });
-                      break;
-                    case 2:
-                      // State value changed, fire a refetch
-                      expect(open).toBe(true);
-                      setTimeout(() => {
-                        props.refetch();
-                      });
-                      break;
-                    case 3:
-                      // Second response loading
-                      expect(props.loading).toBe(true);
-                      break;
-                    case 4:
-                      // Second response received, fire another refetch
-                      expect(props.data).toEqual(data1);
-                      setTimeout(() => {
-                        props.refetch();
-                      });
-                      break;
-                    case 5:
-                      // Third response loading
-                      expect(props.loading).toBe(true);
-                      break;
-                    case 6:
-                      // Third response received
-                      expect(props.data).toEqual(data1);
-                      break;
-                    default:
-                      reject('Unknown count');
+          render() {
+            const { open } = this.state as any;
+            return (
+              <Query client={client} query={query} notifyOnNetworkStatusChange>
+                {(props: any) => {
+                  try {
+                    switch (count) {
+                      case 0:
+                        // Loading first response
+                        expect(props.loading).toBe(true);
+                        expect(open).toBe(false);
+                        break;
+                      case 1:
+                        // First response loaded, change state value
+                        expect(props.data).toEqual(data1);
+                        expect(open).toBe(false);
+                        setTimeout(() => {
+                          this.toggle();
+                        });
+                        break;
+                      case 2:
+                        // State value changed, fire a refetch
+                        expect(open).toBe(true);
+                        setTimeout(() => {
+                          props.refetch();
+                        });
+                        break;
+                      case 3:
+                        // Second response loading
+                        expect(props.loading).toBe(true);
+                        break;
+                      case 4:
+                        // Second response received, fire another refetch
+                        expect(props.data).toEqual(data1);
+                        setTimeout(() => {
+                          props.refetch();
+                        });
+                        break;
+                      case 5:
+                        // Third response loading
+                        expect(props.loading).toBe(true);
+                        break;
+                      case 6:
+                        // Third response received
+                        expect(props.data).toEqual(data1);
+                        break;
+                      default:
+                        reject("Unknown count");
+                    }
+                    count += 1;
+                  } catch (error) {
+                    reject(error);
                   }
-                  count += 1;
-                } catch (error) {
-                  reject(error);
-                }
-                return null;
-              }}
-            </Query>
-          );
+                  return null;
+                }}
+              </Query>
+            );
+          }
         }
-      }
 
-      render(<SomeComponent />);
+        render(<SomeComponent />);
 
-      waitFor(() => {
-        expect(count).toBe(7)
-      }).then(resolve, reject);
-    });
+        waitFor(() => {
+          expect(count).toBe(7);
+        }).then(resolve, reject);
+      }
+    );
   });
 
-  it('should error if the query changes type to a subscription', async () => {
+  it("should error if the query changes type to a subscription", async () => {
     let finished = false;
     const subscription = gql`
       subscription onCommentAdded($repoFullName: String!) {
@@ -1419,8 +1422,8 @@ describe('Query component', () => {
 
       componentDidCatch(error: any) {
         const expectedError = new Error(
-          'Running a Query requires a graphql Query, but a Subscription was ' +
-            'used instead.'
+          "Running a Query requires a graphql Query, but a Subscription was " +
+            "used instead."
         );
         expect(error).toEqual(expectedError);
         finished = true;
@@ -1446,13 +1449,16 @@ describe('Query component', () => {
       </MockedProvider>
     );
 
-    await waitFor(() => {
-      expect(finished).toBe(true);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(finished).toBe(true);
+      },
+      { interval: 1 }
+    );
     console.error = errorLog;
   });
 
-  it('should be able to refetch after there was a network error', async () => {
+  it("should be able to refetch after there was a network error", async () => {
     const query: DocumentNode = gql`
       query somethingelse {
         allPeople(first: 1) {
@@ -1463,12 +1469,12 @@ describe('Query component', () => {
       }
     `;
 
-    const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
-    const dataTwo = { allPeople: { people: [{ name: 'Princess Leia' }] } };
+    const data = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
+    const dataTwo = { allPeople: { people: [{ name: "Princess Leia" }] } };
     const link = mockSingleLink(
       { request: { query }, result: { data } },
-      { request: { query }, error: new Error('This is an error!') },
-      { request: { query }, result: { data: dataTwo }, delay: 10 },
+      { request: { query }, error: new Error("This is an error!") },
+      { request: { query }, result: { data: dataTwo }, delay: 10 }
     );
     const client = new ApolloClient({
       link,
@@ -1494,12 +1500,10 @@ describe('Query component', () => {
                 case 1:
                   // First result is loaded, run a refetch to get the second result
                   // which is an error.
-                  expect(result.data.allPeople).toEqual(
-                    data.allPeople
-                  );
+                  expect(result.data.allPeople).toEqual(data.allPeople);
                   setTimeout(() => {
                     result.refetch().then(() => {
-                      fail('Expected error value on first refetch.');
+                      fail("Expected error value on first refetch.");
                     }, noop);
                   }, 0);
                   break;
@@ -1510,7 +1514,7 @@ describe('Query component', () => {
                 case 3:
                   setTimeout(() => {
                     result.refetch().catch(() => {
-                      fail('Expected good data on second refetch.');
+                      fail("Expected good data on second refetch.");
                     });
                   }, 0);
                   // fallthrough
@@ -1529,7 +1533,7 @@ describe('Query component', () => {
                   expect(result.data.allPeople).toEqual(dataTwo.allPeople);
                   break;
                 default:
-                  throw new Error('Unexpected fall through');
+                  throw new Error("Unexpected fall through");
               }
             } catch (e) {
               // if we throw the error inside the component,
@@ -1558,7 +1562,7 @@ describe('Query component', () => {
   });
 
   itAsync(
-    'should not persist previous result errors when a subsequent valid result is received',
+    "should not persist previous result errors when a subsequent valid result is received",
     (resolve, reject) => {
       const query: DocumentNode = gql`
         query somethingelse($variable: Boolean) {
@@ -1570,7 +1574,7 @@ describe('Query component', () => {
         }
       `;
 
-      const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
+      const data = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
       const variableGood = { variable: true };
       const variableBad = { variable: false };
 
@@ -1590,7 +1594,7 @@ describe('Query component', () => {
             variables: variableBad,
           },
           result: {
-            errors: [new Error('This is an error!')],
+            errors: [new Error("This is an error!")],
           },
         },
         {
@@ -1622,11 +1626,7 @@ describe('Query component', () => {
               // Change query variables to trigger bad result.
               setTimeout(() => {
                 render(
-                  <Query
-                    client={client}
-                    query={query}
-                    variables={variableBad}
-                  >
+                  <Query client={client} query={query} variables={variableBad}>
                     {(result: any) => {
                       return <DummyComp id="dummyId" {...result} />;
                     }}
@@ -1643,11 +1643,7 @@ describe('Query component', () => {
               // Change query variables to trigger a good result.
               setTimeout(() => {
                 render(
-                  <Query
-                    client={client}
-                    query={query}
-                    variables={variableGood}
-                  >
+                  <Query client={client} query={query} variables={variableGood}>
                     {(result: any) => {
                       return <DummyComp id="dummyId" {...result} />;
                     }}
@@ -1661,7 +1657,7 @@ describe('Query component', () => {
               expect(props.data.allPeople).toBeTruthy();
               break;
             default:
-              reject('Unknown count');
+              reject("Unknown count");
           }
         } catch (error) {
           reject(error);
@@ -1681,7 +1677,7 @@ describe('Query component', () => {
     }
   );
 
-  it('should support mixing setState and onCompleted', async () => {
+  it("should support mixing setState and onCompleted", async () => {
     const query = gql`
       query people($first: Int) {
         allPeople(first: $first) {
@@ -1692,8 +1688,8 @@ describe('Query component', () => {
       }
     `;
 
-    const data1 = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
-    const data2 = { allPeople: { people: [{ name: 'Han Solo' }] } };
+    const data1 = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
+    const data2 = { allPeople: { people: [{ name: "Han Solo" }] } };
     const mocks = [
       {
         request: { query, variables: { first: 1 } },
@@ -1781,61 +1777,63 @@ describe('Query component', () => {
     });
   });
 
-  itAsync('should not repeatedly call onError if setState in it', (resolve, reject) => {
-    const mockError = [
-      {
-        request: { query: allPeopleQuery, variables: { first: 1 } },
-        error: new Error('error occurred'),
-      },
-    ];
-
-    let unmount: any;
-    let onErrorCallCount = 0;
-    class Component extends React.Component {
-      state = {
-        variables: {
-          first: 1,
+  itAsync(
+    "should not repeatedly call onError if setState in it",
+    (resolve, reject) => {
+      const mockError = [
+        {
+          request: { query: allPeopleQuery, variables: { first: 1 } },
+          error: new Error("error occurred"),
         },
-      };
-      onError = () => {
-        onErrorCallCount += 1;
-        this.setState({ causeUpdate: true });
-      };
-      render() {
-        return (
-          <Query
-            query={allPeopleQuery}
-            variables={this.state.variables}
-            onError={this.onError}
-          >
-            {({ loading }: any) => {
-              if (!loading) {
-                setTimeout(unmount);
-              }
-              return null;
-            }}
-          </Query>
-        );
+      ];
+
+      let unmount: any;
+      let onErrorCallCount = 0;
+      class Component extends React.Component {
+        state = {
+          variables: {
+            first: 1,
+          },
+        };
+        onError = () => {
+          onErrorCallCount += 1;
+          this.setState({ causeUpdate: true });
+        };
+        render() {
+          return (
+            <Query
+              query={allPeopleQuery}
+              variables={this.state.variables}
+              onError={this.onError}
+            >
+              {({ loading }: any) => {
+                if (!loading) {
+                  setTimeout(unmount);
+                }
+                return null;
+              }}
+            </Query>
+          );
+        }
       }
-    }
 
-    unmount = render(
-      <MockedProvider mocks={mockError} addTypename={false}>
-        <Component />
-      </MockedProvider>
-    ).unmount;
+      unmount = render(
+        <MockedProvider mocks={mockError} addTypename={false}>
+          <Component />
+        </MockedProvider>
+      ).unmount;
 
-    waitFor(() => {
-      expect(onErrorCallCount).toBe(1);
-    }).then(resolve, reject);
-  });
+      waitFor(() => {
+        expect(onErrorCallCount).toBe(1);
+      }).then(resolve, reject);
+    }
+  );
 
-  describe('Partial refetching', () => {
+  describe("Partial refetching", () => {
     let errorSpy!: ReturnType<typeof jest.spyOn>;
 
     beforeEach(() => {
-      errorSpy = jest.spyOn(console, 'error')
-        .mockImplementation(() => {});
+      errorSpy = jest.spyOn(console, "error").mockImplementation(() => {});
     });
 
     afterAll(() => {
@@ -1846,10 +1844,10 @@ describe('Query component', () => {
     // error calls no matter what I try and I do not want to care about it
     // anymore :)
     itAsync.skip(
-      'should attempt a refetch when the query result was marked as being ' +
-        'partial, the returned data was reset to an empty Object by the ' +
-        'Apollo Client QueryManager (due to a cache miss), and the ' +
-        '`partialRefetch` prop is `true`',
+      "should attempt a refetch when the query result was marked as being " +
+        "partial, the returned data was reset to an empty Object by the " +
+        "Apollo Client QueryManager (due to a cache miss), and the " +
+        "`partialRefetch` prop is `true`",
       (resolve, reject) => {
         const allPeopleQuery: DocumentNode = gql`
           query people {
@@ -1863,7 +1861,7 @@ describe('Query component', () => {
 
         let count = 0;
         const allPeopleData = {
-          allPeople: { people: [{ name: 'Luke Skywalker' }] },
+          allPeople: { people: [{ name: "Luke Skywalker" }] },
         };
         const query = allPeopleQuery;
         const link = mockSingleLink(
@@ -1885,7 +1883,7 @@ describe('Query component', () => {
                 if (!loading) {
                   expect(data).toEqual(allPeopleData);
                   expect(errorSpy).toHaveBeenCalledTimes(1);
-                  expect(errorSpy.mock.calls[0][0]).toMatch('Missing field');
+                  expect(errorSpy.mock.calls[0][0]).toMatch("Missing field");
                 }
               } catch (err) {
                 reject(err);
@@ -1908,8 +1906,8 @@ describe('Query component', () => {
     );
 
     itAsync.skip(
-      'should not refetch when an empty partial is returned if the ' +
-        '`partialRefetch` prop is false/not set',
+      "should not refetch when an empty partial is returned if the " +
+        "`partialRefetch` prop is false/not set",
       (resolve, reject) => {
         let finished = false;
         const query = allPeopleQuery;
@@ -1940,16 +1938,16 @@ describe('Query component', () => {
           </ApolloProvider>
         );
 
-       waitFor(() => {
-         expect(finished).toBe(true);
-       }).then(resolve, reject);
+        waitFor(() => {
+          expect(finished).toBe(true);
+        }).then(resolve, reject);
       }
     );
   });
 
   itAsync(
-    'should keep data for a `Query` component using `no-cache` when the ' +
-      'tree is re-rendered',
+    "should keep data for a `Query` component using `no-cache` when the " +
+      "tree is re-rendered",
     (resolve, reject) => {
       const query1 = allPeopleQuery;
 
@@ -1971,14 +1969,14 @@ describe('Query component', () => {
 
       const allThingsData: ThingData = {
         allThings: {
-          thing: [{ description: 'Thing 1' }, { description: 'Thing 2' }],
+          thing: [{ description: "Thing 1" }, { description: "Thing 2" }],
         },
       };
 
       const link = mockSingleLink(
         { request: { query: query1 }, result: { data: allPeopleData } },
         { request: { query: query2 }, result: { data: allThingsData } },
-        { request: { query: query1 }, result: { data: allPeopleData } },
+        { request: { query: query1 }, result: { data: allPeopleData } }
       );
 
       const client = new ApolloClient({
@@ -2029,7 +2027,7 @@ describe('Query component', () => {
     }
   );
 
-  describe('Return partial data', () => {
+  describe("Return partial data", () => {
     const origConsoleWarn = console.warn;
 
     beforeAll(() => {
@@ -2040,7 +2038,7 @@ describe('Query component', () => {
       console.warn = origConsoleWarn;
     });
 
-    it('should not return partial cache data when `returnPartialData` is false', async () => {
+    it("should not return partial cache data when `returnPartialData` is false", async () => {
       let finished = false;
       const cache = new InMemoryCache();
       const client = new ApolloClient({
@@ -2066,15 +2064,15 @@ describe('Query component', () => {
         data: {
           cars: [
             {
-              __typename: 'Car',
-              make: 'Ford',
-              model: 'Mustang',
-              vin: 'PONY123',
+              __typename: "Car",
+              make: "Ford",
+              model: "Mustang",
+              vin: "PONY123",
               repairs: [
                 {
-                  __typename: 'Repair',
-                  date: '2019-05-08',
-                  description: 'Could not get after it.',
+                  __typename: "Repair",
+                  date: "2019-05-08",
+                  description: "Could not get after it.",
                 },
               ],
             },
@@ -2108,11 +2106,11 @@ describe('Query component', () => {
       render(<App />);
 
       await waitFor(() => {
-        expect(finished).toBe(true)
-      })
+        expect(finished).toBe(true);
+      });
     });
 
-    it('should return partial cache data when `returnPartialData` is true', async () => {
+    it("should return partial cache data when `returnPartialData` is true", async () => {
       let finished = false;
       const cache = new InMemoryCache();
       const client = new ApolloClient({
@@ -2138,15 +2136,15 @@ describe('Query component', () => {
         data: {
           cars: [
             {
-              __typename: 'Car',
-              make: 'Ford',
-              model: 'Mustang',
-              vin: 'PONY123',
+              __typename: "Car",
+              make: "Ford",
+              model: "Mustang",
+              vin: "PONY123",
               repairs: [
                 {
-                  __typename: 'Repair',
-                  date: '2019-05-08',
-                  description: 'Could not get after it.',
+                  __typename: "Repair",
+                  date: "2019-05-08",
+                  description: "Could not get after it.",
                 },
               ],
             },
@@ -2172,11 +2170,11 @@ describe('Query component', () => {
               expect(data).toEqual({
                 cars: [
                   {
-                    __typename: 'Car',
+                    __typename: "Car",
                     repairs: [
                       {
-                        __typename: 'Repair',
-                        date: '2019-05-08',
+                        __typename: "Repair",
+                        date: "2019-05-08",
                       },
                     ],
                   },
diff --git a/src/react/components/__tests__/client/Subscription.test.tsx b/src/react/components/__tests__/client/Subscription.test.tsx
index 7fd0ccd95e0..f11e262c2db 100644
--- a/src/react/components/__tests__/client/Subscription.test.tsx
+++ b/src/react/components/__tests__/client/Subscription.test.tsx
@@ -1,21 +1,21 @@
-import React from 'react';
-import gql from 'graphql-tag';
-import { render, waitFor } from '@testing-library/react';
+import React from "react";
+import gql from "graphql-tag";
+import { render, waitFor } from "@testing-library/react";
 
-import { ApolloClient } from '../../../../core';
-import { InMemoryCache as Cache } from '../../../../cache';
-import { ApolloProvider } from '../../../context';
-import { ApolloLink, Operation } from '../../../../link/core';
-import { itAsync, MockSubscriptionLink } from '../../../../testing';
-import { Subscription } from '../../Subscription';
+import { ApolloClient } from "../../../../core";
+import { InMemoryCache as Cache } from "../../../../cache";
+import { ApolloProvider } from "../../../context";
+import { ApolloLink, Operation } from "../../../../link/core";
+import { itAsync, MockSubscriptionLink } from "../../../../testing";
+import { Subscription } from "../../Subscription";
 
 const results = [
-  'Luke Skywalker',
-  'Han Solo',
-  'Darth Vader',
-  'Leia Skywalker'
-].map(name => ({
-  result: { data: { user: { name } } }
+  "Luke Skywalker",
+  "Han Solo",
+  "Darth Vader",
+  "Leia Skywalker",
+].map((name) => ({
+  result: { data: { user: { name } } },
 }));
 
 beforeEach(() => {
@@ -34,10 +34,10 @@ const cache = new Cache({ addTypename: false });
 const link = new MockSubscriptionLink();
 const client = new ApolloClient({
   link,
-  cache
+  cache,
 });
 
-itAsync('executes the subscription', (resolve, reject) => {
+itAsync("executes the subscription", (resolve, reject) => {
   let renderCount = 0;
   const Component = () => (
     <Subscription subscription={subscription}>
@@ -88,7 +88,7 @@ itAsync('executes the subscription', (resolve, reject) => {
   waitFor(() => expect(renderCount).toBe(5)).then(resolve, reject);
 });
 
-it('calls onData if given', async () => {
+it("calls onData if given", async () => {
   let count = 0;
 
   const Component = () => (
@@ -117,8 +117,10 @@ it('calls onData if given', async () => {
   await waitFor(() => expect(count).toBe(4));
 });
 
-it('calls onSubscriptionData with deprecation warning if given', async () => {
-  const consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+it("calls onSubscriptionData with deprecation warning if given", async () => {
+  const consoleWarnSpy = jest
+    .spyOn(console, "warn")
+    .mockImplementation(() => {});
   let count = 0;
 
   const Component = () => (
@@ -149,12 +151,12 @@ it('calls onSubscriptionData with deprecation warning if given', async () => {
     if (count >= 3) clearInterval(interval);
   }, 10);
 
-  await waitFor(() => expect(count).toBe(4))
+  await waitFor(() => expect(count).toBe(4));
 
   consoleWarnSpy.mockRestore();
 });
 
-it('should call onComplete if specified', async () => {
+it("should call onComplete if specified", async () => {
   let count = 0;
 
   let done = false;
@@ -184,8 +186,10 @@ it('should call onComplete if specified', async () => {
   await waitFor(() => expect(done).toBeTruthy());
 });
 
-it('should call onSubscriptionComplete with deprecation warning if specified', async () => {
-  const consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+it("should call onSubscriptionComplete with deprecation warning if specified", async () => {
+  const consoleWarnSpy = jest
+    .spyOn(console, "warn")
+    .mockImplementation(() => {});
   let count = 0;
 
   let done = false;
@@ -222,73 +226,76 @@ it('should call onSubscriptionComplete with deprecation warning if specified', a
   consoleWarnSpy.mockRestore();
 });
 
-itAsync('executes subscription for the variables passed in the props', (resolve, reject) => {
-  const subscriptionWithVariables = gql`
-    subscription UserInfo($name: String) {
-      user(name: $name) {
-        name
+itAsync(
+  "executes subscription for the variables passed in the props",
+  (resolve, reject) => {
+    const subscriptionWithVariables = gql`
+      subscription UserInfo($name: String) {
+        user(name: $name) {
+          name
+        }
       }
-    }
-  `;
+    `;
 
-  const variables = { name: 'Luke Skywalker' };
+    const variables = { name: "Luke Skywalker" };
 
-  class MockSubscriptionLinkOverride extends MockSubscriptionLink {
-    request(req: Operation) {
-      try {
-        expect(req.variables).toEqual(variables);
-      } catch (error) {
-        reject(error);
+    class MockSubscriptionLinkOverride extends MockSubscriptionLink {
+      request(req: Operation) {
+        try {
+          expect(req.variables).toEqual(variables);
+        } catch (error) {
+          reject(error);
+        }
+        return super.request(req);
       }
-      return super.request(req);
     }
-  }
 
-  const mockLink = new MockSubscriptionLinkOverride();
-
-  const mockClient = new ApolloClient({
-    link: mockLink,
-    cache
-  });
+    const mockLink = new MockSubscriptionLinkOverride();
 
-  let count = 0;
+    const mockClient = new ApolloClient({
+      link: mockLink,
+      cache,
+    });
 
-  const Component = () => (
-    <Subscription
-      subscription={subscriptionWithVariables}
-      variables={variables}
-    >
-      {(result: any) => {
-        const { loading, data } = result;
+    let count = 0;
 
-        try {
-          if (count === 0) {
-            expect(loading).toBe(true);
-          } else if (count === 1) {
-            expect(loading).toBe(false);
-            expect(data).toEqual(results[0].result.data);
+    const Component = () => (
+      <Subscription
+        subscription={subscriptionWithVariables}
+        variables={variables}
+      >
+        {(result: any) => {
+          const { loading, data } = result;
+
+          try {
+            if (count === 0) {
+              expect(loading).toBe(true);
+            } else if (count === 1) {
+              expect(loading).toBe(false);
+              expect(data).toEqual(results[0].result.data);
+            }
+          } catch (error) {
+            reject(error);
           }
-        } catch (error) {
-          reject(error);
-        }
-        count++;
-        return null;
-      }}
-    </Subscription>
-  );
+          count++;
+          return null;
+        }}
+      </Subscription>
+    );
 
-  render(
-    <ApolloProvider client={mockClient}>
-      <Component />
-    </ApolloProvider>
-  );
+    render(
+      <ApolloProvider client={mockClient}>
+        <Component />
+      </ApolloProvider>
+    );
 
-  mockLink.simulateResult(results[0]);
+    mockLink.simulateResult(results[0]);
 
-  waitFor(() => expect(count).toBe(2)).then(resolve, reject);
-});
+    waitFor(() => expect(count).toBe(2)).then(resolve, reject);
+  }
+);
 
-itAsync('does not execute if variables have not changed', (resolve, reject) => {
+itAsync("does not execute if variables have not changed", (resolve, reject) => {
   const subscriptionWithVariables = gql`
     subscription UserInfo($name: String) {
       user(name: $name) {
@@ -297,7 +304,7 @@ itAsync('does not execute if variables have not changed', (resolve, reject) => {
     }
   `;
 
-  const name = 'Luke Skywalker';
+  const name = "Luke Skywalker";
 
   class MockSubscriptionLinkOverride extends MockSubscriptionLink {
     request(req: Operation) {
@@ -314,7 +321,7 @@ itAsync('does not execute if variables have not changed', (resolve, reject) => {
 
   const mockClient = new ApolloClient({
     link: mockLink,
-    cache
+    cache,
   });
 
   let count = 0;
@@ -359,7 +366,7 @@ itAsync('does not execute if variables have not changed', (resolve, reject) => {
   waitFor(() => expect(count).toBe(3)).then(resolve, reject);
 });
 
-itAsync('renders an error', (resolve, reject) => {
+itAsync("renders an error", (resolve, reject) => {
   const subscriptionWithVariables = gql`
     subscription UserInfo($name: String) {
       user(name: $name) {
@@ -369,11 +376,11 @@ itAsync('renders an error', (resolve, reject) => {
   `;
 
   const variables = {
-    name: 'Luke Skywalker'
+    name: "Luke Skywalker",
   };
 
   const subscriptionError = {
-    error: new Error('error occurred')
+    error: new Error("error occurred"),
   };
 
   let count = 0;
@@ -390,7 +397,7 @@ itAsync('renders an error', (resolve, reject) => {
             expect(error).toBeUndefined();
           } else if (count === 1) {
             expect(loading).toBe(false);
-            expect(error).toEqual(new Error('error occurred'));
+            expect(error).toEqual(new Error("error occurred"));
             expect(data).toBeUndefined();
           }
         } catch (error) {
@@ -414,12 +421,12 @@ itAsync('renders an error', (resolve, reject) => {
   waitFor(() => expect(count).toBe(2)).then(resolve, reject);
 });
 
-describe('should update', () => {
-  it('if the client changes', async () => {
+describe("should update", () => {
+  it("if the client changes", async () => {
     const link2 = new MockSubscriptionLink();
     const client2 = new ApolloClient({
       link: link2,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     let count = 0;
@@ -427,7 +434,7 @@ describe('should update', () => {
 
     class Component extends React.Component {
       state = {
-        client: client
+        client: client,
       };
 
       render() {
@@ -446,14 +453,14 @@ describe('should update', () => {
                       setTimeout(() => {
                         this.setState(
                           {
-                            client: client2
+                            client: client2,
                           },
                           () => {
                             link2.simulateResult(results[1]);
                           }
                         );
                       });
-                      // fallthrough
+                    // fallthrough
                     case 2:
                       expect(loading).toBeFalsy();
                       expect(data).toEqual(results[0].result.data);
@@ -492,7 +499,7 @@ describe('should update', () => {
     });
   });
 
-  itAsync('if the query changes', (resolve, reject) => {
+  itAsync("if the query changes", (resolve, reject) => {
     const subscriptionHero = gql`
       subscription HeroInfo {
         hero {
@@ -505,30 +512,30 @@ describe('should update', () => {
       result: {
         data: {
           hero: {
-            name: 'Chewie'
-          }
-        }
-      }
+            name: "Chewie",
+          },
+        },
+      },
     };
 
     const userLink = new MockSubscriptionLink();
     const heroLink = new MockSubscriptionLink();
     const linkCombined = new ApolloLink((o, f) => (f ? f(o) : null)).split(
-      ({ operationName }) => operationName === 'HeroInfo',
+      ({ operationName }) => operationName === "HeroInfo",
       heroLink,
       userLink
     );
 
     const mockClient = new ApolloClient({
       link: linkCombined,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     let count = 0;
 
     class Component extends React.Component {
       state = {
-        subscription
+        subscription,
       };
 
       render() {
@@ -546,14 +553,14 @@ describe('should update', () => {
                     setTimeout(() => {
                       this.setState(
                         {
-                          subscription: subscriptionHero
+                          subscription: subscriptionHero,
                         },
                         () => {
                           heroLink.simulateResult(heroResult);
                         }
                       );
                     });
-                    // fallthrough
+                  // fallthrough
                   case 2:
                     expect(loading).toBeFalsy();
                     expect(data).toEqual(results[0].result.data);
@@ -589,7 +596,7 @@ describe('should update', () => {
     waitFor(() => expect(count).toBe(5)).then(resolve, reject);
   });
 
-  itAsync('if the variables change', (resolve, reject) => {
+  itAsync("if the variables change", (resolve, reject) => {
     const subscriptionWithVariables = gql`
       subscription UserInfo($name: String) {
         user(name: $name) {
@@ -598,33 +605,33 @@ describe('should update', () => {
       }
     `;
 
-    const variablesLuke = { name: 'Luke Skywalker' };
-    const variablesHan = { name: 'Han Solo' };
+    const variablesLuke = { name: "Luke Skywalker" };
+    const variablesHan = { name: "Han Solo" };
 
     const dataLuke = {
       user: {
-        name: 'Luke Skywalker'
-      }
+        name: "Luke Skywalker",
+      },
     };
 
     const dataHan = {
       user: {
-        name: 'Han Solo'
-      }
+        name: "Han Solo",
+      },
     };
 
     const mockLink = new MockSubscriptionLink();
 
     const mockClient = new ApolloClient({
       link: mockLink,
-      cache
+      cache,
     });
 
     let count = 0;
 
     class Component extends React.Component {
       state = {
-        variables: variablesLuke
+        variables: variablesLuke,
       };
 
       render() {
@@ -645,14 +652,16 @@ describe('should update', () => {
                     setTimeout(() => {
                       this.setState(
                         {
-                          variables: variablesHan
+                          variables: variablesHan,
                         },
                         () => {
-                          mockLink.simulateResult({ result: { data: dataHan } });
+                          mockLink.simulateResult({
+                            result: { data: dataHan },
+                          });
                         }
                       );
                     });
-                    // fallthrough
+                  // fallthrough
                   case 2:
                     expect(loading).toBeFalsy();
                     expect(data).toEqual(dataLuke);
@@ -690,20 +699,20 @@ describe('should update', () => {
   });
 });
 
-describe('should not update', () => {
-  const variablesLuke = { name: 'Luke Skywalker' };
-  const variablesHan = { name: 'Han Solo' };
+describe("should not update", () => {
+  const variablesLuke = { name: "Luke Skywalker" };
+  const variablesHan = { name: "Han Solo" };
 
   const dataLuke = {
     user: {
-      name: 'Luke Skywalker'
-    }
+      name: "Luke Skywalker",
+    },
   };
 
   const dataHan = {
     user: {
-      name: 'Han Solo'
-    }
+      name: "Han Solo",
+    },
   };
 
   class MockSubscriptionLinkOverride extends MockSubscriptionLink {
@@ -714,23 +723,23 @@ describe('should not update', () => {
     }
 
     simulateResult() {
-      if (this.variables.name === 'Luke Skywalker') {
+      if (this.variables.name === "Luke Skywalker") {
         return super.simulateResult({
           result: {
-            data: dataLuke
-          }
+            data: dataLuke,
+          },
         });
-      } else if (this.variables.name === 'Han Solo') {
+      } else if (this.variables.name === "Han Solo") {
         return super.simulateResult({
           result: {
-            data: dataHan
-          }
+            data: dataHan,
+          },
         });
       }
     }
   }
 
-  itAsync('if shouldResubscribe is false', (resolve, reject) => {
+  itAsync("if shouldResubscribe is false", (resolve, reject) => {
     const subscriptionWithVariables = gql`
       subscription UserInfo($name: String) {
         user(name: $name) {
@@ -743,14 +752,14 @@ describe('should not update', () => {
 
     const mockClient = new ApolloClient({
       link: mockLink,
-      cache
+      cache,
     });
 
     let count = 0;
 
     class Component extends React.Component {
       state = {
-        variables: variablesLuke
+        variables: variablesLuke,
       };
 
       render() {
@@ -772,7 +781,7 @@ describe('should not update', () => {
                   setTimeout(() => {
                     this.setState(
                       {
-                        variables: variablesHan
+                        variables: variablesHan,
                       },
                       () => {
                         mockLink.simulateResult();
@@ -806,7 +815,7 @@ describe('should not update', () => {
     waitFor(() => expect(count).toBe(4)).then(resolve, reject);
   });
 
-  itAsync('if shouldResubscribe returns false', (resolve, reject) => {
+  itAsync("if shouldResubscribe returns false", (resolve, reject) => {
     const subscriptionWithVariables = gql`
       subscription UserInfo($name: String) {
         user(name: $name) {
@@ -819,14 +828,14 @@ describe('should not update', () => {
 
     const mockClient = new ApolloClient({
       link: mockLink,
-      cache
+      cache,
     });
 
     let count = 0;
 
     class Component extends React.Component {
       state = {
-        variables: variablesLuke
+        variables: variablesLuke,
       };
 
       render() {
@@ -848,7 +857,7 @@ describe('should not update', () => {
                   setTimeout(() => {
                     this.setState(
                       {
-                        variables: variablesHan
+                        variables: variablesHan,
                       },
                       () => {
                         mockLink.simulateResult();
diff --git a/src/react/components/__tests__/ssr/getDataFromTree.test.tsx b/src/react/components/__tests__/ssr/getDataFromTree.test.tsx
index 198cdcd7cd9..6441008606e 100644
--- a/src/react/components/__tests__/ssr/getDataFromTree.test.tsx
+++ b/src/react/components/__tests__/ssr/getDataFromTree.test.tsx
@@ -1,22 +1,28 @@
 /** @jest-environment node */
-import React from 'react';
-import gql from 'graphql-tag';
-import { DocumentNode } from 'graphql';
+import React from "react";
+import gql from "graphql-tag";
+import { DocumentNode } from "graphql";
 
-import { ApolloClient } from '../../../../core';
-import { InMemoryCache as Cache } from '../../../../cache';
-import { ApolloProvider, getApolloContext, ApolloContextValue } from '../../../context';
-import { getDataFromTree } from '../../../ssr';
-import { itAsync, mockSingleLink } from '../../../../testing';
-import { Query } from '../../Query';
+import { ApolloClient } from "../../../../core";
+import { InMemoryCache as Cache } from "../../../../cache";
+import {
+  ApolloProvider,
+  getApolloContext,
+  ApolloContextValue,
+} from "../../../context";
+import { getDataFromTree } from "../../../ssr";
+import { itAsync, mockSingleLink } from "../../../../testing";
+import { Query } from "../../Query";
 
-describe('SSR', () => {
-  describe('`getDataFromTree`', () => {
-    it('should support passing a root context', () => {
-      const apolloContext = getApolloContext() as unknown as React.Context<ApolloContextValue & { text: string }>;
+describe("SSR", () => {
+  describe("`getDataFromTree`", () => {
+    it("should support passing a root context", () => {
+      const apolloContext = getApolloContext() as unknown as React.Context<
+        ApolloContextValue & { text: string }
+      >;
       class Consumer extends React.Component {
         static contextType = apolloContext;
-        declare context: React.ContextType<typeof apolloContext>
+        declare context: React.ContextType<typeof apolloContext>;
 
         render() {
           return <div>{this.context.text}</div>;
@@ -24,13 +30,13 @@ describe('SSR', () => {
       }
 
       return getDataFromTree(<Consumer />, {
-        text: 'oyez'
-      }).then(html => {
-        expect(html).toEqual('<div>oyez</div>');
+        text: "oyez",
+      }).then((html) => {
+        expect(html).toEqual("<div>oyez</div>");
       });
     });
 
-    it('should run through all of the queries (also defined via Query component) that want SSR', () => {
+    it("should run through all of the queries (also defined via Query component) that want SSR", () => {
       const query = gql`
         {
           currentUser {
@@ -38,15 +44,15 @@ describe('SSR', () => {
           }
         }
       `;
-      const data1 = { currentUser: { firstName: 'James' } };
+      const data1 = { currentUser: { firstName: "James" } };
       const link = mockSingleLink({
         request: { query },
         result: { data: data1 },
-        delay: 50
+        delay: 50,
       });
       const apolloClient = new ApolloClient({
         link,
-        cache: new Cache({ addTypename: false })
+        cache: new Cache({ addTypename: false }),
       });
 
       interface Data {
@@ -59,7 +65,7 @@ describe('SSR', () => {
         <Query query={query}>
           {({ data, loading }: { data: Data; loading: boolean }) => (
             <div>
-              {loading || !data ? 'loading' : data.currentUser!.firstName}
+              {loading || !data ? "loading" : data.currentUser!.firstName}
             </div>
           )}
         </Query>
@@ -71,57 +77,60 @@ describe('SSR', () => {
         </ApolloProvider>
       );
 
-      return getDataFromTree(app).then(markup => {
+      return getDataFromTree(app).then((markup) => {
         expect(markup).toMatch(/James/);
       });
     });
 
-    itAsync('should pass any GraphQL errors in props along with data during a SSR when errorPolicy="all"', (resolve, reject) => {
-      const query: DocumentNode = gql`
-        query people {
-          allPeople {
-            people {
-              name
+    itAsync(
+      'should pass any GraphQL errors in props along with data during a SSR when errorPolicy="all"',
+      (resolve, reject) => {
+        const query: DocumentNode = gql`
+          query people {
+            allPeople {
+              people {
+                name
+              }
             }
           }
-        }
-      `;
-      const link = mockSingleLink({
-        request: { query },
-        result: {
-          data: {
-            allPeople: {
-              people: null
-            }
+        `;
+        const link = mockSingleLink({
+          request: { query },
+          result: {
+            data: {
+              allPeople: {
+                people: null,
+              },
+            },
+            errors: [new Error("this is an error")],
           },
-          errors: [new Error('this is an error')]
-        }
-      });
+        });
 
-      const client = new ApolloClient({
-        link,
-        cache: new Cache({ addTypename: false })
-      });
+        const client = new ApolloClient({
+          link,
+          cache: new Cache({ addTypename: false }),
+        });
 
-      const app = (
-        <ApolloProvider client={client}>
-          <Query query={query} errorPolicy="all">
-            {({ loading, data, error }: any) => {
-              if (!loading) {
-                expect(data).toMatchObject({ allPeople: { people: null } });
-                expect(error).toBeDefined();
-                expect(error.graphQLErrors[0].message).toEqual(
-                  'this is an error'
-                );
-                resolve();
-              }
-              return null;
-            }}
-          </Query>
-        </ApolloProvider>
-      );
+        const app = (
+          <ApolloProvider client={client}>
+            <Query query={query} errorPolicy="all">
+              {({ loading, data, error }: any) => {
+                if (!loading) {
+                  expect(data).toMatchObject({ allPeople: { people: null } });
+                  expect(error).toBeDefined();
+                  expect(error.graphQLErrors[0].message).toEqual(
+                    "this is an error"
+                  );
+                  resolve();
+                }
+                return null;
+              }}
+            </Query>
+          </ApolloProvider>
+        );
 
-      getDataFromTree(app);
-    });
+        getDataFromTree(app);
+      }
+    );
   });
 });
diff --git a/src/react/components/__tests__/ssr/server.test.tsx b/src/react/components/__tests__/ssr/server.test.tsx
index ef4d3756d62..7d50399515d 100644
--- a/src/react/components/__tests__/ssr/server.test.tsx
+++ b/src/react/components/__tests__/ssr/server.test.tsx
@@ -1,5 +1,5 @@
 /** @jest-environment node */
-import React from 'react';
+import React from "react";
 import {
   print,
   graphql as execute,
@@ -7,111 +7,111 @@ import {
   GraphQLObjectType,
   GraphQLList,
   GraphQLString,
-  GraphQLID
-} from 'graphql';
-import gql from 'graphql-tag';
+  GraphQLID,
+} from "graphql";
+import gql from "graphql-tag";
 
-import { ApolloClient } from '../../../../core';
-import { InMemoryCache as Cache } from '../../../../cache';
-import { ApolloProvider } from '../../../context';
-import { ApolloLink } from '../../../../link/core';
-import { Observable } from '../../../../utilities';
-import { renderToStringWithData } from '../../../ssr';
-import { Query } from '../../Query';
+import { ApolloClient } from "../../../../core";
+import { InMemoryCache as Cache } from "../../../../cache";
+import { ApolloProvider } from "../../../context";
+import { ApolloLink } from "../../../../link/core";
+import { Observable } from "../../../../utilities";
+import { renderToStringWithData } from "../../../ssr";
+import { Query } from "../../Query";
 
-const planetMap = new Map([['Planet:1', { id: 'Planet:1', name: 'Tatooine' }]]);
+const planetMap = new Map([["Planet:1", { id: "Planet:1", name: "Tatooine" }]]);
 
 const shipMap = new Map([
   [
-    'Ship:2',
+    "Ship:2",
     {
-      id: 'Ship:2',
-      name: 'CR90 corvette',
-      films: ['Film:4', 'Film:6', 'Film:3']
-    }
+      id: "Ship:2",
+      name: "CR90 corvette",
+      films: ["Film:4", "Film:6", "Film:3"],
+    },
   ],
   [
-    'Ship:3',
+    "Ship:3",
     {
-      id: 'Ship:3',
-      name: 'Star Destroyer',
-      films: ['Film:4', 'Film:5', 'Film:6']
-    }
-  ]
+      id: "Ship:3",
+      name: "Star Destroyer",
+      films: ["Film:4", "Film:5", "Film:6"],
+    },
+  ],
 ]);
 
 const filmMap = new Map([
-  ['Film:3', { id: 'Film:3', title: 'Revenge of the Sith' }],
-  ['Film:4', { id: 'Film:4', title: 'A New Hope' }],
-  ['Film:5', { id: 'Film:5', title: 'the Empire Strikes Back' }],
-  ['Film:6', { id: 'Film:6', title: 'Return of the Jedi' }]
+  ["Film:3", { id: "Film:3", title: "Revenge of the Sith" }],
+  ["Film:4", { id: "Film:4", title: "A New Hope" }],
+  ["Film:5", { id: "Film:5", title: "the Empire Strikes Back" }],
+  ["Film:6", { id: "Film:6", title: "Return of the Jedi" }],
 ]);
 
 const PlanetType = new GraphQLObjectType({
-  name: 'Planet',
+  name: "Planet",
   fields: {
     id: { type: GraphQLID },
-    name: { type: GraphQLString }
-  }
+    name: { type: GraphQLString },
+  },
 });
 
 const FilmType = new GraphQLObjectType({
-  name: 'Film',
+  name: "Film",
   fields: {
     id: { type: GraphQLID },
-    title: { type: GraphQLString }
-  }
+    title: { type: GraphQLString },
+  },
 });
 
 const ShipType = new GraphQLObjectType({
-  name: 'Ship',
+  name: "Ship",
   fields: {
     id: { type: GraphQLID },
     name: { type: GraphQLString },
     films: {
       type: new GraphQLList(FilmType),
-      resolve: ({ films }) => films.map((id: string) => filmMap.get(id))
-    }
-  }
+      resolve: ({ films }) => films.map((id: string) => filmMap.get(id)),
+    },
+  },
 });
 
 const QueryType = new GraphQLObjectType({
-  name: 'Query',
+  name: "Query",
   fields: {
     allPlanets: {
       type: new GraphQLList(PlanetType),
-      resolve: () => Array.from(planetMap.values())
+      resolve: () => Array.from(planetMap.values()),
     },
     allShips: {
       type: new GraphQLList(ShipType),
-      resolve: () => Array.from(shipMap.values())
+      resolve: () => Array.from(shipMap.values()),
     },
     ship: {
       type: ShipType,
       args: { id: { type: GraphQLID } },
-      resolve: (_, { id }) => shipMap.get(id)
+      resolve: (_, { id }) => shipMap.get(id),
     },
     film: {
       type: FilmType,
       args: { id: { type: GraphQLID } },
-      resolve: (_, { id }) => filmMap.get(id)
-    }
-  }
+      resolve: (_, { id }) => filmMap.get(id),
+    },
+  },
 });
 
 const Schema = new GraphQLSchema({ query: QueryType });
 
-describe('SSR', () => {
-  it('should work with React.createContext', async () => {
-    let defaultValue = 'default';
+describe("SSR", () => {
+  it("should work with React.createContext", async () => {
+    let defaultValue = "default";
     let Context = React.createContext(defaultValue);
-    let providerValue = 'provider';
+    let providerValue = "provider";
     expect(
       await renderToStringWithData(
         <React.Fragment>
           <Context.Provider value={providerValue} />
           <Context.Consumer>
-            {val => {
+            {(val) => {
               expect(val).toBe(defaultValue);
               return val;
             }}
@@ -123,7 +123,7 @@ describe('SSR', () => {
       await renderToStringWithData(
         <Context.Provider value={providerValue}>
           <Context.Consumer>
-            {val => {
+            {(val) => {
               expect(val).toBe(providerValue);
               return val;
             }}
@@ -134,7 +134,7 @@ describe('SSR', () => {
     expect(
       await renderToStringWithData(
         <Context.Consumer>
-          {val => {
+          {(val) => {
             expect(val).toBe(defaultValue);
             return val;
           }}
@@ -147,34 +147,34 @@ describe('SSR', () => {
       await renderToStringWithData(
         <ContextForUndefined.Provider value={undefined}>
           <ContextForUndefined.Consumer>
-            {val => {
+            {(val) => {
               expect(val).toBeUndefined();
-              return val === undefined ? 'works' : 'broken';
+              return val === undefined ? "works" : "broken";
             }}
           </ContextForUndefined.Consumer>
         </ContextForUndefined.Provider>
       )
-    ).toBe('works');
+    ).toBe("works");
 
     const apolloClient = new ApolloClient({
-      link: new ApolloLink(config => {
-        return new Observable(observer => {
+      link: new ApolloLink((config) => {
+        return new Observable((observer) => {
           execute({
             schema: Schema,
             source: print(config.query),
             variableValues: config.variables,
             operationName: config.operationName,
           })
-            .then(result => {
+            .then((result) => {
               observer.next(result);
               observer.complete();
             })
-            .catch(e => {
+            .catch((e) => {
               observer.error(e);
             });
         });
       }),
-      cache: new Cache()
+      cache: new Cache(),
     });
 
     expect(
@@ -192,7 +192,7 @@ describe('SSR', () => {
             >
               {() => (
                 <Context.Consumer>
-                  {val => {
+                  {(val) => {
                     expect(val).toBe(providerValue);
                     return val;
                   }}
diff --git a/src/react/components/index.ts b/src/react/components/index.ts
index 5e84197e074..5aa7ebb8a2e 100644
--- a/src/react/components/index.ts
+++ b/src/react/components/index.ts
@@ -1,5 +1,5 @@
-export { Query } from './Query.js';
-export { Mutation } from './Mutation.js';
-export { Subscription } from './Subscription.js';
+export { Query } from "./Query.js";
+export { Mutation } from "./Mutation.js";
+export { Subscription } from "./Subscription.js";
 
-export * from './types.js';
+export * from "./types.js";
diff --git a/src/react/components/types.ts b/src/react/components/types.ts
index 000bbb2be03..4e1abacb6a1 100644
--- a/src/react/components/types.ts
+++ b/src/react/components/types.ts
@@ -1,7 +1,11 @@
-import type { DocumentNode } from 'graphql';
-import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
+import type { DocumentNode } from "graphql";
+import type { TypedDocumentNode } from "@graphql-typed-document-node/core";
 
-import type { OperationVariables, DefaultContext, ApolloCache } from '../../core/index.js';
+import type {
+  OperationVariables,
+  DefaultContext,
+  ApolloCache,
+} from "../../core/index.js";
 import type {
   QueryFunctionOptions,
   QueryResult,
@@ -9,12 +13,12 @@ import type {
   MutationFunction,
   MutationResult,
   BaseSubscriptionOptions,
-  SubscriptionResult
-} from '../types/types.js';
+  SubscriptionResult,
+} from "../types/types.js";
 
 export interface QueryComponentOptions<
   TData = any,
-  TVariables extends OperationVariables = OperationVariables
+  TVariables extends OperationVariables = OperationVariables,
 > extends QueryFunctionOptions<TData, TVariables> {
   children: (result: QueryResult<TData, TVariables>) => JSX.Element | null;
   query: DocumentNode | TypedDocumentNode<TData, TVariables>;
@@ -24,7 +28,7 @@ export interface MutationComponentOptions<
   TData = any,
   TVariables = OperationVariables,
   TContext = DefaultContext,
-  TCache extends ApolloCache<any> = ApolloCache<any>
+  TCache extends ApolloCache<any> = ApolloCache<any>,
 > extends BaseMutationOptions<TData, TVariables, TContext, TCache> {
   mutation: DocumentNode | TypedDocumentNode<TData, TVariables>;
   children: (
@@ -35,7 +39,7 @@ export interface MutationComponentOptions<
 
 export interface SubscriptionComponentOptions<
   TData = any,
-  TVariables extends OperationVariables = OperationVariables
+  TVariables extends OperationVariables = OperationVariables,
 > extends BaseSubscriptionOptions<TData, TVariables> {
   subscription: DocumentNode | TypedDocumentNode<TData, TVariables>;
   children?: null | ((result: SubscriptionResult<TData>) => JSX.Element | null);
diff --git a/src/react/context/ApolloConsumer.tsx b/src/react/context/ApolloConsumer.tsx
index f5e12696cbd..ac26e734da9 100644
--- a/src/react/context/ApolloConsumer.tsx
+++ b/src/react/context/ApolloConsumer.tsx
@@ -1,15 +1,15 @@
-import { invariant } from '../../utilities/globals/index.js';
+import { invariant } from "../../utilities/globals/index.js";
 
-import * as React from 'react';
+import * as React from "react";
 
-import type { ApolloClient } from '../../core/index.js';
-import { getApolloContext } from './ApolloContext.js';
+import type { ApolloClient } from "../../core/index.js";
+import { getApolloContext } from "./ApolloContext.js";
 
 export interface ApolloConsumerProps {
   children: (client: ApolloClient<object>) => React.ReactChild | null;
 }
 
-export const ApolloConsumer: React.FC<ApolloConsumerProps> = props => {
+export const ApolloConsumer: React.FC<ApolloConsumerProps> = (props) => {
   const ApolloContext = getApolloContext();
   return (
     <ApolloContext.Consumer>
@@ -17,7 +17,7 @@ export const ApolloConsumer: React.FC<ApolloConsumerProps> = props => {
         invariant(
           context && context.client,
           'Could not find "client" in the context of ApolloConsumer. ' +
-            'Wrap the root component in an <ApolloProvider>.'
+            "Wrap the root component in an <ApolloProvider>."
         );
         return props.children(context.client);
       }}
diff --git a/src/react/context/ApolloContext.ts b/src/react/context/ApolloContext.ts
index d5d63b139a1..e942e8e9dad 100644
--- a/src/react/context/ApolloContext.ts
+++ b/src/react/context/ApolloContext.ts
@@ -1,8 +1,8 @@
-import * as React from 'react';
-import type { ApolloClient } from '../../core/index.js';
-import { canUseSymbol } from '../../utilities/index.js';
-import type { RenderPromises } from '../ssr/index.js';
-import { invariant } from '../../utilities/globals/index.js';
+import * as React from "react";
+import type { ApolloClient } from "../../core/index.js";
+import { canUseSymbol } from "../../utilities/index.js";
+import type { RenderPromises } from "../ssr/index.js";
+import { invariant } from "../../utilities/globals/index.js";
 
 export interface ApolloContextValue {
   client?: ApolloClient<object>;
@@ -14,28 +14,30 @@ export interface ApolloContextValue {
 // in one context, then attempting to retrieve it from another different
 // context), a single Apollo context is created and tracked in global state.
 const contextKey = canUseSymbol
-  ? Symbol.for('__APOLLO_CONTEXT__')
-  : '__APOLLO_CONTEXT__';
+  ? Symbol.for("__APOLLO_CONTEXT__")
+  : "__APOLLO_CONTEXT__";
 
 export function getApolloContext(): React.Context<ApolloContextValue> {
   invariant(
-    'createContext' in React,
-    'Invoking `getApolloContext` in an environment where `React.createContext` is not available.\n' +
-      'The Apollo Client functionality you are trying to use is only available in React Client Components.\n' +
+    "createContext" in React,
+    "Invoking `getApolloContext` in an environment where `React.createContext` is not available.\n" +
+      "The Apollo Client functionality you are trying to use is only available in React Client Components.\n" +
       'Please make sure to add "use client" at the top of your file.\n' +
       // TODO: change to React documentation once React documentation contains information about Client Components
-      'For more information, see https://nextjs.org/docs/getting-started/react-essentials#client-components'
+      "For more information, see https://nextjs.org/docs/getting-started/react-essentials#client-components"
   );
-  
-  let context = (React.createContext as any)[contextKey] as React.Context<ApolloContextValue>;
+
+  let context = (React.createContext as any)[
+    contextKey
+  ] as React.Context<ApolloContextValue>;
   if (!context) {
     Object.defineProperty(React.createContext, contextKey, {
-      value: context = React.createContext<ApolloContextValue>({}),
+      value: (context = React.createContext<ApolloContextValue>({})),
       enumerable: false,
       writable: false,
       configurable: true,
     });
-    context.displayName = 'ApolloContext';
+    context.displayName = "ApolloContext";
   }
   return context;
 }
diff --git a/src/react/context/ApolloProvider.tsx b/src/react/context/ApolloProvider.tsx
index 45028f37075..930e32dab0a 100644
--- a/src/react/context/ApolloProvider.tsx
+++ b/src/react/context/ApolloProvider.tsx
@@ -1,9 +1,9 @@
-import { invariant } from '../../utilities/globals/index.js';
+import { invariant } from "../../utilities/globals/index.js";
 
-import * as React from 'react';
+import * as React from "react";
 
-import type { ApolloClient } from '../../core/index.js';
-import { getApolloContext } from './ApolloContext.js';
+import type { ApolloClient } from "../../core/index.js";
+import { getApolloContext } from "./ApolloContext.js";
 
 export interface ApolloProviderProps<TCache> {
   client: ApolloClient<TCache>;
@@ -26,7 +26,7 @@ export const ApolloProvider: React.FC<ApolloProviderProps<any>> = ({
 
   invariant(
     context.client,
-    'ApolloProvider was not passed a client instance. Make ' +
+    "ApolloProvider was not passed a client instance. Make " +
       'sure you pass in your client via the "client" prop.'
   );
 
diff --git a/src/react/context/__tests__/ApolloConsumer.test.tsx b/src/react/context/__tests__/ApolloConsumer.test.tsx
index c81c8a30358..aed5384c415 100644
--- a/src/react/context/__tests__/ApolloConsumer.test.tsx
+++ b/src/react/context/__tests__/ApolloConsumer.test.tsx
@@ -1,25 +1,25 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
+import React from "react";
+import { render, screen } from "@testing-library/react";
 
-import { ApolloLink } from '../../../link/core';
-import { ApolloClient } from '../../../core';
-import { InMemoryCache as Cache } from '../../../cache';
-import { ApolloProvider } from '../ApolloProvider';
-import { ApolloConsumer } from '../ApolloConsumer';
-import { getApolloContext } from '../ApolloContext';
-import { itAsync } from '../../../testing';
+import { ApolloLink } from "../../../link/core";
+import { ApolloClient } from "../../../core";
+import { InMemoryCache as Cache } from "../../../cache";
+import { ApolloProvider } from "../ApolloProvider";
+import { ApolloConsumer } from "../ApolloConsumer";
+import { getApolloContext } from "../ApolloContext";
+import { itAsync } from "../../../testing";
 
 const client = new ApolloClient({
   cache: new Cache(),
-  link: new ApolloLink((o, f) => (f ? f(o) : null))
+  link: new ApolloLink((o, f) => (f ? f(o) : null)),
 });
 
-describe('<ApolloConsumer /> component', () => {
-  itAsync('has a render prop', (resolve, reject) => {
+describe("<ApolloConsumer /> component", () => {
+  itAsync("has a render prop", (resolve, reject) => {
     render(
       <ApolloProvider client={client}>
         <ApolloConsumer>
-          {clientRender => {
+          {(clientRender) => {
             try {
               expect(clientRender).toBe(client);
               resolve();
@@ -33,17 +33,17 @@ describe('<ApolloConsumer /> component', () => {
     );
   });
 
-  it('renders the content in the children prop', () => {
+  it("renders the content in the children prop", () => {
     render(
       <ApolloProvider client={client}>
         <ApolloConsumer>{() => <div>Test</div>}</ApolloConsumer>
       </ApolloProvider>
     );
 
-    expect(screen.getByText('Test')).toBeTruthy();
+    expect(screen.getByText("Test")).toBeTruthy();
   });
 
-  it('errors if there is no client in the context', () => {
+  it("errors if there is no client in the context", () => {
     // Prevent Error about missing context type from appearing in the console.
     const errorLogger = console.error;
     console.error = () => {};
diff --git a/src/react/context/__tests__/ApolloProvider.test.tsx b/src/react/context/__tests__/ApolloProvider.test.tsx
index 47d560558c7..7ed1fbdd576 100644
--- a/src/react/context/__tests__/ApolloProvider.test.tsx
+++ b/src/react/context/__tests__/ApolloProvider.test.tsx
@@ -1,13 +1,13 @@
-import React, { useContext } from 'react';
-import { render, screen } from '@testing-library/react';
+import React, { useContext } from "react";
+import { render, screen } from "@testing-library/react";
 
-import { ApolloLink } from '../../../link/core';
-import { ApolloClient } from '../../../core';
-import { InMemoryCache as Cache } from '../../../cache';
-import { ApolloProvider, ApolloProviderProps } from '../ApolloProvider';
-import { ApolloContextValue, getApolloContext } from '../ApolloContext';
+import { ApolloLink } from "../../../link/core";
+import { ApolloClient } from "../../../core";
+import { InMemoryCache as Cache } from "../../../cache";
+import { ApolloProvider, ApolloProviderProps } from "../ApolloProvider";
+import { ApolloContextValue, getApolloContext } from "../ApolloContext";
 
-describe('<ApolloProvider /> Component', () => {
+describe("<ApolloProvider /> Component", () => {
   const client = new ApolloClient({
     cache: new Cache(),
     link: new ApolloLink((o, f) => (f ? f(o) : null)),
@@ -18,27 +18,27 @@ describe('<ApolloProvider /> Component', () => {
     link: new ApolloLink((o, f) => (f ? f(o) : null)),
   });
 
-  it('should render children components', () => {
+  it("should render children components", () => {
     render(
       <ApolloProvider client={client}>
         <div className="unique">Test</div>
       </ApolloProvider>
     );
 
-    expect(screen.getByText('Test')).toBeTruthy();
+    expect(screen.getByText("Test")).toBeTruthy();
   });
 
-  it('should support the 2.0', () => {
+  it("should support the 2.0", () => {
     render(
       <ApolloProvider client={{} as ApolloClient<any>}>
         <div className="unique">Test</div>
       </ApolloProvider>
     );
 
-    expect(screen.getByText('Test')).toBeTruthy();
+    expect(screen.getByText("Test")).toBeTruthy();
   });
 
-  it('should require a client', () => {
+  it("should require a client", () => {
     const originalConsoleError = console.error;
     console.error = () => {
       /* noop */
@@ -55,22 +55,22 @@ describe('<ApolloProvider /> Component', () => {
         </ApolloContext.Provider>
       );
     }).toThrowError(
-      'ApolloProvider was not passed a client instance. Make ' +
+      "ApolloProvider was not passed a client instance. Make " +
         'sure you pass in your client via the "client" prop.'
     );
     console.error = originalConsoleError;
   });
 
-  it('should not require a store', () => {
+  it("should not require a store", () => {
     render(
       <ApolloProvider client={client}>
         <div className="unique">Test</div>
       </ApolloProvider>
     );
-    expect(screen.getByText('Test')).toBeTruthy();
+    expect(screen.getByText("Test")).toBeTruthy();
   });
 
-  it('should add the client to the children context', () => {
+  it("should add the client to the children context", () => {
     const TestChild = () => {
       const context = useContext(getApolloContext());
       expect(context.client).toEqual(client);
@@ -84,7 +84,7 @@ describe('<ApolloProvider /> Component', () => {
     );
   });
 
-  it('should update props when the client changes', () => {
+  it("should update props when the client changes", () => {
     let clientToCheck = client;
 
     const TestChild = () => {
@@ -113,64 +113,65 @@ describe('<ApolloProvider /> Component', () => {
   describe.each<
     [
       string,
-      Omit<ApolloProviderProps<any>, 'children'>,
-      Omit<ApolloProviderProps<any>, 'children'>
+      Omit<ApolloProviderProps<any>, "children">,
+      Omit<ApolloProviderProps<any>, "children">,
     ]
-  >([
-    ['client', { client }, { client: anotherClient }],
-  ])('context value stability, %s prop', (prop, value, childValue) => {
-    it(`should not recreate the context value if the ${prop} prop didn't change`, () => {
-      let lastContext: ApolloContextValue | undefined;
-
-      const TestChild = () => {
-        lastContext = useContext(getApolloContext());
-        return null;
-      };
-
-      const { rerender } = render(
-        <ApolloProvider {...value}>
-          <TestChild />
-        </ApolloProvider>
-      );
+  >([["client", { client }, { client: anotherClient }]])(
+    "context value stability, %s prop",
+    (prop, value, childValue) => {
+      it(`should not recreate the context value if the ${prop} prop didn't change`, () => {
+        let lastContext: ApolloContextValue | undefined;
+
+        const TestChild = () => {
+          lastContext = useContext(getApolloContext());
+          return null;
+        };
+
+        const { rerender } = render(
+          <ApolloProvider {...value}>
+            <TestChild />
+          </ApolloProvider>
+        );
 
-      const firstContextValue = lastContext;
+        const firstContextValue = lastContext;
 
-      rerender(
-        <ApolloProvider {...value}>
-          <TestChild />
-        </ApolloProvider>
-      );
+        rerender(
+          <ApolloProvider {...value}>
+            <TestChild />
+          </ApolloProvider>
+        );
 
-      expect(lastContext).toBe(firstContextValue);
-    });
+        expect(lastContext).toBe(firstContextValue);
+      });
 
-    it(`should not recreate the context if the parent context value differs, but the ${prop} prop didn't change`, () => {
-      let lastContext: ApolloContextValue | undefined;
+      it(`should not recreate the context if the parent context value differs, but the ${prop} prop didn't change`, () => {
+        let lastContext: ApolloContextValue | undefined;
 
-      const TestChild = () => {
-        lastContext = useContext(getApolloContext());
-        return null;
-      };
+        const TestChild = () => {
+          lastContext = useContext(getApolloContext());
+          return null;
+        };
 
-      const { rerender } = render(
-        <ApolloProvider {...value}>
-          <ApolloProvider {...childValue}>
-            <TestChild />
+        const { rerender } = render(
+          <ApolloProvider {...value}>
+            <ApolloProvider {...childValue}>
+              <TestChild />
+            </ApolloProvider>
           </ApolloProvider>
-        </ApolloProvider>
-      );
+        );
 
-      const firstContextValue = lastContext;
+        const firstContextValue = lastContext;
 
-      rerender(
-        <ApolloProvider {...value}>
-          <ApolloProvider {...childValue}>
-            <TestChild />
+        rerender(
+          <ApolloProvider {...value}>
+            <ApolloProvider {...childValue}>
+              <TestChild />
+            </ApolloProvider>
           </ApolloProvider>
-        </ApolloProvider>
-      );
+        );
 
-      expect(lastContext).toBe(firstContextValue);
-    });
-  });
+        expect(lastContext).toBe(firstContextValue);
+      });
+    }
+  );
 });
diff --git a/src/react/context/index.ts b/src/react/context/index.ts
index 40488fd58fe..18cc35a1bcf 100644
--- a/src/react/context/index.ts
+++ b/src/react/context/index.ts
@@ -1,9 +1,9 @@
-import '../../utilities/globals/index.js';
+import "../../utilities/globals/index.js";
 
-export { ApolloConsumer, ApolloConsumerProps } from './ApolloConsumer.js';
+export { ApolloConsumer, ApolloConsumerProps } from "./ApolloConsumer.js";
 export {
   ApolloContextValue,
   getApolloContext,
-  resetApolloContext
-} from './ApolloContext.js';
-export { ApolloProvider, ApolloProviderProps } from './ApolloProvider.js';
+  resetApolloContext,
+} from "./ApolloContext.js";
+export { ApolloProvider, ApolloProviderProps } from "./ApolloProvider.js";
diff --git a/src/react/hoc/__tests__/client-option.test.tsx b/src/react/hoc/__tests__/client-option.test.tsx
index 2d9587d04fb..b6efd611d09 100644
--- a/src/react/hoc/__tests__/client-option.test.tsx
+++ b/src/react/hoc/__tests__/client-option.test.tsx
@@ -1,17 +1,17 @@
-import React from 'react';
-import { render, waitFor } from '@testing-library/react';
-import gql from 'graphql-tag';
-import { DocumentNode } from 'graphql';
-
-import { ApolloClient } from '../../../core';
-import { ApolloProvider } from '../../context';
-import { InMemoryCache as Cache } from '../../../cache';
-import { itAsync, mockSingleLink } from '../../../testing';
-import { graphql } from '../graphql';
-import { ChildProps } from '../types';
-
-describe('client option', () => {
-  it('renders with client from options', () => {
+import React from "react";
+import { render, waitFor } from "@testing-library/react";
+import gql from "graphql-tag";
+import { DocumentNode } from "graphql";
+
+import { ApolloClient } from "../../../core";
+import { ApolloProvider } from "../../context";
+import { InMemoryCache as Cache } from "../../../cache";
+import { itAsync, mockSingleLink } from "../../../testing";
+import { graphql } from "../graphql";
+import { ChildProps } from "../types";
+
+describe("client option", () => {
+  it("renders with client from options", () => {
     const query: DocumentNode = gql`
       query people {
         allPeople(first: 1) {
@@ -21,22 +21,22 @@ describe('client option', () => {
         }
       }
     `;
-    const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
+    const data = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
 
     type Data = typeof data;
 
     const link = mockSingleLink({
       request: { query },
-      result: { data }
+      result: { data },
     });
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
     const config = {
       options: {
-        client
-      }
+        client,
+      },
     };
     const ContainerWithData = graphql<{}, Data>(query, config)(() => null);
     const { unmount } = render(
@@ -44,7 +44,7 @@ describe('client option', () => {
         client={
           new ApolloClient({
             link,
-            cache: new Cache({ addTypename: false })
+            cache: new Cache({ addTypename: false }),
           })
         }
       >
@@ -54,7 +54,7 @@ describe('client option', () => {
     unmount();
   });
 
-  itAsync('doesnt require a recycler', (resolve, reject) => {
+  itAsync("doesnt require a recycler", (resolve, reject) => {
     const query = gql`
       query people {
         allPeople(first: 1) {
@@ -64,24 +64,27 @@ describe('client option', () => {
         }
       }
     `;
-    const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
+    const data = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
     type Data = typeof data;
 
     const link = mockSingleLink({
       request: { query },
-      result: { data }
+      result: { data },
     });
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
     const config = {
       options: {
-        client
-      }
+        client,
+      },
     };
-    let renderCount = 0
-    const ContainerWithData = graphql<{}, Data>(query, config)(() => {
+    let renderCount = 0;
+    const ContainerWithData = graphql<{}, Data>(
+      query,
+      config
+    )(() => {
       renderCount += 1;
       return null;
     });
@@ -92,72 +95,77 @@ describe('client option', () => {
     }).then(resolve, reject);
   });
 
-  itAsync('ignores client from context if client from options is present', (resolve, reject) => {
-    let done = false;
-    const query: DocumentNode = gql`
-      query people {
-        allPeople(first: 1) {
-          people {
-            name
+  itAsync(
+    "ignores client from context if client from options is present",
+    (resolve, reject) => {
+      let done = false;
+      const query: DocumentNode = gql`
+        query people {
+          allPeople(first: 1) {
+            people {
+              name
+            }
           }
         }
+      `;
+      const dataProvider = {
+        allPeople: { people: [{ name: "Leia Organa Solo" }] },
+      };
+
+      type Data = typeof dataProvider;
+      const linkProvider = mockSingleLink({
+        request: { query },
+        result: { data: dataProvider },
+      });
+      const clientProvider = new ApolloClient({
+        link: linkProvider,
+        cache: new Cache({ addTypename: false }),
+      });
+      const dataOptions = {
+        allPeople: { people: [{ name: "Luke Skywalker" }] },
+      };
+      const linkOptions = mockSingleLink({
+        request: { query },
+        result: { data: dataOptions },
+      });
+      const clientOptions = new ApolloClient({
+        link: linkOptions,
+        cache: new Cache({ addTypename: false }),
+      });
+
+      const config = {
+        options: {
+          client: clientOptions,
+        },
+      };
+
+      class Container extends React.Component<ChildProps<{}, Data>> {
+        componentDidUpdate() {
+          const { data } = this.props;
+          expect(data!.loading).toBeFalsy(); // first data
+          expect(data!.allPeople).toEqual({
+            people: [{ name: "Luke Skywalker" }],
+          });
+          done = true;
+        }
+        render() {
+          return null;
+        }
       }
-    `;
-    const dataProvider = {
-      allPeople: { people: [{ name: 'Leia Organa Solo' }] }
-    };
-
-    type Data = typeof dataProvider;
-    const linkProvider = mockSingleLink({
-      request: { query },
-      result: { data: dataProvider }
-    });
-    const clientProvider = new ApolloClient({
-      link: linkProvider,
-      cache: new Cache({ addTypename: false })
-    });
-    const dataOptions = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
-    const linkOptions = mockSingleLink({
-      request: { query },
-      result: { data: dataOptions }
-    });
-    const clientOptions = new ApolloClient({
-      link: linkOptions,
-      cache: new Cache({ addTypename: false })
-    });
-
-    const config = {
-      options: {
-        client: clientOptions
-      }
-    };
-
-    class Container extends React.Component<ChildProps<{}, Data>> {
-      componentDidUpdate() {
-        const { data } = this.props;
-        expect(data!.loading).toBeFalsy(); // first data
-        expect(data!.allPeople).toEqual({
-          people: [{ name: 'Luke Skywalker' }]
-        });
-        done = true;
-      }
-      render() {
-        return null;
-      }
+      const ContainerWithData = graphql<{}, Data>(query, config)(Container);
+      render(
+        <ApolloProvider client={clientProvider}>
+          <ContainerWithData />
+        </ApolloProvider>
+      );
+
+      waitFor(() => {
+        expect(done).toBe(true);
+      }).then(resolve, reject);
     }
-    const ContainerWithData = graphql<{}, Data>(query, config)(Container);
-    render(
-      <ApolloProvider client={clientProvider}>
-        <ContainerWithData />
-      </ApolloProvider>
-    );
-
-    waitFor(() => {
-      expect(done).toBe(true);
-    }).then(resolve, reject);
-  });
+  );
 
-  itAsync('exposes refetch as part of the props api', (resolve, reject) => {
+  itAsync("exposes refetch as part of the props api", (resolve, reject) => {
     let done = false;
     const query: DocumentNode = gql`
       query people($first: Int) {
@@ -171,16 +179,16 @@ describe('client option', () => {
     const variables = { first: 1 };
     type Variables = typeof variables;
 
-    const data1 = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
+    const data1 = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
     type Data = typeof data1;
 
     const link = mockSingleLink({
       request: { query, variables },
-      result: { data: data1 }
+      result: { data: data1 },
     });
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     const Container = graphql<Variables, Data, Variables>(query)(
diff --git a/src/react/hoc/__tests__/fragments.test.tsx b/src/react/hoc/__tests__/fragments.test.tsx
index e492f1dafa7..1597a4b7092 100644
--- a/src/react/hoc/__tests__/fragments.test.tsx
+++ b/src/react/hoc/__tests__/fragments.test.tsx
@@ -1,18 +1,18 @@
-import React from 'react';
-import { render, waitFor } from '@testing-library/react';
-import gql from 'graphql-tag';
-import { DocumentNode } from 'graphql';
+import React from "react";
+import { render, waitFor } from "@testing-library/react";
+import gql from "graphql-tag";
+import { DocumentNode } from "graphql";
 
-import { ApolloClient } from '../../../core';
-import { ApolloProvider } from '../../context';
-import { InMemoryCache as Cache } from '../../../cache';
-import { itAsync, mockSingleLink } from '../../../testing';
-import { graphql } from '../graphql';
-import { ChildProps } from '../types';
+import { ApolloClient } from "../../../core";
+import { ApolloProvider } from "../../context";
+import { InMemoryCache as Cache } from "../../../cache";
+import { itAsync, mockSingleLink } from "../../../testing";
+import { graphql } from "../graphql";
+import { ChildProps } from "../types";
 
-describe('fragments', () => {
+describe("fragments", () => {
   // XXX in a later version, we should support this for composition
-  it('throws if you only pass a fragment', () => {
+  it("throws if you only pass a fragment", () => {
     const query: DocumentNode = gql`
       fragment Failure on PeopleConnection {
         people {
@@ -21,17 +21,17 @@ describe('fragments', () => {
       }
     `;
     const expectedData = {
-      allPeople: { people: [{ name: 'Luke Skywalker' }] }
+      allPeople: { people: [{ name: "Luke Skywalker" }] },
     };
     type Data = typeof expectedData;
 
     const link = mockSingleLink({
       request: { query },
-      result: { data: expectedData }
+      result: { data: expectedData },
     });
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     try {
@@ -40,9 +40,7 @@ describe('fragments', () => {
           componentDidUpdate() {
             const { props } = this;
             expect(props.data!.loading).toBeFalsy();
-            expect(props.data!.allPeople).toEqual(
-              expectedData.allPeople
-            );
+            expect(props.data!.allPeople).toEqual(expectedData.allPeople);
           }
           render() {
             return null;
@@ -61,63 +59,64 @@ describe('fragments', () => {
     }
   });
 
-  itAsync('correctly fetches a query with inline fragments', (resolve, reject) => {
-    let done = false;
-    const query: DocumentNode = gql`
-      query people {
-        allPeople(first: 1) {
-          __typename
-          ...person
+  itAsync(
+    "correctly fetches a query with inline fragments",
+    (resolve, reject) => {
+      let done = false;
+      const query: DocumentNode = gql`
+        query people {
+          allPeople(first: 1) {
+            __typename
+            ...person
+          }
         }
-      }
 
-      fragment person on PeopleConnection {
-        people {
-          name
+        fragment person on PeopleConnection {
+          people {
+            name
+          }
         }
-      }
-    `;
-    const data = {
-      allPeople: {
-        __typename: 'PeopleConnection',
-        people: [{ name: 'Luke Skywalker' }]
-      }
-    };
+      `;
+      const data = {
+        allPeople: {
+          __typename: "PeopleConnection",
+          people: [{ name: "Luke Skywalker" }],
+        },
+      };
 
-    type Data = typeof data;
+      type Data = typeof data;
 
-    const link = mockSingleLink({
-      request: { query },
-      result: { data }
-    });
-    const client = new ApolloClient({
-      link,
-      cache: new Cache({ addTypename: false })
-    });
+      const link = mockSingleLink({
+        request: { query },
+        result: { data },
+      });
+      const client = new ApolloClient({
+        link,
+        cache: new Cache({ addTypename: false }),
+      });
 
-    const Container = graphql<{}, Data>(query)(
-      class extends React.Component<ChildProps<{}, Data>> {
-        componentDidUpdate() {
-          expect(this.props.data!.loading).toBeFalsy();
-          expect(this.props.data!.allPeople).toEqual(
-            data.allPeople
-          );
-          done = true;
-        }
-        render() {
-          return null;
+      const Container = graphql<{}, Data>(query)(
+        class extends React.Component<ChildProps<{}, Data>> {
+          componentDidUpdate() {
+            expect(this.props.data!.loading).toBeFalsy();
+            expect(this.props.data!.allPeople).toEqual(data.allPeople);
+            done = true;
+          }
+          render() {
+            return null;
+          }
         }
-      }
-    );
+      );
 
-    render(
-      <ApolloProvider client={client}>
-        <Container />
-      </ApolloProvider>
-    );
+      render(
+        <ApolloProvider client={client}>
+          <Container />
+        </ApolloProvider>
+      );
 
-    waitFor(() => {
-      expect(done).toBe(true);
-    }).then(resolve, reject);
-  });
+      waitFor(() => {
+        expect(done).toBe(true);
+      }).then(resolve, reject);
+    }
+  );
 });
diff --git a/src/react/hoc/__tests__/mutations/index.test.tsx b/src/react/hoc/__tests__/mutations/index.test.tsx
index f316dbe43c5..7f1ba109205 100644
--- a/src/react/hoc/__tests__/mutations/index.test.tsx
+++ b/src/react/hoc/__tests__/mutations/index.test.tsx
@@ -1,18 +1,14 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import gql from 'graphql-tag';
-import { DocumentNode } from 'graphql';
-
-import { ApolloClient } from '../../../../core';
-import {
-  createMockClient,
-  itAsync,
-  MockedProvider,
-} from '../../../../testing';
-import { NormalizedCacheObject } from '../../../../cache';
-import { ApolloProvider } from '../../../context';
-import { graphql } from '../../graphql';
-import { ChildProps } from '../../types';
+import React from "react";
+import { render } from "@testing-library/react";
+import gql from "graphql-tag";
+import { DocumentNode } from "graphql";
+
+import { ApolloClient } from "../../../../core";
+import { createMockClient, itAsync, MockedProvider } from "../../../../testing";
+import { NormalizedCacheObject } from "../../../../cache";
+import { ApolloProvider } from "../../../context";
+import { graphql } from "../../graphql";
+import { ChildProps } from "../../types";
 
 const query: DocumentNode = gql`
   mutation addPerson {
@@ -35,10 +31,10 @@ interface Variables {
 }
 
 const expectedData = {
-  allPeople: { people: [{ name: 'Luke Skywalker' }] }
+  allPeople: { people: [{ name: "Luke Skywalker" }] },
 };
 
-describe('graphql(mutation)', () => {
+describe("graphql(mutation)", () => {
   let error: typeof console.error;
   let client: ApolloClient<NormalizedCacheObject>;
   beforeEach(() => {
@@ -51,12 +47,12 @@ describe('graphql(mutation)', () => {
     console.error = error;
   });
 
-  it('binds a mutation to props', () => {
+  it("binds a mutation to props", () => {
     const ContainerWithData = graphql(query)(({ mutate, result }) => {
       expect(mutate).toBeTruthy();
       expect(result).toBeTruthy();
-      expect(typeof mutate).toBe('function');
-      expect(typeof result).toBe('object');
+      expect(typeof mutate).toBe("function");
+      expect(typeof result).toBe("object");
       return null;
     });
 
@@ -67,7 +63,7 @@ describe('graphql(mutation)', () => {
     );
   });
 
-  it('binds a mutation result to props', () => {
+  it("binds a mutation result to props", () => {
     type InjectedProps = {
       result: any;
     };
@@ -77,7 +73,7 @@ describe('graphql(mutation)', () => {
     )(({ result }) => {
       const { loading, error } = result;
       expect(result).toBeTruthy();
-      expect(typeof loading).toBe('boolean');
+      expect(typeof loading).toBe("boolean");
       expect(error).toBeFalsy();
 
       return null;
@@ -90,7 +86,7 @@ describe('graphql(mutation)', () => {
     );
   });
 
-  it('binds a mutation to props with a custom name', () => {
+  it("binds a mutation to props with a custom name", () => {
     interface Props {}
 
     type InjectedProps = {
@@ -100,12 +96,12 @@ describe('graphql(mutation)', () => {
 
     const ContainerWithData = graphql<Props, Data, Variables, InjectedProps>(
       query,
-      { name: 'customMutation' }
+      { name: "customMutation" }
     )(({ customMutation, customMutationResult }) => {
       expect(customMutation).toBeTruthy();
       expect(customMutationResult).toBeTruthy();
-      expect(typeof customMutation).toBe('function');
-      expect(typeof customMutationResult).toBe('object');
+      expect(typeof customMutation).toBe("function");
+      expect(typeof customMutationResult).toBe("object");
       return null;
     });
 
@@ -116,7 +112,7 @@ describe('graphql(mutation)', () => {
     );
   });
 
-  it('binds a mutation to custom props', () => {
+  it("binds a mutation to custom props", () => {
     interface Props {
       methodName: string;
     }
@@ -128,12 +124,12 @@ describe('graphql(mutation)', () => {
       {
         props: ({ ownProps, mutate: addPerson }) => ({
           [ownProps.methodName]: (name: string) =>
-            addPerson!({ variables: { name } })
-        })
+            addPerson!({ variables: { name } }),
+        }),
       }
     )(({ myInjectedMutationMethod }) => {
       expect(myInjectedMutationMethod).toBeTruthy();
-      expect(typeof myInjectedMutationMethod).toBe('function');
+      expect(typeof myInjectedMutationMethod).toBe("function");
       return null;
     });
 
@@ -144,7 +140,7 @@ describe('graphql(mutation)', () => {
     );
   });
 
-  itAsync('does not swallow children errors', (resolve, reject) => {
+  itAsync("does not swallow children errors", (resolve, reject) => {
     let bar: any;
     const ContainerWithData = graphql(query)(() => {
       bar(); // this will throw
@@ -173,11 +169,11 @@ describe('graphql(mutation)', () => {
     );
   });
 
-  itAsync('can execute a mutation', (resolve, reject) => {
+  itAsync("can execute a mutation", (resolve, reject) => {
     const Container = graphql(query)(
       class extends React.Component<ChildProps> {
         componentDidMount() {
-          this.props.mutate!().then(result => {
+          this.props.mutate!().then((result) => {
             expect(result && result.data).toEqual(expectedData);
             resolve();
           });
@@ -195,95 +191,101 @@ describe('graphql(mutation)', () => {
     );
   });
 
-  itAsync('can execute a mutation with variables from props', (resolve, reject) => {
-    const queryWithVariables = gql`
-      mutation addPerson($first: Int) {
-        allPeople(first: $first) {
-          people {
-            name
+  itAsync(
+    "can execute a mutation with variables from props",
+    (resolve, reject) => {
+      const queryWithVariables = gql`
+        mutation addPerson($first: Int) {
+          allPeople(first: $first) {
+            people {
+              name
+            }
           }
         }
-      }
-    `;
-    client = createMockClient(expectedData, queryWithVariables, {
-      first: 1
-    });
-
-    interface Props {
-      first: number;
-    }
+      `;
+      client = createMockClient(expectedData, queryWithVariables, {
+        first: 1,
+      });
 
-    const Container = graphql<Props>(queryWithVariables)(
-      class extends React.Component<ChildProps<Props>> {
-        componentDidMount() {
-          this.props.mutate!().then(result => {
-            expect(result && result.data).toEqual(expectedData);
-            resolve();
-          });
-        }
-        render() {
-          return null;
-        }
+      interface Props {
+        first: number;
       }
-    );
 
-    render(
-      <ApolloProvider client={client}>
-        <Container first={1} />
-      </ApolloProvider>
-    );
-  });
-
-  itAsync('can execute a mutation with variables from BOTH options and arguments', (resolve, reject) => {
-    const queryWithVariables = gql`
-      mutation addPerson($first: Int!, $second: Int!) {
-        allPeople(first: $first) {
-          people {
-            name
+      const Container = graphql<Props>(queryWithVariables)(
+        class extends React.Component<ChildProps<Props>> {
+          componentDidMount() {
+            this.props.mutate!().then((result) => {
+              expect(result && result.data).toEqual(expectedData);
+              resolve();
+            });
+          }
+          render() {
+            return null;
           }
         }
-      }
-    `;
+      );
 
-    const mocks = [
-      {
-        request: {
-          query: queryWithVariables,
-          variables: {
-            first: 1,
-            second: 2
+      render(
+        <ApolloProvider client={client}>
+          <Container first={1} />
+        </ApolloProvider>
+      );
+    }
+  );
+
+  itAsync(
+    "can execute a mutation with variables from BOTH options and arguments",
+    (resolve, reject) => {
+      const queryWithVariables = gql`
+        mutation addPerson($first: Int!, $second: Int!) {
+          allPeople(first: $first) {
+            people {
+              name
+            }
           }
-        },
-        result: { data: expectedData },
-      }
-    ];
-
-    interface Props {}
-
-    const Container = graphql<Props>(queryWithVariables, {
-      options: () => ({
-        variables: { first: 1 }
-      })
-    })(
-      class extends React.Component<ChildProps<Props>> {
-        componentDidMount() {
-          this.props.mutate!({
-            variables: { second: 2 }
-          }).then(result => {
-            expect(result && result.data).toEqual(expectedData);
-            resolve();
-          });
         }
-        render() {
-          return null;
+      `;
+
+      const mocks = [
+        {
+          request: {
+            query: queryWithVariables,
+            variables: {
+              first: 1,
+              second: 2,
+            },
+          },
+          result: { data: expectedData },
+        },
+      ];
+
+      interface Props {}
+
+      const Container = graphql<Props>(queryWithVariables, {
+        options: () => ({
+          variables: { first: 1 },
+        }),
+      })(
+        class extends React.Component<ChildProps<Props>> {
+          componentDidMount() {
+            this.props.mutate!({
+              variables: { second: 2 },
+            }).then((result) => {
+              expect(result && result.data).toEqual(expectedData);
+              resolve();
+            });
+          }
+          render() {
+            return null;
+          }
         }
-      }
-    );
+      );
 
-    render(
-      <MockedProvider mocks={mocks}>
-        <Container />
-      </MockedProvider>
-    );
-  });
+      render(
+        <MockedProvider mocks={mocks}>
+          <Container />
+        </MockedProvider>
+      );
+    }
+  );
 });
diff --git a/src/react/hoc/__tests__/mutations/lifecycle.test.tsx b/src/react/hoc/__tests__/mutations/lifecycle.test.tsx
index 3aa0a8db3ac..0c0b88efd8e 100644
--- a/src/react/hoc/__tests__/mutations/lifecycle.test.tsx
+++ b/src/react/hoc/__tests__/mutations/lifecycle.test.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
-import { render, cleanup } from '@testing-library/react';
-import gql from 'graphql-tag';
+import React from "react";
+import { render, cleanup } from "@testing-library/react";
+import gql from "graphql-tag";
 
-import { ApolloProvider } from '../../../context/ApolloProvider';
-import { itAsync, createMockClient } from '../../../../testing/core';
-import { graphql } from '../../graphql';
-import { ChildProps } from '../../types';
+import { ApolloProvider } from "../../../context/ApolloProvider";
+import { itAsync, createMockClient } from "../../../../testing/core";
+import { graphql } from "../../graphql";
+import { ChildProps } from "../../types";
 
 const query = gql`
   mutation addPerson($id: Int) {
@@ -17,40 +17,43 @@ const query = gql`
   }
 `;
 const expectedData = {
-  allPeople: { people: [{ name: 'Luke Skywalker' }] }
+  allPeople: { people: [{ name: "Luke Skywalker" }] },
 };
 
-describe('graphql(mutation) lifecycle', () => {
+describe("graphql(mutation) lifecycle", () => {
   afterEach(cleanup);
 
-  itAsync('allows falsy values in the mapped variables from props', (resolve, reject) => {
-    const client = createMockClient(expectedData, query, { id: null });
+  itAsync(
+    "allows falsy values in the mapped variables from props",
+    (resolve, reject) => {
+      const client = createMockClient(expectedData, query, { id: null });
 
-    interface Props {
-      id: string | null;
-    }
-
-    const Container = graphql<Props>(query)(
-      class extends React.Component<ChildProps<Props>> {
-        componentDidMount() {
-          this.props.mutate!().then(result => {
-            expect(result && result.data).toEqual(expectedData);
-            resolve();
-          });
-        }
+      interface Props {
+        id: string | null;
+      }
 
-        render() {
-          return null;
+      const Container = graphql<Props>(query)(
+        class extends React.Component<ChildProps<Props>> {
+          componentDidMount() {
+            this.props.mutate!().then((result) => {
+              expect(result && result.data).toEqual(expectedData);
+              resolve();
+            });
+          }
+
+          render() {
+            return null;
+          }
         }
-      }
-    );
+      );
 
-    render(
-      <ApolloProvider client={client}>
-        <Container id={null} />
-      </ApolloProvider>
-    );
-  });
+      render(
+        <ApolloProvider client={client}>
+          <Container id={null} />
+        </ApolloProvider>
+      );
+    }
+  );
 
   it("errors if the passed props don't contain the needed variables", () => {
     const client = createMockClient(expectedData, query, { first: 1 });
@@ -69,53 +72,56 @@ describe('graphql(mutation) lifecycle', () => {
     }
   });
 
-  itAsync('rebuilds the mutation on prop change when using `options`', (resolve, reject) => {
-    const client = createMockClient(expectedData, query, {
-      id: 2
-    });
+  itAsync(
+    "rebuilds the mutation on prop change when using `options`",
+    (resolve, reject) => {
+      const client = createMockClient(expectedData, query, {
+        id: 2,
+      });
 
-    interface Props {
-      listId: number;
-    }
+      interface Props {
+        listId: number;
+      }
 
-    function options(props: Props) {
-      return {
-        variables: {
-          id: props.listId
-        }
-      };
-    }
+      function options(props: Props) {
+        return {
+          variables: {
+            id: props.listId,
+          },
+        };
+      }
 
-    class Container extends React.Component<ChildProps<Props>> {
-      render() {
-        if (this.props.listId !== 2) return null;
-        this.props.mutate!().then(() => resolve());
-        return null;
+      class Container extends React.Component<ChildProps<Props>> {
+        render() {
+          if (this.props.listId !== 2) return null;
+          this.props.mutate!().then(() => resolve());
+          return null;
+        }
       }
-    }
 
-    const ContainerWithMutate = graphql<Props>(query, { options })(Container);
+      const ContainerWithMutate = graphql<Props>(query, { options })(Container);
 
-    class ChangingProps extends React.Component<{}, { listId: number }> {
-      state = { listId: 1 };
+      class ChangingProps extends React.Component<{}, { listId: number }> {
+        state = { listId: 1 };
 
-      componentDidMount() {
-        setTimeout(() => this.setState({ listId: 2 }), 50);
-      }
+        componentDidMount() {
+          setTimeout(() => this.setState({ listId: 2 }), 50);
+        }
 
-      render() {
-        return <ContainerWithMutate listId={this.state.listId} />;
+        render() {
+          return <ContainerWithMutate listId={this.state.listId} />;
+        }
       }
-    }
 
-    render(
-      <ApolloProvider client={client}>
-        <ChangingProps />
-      </ApolloProvider>
-    );
-  });
+      render(
+        <ApolloProvider client={client}>
+          <ChangingProps />
+        </ApolloProvider>
+      );
+    }
+  );
 
-  itAsync('can execute a mutation with custom variables', (resolve, reject) => {
+  itAsync("can execute a mutation with custom variables", (resolve, reject) => {
     const client = createMockClient(expectedData, query, { id: 1 });
     interface Variables {
       id: number;
@@ -124,7 +130,7 @@ describe('graphql(mutation) lifecycle', () => {
     const Container = graphql<{}, {}, Variables>(query)(
       class extends React.Component<ChildProps<{}, {}, Variables>> {
         componentDidMount() {
-          this.props.mutate!({ variables: { id: 1 } }).then(result => {
+          this.props.mutate!({ variables: { id: 1 } }).then((result) => {
             expect(result && result.data).toEqual(expectedData);
             resolve();
           });
diff --git a/src/react/hoc/__tests__/mutations/queries.test.tsx b/src/react/hoc/__tests__/mutations/queries.test.tsx
index d3b31512b41..2144a974e2a 100644
--- a/src/react/hoc/__tests__/mutations/queries.test.tsx
+++ b/src/react/hoc/__tests__/mutations/queries.test.tsx
@@ -1,88 +1,91 @@
-import React from 'react';
-import { act, render, waitFor } from '@testing-library/react';
-import gql from 'graphql-tag';
-import { DocumentNode } from 'graphql';
-
-import { ApolloClient, MutationUpdaterFunction, ApolloCache } from '../../../../core';
-import { ApolloProvider } from '../../../context';
-import { InMemoryCache as Cache } from '../../../../cache';
+import React from "react";
+import { act, render, waitFor } from "@testing-library/react";
+import gql from "graphql-tag";
+import { DocumentNode } from "graphql";
+
 import {
-  itAsync,
-  createMockClient,
-  mockSingleLink,
-} from '../../../../testing';
-import { graphql } from '../../graphql';
-import { ChildProps } from '../../types';
-
-describe('graphql(mutation) query integration', () => {
-  itAsync('allows for passing optimisticResponse for a mutation', (resolve, reject) => {
-    const query: DocumentNode = gql`
-      mutation createTodo {
-        createTodo {
-          id
-          text
-          completed
+  ApolloClient,
+  MutationUpdaterFunction,
+  ApolloCache,
+} from "../../../../core";
+import { ApolloProvider } from "../../../context";
+import { InMemoryCache as Cache } from "../../../../cache";
+import { itAsync, createMockClient, mockSingleLink } from "../../../../testing";
+import { graphql } from "../../graphql";
+import { ChildProps } from "../../types";
+
+describe("graphql(mutation) query integration", () => {
+  itAsync(
+    "allows for passing optimisticResponse for a mutation",
+    (resolve, reject) => {
+      const query: DocumentNode = gql`
+        mutation createTodo {
+          createTodo {
+            id
+            text
+            completed
+            __typename
+          }
           __typename
         }
-        __typename
-      }
-    `;
-
-    const data = {
-      __typename: 'Mutation',
-      createTodo: {
-        __typename: 'Todo',
-        id: '99',
-        text: 'This one was created with a mutation.',
-        completed: true
-      }
-    };
-
-    type Data = typeof data;
-
-    let mutateFired = false;
-    const client = createMockClient(data, query);
-    const Container = graphql<{}, Data>(query)(
-      class extends React.Component<ChildProps<{}, Data>> {
-        componentDidMount() {
-          const optimisticResponse = {
-            __typename: 'Mutation',
-            createTodo: {
-              __typename: 'Todo',
-              id: '99',
-              text: 'Optimistically generated',
-              completed: true
-            }
-          };
+      `;
+
+      const data = {
+        __typename: "Mutation",
+        createTodo: {
+          __typename: "Todo",
+          id: "99",
+          text: "This one was created with a mutation.",
+          completed: true,
+        },
+      };
 
-          this.props.mutate!({ optimisticResponse }).then(result => {
-            expect(result && result.data).toEqual(data);
-            mutateFired = true;
-          });
+      type Data = typeof data;
+
+      let mutateFired = false;
+      const client = createMockClient(data, query);
+      const Container = graphql<{}, Data>(query)(
+        class extends React.Component<ChildProps<{}, Data>> {
+          componentDidMount() {
+            const optimisticResponse = {
+              __typename: "Mutation",
+              createTodo: {
+                __typename: "Todo",
+                id: "99",
+                text: "Optimistically generated",
+                completed: true,
+              },
+            };
+
+            this.props.mutate!({ optimisticResponse }).then((result) => {
+              expect(result && result.data).toEqual(data);
+              mutateFired = true;
+            });
 
-          const dataInStore = client.cache.extract(true);
-          expect(dataInStore['Todo:99']).toEqual(
-            optimisticResponse.createTodo
-          );
-        }
-        render() {
-          return null;
+            const dataInStore = client.cache.extract(true);
+            expect(dataInStore["Todo:99"]).toEqual(
+              optimisticResponse.createTodo
+            );
+          }
+          render() {
+            return null;
+          }
         }
-      }
-    );
+      );
 
-    render(
-      <ApolloProvider client={client}>
-        <Container />
-      </ApolloProvider>
-    );
+      render(
+        <ApolloProvider client={client}>
+          <Container />
+        </ApolloProvider>
+      );
 
-    waitFor(() => {
-      expect(mutateFired).toBeTruthy();
-    }).then(resolve, reject);
-  });
+      waitFor(() => {
+        expect(mutateFired).toBeTruthy();
+      }).then(resolve, reject);
+    }
+  );
 
-  itAsync('allows for updating queries from a mutation', (resolve, reject) => {
+  itAsync("allows for updating queries from a mutation", (resolve, reject) => {
     const query: DocumentNode = gql`
       query todos {
         todo_list {
@@ -109,20 +112,20 @@ describe('graphql(mutation) query integration', () => {
 
     const mutationData = {
       createTodo: {
-        id: '99',
-        text: 'This one was created with a mutation.',
-        completed: true
-      }
+        id: "99",
+        text: "This one was created with a mutation.",
+        completed: true,
+      },
     };
 
     type MutationData = typeof mutationData;
 
     const optimisticResponse = {
       createTodo: {
-        id: '99',
-        text: 'Optimistically generated',
-        completed: true
-      }
+        id: "99",
+        text: "Optimistically generated",
+        completed: true,
+      },
     };
     interface QueryData {
       todo_list: {
@@ -146,13 +149,13 @@ describe('graphql(mutation) query integration', () => {
     };
 
     const expectedData = {
-      todo_list: { id: '123', title: 'how to apollo', tasks: [] }
+      todo_list: { id: "123", title: "how to apollo", tasks: [] },
     };
 
     const link = mockSingleLink(
       {
         request: { query },
-        result: { data: expectedData }
+        result: { data: expectedData },
       },
       { request: { query: mutation }, result: { data: mutationData } }
     );
@@ -163,7 +166,7 @@ describe('graphql(mutation) query integration', () => {
 
     type WithQueryChildProps = ChildProps<{}, QueryData>;
     const withMutation = graphql<WithQueryChildProps, MutationData>(mutation, {
-      options: () => ({ optimisticResponse, update })
+      options: () => ({ optimisticResponse, update }),
     });
 
     let renderCount = 0;
@@ -174,7 +177,7 @@ describe('graphql(mutation) query integration', () => {
         if (!this.props.data || !this.props.data.todo_list) return null;
         if (!this.props.data.todo_list.tasks.length) {
           act(() => {
-            this.props.mutate!().then(result => {
+            this.props.mutate!().then((result) => {
               expect(result && result.data).toEqual(mutationData);
             });
           });
@@ -184,12 +187,12 @@ describe('graphql(mutation) query integration', () => {
         switch (++renderCount) {
           case 1:
             expect(this.props.data.todo_list.tasks).toEqual([
-              optimisticResponse.createTodo
+              optimisticResponse.createTodo,
             ]);
             break;
           case 2:
             expect(this.props.data.todo_list.tasks).toEqual([
-              mutationData.createTodo
+              mutationData.createTodo,
             ]);
             break;
           default:
@@ -213,135 +216,134 @@ describe('graphql(mutation) query integration', () => {
     }).then(resolve, reject);
   });
 
-  itAsync('allows for updating queries from a mutation automatically', (resolve, reject) => {
-    const query: DocumentNode = gql`
-      query getMini($id: ID!) {
-        mini(id: $id) {
-          __typename
-          id
-          cover(maxWidth: 600, maxHeight: 400)
+  itAsync(
+    "allows for updating queries from a mutation automatically",
+    (resolve, reject) => {
+      const query: DocumentNode = gql`
+        query getMini($id: ID!) {
+          mini(id: $id) {
+            __typename
+            id
+            cover(maxWidth: 600, maxHeight: 400)
+          }
         }
-      }
-    `;
-
-    const queryData = {
-      mini: {
-        id: 1,
-        __typename: 'Mini',
-        cover: 'image1'
-      }
-    };
+      `;
+
+      const queryData = {
+        mini: {
+          id: 1,
+          __typename: "Mini",
+          cover: "image1",
+        },
+      };
 
-    type Data = typeof queryData;
+      type Data = typeof queryData;
 
-    const variables = { id: 1 };
+      const variables = { id: 1 };
 
-    type Variables = typeof variables;
+      type Variables = typeof variables;
 
-    const mutation: DocumentNode = gql`
-      mutation($signature: String!) {
-        mini: submitMiniCoverS3DirectUpload(signature: $signature) {
-          __typename
-          id
-          cover(maxWidth: 600, maxHeight: 400)
+      const mutation: DocumentNode = gql`
+        mutation ($signature: String!) {
+          mini: submitMiniCoverS3DirectUpload(signature: $signature) {
+            __typename
+            id
+            cover(maxWidth: 600, maxHeight: 400)
+          }
         }
-      }
-    `;
-
-    const mutationData = {
-      mini: {
-        id: 1,
-        cover: 'image2',
-        __typename: 'Mini'
-      }
-    };
-
-    type MutationData = typeof mutationData;
+      `;
+
+      const mutationData = {
+        mini: {
+          id: 1,
+          cover: "image2",
+          __typename: "Mini",
+        },
+      };
 
-    interface MutationVariables {
-      signature: string;
-    }
+      type MutationData = typeof mutationData;
 
-    const link = mockSingleLink(
-      { request: { query, variables }, result: { data: queryData } },
-      {
-        request: { query: mutation, variables: { signature: '1233' } },
-        result: { data: mutationData }
+      interface MutationVariables {
+        signature: string;
       }
-    );
-    const cache = new Cache({ addTypename: false });
-    const client = new ApolloClient({ link, cache });
 
-    class Boundary extends React.Component<React.PropsWithChildren> {
-      componentDidCatch(e: any) {
-        reject(e);
-      }
-      render() {
-        // eslint-disable-next-line testing-library/no-node-access
-        return this.props.children;
-      }
-    }
+      const link = mockSingleLink(
+        { request: { query, variables }, result: { data: queryData } },
+        {
+          request: { query: mutation, variables: { signature: "1233" } },
+          result: { data: mutationData },
+        }
+      );
+      const cache = new Cache({ addTypename: false });
+      const client = new ApolloClient({ link, cache });
 
-    let count = 0;
-    const MutationContainer = graphql<MutationVariables, MutationData>(
-      mutation
-    )(
-      class extends React.Component<
-        ChildProps<MutationVariables, MutationData>
-      > {
+      class Boundary extends React.Component<React.PropsWithChildren> {
+        componentDidCatch(e: any) {
+          reject(e);
+        }
         render() {
-          if (count === 1) {
-            setTimeout(() => {
-              this.props.mutate!()
-                .then(result => {
-                  expect(result && result.data).toEqual(
-                    mutationData
-                  );
-                })
-                .catch(reject);
-            });
-          }
-          return null;
+          // eslint-disable-next-line testing-library/no-node-access
+          return this.props.children;
         }
       }
-    );
 
-    const Container = graphql<Variables, Data>(query)(
-      class extends React.Component<ChildProps<Variables, Data>> {
-        render() {
-          if (count === 1) {
-            expect(this.props.data!.mini).toEqual(queryData.mini);
+      let count = 0;
+      const MutationContainer = graphql<MutationVariables, MutationData>(
+        mutation
+      )(
+        class extends React.Component<
+          ChildProps<MutationVariables, MutationData>
+        > {
+          render() {
+            if (count === 1) {
+              setTimeout(() => {
+                this.props.mutate!()
+                  .then((result) => {
+                    expect(result && result.data).toEqual(mutationData);
+                  })
+                  .catch(reject);
+              });
+            }
+            return null;
           }
-          if (count === 2) {
-            expect(this.props.data!.mini).toEqual(
-              mutationData.mini
+        }
+      );
+
+      const Container = graphql<Variables, Data>(query)(
+        class extends React.Component<ChildProps<Variables, Data>> {
+          render() {
+            if (count === 1) {
+              expect(this.props.data!.mini).toEqual(queryData.mini);
+            }
+            if (count === 2) {
+              expect(this.props.data!.mini).toEqual(mutationData.mini);
+            }
+            count++;
+
+            return (
+              <MutationContainer {...this.props.data!.mini} signature="1233" />
             );
           }
-          count++;
-
-          return (
-            <MutationContainer {...this.props.data!.mini} signature="1233" />
-          );
         }
-      }
-    );
+      );
 
-    render(
-      <ApolloProvider client={client}>
-        <Boundary>
-          <Container id={1} />
-        </Boundary>
-      </ApolloProvider>
-    );
+      render(
+        <ApolloProvider client={client}>
+          <Boundary>
+            <Container id={1} />
+          </Boundary>
+        </ApolloProvider>
+      );
 
-    waitFor(() => {
-      expect(count).toBe(3);
-    }).then(resolve, reject);
-  });
+      waitFor(() => {
+        expect(count).toBe(3);
+      }).then(resolve, reject);
+    }
+  );
 
-  it('should be able to override the internal `ignoreResults` setting', async () => {
+  it("should be able to override the internal `ignoreResults` setting", async () => {
     const mutation: DocumentNode = gql`
-      mutation($signature: String!) {
+      mutation ($signature: String!) {
         mini: submitMiniCoverS3DirectUpload(signature: $signature) {
           __typename
           id
@@ -353,9 +355,9 @@ describe('graphql(mutation) query integration', () => {
     const mutationData = {
       mini: {
         id: 1,
-        cover: 'image2',
-        __typename: 'Mini'
-      }
+        cover: "image2",
+        __typename: "Mini",
+      },
     };
 
     type MutationData = typeof mutationData;
@@ -365,8 +367,8 @@ describe('graphql(mutation) query integration', () => {
     }
 
     const link = mockSingleLink({
-      request: { query: mutation, variables: { signature: '1233' } },
-      result: { data: mutationData }
+      request: { query: mutation, variables: { signature: "1233" } },
+      result: { data: mutationData },
     });
 
     const cache = new Cache({ addTypename: false });
@@ -385,10 +387,8 @@ describe('graphql(mutation) query integration', () => {
             case 0:
               expect(this.props.result!.loading).toBeFalsy();
               setTimeout(() => {
-                this.props.mutate!().then(result => {
-                  expect(result && result.data).toEqual(
-                    mutationData
-                  );
+                this.props.mutate!().then((result) => {
+                  expect(result && result.data).toEqual(mutationData);
                 });
               });
               break;
diff --git a/src/react/hoc/__tests__/mutations/recycled-queries.test.tsx b/src/react/hoc/__tests__/mutations/recycled-queries.test.tsx
index 4b2eb96b78d..67f3403006b 100644
--- a/src/react/hoc/__tests__/mutations/recycled-queries.test.tsx
+++ b/src/react/hoc/__tests__/mutations/recycled-queries.test.tsx
@@ -1,17 +1,21 @@
-import React from 'react';
-import { render, waitFor } from '@testing-library/react';
-import gql from 'graphql-tag';
-import { DocumentNode } from 'graphql';
-
-import { ApolloCache, ApolloClient, MutationUpdaterFunction } from '../../../../core';
-import { ApolloProvider } from '../../../context';
-import { InMemoryCache as Cache } from '../../../../cache';
-import { MutationFunction } from '../../../types/types';
-import { mockSingleLink } from '../../../../testing';
-import { graphql } from '../../graphql';
-import { ChildProps } from '../../types';
-
-describe('graphql(mutation) update queries', () => {
+import React from "react";
+import { render, waitFor } from "@testing-library/react";
+import gql from "graphql-tag";
+import { DocumentNode } from "graphql";
+
+import {
+  ApolloCache,
+  ApolloClient,
+  MutationUpdaterFunction,
+} from "../../../../core";
+import { ApolloProvider } from "../../../context";
+import { InMemoryCache as Cache } from "../../../../cache";
+import { MutationFunction } from "../../../types/types";
+import { mockSingleLink } from "../../../../testing";
+import { graphql } from "../../graphql";
+import { ChildProps } from "../../types";
+
+describe("graphql(mutation) update queries", () => {
   // This is a long test that keeps track of a lot of stuff. It is testing
   // whether or not the `options.update` reducers will run even when a given
   // container component is unmounted.
@@ -31,7 +35,7 @@ describe('graphql(mutation) update queries', () => {
   //
   // There are also a lot more assertions on the way to make sure everything is
   // going as smoothly as planned.
-  it('will run `update` for a previously mounted component', async () => {
+  it("will run `update` for a previously mounted component", async () => {
     const query: DocumentNode = gql`
       query todos {
         todo_list {
@@ -66,10 +70,10 @@ describe('graphql(mutation) update queries', () => {
 
     const mutationData = {
       createTodo: {
-        id: '99',
-        text: 'This one was created with a mutation.',
-        completed: true
-      }
+        id: "99",
+        text: "This one was created with a mutation.",
+        completed: true,
+      },
     };
     type MutationData = typeof mutationData;
 
@@ -82,35 +86,33 @@ describe('graphql(mutation) update queries', () => {
     > = (proxy, result) => {
       todoUpdateQueryCount++;
       const data = JSON.parse(
-        JSON.stringify(
-          proxy.readQuery<QueryData>({ query })
-        ) // read from cache
+        JSON.stringify(proxy.readQuery<QueryData>({ query })) // read from cache
       );
       data!.todo_list.tasks.push(result.data!.createTodo); // update value
       proxy.writeQuery({ query, data }); // write to cache
     };
 
     const expectedData = {
-      todo_list: { id: '123', title: 'how to apollo', tasks: [] }
+      todo_list: { id: "123", title: "how to apollo", tasks: [] },
     };
 
     const link = mockSingleLink(
       {
         request: { query },
-        result: { data: expectedData }
+        result: { data: expectedData },
       },
       { request: { query: mutation }, result: { data: mutationData } },
       { request: { query: mutation }, result: { data: mutationData } }
     );
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     let mutate: MutationFunction<MutationData>;
 
     const MyMutation = graphql<{}, MutationData>(mutation, {
-      options: () => ({ update })
+      options: () => ({ update }),
     })(
       class extends React.Component<ChildProps<{}, MutationData>> {
         componentDidMount() {
@@ -148,48 +150,48 @@ describe('graphql(mutation) update queries', () => {
               case 1:
                 expect(this.props.data!.loading).toBeFalsy();
                 expect(this.props.data!.todo_list).toEqual({
-                  id: '123',
-                  title: 'how to apollo',
-                  tasks: []
+                  id: "123",
+                  title: "how to apollo",
+                  tasks: [],
                 });
                 break;
               case 2:
                 expect(this.props.data!.loading).toBeFalsy();
                 expect(queryMountCount).toBe(1);
                 expect(this.props.data!.todo_list).toEqual({
-                  id: '123',
-                  title: 'how to apollo',
+                  id: "123",
+                  title: "how to apollo",
                   tasks: [
                     {
-                      id: '99',
-                      text: 'This one was created with a mutation.',
-                      completed: true
+                      id: "99",
+                      text: "This one was created with a mutation.",
+                      completed: true,
                     },
-                  ]
+                  ],
                 });
                 break;
               case 3:
                 expect(this.props.data!.loading).toBeFalsy();
                 expect(queryMountCount).toBe(1);
                 expect(this.props.data!.todo_list).toEqual({
-                  id: '123',
-                  title: 'how to apollo',
+                  id: "123",
+                  title: "how to apollo",
                   tasks: [
                     {
-                      id: '99',
-                      text: 'This one was created with a mutation.',
-                      completed: true
+                      id: "99",
+                      text: "This one was created with a mutation.",
+                      completed: true,
                     },
                     {
-                      id: '99',
-                      text: 'This one was created with a mutation.',
-                      completed: true
-                    }
-                  ]
+                      id: "99",
+                      text: "This one was created with a mutation.",
+                      completed: true,
+                    },
+                  ],
                 });
                 break;
               default:
-                throw new Error("too many rerenders")
+                throw new Error("too many rerenders");
             }
           } catch (e) {
             testFailures.push(e);
@@ -214,13 +216,19 @@ describe('graphql(mutation) update queries', () => {
     );
 
     let resolveLastTimeout: () => void;
-    const allTimeoutsFinished = new Promise<void>(r => { resolveLastTimeout = r });
+    const allTimeoutsFinished = new Promise<void>((r) => {
+      resolveLastTimeout = r;
+    });
 
     const catchingSetTimeout = (cb: (args: void) => void, ms: number) => {
       return setTimeout(() => {
-        try { cb() } catch (e) { testFailures.push(e) }
+        try {
+          cb();
+        } catch (e) {
+          testFailures.push(e);
+        }
       }, ms);
-    }
+    };
 
     catchingSetTimeout(() => {
       mutate();
@@ -263,7 +271,7 @@ describe('graphql(mutation) update queries', () => {
     }
   });
 
-  it('will run `refetchQueries` for a recycled queries', async () => {
+  it("will run `refetchQueries` for a recycled queries", async () => {
     const mutation: DocumentNode = gql`
       mutation createTodo {
         createTodo {
@@ -276,10 +284,10 @@ describe('graphql(mutation) update queries', () => {
 
     const mutationData = {
       createTodo: {
-        id: '99',
-        text: 'This one was created with a mutation.',
-        completed: true
-      }
+        id: "99",
+        text: "This one was created with a mutation.",
+        completed: true,
+      },
     };
 
     type MutationData = typeof mutationData;
@@ -311,28 +319,28 @@ describe('graphql(mutation) update queries', () => {
     }
 
     const data = {
-      todo_list: { id: '123', title: 'how to apollo', tasks: [] }
+      todo_list: { id: "123", title: "how to apollo", tasks: [] },
     };
 
     const updatedData = {
       todo_list: {
-        id: '123',
-        title: 'how to apollo',
-        tasks: [mutationData.createTodo]
-      }
+        id: "123",
+        title: "how to apollo",
+        tasks: [mutationData.createTodo],
+      },
     };
 
     const link = mockSingleLink(
-      { request: { query, variables: { id: '123' } }, result: { data } },
+      { request: { query, variables: { id: "123" } }, result: { data } },
       { request: { query: mutation }, result: { data: mutationData } },
       {
-        request: { query, variables: { id: '123' } },
-        result: { data: updatedData }
+        request: { query, variables: { id: "123" } },
+        result: { data: updatedData },
       }
     );
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     let mutate: MutationFunction<MutationData>;
@@ -369,23 +377,19 @@ describe('graphql(mutation) update queries', () => {
             case 1:
               expect(this.props.data!.loading).toBeFalsy();
               expect(this.props.data!.todo_list).toEqual({
-                id: '123',
-                title: 'how to apollo',
-                tasks: []
+                id: "123",
+                title: "how to apollo",
+                tasks: [],
               });
               break;
             case 2:
               expect(this.props.data!.loading).toBeFalsy();
               expect(queryMountCount).toBe(1);
-              expect(this.props.data!.todo_list).toEqual(
-                updatedData.todo_list
-              );
+              expect(this.props.data!.todo_list).toEqual(updatedData.todo_list);
               break;
             case 3:
               expect(this.props.data!.loading).toBeFalsy();
-              expect(this.props.data!.todo_list).toEqual(
-                updatedData.todo_list
-              );
+              expect(this.props.data!.todo_list).toEqual(updatedData.todo_list);
               break;
             default:
           }
@@ -408,7 +412,7 @@ describe('graphql(mutation) update queries', () => {
     );
 
     setTimeout(() => {
-      mutate({ refetchQueries: [{ query, variables: { id: '123' } }] }).then(
+      mutate({ refetchQueries: [{ query, variables: { id: "123" } }] }).then(
         () => {
           setTimeout(() => {
             render(
diff --git a/src/react/hoc/__tests__/queries/api.test.tsx b/src/react/hoc/__tests__/queries/api.test.tsx
index a37d5a1b200..d8b0da578e5 100644
--- a/src/react/hoc/__tests__/queries/api.test.tsx
+++ b/src/react/hoc/__tests__/queries/api.test.tsx
@@ -1,16 +1,16 @@
-import React from 'react';
-import { render, waitFor } from '@testing-library/react';
-import gql from 'graphql-tag';
-import { DocumentNode } from 'graphql';
-
-import { ApolloClient } from '../../../../core';
-import { ApolloProvider } from '../../../context';
-import { InMemoryCache as Cache } from '../../../../cache';
-import { itAsync, mockSingleLink } from '../../../../testing';
-import { graphql } from '../../graphql';
-import { ChildProps } from '../../types';
-
-describe('[queries] api', () => {
+import React from "react";
+import { render, waitFor } from "@testing-library/react";
+import gql from "graphql-tag";
+import { DocumentNode } from "graphql";
+
+import { ApolloClient } from "../../../../core";
+import { ApolloProvider } from "../../../context";
+import { InMemoryCache as Cache } from "../../../../cache";
+import { itAsync, mockSingleLink } from "../../../../testing";
+import { graphql } from "../../graphql";
+import { ChildProps } from "../../types";
+
+describe("[queries] api", () => {
   const consoleWarn = console.warn;
   beforeAll(() => {
     console.warn = () => null;
@@ -20,7 +20,7 @@ describe('[queries] api', () => {
     console.warn = consoleWarn;
   });
 
-  itAsync('exposes refetch as part of the props api', (resolve, reject) => {
+  itAsync("exposes refetch as part of the props api", (resolve, reject) => {
     const query: DocumentNode = gql`
       query people($first: Int) {
         allPeople(first: $first) {
@@ -31,7 +31,7 @@ describe('[queries] api', () => {
       }
     `;
     const variables = { first: 1 };
-    const data1 = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
+    const data1 = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
     const link = mockSingleLink(
       { request: { query, variables }, result: { data: data1 } },
       { request: { query, variables }, result: { data: data1 } },
@@ -39,7 +39,7 @@ describe('[queries] api', () => {
     );
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     let hasRefetched = false,
@@ -76,9 +76,7 @@ describe('[queries] api', () => {
                   .refetch({ first: 2 }) // new variables
                   .then((response: any) => {
                     expect(response.data).toEqual(data1);
-                    expect(data!.allPeople).toEqual(
-                      data1.allPeople
-                    );
+                    expect(data!.allPeople).toEqual(data1.allPeople);
                     done = true;
                   });
               })
@@ -105,51 +103,56 @@ describe('[queries] api', () => {
     waitFor(() => expect(done).toBeTruthy()).then(resolve, reject);
   });
 
-  itAsync('exposes subscribeToMore as part of the props api', (resolve, reject) => {
-    let done = false;
-    const query: DocumentNode = gql`
-      query people {
-        allPeople(first: 1) {
-          people {
-            name
+  itAsync(
+    "exposes subscribeToMore as part of the props api",
+    (resolve, reject) => {
+      let done = false;
+      const query: DocumentNode = gql`
+        query people {
+          allPeople(first: 1) {
+            people {
+              name
+            }
           }
         }
-      }
-    `;
-    const link = mockSingleLink({
-      request: { query },
-      result: { data: { allPeople: { people: [{ name: 'Luke Skywalker' }] } } }
-    });
-    const client = new ApolloClient({
-      link,
-      cache: new Cache({ addTypename: false })
-    });
-
-    // example of loose typing
-    const Container = graphql(query)(
-      class extends React.Component<ChildProps> {
-        render() {
-          const { data } = this.props;
-          if (data && !data.loading) {
-            expect(data!.subscribeToMore).toBeTruthy();
-            expect(data!.subscribeToMore instanceof Function).toBeTruthy();
-            done = true;
+      `;
+      const link = mockSingleLink({
+        request: { query },
+        result: {
+          data: { allPeople: { people: [{ name: "Luke Skywalker" }] } },
+        },
+      });
+      const client = new ApolloClient({
+        link,
+        cache: new Cache({ addTypename: false }),
+      });
+
+      // example of loose typing
+      const Container = graphql(query)(
+        class extends React.Component<ChildProps> {
+          render() {
+            const { data } = this.props;
+            if (data && !data.loading) {
+              expect(data!.subscribeToMore).toBeTruthy();
+              expect(data!.subscribeToMore instanceof Function).toBeTruthy();
+              done = true;
+            }
+            return null;
           }
-          return null;
         }
-      }
-    );
+      );
 
-    render(
-      <ApolloProvider client={client}>
-        <Container />
-      </ApolloProvider>
-    );
+      render(
+        <ApolloProvider client={client}>
+          <Container />
+        </ApolloProvider>
+      );
 
-    waitFor(() => expect(done).toBeTruthy()).then(resolve, reject);
-  });
+      waitFor(() => expect(done).toBeTruthy()).then(resolve, reject);
+    }
+  );
 
-  itAsync('exposes fetchMore as part of the props api', (resolve, reject) => {
+  itAsync("exposes fetchMore as part of the props api", (resolve, reject) => {
     const query: DocumentNode = gql`
       query people($skip: Int, $first: Int) {
         allPeople(first: $first, skip: $skip) {
@@ -159,8 +162,8 @@ describe('[queries] api', () => {
         }
       }
     `;
-    const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
-    const data1 = { allPeople: { people: [{ name: 'Leia Skywalker' }] } };
+    const data = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
+    const data1 = { allPeople: { people: [{ name: "Leia Skywalker" }] } };
 
     type Data = typeof data;
 
@@ -175,12 +178,12 @@ describe('[queries] api', () => {
     );
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     let count = 0;
     const Container = graphql<{}, Data, Variables>(query, {
-      options: () => ({ variables })
+      options: () => ({ variables }),
     })(
       class extends React.Component<ChildProps<{}, Data, Variables>> {
         componentDidUpdate() {
@@ -188,16 +191,16 @@ describe('[queries] api', () => {
           if (count === 0) {
             expect(props.data!.fetchMore).toBeTruthy();
             expect(props.data!.fetchMore instanceof Function).toBeTruthy();
-            props.data!
-              .fetchMore({
+            props
+              .data!.fetchMore({
                 variables: { skip: 2 },
                 updateQuery: (prev: any, { fetchMoreResult }) => ({
                   allPeople: {
                     people: prev.allPeople.people.concat(
                       fetchMoreResult!.allPeople.people
-                    )
-                  }
-                })
+                    ),
+                  },
+                }),
               })
               .then((result: any) => {
                 expect(result.data.allPeople.people).toEqual(
@@ -214,7 +217,7 @@ describe('[queries] api', () => {
             // This ends the test (passing).
             setTimeout(() => resolve(), 20);
           } else {
-            throw new Error('should not reach this point');
+            throw new Error("should not reach this point");
           }
           count++;
         }
@@ -234,100 +237,101 @@ describe('[queries] api', () => {
     );
   });
 
-  itAsync('reruns props function after query results change via fetchMore', (resolve, reject) => {
-    const query: DocumentNode = gql`
-      query people($cursor: Int) {
-        allPeople(cursor: $cursor) {
-          cursor
-          people {
-            name
+  itAsync(
+    "reruns props function after query results change via fetchMore",
+    (resolve, reject) => {
+      const query: DocumentNode = gql`
+        query people($cursor: Int) {
+          allPeople(cursor: $cursor) {
+            cursor
+            people {
+              name
+            }
           }
         }
-      }
-    `;
-    const vars1 = { cursor: undefined };
-    const data1 = {
-      allPeople: { cursor: 1, people: [{ name: 'Luke Skywalker' }] }
-    };
-    const vars2 = { cursor: 1 };
-    const data2 = {
-      allPeople: { cursor: 2, people: [{ name: 'Leia Skywalker' }] }
-    };
-
-    type Data = typeof data1;
-    type Variables = { cursor: number | undefined };
-
-    const link = mockSingleLink(
-      { request: { query, variables: vars1 }, result: { data: data1 } },
-      { request: { query, variables: vars2 }, result: { data: data2 } }
-    );
-    const client = new ApolloClient({
-      link,
-      cache: new Cache({ addTypename: false })
-    });
-
-    let isUpdated = false;
-
-    type FinalProps = {
-      loading: boolean;
-      people?: { name: string }[];
-      getMorePeople?: () => void;
-    };
-
-    let done = false;
-    const Container = graphql<{}, Data, Variables, FinalProps>(query, {
-      props({ data }) {
-        const { loading, allPeople, fetchMore } = data!;
-
-        if (loading) return { loading };
-        const { cursor, people } = allPeople!;
-        return {
-          loading: false,
-          people,
-          getMorePeople: () =>
-            fetchMore({
-              variables: { cursor },
-              updateQuery(prev, { fetchMoreResult }) {
-                const {
-                  allPeople: { cursor, people }
-                } = fetchMoreResult!;
-                return {
-                  allPeople: {
-                    cursor,
-                    people: [...people, ...prev.allPeople.people]
-                  }
-                };
+      `;
+      const vars1 = { cursor: undefined };
+      const data1 = {
+        allPeople: { cursor: 1, people: [{ name: "Luke Skywalker" }] },
+      };
+      const vars2 = { cursor: 1 };
+      const data2 = {
+        allPeople: { cursor: 2, people: [{ name: "Leia Skywalker" }] },
+      };
+
+      type Data = typeof data1;
+      type Variables = { cursor: number | undefined };
+
+      const link = mockSingleLink(
+        { request: { query, variables: vars1 }, result: { data: data1 } },
+        { request: { query, variables: vars2 }, result: { data: data2 } }
+      );
+      const client = new ApolloClient({
+        link,
+        cache: new Cache({ addTypename: false }),
+      });
+
+      let isUpdated = false;
+
+      type FinalProps = {
+        loading: boolean;
+        people?: { name: string }[];
+        getMorePeople?: () => void;
+      };
+
+      let done = false;
+      const Container = graphql<{}, Data, Variables, FinalProps>(query, {
+        props({ data }) {
+          const { loading, allPeople, fetchMore } = data!;
+
+          if (loading) return { loading };
+          const { cursor, people } = allPeople!;
+          return {
+            loading: false,
+            people,
+            getMorePeople: () =>
+              fetchMore({
+                variables: { cursor },
+                updateQuery(prev, { fetchMoreResult }) {
+                  const {
+                    allPeople: { cursor, people },
+                  } = fetchMoreResult!;
+                  return {
+                    allPeople: {
+                      cursor,
+                      people: [...people, ...prev.allPeople.people],
+                    },
+                  };
+                },
+              }),
+          };
+        },
+      })(
+        class extends React.Component<FinalProps> {
+          render() {
+            if (!this.props.loading) {
+              if (isUpdated) {
+                expect(this.props.people!.length).toBe(2);
+                done = true;
+              } else {
+                isUpdated = true;
+                expect(this.props.people).toEqual(data1.allPeople.people);
+                this.props.getMorePeople!();
               }
-            })
-        };
-      }
-    })(
-      class extends React.Component<FinalProps> {
-        render() {
-          if (!this.props.loading) {
-            if (isUpdated) {
-              expect(this.props.people!.length).toBe(2);
-              done = true;
-            } else {
-              isUpdated = true;
-              expect(this.props.people).toEqual(
-                data1.allPeople.people
-              );
-              this.props.getMorePeople!();
             }
-          }
 
-          return null;
+            return null;
+          }
         }
-      }
-    );
+      );
 
-    render(
-      <ApolloProvider client={client}>
-        <Container />
-      </ApolloProvider>
-    );
+      render(
+        <ApolloProvider client={client}>
+          <Container />
+        </ApolloProvider>
+      );
 
-    waitFor(() => expect(done).toBe(true)).then(resolve, reject);
-  });
+      waitFor(() => expect(done).toBe(true)).then(resolve, reject);
+    }
+  );
 });
diff --git a/src/react/hoc/__tests__/queries/errors.test.tsx b/src/react/hoc/__tests__/queries/errors.test.tsx
index bcf3822e2cd..449e3c46c67 100644
--- a/src/react/hoc/__tests__/queries/errors.test.tsx
+++ b/src/react/hoc/__tests__/queries/errors.test.tsx
@@ -1,19 +1,19 @@
-import React from 'react';
-import { render, waitFor } from '@testing-library/react';
-import gql from 'graphql-tag';
-import { withState } from './recomposeWithState';
-import { DocumentNode } from 'graphql';
-
-import { ApolloClient } from '../../../../core';
-import { ApolloProvider } from '../../../context';
-import { InMemoryCache as Cache } from '../../../../cache';
-import { QueryResult } from '../../../types/types';
-import { itAsync, mockSingleLink } from '../../../../testing';
-import { Query } from '../../../components/Query';
-import { graphql } from '../../graphql';
-import { ChildProps, DataValue } from '../../types';
-
-describe('[queries] errors', () => {
+import React from "react";
+import { render, waitFor } from "@testing-library/react";
+import gql from "graphql-tag";
+import { withState } from "./recomposeWithState";
+import { DocumentNode } from "graphql";
+
+import { ApolloClient } from "../../../../core";
+import { ApolloProvider } from "../../../context";
+import { InMemoryCache as Cache } from "../../../../cache";
+import { QueryResult } from "../../../types/types";
+import { itAsync, mockSingleLink } from "../../../../testing";
+import { Query } from "../../../components/Query";
+import { graphql } from "../../graphql";
+import { ChildProps, DataValue } from "../../types";
+
+describe("[queries] errors", () => {
   let error: typeof console.error;
   beforeEach(() => {
     error = console.error;
@@ -24,7 +24,7 @@ describe('[queries] errors', () => {
   });
 
   // errors
-  itAsync('does not swallow children errors', (resolve, reject) => {
+  itAsync("does not swallow children errors", (resolve, reject) => {
     let done = false;
     const query: DocumentNode = gql`
       query people {
@@ -35,14 +35,14 @@ describe('[queries] errors', () => {
         }
       }
     `;
-    const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
+    const data = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
     const link = mockSingleLink({
       request: { query },
-      result: { data }
+      result: { data },
     });
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     class ErrorBoundary extends React.Component<React.PropsWithChildren> {
@@ -75,7 +75,7 @@ describe('[queries] errors', () => {
     }).then(resolve, reject);
   });
 
-  it('can unmount without error', () => {
+  it("can unmount without error", () => {
     const query: DocumentNode = gql`
       query people {
         allPeople(first: 1) {
@@ -85,14 +85,14 @@ describe('[queries] errors', () => {
         }
       }
     `;
-    const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
+    const data = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
     const link = mockSingleLink({
       request: { query },
-      result: { data }
+      result: { data },
     });
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     const ContainerWithData = graphql(query)(() => null);
@@ -110,8 +110,8 @@ describe('[queries] errors', () => {
     }
   });
 
-  itAsync('passes any GraphQL errors in props', (resolve, reject) => {
-    let done = false
+  itAsync("passes any GraphQL errors in props", (resolve, reject) => {
+    let done = false;
     const query: DocumentNode = gql`
       query people {
         allPeople(first: 1) {
@@ -123,11 +123,11 @@ describe('[queries] errors', () => {
     `;
     const link = mockSingleLink({
       request: { query },
-      error: new Error('boo')
+      error: new Error("boo"),
     });
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     const ErrorContainer = graphql(query)(
@@ -136,7 +136,7 @@ describe('[queries] errors', () => {
           const { data } = this.props;
           expect(data!.error).toBeTruthy();
           expect(data!.error!.networkError).toBeTruthy();
-          done = true
+          done = true;
         }
         render() {
           return null;
@@ -155,7 +155,7 @@ describe('[queries] errors', () => {
     }).then(resolve, reject);
   });
 
-  describe('uncaught exceptions', () => {
+  describe("uncaught exceptions", () => {
     const consoleWarn = console.warn;
     beforeAll(() => {
       console.warn = () => null;
@@ -171,13 +171,13 @@ describe('[queries] errors', () => {
     }
     beforeEach(() => {
       unhandled = [];
-      process.on('unhandledRejection', handle);
+      process.on("unhandledRejection", handle);
     });
     afterEach(() => {
-      process.removeListener('unhandledRejection', handle);
+      process.removeListener("unhandledRejection", handle);
     });
 
-    it('does not log when you change variables resulting in an error', async () => {
+    it("does not log when you change variables resulting in an error", async () => {
       const query: DocumentNode = gql`
         query people($var: Int) {
           allPeople(first: $var) {
@@ -188,21 +188,21 @@ describe('[queries] errors', () => {
         }
       `;
       const var1 = { var: 1 };
-      const data = { allPeople: { people: { name: 'Luke Skywalker' } } };
+      const data = { allPeople: { people: { name: "Luke Skywalker" } } };
       const var2 = { var: 2 };
       const link = mockSingleLink(
         {
           request: { query, variables: var1 },
-          result: { data }
+          result: { data },
         },
         {
           request: { query, variables: var2 },
-          error: new Error('boo')
+          error: new Error("boo"),
         }
       );
       const client = new ApolloClient({
         link,
-        cache: new Cache({ addTypename: false })
+        cache: new Cache({ addTypename: false }),
       });
 
       type Data = typeof data;
@@ -215,7 +215,11 @@ describe('[queries] errors', () => {
 
       let iteration = 0;
       let done = false;
-      const ErrorContainer = withState('var', 'setVar', 1)(
+      const ErrorContainer = withState(
+        "var",
+        "setVar",
+        1
+      )(
         graphql<Props, Data, Vars>(query)(
           class extends React.Component<ChildProps<Props, Data, Vars>> {
             componentDidUpdate() {
@@ -258,14 +262,14 @@ describe('[queries] errors', () => {
 
       await waitFor(() => {
         expect(iteration).toBe(3);
-      })
+      });
       await waitFor(() => {
         expect(done).toBeTruthy();
       });
     });
   });
 
-  it('will not log a warning when there is an error that is not caught in the render method when using query', () =>
+  it("will not log a warning when there is an error that is not caught in the render method when using query", () =>
     new Promise<void>((resolve, reject) => {
       const query: DocumentNode = gql`
         query people {
@@ -285,11 +289,11 @@ describe('[queries] errors', () => {
 
       const link = mockSingleLink({
         request: { query },
-        error: new Error('oops')
+        error: new Error("oops"),
       });
       const client = new ApolloClient({
         link,
-        cache: new Cache({ addTypename: false })
+        cache: new Cache({ addTypename: false }),
       });
 
       const origError = console.error;
@@ -313,7 +317,7 @@ describe('[queries] errors', () => {
                 expect(errorMock.mock.calls.length).toBe(0);
                 break;
               default:
-                throw new Error('Too many renders.');
+                throw new Error("Too many renders.");
             }
           } catch (error) {
             reject(error);
@@ -335,83 +339,80 @@ describe('[queries] errors', () => {
       }).then(resolve, reject);
     }));
 
-  itAsync('passes any cached data when there is a GraphQL error', (resolve, reject) => {
-    const query: DocumentNode = gql`
-      query people {
-        allPeople(first: 1) {
-          people {
-            name
+  itAsync(
+    "passes any cached data when there is a GraphQL error",
+    (resolve, reject) => {
+      const query: DocumentNode = gql`
+        query people {
+          allPeople(first: 1) {
+            people {
+              name
+            }
           }
         }
-      }
-    `;
-    const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
-    type Data = typeof data;
-    const link = mockSingleLink(
-      { request: { query }, result: { data } },
-      { request: { query }, error: new Error('No Network Connection') }
-    );
-    const client = new ApolloClient({
-      link,
-      cache: new Cache({ addTypename: false })
-    });
+      `;
+      const data = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
+      type Data = typeof data;
+      const link = mockSingleLink(
+        { request: { query }, result: { data } },
+        { request: { query }, error: new Error("No Network Connection") }
+      );
+      const client = new ApolloClient({
+        link,
+        cache: new Cache({ addTypename: false }),
+      });
 
-    let count = 0;
-    const Container = graphql<{}, Data>(query, {
-      options: { notifyOnNetworkStatusChange: true }
-    })(
-      class extends React.Component<ChildProps<{}, Data>> {
-        componentDidUpdate() {
-          const { props } = this;
-          try {
-            switch (count++) {
-              case 0:
-                expect(props.data!.allPeople).toEqual(
-                  data.allPeople
-                );
-                setTimeout(() => {
-                  props.data!.refetch().catch(() => null);
-                });
-                break;
-              case 1:
-                expect(props.data!.loading).toBeTruthy();
-                expect(props.data!.allPeople).toEqual(
-                  data.allPeople
-                );
-                break;
-              case 2:
-                expect(props.data!.loading).toBeFalsy();
-                expect(props.data!.error).toBeTruthy();
-                expect(props.data!.allPeople).toEqual(
-                  data.allPeople
-                );
-                break;
-              default:
-                throw new Error('Unexpected fall through');
+      let count = 0;
+      const Container = graphql<{}, Data>(query, {
+        options: { notifyOnNetworkStatusChange: true },
+      })(
+        class extends React.Component<ChildProps<{}, Data>> {
+          componentDidUpdate() {
+            const { props } = this;
+            try {
+              switch (count++) {
+                case 0:
+                  expect(props.data!.allPeople).toEqual(data.allPeople);
+                  setTimeout(() => {
+                    props.data!.refetch().catch(() => null);
+                  });
+                  break;
+                case 1:
+                  expect(props.data!.loading).toBeTruthy();
+                  expect(props.data!.allPeople).toEqual(data.allPeople);
+                  break;
+                case 2:
+                  expect(props.data!.loading).toBeFalsy();
+                  expect(props.data!.error).toBeTruthy();
+                  expect(props.data!.allPeople).toEqual(data.allPeople);
+                  break;
+                default:
+                  throw new Error("Unexpected fall through");
+              }
+            } catch (e) {
+              reject(e);
             }
-          } catch (e) {
-            reject(e);
           }
-        }
 
-        render() {
-          return null;
+          render() {
+            return null;
+          }
         }
-      }
-    );
+      );
 
-    render(
-      <ApolloProvider client={client}>
-        <Container />
-      </ApolloProvider>
-    );
+      render(
+        <ApolloProvider client={client}>
+          <Container />
+        </ApolloProvider>
+      );
 
-    waitFor(() => {
-      expect(count).toBe(3)
-    }).then(resolve, reject);
-  });
+      waitFor(() => {
+        expect(count).toBe(3);
+      }).then(resolve, reject);
+    }
+  );
 
-  itAsync('can refetch after there was a network error', (resolve, reject) => {
+  itAsync("can refetch after there was a network error", (resolve, reject) => {
     const query: DocumentNode = gql`
       query somethingelse {
         allPeople(first: 1) {
@@ -421,24 +422,24 @@ describe('[queries] errors', () => {
         }
       }
     `;
-    const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
-    const dataTwo = { allPeople: { people: [{ name: 'Princess Leia' }] } };
+    const data = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
+    const dataTwo = { allPeople: { people: [{ name: "Princess Leia" }] } };
 
     type Data = typeof data;
     const link = mockSingleLink(
       { request: { query }, result: { data } },
-      { request: { query }, error: new Error('This is an error!') },
+      { request: { query }, error: new Error("This is an error!") },
       { request: { query }, result: { data: dataTwo } }
     );
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     let count = 0;
     const noop = () => null;
     const Container = graphql<{}, Data>(query, {
-      options: { notifyOnNetworkStatusChange: true }
+      options: { notifyOnNetworkStatusChange: true },
     })(
       class extends React.Component<ChildProps<{}, Data>> {
         componentDidUpdate() {
@@ -449,7 +450,7 @@ describe('[queries] errors', () => {
                 props
                   .data!.refetch()
                   .then(() => {
-                    reject('Expected error value on first refetch.');
+                    reject("Expected error value on first refetch.");
                   })
                   .catch(noop);
                 break;
@@ -463,7 +464,7 @@ describe('[queries] errors', () => {
                   .data!.refetch()
                   .then(noop)
                   .catch(() => {
-                    reject('Expected good data on second refetch.');
+                    reject("Expected good data on second refetch.");
                   });
                 break;
               case 3:
@@ -472,12 +473,10 @@ describe('[queries] errors', () => {
               case 4:
                 expect(props.data!.loading).toBeFalsy();
                 expect(props.data!.error).toBeFalsy();
-                expect(props.data!.allPeople).toEqual(
-                  dataTwo.allPeople
-                );
+                expect(props.data!.allPeople).toEqual(dataTwo.allPeople);
                 break;
               default:
-                throw new Error('Unexpected fall through');
+                throw new Error("Unexpected fall through");
             }
           } catch (e) {
             reject(e);
@@ -497,226 +496,139 @@ describe('[queries] errors', () => {
     );
 
     waitFor(() => {
-      expect(count).toBe(5)
+      expect(count).toBe(5);
     }).then(resolve, reject);
   });
 
-  itAsync('does not throw/console.err an error after a component that received a network error is unmounted', (resolve, reject) => {
-    const query: DocumentNode = gql`
-      query somethingelse {
-        allPeople(first: 1) {
-          people {
-            name
+  itAsync(
+    "does not throw/console.err an error after a component that received a network error is unmounted",
+    (resolve, reject) => {
+      const query: DocumentNode = gql`
+        query somethingelse {
+          allPeople(first: 1) {
+            people {
+              name
+            }
           }
         }
-      }
-    `;
-    const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
+      `;
+      const data = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
 
-    type Data = typeof data;
-    const link = mockSingleLink(
-      { request: { query }, result: { data } },
-      { request: { query }, error: new Error('This is an error!') }
-    );
+      type Data = typeof data;
+      const link = mockSingleLink(
+        { request: { query }, result: { data } },
+        { request: { query }, error: new Error("This is an error!") }
+      );
 
-    const client = new ApolloClient({
-      link,
-      cache: new Cache({ addTypename: false })
-    });
-    let count = 0;
-    const noop = () => null;
+      const client = new ApolloClient({
+        link,
+        cache: new Cache({ addTypename: false }),
+      });
+      let count = 0;
+      const noop = () => null;
 
-    interface ContainerOwnProps {
-      hideContainer: Function;
-    }
+      interface ContainerOwnProps {
+        hideContainer: Function;
+      }
 
-    interface QueryChildProps {
-      data: DataValue<Data>;
-      hideContainer: Function;
-    }
+      interface QueryChildProps {
+        data: DataValue<Data>;
+        hideContainer: Function;
+      }
 
-    let done = false;
-    const Container = graphql<ContainerOwnProps, Data, {}, QueryChildProps>(
-      query,
-      {
-        options: { notifyOnNetworkStatusChange: true },
-        props: something => {
-          return {
-            data: something.data!,
-            hideContainer: something!.ownProps.hideContainer
-          };
+      let done = false;
+      const Container = graphql<ContainerOwnProps, Data, {}, QueryChildProps>(
+        query,
+        {
+          options: { notifyOnNetworkStatusChange: true },
+          props: (something) => {
+            return {
+              data: something.data!,
+              hideContainer: something!.ownProps.hideContainer,
+            };
+          },
         }
-      }
-    )(
-      class extends React.Component<ChildProps<QueryChildProps, Data>> {
-        componentDidUpdate() {
-          const { props } = this;
-          try {
-            switch (count++) {
-              case 0:
-                props
-                  .data!.refetch()
-                  .then(() => {
-                    reject('Expected error value on first refetch.');
-                  })
-                  .catch(noop);
-                break;
-              case 2:
-                expect(props.data!.loading).toBeFalsy();
-                expect(props.data!.error).toBeTruthy();
-                const origError = console.error;
-                const errorMock = jest.fn();
-                console.error = errorMock;
-                props.hideContainer();
-                setTimeout(() => {
-                  expect(errorMock.mock.calls.length).toEqual(0);
-                  console.error = origError;
-                  done = true;
-                }, 100);
-                break;
-              default:
-                if (count < 2) {
-                  throw new Error('Unexpected fall through');
-                }
+      )(
+        class extends React.Component<ChildProps<QueryChildProps, Data>> {
+          componentDidUpdate() {
+            const { props } = this;
+            try {
+              switch (count++) {
+                case 0:
+                  props
+                    .data!.refetch()
+                    .then(() => {
+                      reject("Expected error value on first refetch.");
+                    })
+                    .catch(noop);
+                  break;
+                case 2:
+                  expect(props.data!.loading).toBeFalsy();
+                  expect(props.data!.error).toBeTruthy();
+                  const origError = console.error;
+                  const errorMock = jest.fn();
+                  console.error = errorMock;
+                  props.hideContainer();
+                  setTimeout(() => {
+                    expect(errorMock.mock.calls.length).toEqual(0);
+                    console.error = origError;
+                    done = true;
+                  }, 100);
+                  break;
+                default:
+                  if (count < 2) {
+                    throw new Error("Unexpected fall through");
+                  }
+              }
+            } catch (err) {
+              reject(err);
             }
-          } catch (err) {
-            reject(err);
           }
-        }
-        render() {
-          return null;
-        }
-      }
-    );
-
-    class Switcher extends React.Component<any, any> {
-      constructor(props: any) {
-        super(props);
-        this.state = {
-          showContainer: true
-        };
-      }
-      render() {
-        const {
-          state: { showContainer }
-        } = this;
-        if (showContainer) {
-          return (
-            <Container
-              hideContainer={() => this.setState({ showContainer: false })}
-            />
-          );
-        }
-        return null;
-      }
-    }
-
-    render(
-      <ApolloProvider client={client}>
-        <Switcher />
-      </ApolloProvider>
-    );
-
-    waitFor(() => {
-      expect(done).toBeTruthy()
-    }).then(resolve, reject);
-  });
-
-  itAsync('correctly sets loading state on remount after a network error', (resolve, reject) => {
-    const query: DocumentNode = gql`
-      query somethingelse {
-        allPeople(first: 1) {
-          people {
-            name
+          render() {
+            return null;
           }
         }
-      }
-    `;
-    const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
-    const dataTwo = { allPeople: { people: [{ name: 'Princess Leia' }] } };
-
-    type Data = typeof data;
-    const link = mockSingleLink(
-      { request: { query }, error: new Error('This is an error!') },
-      { request: { query }, result: { data: dataTwo } }
-    );
-    const client = new ApolloClient({
-      link,
-      cache: new Cache({ addTypename: false })
-    });
+      );
 
-    let count = 0;
-    type ContainerOwnProps = { toggle: () => void };
-    const Container = graphql<ContainerOwnProps, Data>(query, {
-      options: { notifyOnNetworkStatusChange: true }
-    })(
-      class extends React.Component<ChildProps<ContainerOwnProps, Data>> {
+      class Switcher extends React.Component<any, any> {
+        constructor(props: any) {
+          super(props);
+          this.state = {
+            showContainer: true,
+          };
+        }
         render() {
-          switch (count) {
-            case 0:
-              expect(this.props.data!.loading).toBe(true);
-              break;
-            case 1:
-              expect(this.props.data!.loading).toBe(false);
-              expect(this.props.data!.error!.networkError!.message).toMatch(
-                /This is an error/
-              );
-              // unmount this component
-              setTimeout(() => {
-                this.props.toggle();
-              }, 0);
-              setTimeout(() => {
-                // remount after 50 ms
-                this.props.toggle();
-              }, 50);
-              break;
-            case 2:
-              expect(this.props.data!.loading).toBe(true);
-              break;
-            case 3:
-              expect(this.props.data!.loading).toBe(false);
-              expect(this.props.data!.allPeople).toEqual(dataTwo.allPeople);
-              break;
-            default:
-              throw new Error('Too many renders.');
+          const {
+            state: { showContainer },
+          } = this;
+          if (showContainer) {
+            return (
+              <Container
+                hideContainer={() => this.setState({ showContainer: false })}
+              />
+            );
           }
-          count += 1;
-
           return null;
         }
       }
-    );
 
-    type Toggle = () => void;
-    type OwnProps = { children: (toggle: Toggle) => any };
-    class Manager extends React.Component<OwnProps, { show: boolean }> {
-      constructor(props: any) {
-        super(props);
-        this.state = { show: true };
-      }
-      render() {
-        if (!this.state.show) return null;
-        // eslint-disable-next-line testing-library/no-node-access
-        return this.props.children(() =>
-          this.setState(({ show }) => ({ show: !show }))
-        );
-      }
-    }
-
-    render(
-      <ApolloProvider client={client}>
-        <Manager>{(toggle: Toggle) => <Container toggle={toggle} />}</Manager>
-      </ApolloProvider>
-    );
+      render(
+        <ApolloProvider client={client}>
+          <Switcher />
+        </ApolloProvider>
+      );
 
-    waitFor(() => expect(count).toBe(4)).then(resolve, reject);
-  });
+      waitFor(() => {
+        expect(done).toBeTruthy();
+      }).then(resolve, reject);
+    }
+  );
 
-  describe('errorPolicy', () => {
-    itAsync('passes any GraphQL errors in props along with data', (resolve, reject) => {
-      let done = false;
+  itAsync(
+    "correctly sets loading state on remount after a network error",
+    (resolve, reject) => {
       const query: DocumentNode = gql`
-        query people {
+        query somethingelse {
           allPeople(first: 1) {
             people {
               name
@@ -724,107 +636,206 @@ describe('[queries] errors', () => {
           }
         }
       `;
-      const link = mockSingleLink({
-        request: { query },
-        result: {
-          data: {
-            allPeople: {
-              people: null
-            }
-          },
-          errors: [new Error('this is an error')]
-        }
-      });
+      const data = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
+      const dataTwo = { allPeople: { people: [{ name: "Princess Leia" }] } };
 
+      type Data = typeof data;
+      const link = mockSingleLink(
+        { request: { query }, error: new Error("This is an error!") },
+        { request: { query }, result: { data: dataTwo } }
+      );
       const client = new ApolloClient({
         link,
-        cache: new Cache({ addTypename: false })
+        cache: new Cache({ addTypename: false }),
       });
 
-      const ErrorContainer = graphql(query, {
-        options: { errorPolicy: 'all' }
+      let count = 0;
+      type ContainerOwnProps = { toggle: () => void };
+      const Container = graphql<ContainerOwnProps, Data>(query, {
+        options: { notifyOnNetworkStatusChange: true },
       })(
-        class extends React.Component<ChildProps> {
-          componentDidUpdate() {
-            const { data } = this.props;
-            expect(data!.error).toBeTruthy();
-            expect(data!.error!.graphQLErrors[0].message).toEqual(
-              'this is an error'
-            );
-            expect(data).toMatchObject({ allPeople: { people: null } });
-            done = true;
-          }
+        class extends React.Component<ChildProps<ContainerOwnProps, Data>> {
           render() {
+            switch (count) {
+              case 0:
+                expect(this.props.data!.loading).toBe(true);
+                break;
+              case 1:
+                expect(this.props.data!.loading).toBe(false);
+                expect(this.props.data!.error!.networkError!.message).toMatch(
+                  /This is an error/
+                );
+                // unmount this component
+                setTimeout(() => {
+                  this.props.toggle();
+                }, 0);
+                setTimeout(() => {
+                  // remount after 50 ms
+                  this.props.toggle();
+                }, 50);
+                break;
+              case 2:
+                expect(this.props.data!.loading).toBe(true);
+                break;
+              case 3:
+                expect(this.props.data!.loading).toBe(false);
+                expect(this.props.data!.allPeople).toEqual(dataTwo.allPeople);
+                break;
+              default:
+                throw new Error("Too many renders.");
+            }
+            count += 1;
+
             return null;
           }
         }
       );
 
+      type Toggle = () => void;
+      type OwnProps = { children: (toggle: Toggle) => any };
+      class Manager extends React.Component<OwnProps, { show: boolean }> {
+        constructor(props: any) {
+          super(props);
+          this.state = { show: true };
+        }
+        render() {
+          if (!this.state.show) return null;
+          // eslint-disable-next-line testing-library/no-node-access
+          return this.props.children(() =>
+            this.setState(({ show }) => ({ show: !show }))
+          );
+        }
+      }
+
       render(
         <ApolloProvider client={client}>
-          <ErrorContainer />
+          <Manager>{(toggle: Toggle) => <Container toggle={toggle} />}</Manager>
         </ApolloProvider>
       );
 
-      waitFor(() => {
-        expect(done).toBe(true);
-      }).then(resolve, reject);
-    });
+      waitFor(() => expect(count).toBe(4)).then(resolve, reject);
+    }
+  );
+
+  describe("errorPolicy", () => {
+    itAsync(
+      "passes any GraphQL errors in props along with data",
+      (resolve, reject) => {
+        let done = false;
+        const query: DocumentNode = gql`
+          query people {
+            allPeople(first: 1) {
+              people {
+                name
+              }
+            }
+          }
+        `;
+        const link = mockSingleLink({
+          request: { query },
+          result: {
+            data: {
+              allPeople: {
+                people: null,
+              },
+            },
+            errors: [new Error("this is an error")],
+          },
+        });
 
-    itAsync('passes any GraphQL errors in props along with data [component]', (resolve, reject) => {
-      let done = false;
-      const query: DocumentNode = gql`
-        query people {
-          allPeople(first: 1) {
-            people {
-              name
+        const client = new ApolloClient({
+          link,
+          cache: new Cache({ addTypename: false }),
+        });
+
+        const ErrorContainer = graphql(query, {
+          options: { errorPolicy: "all" },
+        })(
+          class extends React.Component<ChildProps> {
+            componentDidUpdate() {
+              const { data } = this.props;
+              expect(data!.error).toBeTruthy();
+              expect(data!.error!.graphQLErrors[0].message).toEqual(
+                "this is an error"
+              );
+              expect(data).toMatchObject({ allPeople: { people: null } });
+              done = true;
+            }
+            render() {
+              return null;
             }
           }
-        }
-      `;
-      const link = mockSingleLink({
-        request: { query },
-        result: {
-          data: {
-            allPeople: {
-              people: null
+        );
+
+        render(
+          <ApolloProvider client={client}>
+            <ErrorContainer />
+          </ApolloProvider>
+        );
+
+        waitFor(() => {
+          expect(done).toBe(true);
+        }).then(resolve, reject);
+      }
+    );
+
+    itAsync(
+      "passes any GraphQL errors in props along with data [component]",
+      (resolve, reject) => {
+        let done = false;
+        const query: DocumentNode = gql`
+          query people {
+            allPeople(first: 1) {
+              people {
+                name
+              }
             }
+          }
+        `;
+        const link = mockSingleLink({
+          request: { query },
+          result: {
+            data: {
+              allPeople: {
+                people: null,
+              },
+            },
+            errors: [new Error("this is an error")],
           },
-          errors: [new Error('this is an error')]
-        }
-      });
+        });
 
-      const client = new ApolloClient({
-        link,
-        cache: new Cache({ addTypename: false })
-      });
+        const client = new ApolloClient({
+          link,
+          cache: new Cache({ addTypename: false }),
+        });
 
-      class ErrorContainer extends React.Component<QueryResult> {
-        componentDidUpdate() {
-          const { props } = this;
-          expect(props.error).toBeTruthy();
-          expect(props.error!.graphQLErrors[0].message).toEqual(
-            'this is an error'
-          );
-          expect(props.data!.allPeople!).toMatchObject({ people: null });
-          done = true;
-        }
-        render() {
-          return null;
+        class ErrorContainer extends React.Component<QueryResult> {
+          componentDidUpdate() {
+            const { props } = this;
+            expect(props.error).toBeTruthy();
+            expect(props.error!.graphQLErrors[0].message).toEqual(
+              "this is an error"
+            );
+            expect(props.data!.allPeople!).toMatchObject({ people: null });
+            done = true;
+          }
+          render() {
+            return null;
+          }
         }
-      }
 
-      render(
-        <ApolloProvider client={client}>
-          <Query query={query} errorPolicy="all">
-            {(props: any) => <ErrorContainer {...props} />}
-          </Query>
-        </ApolloProvider>
-      );
+        render(
+          <ApolloProvider client={client}>
+            <Query query={query} errorPolicy="all">
+              {(props: any) => <ErrorContainer {...props} />}
+            </Query>
+          </ApolloProvider>
+        );
 
-      waitFor(() => {
-        expect(done).toBe(true);
-      }).then(resolve, reject);
-    });
+        waitFor(() => {
+          expect(done).toBe(true);
+        }).then(resolve, reject);
+      }
+    );
   });
 });
diff --git a/src/react/hoc/__tests__/queries/index.test.tsx b/src/react/hoc/__tests__/queries/index.test.tsx
index 646a42aae94..45eaba87b96 100644
--- a/src/react/hoc/__tests__/queries/index.test.tsx
+++ b/src/react/hoc/__tests__/queries/index.test.tsx
@@ -1,18 +1,18 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { render, waitFor } from '@testing-library/react';
-import gql from 'graphql-tag';
-import { DocumentNode } from 'graphql';
-
-import { ApolloClient } from '../../../../core';
-import { ApolloProvider } from '../../../context';
-import { InMemoryCache as Cache } from '../../../../cache';
-import { ApolloLink } from '../../../../link/core';
-import { itAsync, mockSingleLink } from '../../../../testing';
-import { graphql } from '../../graphql';
-import { ChildProps, DataProps } from '../../types';
-
-describe('queries', () => {
+import React from "react";
+import PropTypes from "prop-types";
+import { render, waitFor } from "@testing-library/react";
+import gql from "graphql-tag";
+import { DocumentNode } from "graphql";
+
+import { ApolloClient } from "../../../../core";
+import { ApolloProvider } from "../../../context";
+import { InMemoryCache as Cache } from "../../../../cache";
+import { ApolloLink } from "../../../../link/core";
+import { itAsync, mockSingleLink } from "../../../../testing";
+import { graphql } from "../../graphql";
+import { ChildProps, DataProps } from "../../types";
+
+describe("queries", () => {
   let error: typeof console.error;
   beforeEach(() => {
     error = console.error;
@@ -24,7 +24,7 @@ describe('queries', () => {
   });
 
   // general api
-  it('binds a query to props', async() => {
+  it("binds a query to props", async () => {
     let done = false;
     const query: DocumentNode = gql`
       query people {
@@ -37,11 +37,11 @@ describe('queries', () => {
     `;
     const link = mockSingleLink({
       request: { query },
-      result: { data: { allPeople: { people: [{ name: 'Luke Skywalker' }] } } }
+      result: { data: { allPeople: { people: [{ name: "Luke Skywalker" }] } } },
     });
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     interface Data {
@@ -50,13 +50,13 @@ describe('queries', () => {
       };
     }
 
-    const ContainerWithData = graphql<any, Data>(query)(
-      ({ data }: DataProps<Data>) => {
-        expect(data).toBeTruthy();
-        done = true;
-        return null;
-      }
-    );
+    const ContainerWithData = graphql<any, Data>(query)(({
+      data,
+    }: DataProps<Data>) => {
+      expect(data).toBeTruthy();
+      done = true;
+      return null;
+    });
 
     render(
       <ApolloProvider client={client}>
@@ -69,7 +69,7 @@ describe('queries', () => {
     });
   });
 
-  itAsync('includes the variables in the props', (resolve, reject) => {
+  itAsync("includes the variables in the props", (resolve, reject) => {
     const TIME_SCALE = 5000;
     let renderCount = 0;
     const query: DocumentNode = gql`
@@ -85,11 +85,11 @@ describe('queries', () => {
     const variables = { first: 1 };
     const link = mockSingleLink({
       request: { query, variables },
-      result: { data: { allPeople: { people: [{ name: 'Luke Skywalker' }] } } }
+      result: { data: { allPeople: { people: [{ name: "Luke Skywalker" }] } } },
     });
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     // Ensure variable types work correctly here
@@ -106,14 +106,14 @@ describe('queries', () => {
       first: number;
     }
 
-    const ContainerWithData = graphql<Variables, Data, Variables>(query)(
-      ({ data }: ChildProps<Variables, Data, Variables>) => {
-        expect(data).toBeTruthy();
-        expect(data!.variables).toEqual(variables);
-        renderCount += 1;
-        return null;
-      }
-    );
+    const ContainerWithData = graphql<Variables, Data, Variables>(query)(({
+      data,
+    }: ChildProps<Variables, Data, Variables>) => {
+      expect(data).toBeTruthy();
+      expect(data!.variables).toEqual(variables);
+      renderCount += 1;
+      return null;
+    });
 
     render(
       <ApolloProvider client={client}>
@@ -121,96 +121,104 @@ describe('queries', () => {
       </ApolloProvider>
     );
 
-    waitFor(() => {
-      expect(renderCount).toBe(2);
-    }, {timeout: TIME_SCALE}).then(resolve, reject);
+    waitFor(
+      () => {
+        expect(renderCount).toBe(2);
+      },
+      { timeout: TIME_SCALE }
+    ).then(resolve, reject);
   });
 
-  itAsync('should update query variables when props change', (resolve, reject) => {
-    const query: DocumentNode = gql`
-      query people($someId: ID) {
-        allPeople(someId: $someId) {
-          people {
-            name
+  itAsync(
+    "should update query variables when props change",
+    (resolve, reject) => {
+      const query: DocumentNode = gql`
+        query people($someId: ID) {
+          allPeople(someId: $someId) {
+            people {
+              name
+            }
           }
         }
-      }
-    `;
+      `;
 
-    const link = mockSingleLink(
-      {
-        request: { query, variables: { someId: 1 } },
-        result: {
-          data: { allPeople: { people: [{ name: 'Luke Skywalker' }] } }
+      const link = mockSingleLink(
+        {
+          request: { query, variables: { someId: 1 } },
+          result: {
+            data: { allPeople: { people: [{ name: "Luke Skywalker" }] } },
+          },
+        },
+        {
+          request: { query, variables: { someId: 2 } },
+          result: {
+            data: { allPeople: { people: [{ name: "Darth Vader" }] } },
+          },
         }
-      },
-      {
-        request: { query, variables: { someId: 2 } },
-        result: { data: { allPeople: { people: [{ name: 'Darth Vader' }] } } }
-      }
-    );
-    const client = new ApolloClient({
-      link,
-      cache: new Cache({ addTypename: false })
-    });
+      );
+      const client = new ApolloClient({
+        link,
+        cache: new Cache({ addTypename: false }),
+      });
 
-    interface Data {
-      allPeople: {
-        people: {
-          name: string;
+      interface Data {
+        allPeople: {
+          people: {
+            name: string;
+          };
         };
-      };
-    }
+      }
 
-    interface Variables {
-      someId: number;
-    }
+      interface Variables {
+        someId: number;
+      }
 
-    const options = {
-      options: {}
-    };
+      const options = {
+        options: {},
+      };
 
-    let count = 0;
-    const ContainerWithData = graphql<Variables, Data, Variables>(
-      query,
-      options
-    )(({ data }: ChildProps<Variables, Data, Variables>) => {
-      expect(data).toBeTruthy();
-      switch (++count) {
-        case 1:
-          expect(data!.loading).toBe(true);
-          expect(data!.variables).toEqual({ someId: 1 });
-          break;
-        case 2:
-          expect(data!.loading).toBe(true);
-          expect(data!.variables).toEqual({ someId: 2 });
-          break;
-        case 3:
-          expect(data!.loading).toBe(false);
-          expect(data!.variables).toEqual({ someId: 2 });
-          break;
-        default:
-          reject(`too many renders (${count})`);
-      }
+      let count = 0;
+      const ContainerWithData = graphql<Variables, Data, Variables>(
+        query,
+        options
+      )(({ data }: ChildProps<Variables, Data, Variables>) => {
+        expect(data).toBeTruthy();
+        switch (++count) {
+          case 1:
+            expect(data!.loading).toBe(true);
+            expect(data!.variables).toEqual({ someId: 1 });
+            break;
+          case 2:
+            expect(data!.loading).toBe(true);
+            expect(data!.variables).toEqual({ someId: 2 });
+            break;
+          case 3:
+            expect(data!.loading).toBe(false);
+            expect(data!.variables).toEqual({ someId: 2 });
+            break;
+          default:
+            reject(`too many renders (${count})`);
+        }
 
-      return null;
-    });
+        return null;
+      });
 
-    const { rerender } = render(
-      <ApolloProvider client={client}>
-        <ContainerWithData someId={1} />
-      </ApolloProvider>
-    );
-    rerender(
-      <ApolloProvider client={client}>
-        <ContainerWithData someId={2} />
-      </ApolloProvider>
-    );
+      const { rerender } = render(
+        <ApolloProvider client={client}>
+          <ContainerWithData someId={1} />
+        </ApolloProvider>
+      );
+      rerender(
+        <ApolloProvider client={client}>
+          <ContainerWithData someId={2} />
+        </ApolloProvider>
+      );
 
-    waitFor(() => {
-      expect(count).toBe(3);
-    }).then(resolve, reject);
-  });
+      waitFor(() => {
+        expect(count).toBe(3);
+      }).then(resolve, reject);
+    }
+  );
 
   it("shouldn't warn about fragments", () => {
     const oldWarn = console.warn;
@@ -218,20 +226,18 @@ describe('queries', () => {
     console.warn = (str: any) => warnings.push(str);
 
     try {
-      graphql(
-        gql`
-          query foo {
-            bar
-          }
-        `
-      );
+      graphql(gql`
+        query foo {
+          bar
+        }
+      `);
       expect(warnings.length).toEqual(0);
     } finally {
       console.warn = oldWarn;
     }
   });
 
-  itAsync('executes a query', (resolve, reject) => {
+  itAsync("executes a query", (resolve, reject) => {
     let done = false;
     const query: DocumentNode = gql`
       query people {
@@ -242,16 +248,16 @@ describe('queries', () => {
         }
       }
     `;
-    const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
+    const data = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
     type Data = typeof data;
 
     const link = mockSingleLink({
       request: { query },
-      result: { data }
+      result: { data },
     });
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     const Container = graphql<{}, Data>(query)(
@@ -279,7 +285,7 @@ describe('queries', () => {
     }).then(resolve, reject);
   });
 
-  itAsync('executes a query with two root fields', (resolve, reject) => {
+  itAsync("executes a query with two root fields", (resolve, reject) => {
     let done = false;
     const query: DocumentNode = gql`
       query people {
@@ -296,18 +302,18 @@ describe('queries', () => {
       }
     `;
     const data = {
-      allPeople: { people: [{ name: 'Luke Skywalker' }] },
-      otherPeople: { people: [{ name: 'Luke Skywalker' }] }
+      allPeople: { people: [{ name: "Luke Skywalker" }] },
+      otherPeople: { people: [{ name: "Luke Skywalker" }] },
     };
     type Data = typeof data;
 
     const link = mockSingleLink({
       request: { query },
-      result: { data }
+      result: { data },
     });
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     const Container = graphql<{}, Data>(query)(
@@ -316,9 +322,7 @@ describe('queries', () => {
           const { props } = this;
           expect(props.data!.loading).toBeFalsy();
           expect(props.data!.allPeople).toEqual(data.allPeople);
-          expect(props.data!.otherPeople).toEqual(
-            data.otherPeople
-          );
+          expect(props.data!.otherPeople).toEqual(data.otherPeople);
           done = true;
         }
         render() {
@@ -338,7 +342,7 @@ describe('queries', () => {
     }).then(resolve, reject);
   });
 
-  itAsync('maps props as variables if they match', (resolve, reject) => {
+  itAsync("maps props as variables if they match", (resolve, reject) => {
     let done = false;
     const query: DocumentNode = gql`
       query people($first: Int) {
@@ -349,7 +353,7 @@ describe('queries', () => {
         }
       }
     `;
-    const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
+    const data = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
     type Data = typeof data;
 
     const variables = { first: 1 };
@@ -357,11 +361,11 @@ describe('queries', () => {
 
     const link = mockSingleLink({
       request: { query, variables },
-      result: { data }
+      result: { data },
     });
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     const Container = graphql<Vars, Data, Vars>(query)(
@@ -370,9 +374,7 @@ describe('queries', () => {
           const { props } = this;
           expect(props.data!.loading).toBeFalsy();
           expect(props.data!.allPeople).toEqual(data.allPeople);
-          expect(props.data!.variables).toEqual(
-            this.props.data!.variables
-          );
+          expect(props.data!.variables).toEqual(this.props.data!.variables);
           done = true;
         }
         render() {
@@ -392,129 +394,135 @@ describe('queries', () => {
     }).then(resolve, reject);
   });
 
-  itAsync("doesn't care about the order of variables in a request", (resolve, reject) => {
-    let done = false;
-    const query: DocumentNode = gql`
-      query people($first: Int, $jedi: Boolean) {
-        allPeople(first: $first, jedi: $jedi) {
-          people {
-            name
+  itAsync(
+    "doesn't care about the order of variables in a request",
+    (resolve, reject) => {
+      let done = false;
+      const query: DocumentNode = gql`
+        query people($first: Int, $jedi: Boolean) {
+          allPeople(first: $first, jedi: $jedi) {
+            people {
+              name
+            }
           }
         }
-      }
-    `;
-    const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
-    type Data = typeof data;
-    const variables = { jedi: true, first: 1 };
-    type Vars = typeof variables;
-
-    const mocks = [
-      {
-        request: {
-          query,
-          variables
+      `;
+      const data = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
+      type Data = typeof data;
+      const variables = { jedi: true, first: 1 };
+      type Vars = typeof variables;
+
+      const mocks = [
+        {
+          request: {
+            query,
+            variables,
+          },
+          result: {
+            data,
+          },
         },
-        result: {
-          data
-        }
-      }
-    ];
-    const link = mockSingleLink.apply(null, mocks);
-    const client = new ApolloClient({
-      link,
-      cache: new Cache({ addTypename: false })
-    });
-    const options = {
-      options: {
-        variables: {
-          jedi: true,
-          first: 1
-        }
-      }
-    };
+      ];
+      const link = mockSingleLink.apply(null, mocks);
+      const client = new ApolloClient({
+        link,
+        cache: new Cache({ addTypename: false }),
+      });
+      const options = {
+        options: {
+          variables: {
+            jedi: true,
+            first: 1,
+          },
+        },
+      };
 
-    const Container = graphql<{}, Data, Vars>(
-      query,
-      options
-    )(
-      class extends React.Component<ChildProps<{}, Data, Vars>> {
-        componentDidUpdate() {
-          const { props } = this;
-          try {
-            expect(props.data!.loading).toBeFalsy();
-            expect(props.data!.allPeople).toEqual(data.allPeople);
-            done = true;
-          } catch (error) {
-            reject(error);
+      const Container = graphql<{}, Data, Vars>(
+        query,
+        options
+      )(
+        class extends React.Component<ChildProps<{}, Data, Vars>> {
+          componentDidUpdate() {
+            const { props } = this;
+            try {
+              expect(props.data!.loading).toBeFalsy();
+              expect(props.data!.allPeople).toEqual(data.allPeople);
+              done = true;
+            } catch (error) {
+              reject(error);
+            }
+          }
+          render() {
+            return null;
           }
         }
-        render() {
-          return null;
-        }
-      }
-    );
-
-    render(
-      <ApolloProvider client={client}>
-        <Container />
-      </ApolloProvider>
-    );
+      );
 
-    waitFor(() => {
-      expect(done).toBe(true);
-    }).then(resolve, reject);
-  });
+      render(
+        <ApolloProvider client={client}>
+          <Container />
+        </ApolloProvider>
+      );
 
-  itAsync('allows falsy values in the mapped variables from props', (resolve, reject) => {
-    let done = false;
-    const query: DocumentNode = gql`
-      query people($first: Int) {
-        allPeople(first: $first) {
-          people {
-            name
+      waitFor(() => {
+        expect(done).toBe(true);
+      }).then(resolve, reject);
+    }
+  );
+
+  itAsync(
+    "allows falsy values in the mapped variables from props",
+    (resolve, reject) => {
+      let done = false;
+      const query: DocumentNode = gql`
+        query people($first: Int) {
+          allPeople(first: $first) {
+            people {
+              name
+            }
           }
         }
-      }
-    `;
-    const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
-    type Data = typeof data;
+      `;
+      const data = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
+      type Data = typeof data;
 
-    const variables = { first: null };
-    type Vars = typeof variables;
+      const variables = { first: null };
+      type Vars = typeof variables;
 
-    const link = mockSingleLink({
-      request: { query, variables },
-      result: { data }
-    });
-    const client = new ApolloClient({
-      link,
-      cache: new Cache({ addTypename: false })
-    });
+      const link = mockSingleLink({
+        request: { query, variables },
+        result: { data },
+      });
+      const client = new ApolloClient({
+        link,
+        cache: new Cache({ addTypename: false }),
+      });
 
-    const Container = graphql<Partial<Vars>, Data, Vars>(query)(
-      class extends React.Component<ChildProps<Partial<Vars>, Data, Vars>> {
-        componentDidUpdate() {
-          const { props } = this;
-          expect(props.data!.loading).toBeFalsy();
-          expect(props.data!.allPeople).toEqual(data.allPeople);
-          done = true;
-        }
-        render() {
-          return null;
+      const Container = graphql<Partial<Vars>, Data, Vars>(query)(
+        class extends React.Component<ChildProps<Partial<Vars>, Data, Vars>> {
+          componentDidUpdate() {
+            const { props } = this;
+            expect(props.data!.loading).toBeFalsy();
+            expect(props.data!.allPeople).toEqual(data.allPeople);
+            done = true;
+          }
+          render() {
+            return null;
+          }
         }
-      }
-    );
+      );
 
-    render(
-      <ApolloProvider client={client}>
-        <Container first={null} />
-      </ApolloProvider>
-    );
+      render(
+        <ApolloProvider client={client}>
+          <Container first={null} />
+        </ApolloProvider>
+      );
 
-    waitFor(() => {
-      expect(done).toBe(true);
-    }).then(resolve, reject);
-  });
+      waitFor(() => {
+        expect(done).toBe(true);
+      }).then(resolve, reject);
+    }
+  );
 
   it("doesn't error on optional required props", () => {
     const query: DocumentNode = gql`
@@ -526,7 +534,7 @@ describe('queries', () => {
         }
       }
     `;
-    const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
+    const data = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
     type Data = typeof data;
 
     const variables = { first: 1 };
@@ -534,11 +542,11 @@ describe('queries', () => {
 
     const link = mockSingleLink({
       request: { query, variables },
-      result: { data }
+      result: { data },
     });
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
     const Container = graphql<Vars, Data>(query)(() => null);
 
@@ -549,7 +557,7 @@ describe('queries', () => {
           <Container first={1} />
         </ApolloProvider>
       );
-      unmount()
+      unmount();
     } catch (e) {
       errorCaught = e;
     }
@@ -558,7 +566,7 @@ describe('queries', () => {
   });
 
   // context
-  itAsync('allows context through updates', (resolve, reject) => {
+  itAsync("allows context through updates", (resolve, reject) => {
     const query: DocumentNode = gql`
       query people {
         allPeople(first: 1) {
@@ -568,16 +576,16 @@ describe('queries', () => {
         }
       }
     `;
-    const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
+    const data = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
     type Data = typeof data;
 
     const link = mockSingleLink({
       request: { query },
-      result: { data }
+      result: { data },
     });
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     const Container = graphql<{}, Data>(query)(
@@ -594,10 +602,13 @@ describe('queries', () => {
       }
     );
 
-    class ContextContainer extends React.Component<React.PropsWithChildren, { color: string }> {
+    class ContextContainer extends React.Component<
+      React.PropsWithChildren,
+      { color: string }
+    > {
       constructor(props: {}) {
         super(props);
-        this.state = { color: 'purple' };
+        this.state = { color: "purple" };
       }
 
       getChildContext() {
@@ -606,7 +617,7 @@ describe('queries', () => {
 
       componentDidMount() {
         setTimeout(() => {
-          this.setState({ color: 'green' });
+          this.setState({ color: "green" });
         }, 50);
       }
 
@@ -617,7 +628,7 @@ describe('queries', () => {
     }
 
     (ContextContainer as any).childContextTypes = {
-      color: PropTypes.string
+      color: PropTypes.string,
     };
 
     let count = 0;
@@ -625,9 +636,9 @@ describe('queries', () => {
     class ChildContextContainer extends React.Component<React.PropsWithChildren> {
       render() {
         const { color } = this.context as any;
-        if (count === 0) expect(color).toBe('purple');
+        if (count === 0) expect(color).toBe("purple");
         if (count === 1) {
-          expect(color).toBe('green');
+          expect(color).toBe("green");
           done = true;
         }
 
@@ -638,7 +649,7 @@ describe('queries', () => {
     }
 
     (ChildContextContainer as any).contextTypes = {
-      color: PropTypes.string
+      color: PropTypes.string,
     };
 
     render(
@@ -655,7 +666,7 @@ describe('queries', () => {
   });
 
   // meta
-  it('stores the component name', () => {
+  it("stores the component name", () => {
     const query: DocumentNode = gql`
       query people {
         allPeople(first: 1) {
@@ -665,7 +676,7 @@ describe('queries', () => {
         }
       }
     `;
-    const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
+    const data = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
     type Data = typeof data;
     const Container = graphql<{}, Data>(query)(
       class Container extends React.Component<ChildProps<{}, Data>> {
@@ -675,7 +686,7 @@ describe('queries', () => {
       }
     );
 
-    expect(Container.displayName).toEqual('Apollo(Container)');
+    expect(Container.displayName).toEqual("Apollo(Container)");
   });
 
   it("uses a custom wrapped component name when 'alias' is specified", () => {
@@ -689,7 +700,7 @@ describe('queries', () => {
       }
     `;
     @graphql(query, {
-      alias: 'withFoo'
+      alias: "withFoo",
     })
     class Container extends React.Component {
       render(): React.ReactNode {
@@ -699,10 +710,10 @@ describe('queries', () => {
     // );
 
     // Not sure why I have to cast Container to any
-    expect((Container as any).displayName).toEqual('withFoo(Container)');
+    expect((Container as any).displayName).toEqual("withFoo(Container)");
   });
 
-  itAsync('passes context to the link', (resolve, reject) => {
+  itAsync("passes context to the link", (resolve, reject) => {
     let done = false;
     const query: DocumentNode = gql`
       query people {
@@ -721,13 +732,13 @@ describe('queries', () => {
       mockSingleLink({
         request: { query },
         result: {
-          data: { allPeople: { people: [{ name: 'Luke Skywalker' }] } }
-        }
+          data: { allPeople: { people: [{ name: "Luke Skywalker" }] } },
+        },
       })
     );
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     interface Data {
@@ -737,7 +748,7 @@ describe('queries', () => {
     }
 
     const ContainerWithData = graphql<any, Data>(query, {
-      options: props => ({ context: { fromProps: props.context } })
+      options: (props) => ({ context: { fromProps: props.context } }),
     })(() => null);
 
     render(
@@ -751,21 +762,21 @@ describe('queries', () => {
     }).then(resolve, reject);
   });
 
-  describe('Return partial data', () => {
+  describe("Return partial data", () => {
     const consoleWarn = console.warn;
     beforeAll(() => {
-      console.warn = () => null
+      console.warn = () => null;
     });
 
     afterAll(() => {
       console.warn = consoleWarn;
     });
 
-    it('should not return partial cache data when `returnPartialData` is false', () => {
+    it("should not return partial cache data when `returnPartialData` is false", () => {
       const cache = new Cache();
       const client = new ApolloClient({
         cache,
-        link: ApolloLink.empty()
+        link: ApolloLink.empty(),
       });
 
       const fullQuery = gql`
@@ -786,20 +797,20 @@ describe('queries', () => {
         data: {
           cars: [
             {
-              __typename: 'Car',
-              make: 'Ford',
-              model: 'Mustang',
-              vin: 'PONY123',
+              __typename: "Car",
+              make: "Ford",
+              model: "Mustang",
+              vin: "PONY123",
               repairs: [
                 {
-                  __typename: 'Repair',
-                  date: '2019-05-08',
-                  description: 'Could not get after it.'
-                }
-              ]
-            }
-          ]
-        }
+                  __typename: "Repair",
+                  date: "2019-05-08",
+                  description: "Could not get after it.",
+                },
+              ],
+            },
+          ],
+        },
       });
 
       const partialQuery = gql`
@@ -831,11 +842,11 @@ describe('queries', () => {
       render(<App />);
     });
 
-    it('should return partial cache data when `returnPartialData` is true', () => {
+    it("should return partial cache data when `returnPartialData` is true", () => {
       const cache = new Cache();
       const client = new ApolloClient({
         cache,
-        link: ApolloLink.empty()
+        link: ApolloLink.empty(),
       });
 
       const fullQuery = gql`
@@ -856,20 +867,20 @@ describe('queries', () => {
         data: {
           cars: [
             {
-              __typename: 'Car',
-              make: 'Ford',
-              model: 'Mustang',
-              vin: 'PONY123',
+              __typename: "Car",
+              make: "Ford",
+              model: "Mustang",
+              vin: "PONY123",
               repairs: [
                 {
-                  __typename: 'Repair',
-                  date: '2019-05-08',
-                  description: 'Could not get after it.'
-                }
-              ]
-            }
-          ]
-        }
+                  __typename: "Repair",
+                  date: "2019-05-08",
+                  description: "Could not get after it.",
+                },
+              ],
+            },
+          ],
+        },
       });
 
       const partialQuery = gql`
@@ -885,22 +896,22 @@ describe('queries', () => {
 
       const ComponentWithData = graphql<any, any>(partialQuery, {
         options: {
-          returnPartialData: true
-        }
+          returnPartialData: true,
+        },
       })(
         class Compnent extends React.Component<any> {
           render() {
             if (!this.props.data.loading) {
               expect(this.props.data.cars).toEqual([
                 {
-                  __typename: 'Car',
+                  __typename: "Car",
                   repairs: [
                     {
-                      __typename: 'Repair',
-                      date: '2019-05-08'
-                    }
-                  ]
-                }
+                      __typename: "Repair",
+                      date: "2019-05-08",
+                    },
+                  ],
+                },
               ]);
             }
             return null;
diff --git a/src/react/hoc/__tests__/queries/lifecycle.test.tsx b/src/react/hoc/__tests__/queries/lifecycle.test.tsx
index 2ecd58c5891..14dac2e15df 100644
--- a/src/react/hoc/__tests__/queries/lifecycle.test.tsx
+++ b/src/react/hoc/__tests__/queries/lifecycle.test.tsx
@@ -1,19 +1,19 @@
-import React from 'react';
-import { render, waitFor } from '@testing-library/react';
-import gql from 'graphql-tag';
-import { DocumentNode } from 'graphql';
-
-import { ApolloClient } from '../../../../core';
-import { ApolloProvider } from '../../../context';
-import { InMemoryCache as Cache } from '../../../../cache';
-import { mockSingleLink } from '../../../../testing';
-import { Query as QueryComponent } from '../../../components';
-import { graphql } from '../../graphql';
-import { ChildProps } from '../../types';
-
-describe('[queries] lifecycle', () => {
+import React from "react";
+import { render, waitFor } from "@testing-library/react";
+import gql from "graphql-tag";
+import { DocumentNode } from "graphql";
+
+import { ApolloClient } from "../../../../core";
+import { ApolloProvider } from "../../../context";
+import { InMemoryCache as Cache } from "../../../../cache";
+import { mockSingleLink } from "../../../../testing";
+import { Query as QueryComponent } from "../../../components";
+import { graphql } from "../../graphql";
+import { ChildProps } from "../../types";
+
+describe("[queries] lifecycle", () => {
   // lifecycle
-  it('reruns the query if it changes', async () => {
+  it("reruns the query if it changes", async () => {
     let count = 0;
     const query: DocumentNode = gql`
       query people($first: Int) {
@@ -25,12 +25,12 @@ describe('[queries] lifecycle', () => {
       }
     `;
 
-    const data1 = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
+    const data1 = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
     type Data = typeof data1;
     const variables1 = { first: 1 };
     type Vars = typeof variables1;
 
-    const data2 = { allPeople: { people: [{ name: 'Leia Skywalker' }] } };
+    const data2 = { allPeople: { people: [{ name: "Leia Skywalker" }] } };
     const variables2 = { first: 2 };
 
     const link = mockSingleLink(
@@ -40,14 +40,14 @@ describe('[queries] lifecycle', () => {
 
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     const Container = graphql<Vars, Data, Vars>(query, {
-      options: props => ({
+      options: (props) => ({
         variables: props,
-        fetchPolicy: count === 0 ? 'cache-and-network' : 'cache-first'
-      })
+        fetchPolicy: count === 0 ? "cache-and-network" : "cache-first",
+      }),
     })(
       class extends React.Component<ChildProps<Vars, Data, Vars>> {
         componentDidUpdate(prevProps: ChildProps<Vars, Data, Vars>) {
@@ -108,7 +108,7 @@ describe('[queries] lifecycle', () => {
     await waitFor(() => expect(count).toBe(3));
   });
 
-  it('rebuilds the queries on prop change when using `options`', async () => {
+  it("rebuilds the queries on prop change when using `options`", async () => {
     const query: DocumentNode = gql`
       query people {
         allPeople(first: 1) {
@@ -118,16 +118,16 @@ describe('[queries] lifecycle', () => {
         }
       }
     `;
-    const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
+    const data = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
     type Data = typeof data;
 
     const link = mockSingleLink({
       request: { query },
-      result: { data }
+      result: { data },
     });
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     let firstRun = true;
@@ -174,7 +174,7 @@ describe('[queries] lifecycle', () => {
     });
   });
 
-  it('reruns the query if just the variables change', async () => {
+  it("reruns the query if just the variables change", async () => {
     let count = 0;
     const query: DocumentNode = gql`
       query people($first: Int) {
@@ -186,13 +186,13 @@ describe('[queries] lifecycle', () => {
       }
     `;
 
-    const data1 = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
+    const data1 = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
     type Data = typeof data1;
 
     const variables1 = { first: 1 };
     type Vars = typeof variables1;
 
-    const data2 = { allPeople: { people: [{ name: 'Leia Skywalker' }] } };
+    const data2 = { allPeople: { people: [{ name: "Leia Skywalker" }] } };
     const variables2 = { first: 2 };
 
     const link = mockSingleLink(
@@ -202,11 +202,11 @@ describe('[queries] lifecycle', () => {
 
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     const Container = graphql<Vars, Data, Vars>(query, {
-      options: props => ({ variables: props })
+      options: (props) => ({ variables: props }),
     })(
       class extends React.Component<ChildProps<Vars, Data, Vars>> {
         componentDidUpdate(prevProps: ChildProps<Vars, Data, Vars>) {
@@ -268,7 +268,7 @@ describe('[queries] lifecycle', () => {
     await waitFor(() => expect(count).toBe(3));
   });
 
-  it('reruns the queries on prop change when using passed props', async () => {
+  it("reruns the queries on prop change when using passed props", async () => {
     let count = 0;
     const query: DocumentNode = gql`
       query people($first: Int) {
@@ -280,13 +280,13 @@ describe('[queries] lifecycle', () => {
       }
     `;
 
-    const data1 = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
+    const data1 = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
     type Data = typeof data1;
 
     const variables1 = { first: 1 };
     type Vars = typeof variables1;
 
-    const data2 = { allPeople: { people: [{ name: 'Leia Skywalker' }] } };
+    const data2 = { allPeople: { people: [{ name: "Leia Skywalker" }] } };
     const variables2 = { first: 2 };
 
     const link = mockSingleLink(
@@ -296,7 +296,7 @@ describe('[queries] lifecycle', () => {
 
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     const Container = graphql<Vars, Data, Vars>(query)(
@@ -357,7 +357,7 @@ describe('[queries] lifecycle', () => {
     await waitFor(() => expect(count).toBe(3));
   });
 
-  it('stays subscribed to updates after irrelevant prop changes', async () => {
+  it("stays subscribed to updates after irrelevant prop changes", async () => {
     const query: DocumentNode = gql`
       query people($first: Int) {
         allPeople(first: $first) {
@@ -369,17 +369,17 @@ describe('[queries] lifecycle', () => {
     `;
     const variables = { first: 1 };
     type Vars = typeof variables;
-    const data1 = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
+    const data1 = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
     type Data = typeof data1;
 
-    const data2 = { allPeople: { people: [{ name: 'Leia Skywalker' }] } };
+    const data2 = { allPeople: { people: [{ name: "Leia Skywalker" }] } };
     const link = mockSingleLink(
       { request: { query, variables }, result: { data: data1 } },
       { request: { query, variables }, result: { data: data2 } }
     );
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     interface Props {
@@ -389,7 +389,7 @@ describe('[queries] lifecycle', () => {
 
     let count = 0;
     const Container = graphql<Props, Data, Vars>(query, {
-      options: { variables, notifyOnNetworkStatusChange: false }
+      options: { variables, notifyOnNetworkStatusChange: false },
     })(
       class extends React.Component<ChildProps<Props, Data, Vars>> {
         componentDidUpdate() {
@@ -399,23 +399,17 @@ describe('[queries] lifecycle', () => {
             if (count === 1) {
               expect(props.foo).toEqual(42);
               expect(props.data!.loading).toEqual(false);
-              expect(props.data!.allPeople).toEqual(
-                data1.allPeople
-              );
+              expect(props.data!.allPeople).toEqual(data1.allPeople);
               props.changeState();
             } else if (count === 2) {
               expect(props.foo).toEqual(43);
               expect(props.data!.loading).toEqual(false);
-              expect(props.data!.allPeople).toEqual(
-                data1.allPeople
-              );
+              expect(props.data!.allPeople).toEqual(data1.allPeople);
               props.data!.refetch();
             } else if (count === 3) {
               expect(props.foo).toEqual(43);
               expect(props.data!.loading).toEqual(false);
-              expect(props.data!.allPeople).toEqual(
-                data2.allPeople
-              );
+              expect(props.data!.allPeople).toEqual(data2.allPeople);
             }
           } catch (e) {
             fail(e);
@@ -448,7 +442,7 @@ describe('[queries] lifecycle', () => {
     await waitFor(() => expect(count).toBe(3));
   });
 
-  it('correctly rebuilds props on remount', async () => {
+  it("correctly rebuilds props on remount", async () => {
     const query: DocumentNode = gql`
       query pollingPeople {
         allPeople(first: 1) {
@@ -458,7 +452,7 @@ describe('[queries] lifecycle', () => {
         }
       }
     `;
-    const data = { allPeople: { people: [{ name: 'Darth Skywalker' }] } };
+    const data = { allPeople: { people: [{ name: "Darth Skywalker" }] } };
     type Data = typeof data;
     const link = mockSingleLink({
       request: { query },
@@ -466,14 +460,14 @@ describe('[queries] lifecycle', () => {
       newData: () => ({
         data: {
           allPeople: {
-            people: [{ name: `Darth Skywalker - ${Math.random()}` }]
-          }
-        }
-      })
+            people: [{ name: `Darth Skywalker - ${Math.random()}` }],
+          },
+        },
+      }),
     });
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
     let app: React.ReactElement<any>,
       count = 0;
@@ -481,7 +475,7 @@ describe('[queries] lifecycle', () => {
     let done = false;
     let rerender: any;
     const Container = graphql<{}, Data>(query, {
-      options: { pollInterval: 10, notifyOnNetworkStatusChange: false }
+      options: { pollInterval: 10, notifyOnNetworkStatusChange: false },
     })(
       class extends React.Component<ChildProps<{}, Data>> {
         componentDidUpdate() {
@@ -510,11 +504,11 @@ describe('[queries] lifecycle', () => {
     rerender = render(app).rerender;
 
     await waitFor(() => {
-      expect(done).toBeTruthy()
+      expect(done).toBeTruthy();
     });
   });
 
-  it('will re-execute a query when the client changes', async () => {
+  it("will re-execute a query when the client changes", async () => {
     const query: DocumentNode = gql`
       {
         a
@@ -525,38 +519,38 @@ describe('[queries] lifecycle', () => {
     const link1 = mockSingleLink(
       {
         request: { query },
-        result: { data: { a: 1, b: 2, c: 3 } }
+        result: { data: { a: 1, b: 2, c: 3 } },
       },
       {
         request: { query },
-        result: { data: { a: 1, b: 2, c: 3 } }
+        result: { data: { a: 1, b: 2, c: 3 } },
       }
     );
     const link2 = mockSingleLink(
       {
         request: { query },
-        result: { data: { a: 4, b: 5, c: 6 } }
+        result: { data: { a: 4, b: 5, c: 6 } },
       },
       {
         request: { query },
-        result: { data: { a: 4, b: 5, c: 6 } }
+        result: { data: { a: 4, b: 5, c: 6 } },
       }
     );
     const link3 = mockSingleLink({
       request: { query },
-      result: { data: { a: 7, b: 8, c: 9 } }
+      result: { data: { a: 7, b: 8, c: 9 } },
     });
     const client1 = new ApolloClient({
       link: link1,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
     const client2 = new ApolloClient({
       link: link2,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
     const client3 = new ApolloClient({
       link: link3,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     interface Data {
@@ -570,7 +564,7 @@ describe('[queries] lifecycle', () => {
     let testFailures: any[] = [];
 
     const Query = graphql<{}, Data>(query, {
-      options: { notifyOnNetworkStatusChange: true }
+      options: { notifyOnNetworkStatusChange: true },
     })(
       class extends React.Component<ChildProps<{}, Data>> {
         componentDidMount() {
@@ -594,7 +588,7 @@ describe('[queries] lifecycle', () => {
                   loading: false,
                   a: 1,
                   b: 2,
-                  c: 3
+                  c: 3,
                 });
                 refetchQuery!();
                 break;
@@ -603,7 +597,7 @@ describe('[queries] lifecycle', () => {
                 expect({ a, b, c }).toEqual({
                   a: 1,
                   b: 2,
-                  c: 3
+                  c: 3,
                 });
                 break;
               case 4:
@@ -611,7 +605,7 @@ describe('[queries] lifecycle', () => {
                   loading: false,
                   a: 1,
                   b: 2,
-                  c: 3
+                  c: 3,
                 });
                 setTimeout(() => {
                   switchClient!(client2);
@@ -630,7 +624,7 @@ describe('[queries] lifecycle', () => {
                   loading: false,
                   a: 4,
                   b: 5,
-                  c: 6
+                  c: 6,
                 });
                 refetchQuery!();
                 break;
@@ -639,7 +633,7 @@ describe('[queries] lifecycle', () => {
                   loading: true,
                   a: 4,
                   b: 5,
-                  c: 6
+                  c: 6,
                 });
                 break;
               case 8:
@@ -647,7 +641,7 @@ describe('[queries] lifecycle', () => {
                   loading: false,
                   a: 4,
                   b: 5,
-                  c: 6
+                  c: 6,
                 });
                 setTimeout(() => {
                   switchClient!(client3);
@@ -666,7 +660,7 @@ describe('[queries] lifecycle', () => {
                   loading: false,
                   a: 7,
                   b: 8,
-                  c: 9
+                  c: 9,
                 });
                 setTimeout(() => {
                   switchClient!(client1);
@@ -677,7 +671,7 @@ describe('[queries] lifecycle', () => {
                   loading: false,
                   a: 1,
                   b: 2,
-                  c: 3
+                  c: 3,
                 });
                 setTimeout(() => {
                   switchClient!(client3);
@@ -705,11 +699,11 @@ describe('[queries] lifecycle', () => {
 
     class ClientSwitcher extends React.Component<any, any> {
       state = {
-        client: client1
+        client: client1,
       };
 
       componentDidMount() {
-        switchClient = newClient => {
+        switchClient = (newClient) => {
           this.setState({ client: newClient });
         };
       }
@@ -729,11 +723,11 @@ describe('[queries] lifecycle', () => {
       if (testFailures.length > 0) {
         throw testFailures[0];
       }
-      expect(count).toBe(12)
+      expect(count).toBe(12);
     });
   });
 
-  it('handles synchronous racecondition with prefilled data from the server', async () => {
+  it("handles synchronous racecondition with prefilled data from the server", async () => {
     const query: DocumentNode = gql`
       query GetUser($first: Int) {
         user(first: $first) {
@@ -743,29 +737,29 @@ describe('[queries] lifecycle', () => {
     `;
     const variables = { first: 1 };
     type Vars = typeof variables;
-    const data2 = { user: { name: 'Luke Skywalker' } };
+    const data2 = { user: { name: "Luke Skywalker" } };
     type Data = typeof data2;
 
     const link = mockSingleLink({
       request: { query, variables },
       result: { data: data2 },
-      delay: 10
+      delay: 10,
     });
     const initialState = {
       apollo: {
         data: {
           ROOT_QUERY: {
-            'user({"first":1})': null
-          }
-        }
-      }
+            'user({"first":1})': null,
+          },
+        },
+      },
     };
 
     const client = new ApolloClient({
       link,
       // prefill the store (like SSR would)
       // @see https://github.com/zeit/next.js/blob/master/examples/with-apollo/lib/initApollo.js
-      cache: new Cache({ addTypename: false }).restore(initialState)
+      cache: new Cache({ addTypename: false }).restore(initialState),
     });
 
     let count = 0;
@@ -773,8 +767,8 @@ describe('[queries] lifecycle', () => {
     const Container = graphql<Vars, Data>(query)(
       class extends React.Component<ChildProps<Vars, Data>> {
         componentDidMount() {
-          this.props.data!.refetch().then(result => {
-            expect(result.data!.user.name).toBe('Luke Skywalker');
+          this.props.data!.refetch().then((result) => {
+            expect(result.data!.user.name).toBe("Luke Skywalker");
             done = true;
           });
         }
@@ -782,9 +776,9 @@ describe('[queries] lifecycle', () => {
         render() {
           count++;
           const user = this.props.data!.user;
-          const name = user ? user.name : '';
+          const name = user ? user.name : "";
           if (count === 2) {
-            expect(name).toBe('Luke Skywalker');
+            expect(name).toBe("Luke Skywalker");
           }
           return null;
         }
@@ -800,7 +794,7 @@ describe('[queries] lifecycle', () => {
     await waitFor(() => expect(done).toBeTruthy());
   });
 
-  it('handles asynchronous racecondition with prefilled data from the server', async () => {
+  it("handles asynchronous racecondition with prefilled data from the server", async () => {
     const query: DocumentNode = gql`
       query Q {
         books {
@@ -813,42 +807,42 @@ describe('[queries] lifecycle', () => {
     const ssrResult = {
       books: [
         {
-          name: 'ssrfirst',
-          __typename: 'Book'
-        }
-      ]
+          name: "ssrfirst",
+          __typename: "Book",
+        },
+      ],
     };
 
     const result = {
       books: [
         {
-          name: 'first',
-          __typename: 'Book'
-        }
-      ]
+          name: "first",
+          __typename: "Book",
+        },
+      ],
     };
 
     const ssrLink = mockSingleLink({
       request: { query } as any,
-      result: { data: ssrResult }
+      result: { data: ssrResult },
     });
 
     const link = mockSingleLink({
       request: { query } as any,
-      result: { data: result }
+      result: { data: result },
     });
 
     const ssrClient = new ApolloClient({
       cache: new Cache(),
-      link: ssrLink
+      link: ssrLink,
     });
     await ssrClient.query({
       query,
-      variables: {}
+      variables: {},
     });
     const client = new ApolloClient({
       cache: new Cache().restore(ssrClient.extract()), // --- this is the "SSR" bit
-      link
+      link,
     });
 
     //try to render the app / call refetch / etc
@@ -861,7 +855,7 @@ describe('[queries] lifecycle', () => {
           {({ loading, data, refetch }: any) => {
             if (!loading) {
               if (!refetched) {
-                expect(data.books[0].name).toEqual('ssrfirst');
+                expect(data.books[0].name).toEqual("ssrfirst");
                 //setTimeout allows component to mount, which often happens
                 //when waiting  ideally we should be able to call refetch
                 //immediately However the subscription needs to start before
@@ -871,13 +865,13 @@ describe('[queries] lifecycle', () => {
                 //data you get is fresh, so one would wait for an interaction
                 setTimeout(() => {
                   refetch().then((refetchResult: any) => {
-                    expect(refetchResult.data.books[0].name).toEqual('first');
+                    expect(refetchResult.data.books[0].name).toEqual("first");
                     done = true;
                   });
                 });
                 refetched = true;
               } else {
-                expect(data.books[0].name).toEqual('first');
+                expect(data.books[0].name).toEqual("first");
               }
             }
             return <p> stub </p>;
diff --git a/src/react/hoc/__tests__/queries/loading.test.tsx b/src/react/hoc/__tests__/queries/loading.test.tsx
index 819ab63390f..8453b27ab44 100644
--- a/src/react/hoc/__tests__/queries/loading.test.tsx
+++ b/src/react/hoc/__tests__/queries/loading.test.tsx
@@ -1,62 +1,71 @@
-import React from 'react';
-import { render, waitFor } from '@testing-library/react';
-import gql from 'graphql-tag';
-import { DocumentNode } from 'graphql';
-
-import { ApolloClient, NetworkStatus, WatchQueryFetchPolicy } from '../../../../core';
-import { ApolloProvider } from '../../../context';
-import { InMemoryCache as Cache } from '../../../../cache';
-import { itAsync, mockSingleLink } from '../../../../testing';
-import { graphql } from '../../graphql';
-import { ChildProps } from '../../types';
-
-describe('[queries] loading', () => {
+import React from "react";
+import { render, waitFor } from "@testing-library/react";
+import gql from "graphql-tag";
+import { DocumentNode } from "graphql";
+
+import {
+  ApolloClient,
+  NetworkStatus,
+  WatchQueryFetchPolicy,
+} from "../../../../core";
+import { ApolloProvider } from "../../../context";
+import { InMemoryCache as Cache } from "../../../../cache";
+import { itAsync, mockSingleLink } from "../../../../testing";
+import { graphql } from "../../graphql";
+import { ChildProps } from "../../types";
+
+describe("[queries] loading", () => {
   // networkStatus / loading
-  itAsync('exposes networkStatus as a part of the props api', (resolve, reject) => {
-    const query: DocumentNode = gql`
-      query people {
-        allPeople(first: 1) {
-          people {
-            name
+  itAsync(
+    "exposes networkStatus as a part of the props api",
+    (resolve, reject) => {
+      const query: DocumentNode = gql`
+        query people {
+          allPeople(first: 1) {
+            people {
+              name
+            }
           }
         }
-      }
-    `;
-    const link = mockSingleLink({
-      request: { query },
-      result: { data: { allPeople: { people: [{ name: 'Luke Skywalker' }] } } }
-    });
-    const client = new ApolloClient({
-      link,
-      cache: new Cache({ addTypename: false })
-    });
+      `;
+      const link = mockSingleLink({
+        request: { query },
+        result: {
+          data: { allPeople: { people: [{ name: "Luke Skywalker" }] } },
+        },
+      });
+      const client = new ApolloClient({
+        link,
+        cache: new Cache({ addTypename: false }),
+      });
 
-    let done = false;
-    const Container = graphql(query, {
-      options: { notifyOnNetworkStatusChange: true }
-    })(
-      class extends React.Component<ChildProps> {
-        componentDidUpdate() {
-          const { data } = this.props;
-          expect(data!.networkStatus).toBeTruthy();
-          done = true;
-        }
-        render() {
-          return null;
+      let done = false;
+      const Container = graphql(query, {
+        options: { notifyOnNetworkStatusChange: true },
+      })(
+        class extends React.Component<ChildProps> {
+          componentDidUpdate() {
+            const { data } = this.props;
+            expect(data!.networkStatus).toBeTruthy();
+            done = true;
+          }
+          render() {
+            return null;
+          }
         }
-      }
-    );
+      );
 
-    render(
-      <ApolloProvider client={client}>
-        <Container />
-      </ApolloProvider>
-    );
+      render(
+        <ApolloProvider client={client}>
+          <Container />
+        </ApolloProvider>
+      );
 
-    waitFor(() => expect(done).toBeTruthy()).then(resolve, reject);
-  });
+      waitFor(() => expect(done).toBeTruthy()).then(resolve, reject);
+    }
+  );
 
-  it('should set the initial networkStatus to 1 (loading)', () => {
+  it("should set the initial networkStatus to 1 (loading)", () => {
     const query: DocumentNode = gql`
       query people {
         allPeople(first: 1) {
@@ -66,14 +75,14 @@ describe('[queries] loading', () => {
         }
       }
     `;
-    const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
+    const data = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
     const link = mockSingleLink({
       request: { query },
-      result: { data }
+      result: { data },
     });
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     @graphql(query, { options: { notifyOnNetworkStatusChange: true } })
@@ -95,241 +104,260 @@ describe('[queries] loading', () => {
       </ApolloProvider>
     );
 
-    unmount()
+    unmount();
   });
 
-  itAsync('should set the networkStatus to 7 (ready) when the query is loaded', (resolve, reject) => {
-    let done = false;
-    const query: DocumentNode = gql`
-      query people {
-        allPeople(first: 1) {
-          people {
-            name
+  itAsync(
+    "should set the networkStatus to 7 (ready) when the query is loaded",
+    (resolve, reject) => {
+      let done = false;
+      const query: DocumentNode = gql`
+        query people {
+          allPeople(first: 1) {
+            people {
+              name
+            }
           }
         }
-      }
-    `;
-    const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
-    const link = mockSingleLink({
-      request: { query },
-      result: { data }
-    });
-    const client = new ApolloClient({
-      link,
-      cache: new Cache({ addTypename: false })
-    });
+      `;
+      const data = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
+      const link = mockSingleLink({
+        request: { query },
+        result: { data },
+      });
+      const client = new ApolloClient({
+        link,
+        cache: new Cache({ addTypename: false }),
+      });
 
-    const Container = graphql(query, {
-      options: { notifyOnNetworkStatusChange: true }
-    })(
-      class extends React.Component<ChildProps> {
-        componentDidUpdate() {
-          expect(this.props.data!.networkStatus).toBe(7);
-          done = true;
-        }
+      const Container = graphql(query, {
+        options: { notifyOnNetworkStatusChange: true },
+      })(
+        class extends React.Component<ChildProps> {
+          componentDidUpdate() {
+            expect(this.props.data!.networkStatus).toBe(7);
+            done = true;
+          }
 
-        render() {
-          return null;
+          render() {
+            return null;
+          }
         }
-      }
-    );
+      );
 
-    render(
-      <ApolloProvider client={client}>
-        <Container />
-      </ApolloProvider>
-    );
+      render(
+        <ApolloProvider client={client}>
+          <Container />
+        </ApolloProvider>
+      );
 
-    waitFor(() => {
-      expect(done).toBe(true);
-    }).then(resolve, reject);
-  });
+      waitFor(() => {
+        expect(done).toBe(true);
+      }).then(resolve, reject);
+    }
+  );
 
-  itAsync('should set the networkStatus to 2 (setVariables) when the query variables are changed', (resolve, reject) => {
-    let count = 0;
-    const query: DocumentNode = gql`
-      query people($first: Int) {
-        allPeople(first: $first) {
-          people {
-            name
+  itAsync(
+    "should set the networkStatus to 2 (setVariables) when the query variables are changed",
+    (resolve, reject) => {
+      let count = 0;
+      const query: DocumentNode = gql`
+        query people($first: Int) {
+          allPeople(first: $first) {
+            people {
+              name
+            }
           }
         }
-      }
-    `;
+      `;
 
-    const data1 = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
-    const variables1 = { first: 1 };
+      const data1 = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
+      const variables1 = { first: 1 };
 
-    const data2 = { allPeople: { people: [{ name: 'Leia Skywalker' }] } };
-    const variables2 = { first: 2 };
+      const data2 = { allPeople: { people: [{ name: "Leia Skywalker" }] } };
+      const variables2 = { first: 2 };
 
-    type Data = typeof data1;
-    type Vars = typeof variables1;
+      type Data = typeof data1;
+      type Vars = typeof variables1;
 
-    const link = mockSingleLink(
-      { request: { query, variables: variables1 }, result: { data: data1 } },
-      { request: { query, variables: variables2 }, result: { data: data2 } }
-    );
+      const link = mockSingleLink(
+        { request: { query, variables: variables1 }, result: { data: data1 } },
+        { request: { query, variables: variables2 }, result: { data: data2 } }
+      );
 
-    const client = new ApolloClient({
-      link,
-      cache: new Cache({ addTypename: false })
-    });
+      const client = new ApolloClient({
+        link,
+        cache: new Cache({ addTypename: false }),
+      });
 
-    let done = false;
-    const Container = graphql<Vars, Data, Vars>(query, {
-      options: props => ({
-        variables: props,
-        notifyOnNetworkStatusChange: true
-      })
-    })(
-      class extends React.Component<ChildProps<Vars, Data, Vars>> {
-        componentDidUpdate(prevProps: ChildProps<Vars, Data, Vars>) {
-          try {
-            // variables changed, new query is loading, but old data is still there
-            switch (++count) {
-              case 1:
-                expect(prevProps.data!.loading).toBe(true);
-                expect(prevProps.data!.variables).toEqual(variables1);
-                expect(prevProps.data!.allPeople).toBe(undefined);
-                expect(prevProps.data!.error).toBe(undefined);
-                expect(prevProps.data!.networkStatus).toBe(NetworkStatus.loading);
-                expect(this.props.data!.loading).toBe(false);
-                expect(this.props.data!.variables).toEqual(variables1);
-                expect(this.props.data!.allPeople).toEqual(data1.allPeople);
-                expect(this.props.data!.error).toBe(undefined);
-                expect(this.props.data!.networkStatus).toBe(NetworkStatus.ready);
-                break;
-              case 2:
-                expect(prevProps.data!.loading).toBe(false);
-                expect(prevProps.data!.variables).toEqual(variables1);
-                expect(prevProps.data!.allPeople).toEqual(data1.allPeople);
-                expect(prevProps.data!.error).toBe(undefined);
-                expect(this.props.data!.loading).toBe(true);
-                expect(this.props.data!.variables).toEqual(variables2);
-                expect(this.props.data!.allPeople).toBe(undefined);
-                expect(this.props.data!.error).toBe(undefined);
-                expect(this.props.data!.networkStatus).toBe(NetworkStatus.setVariables);
-                break;
-              case 3:
-                expect(prevProps.data!.loading).toBe(true);
-                expect(prevProps.data!.variables).toEqual(variables2);
-                expect(prevProps.data!.allPeople).toBe(undefined);
-                expect(prevProps.data!.error).toBe(undefined);
-                expect(prevProps.data!.networkStatus).toBe(NetworkStatus.setVariables);
-                expect(this.props.data!.loading).toBe(false);
-                expect(this.props.data!.variables).toEqual(variables2);
-                expect(this.props.data!.allPeople).toEqual(data2.allPeople);
-                expect(this.props.data!.error).toBe(undefined);
-                expect(this.props.data!.networkStatus).toBe(NetworkStatus.ready);
-                done = true;
-                break;
+      let done = false;
+      const Container = graphql<Vars, Data, Vars>(query, {
+        options: (props) => ({
+          variables: props,
+          notifyOnNetworkStatusChange: true,
+        }),
+      })(
+        class extends React.Component<ChildProps<Vars, Data, Vars>> {
+          componentDidUpdate(prevProps: ChildProps<Vars, Data, Vars>) {
+            try {
+              // variables changed, new query is loading, but old data is still there
+              switch (++count) {
+                case 1:
+                  expect(prevProps.data!.loading).toBe(true);
+                  expect(prevProps.data!.variables).toEqual(variables1);
+                  expect(prevProps.data!.allPeople).toBe(undefined);
+                  expect(prevProps.data!.error).toBe(undefined);
+                  expect(prevProps.data!.networkStatus).toBe(
+                    NetworkStatus.loading
+                  );
+                  expect(this.props.data!.loading).toBe(false);
+                  expect(this.props.data!.variables).toEqual(variables1);
+                  expect(this.props.data!.allPeople).toEqual(data1.allPeople);
+                  expect(this.props.data!.error).toBe(undefined);
+                  expect(this.props.data!.networkStatus).toBe(
+                    NetworkStatus.ready
+                  );
+                  break;
+                case 2:
+                  expect(prevProps.data!.loading).toBe(false);
+                  expect(prevProps.data!.variables).toEqual(variables1);
+                  expect(prevProps.data!.allPeople).toEqual(data1.allPeople);
+                  expect(prevProps.data!.error).toBe(undefined);
+                  expect(this.props.data!.loading).toBe(true);
+                  expect(this.props.data!.variables).toEqual(variables2);
+                  expect(this.props.data!.allPeople).toBe(undefined);
+                  expect(this.props.data!.error).toBe(undefined);
+                  expect(this.props.data!.networkStatus).toBe(
+                    NetworkStatus.setVariables
+                  );
+                  break;
+                case 3:
+                  expect(prevProps.data!.loading).toBe(true);
+                  expect(prevProps.data!.variables).toEqual(variables2);
+                  expect(prevProps.data!.allPeople).toBe(undefined);
+                  expect(prevProps.data!.error).toBe(undefined);
+                  expect(prevProps.data!.networkStatus).toBe(
+                    NetworkStatus.setVariables
+                  );
+                  expect(this.props.data!.loading).toBe(false);
+                  expect(this.props.data!.variables).toEqual(variables2);
+                  expect(this.props.data!.allPeople).toEqual(data2.allPeople);
+                  expect(this.props.data!.error).toBe(undefined);
+                  expect(this.props.data!.networkStatus).toBe(
+                    NetworkStatus.ready
+                  );
+                  done = true;
+                  break;
+              }
+            } catch (err) {
+              reject(err);
             }
-          } catch (err) {
-            reject(err);
+          }
+          render() {
+            return null;
           }
         }
-        render() {
-          return null;
-        }
-      }
-    );
+      );
 
-    class ChangingProps extends React.Component<any, any> {
-      state = { first: 1 };
+      class ChangingProps extends React.Component<any, any> {
+        state = { first: 1 };
 
-      componentDidMount() {
-        setTimeout(() => {
-          this.setState({ first: 2 });
-        }, 50);
-      }
+        componentDidMount() {
+          setTimeout(() => {
+            this.setState({ first: 2 });
+          }, 50);
+        }
 
-      render() {
-        return <Container first={this.state.first} />;
+        render() {
+          return <Container first={this.state.first} />;
+        }
       }
-    }
 
-    render(
-      <ApolloProvider client={client}>
-        <ChangingProps />
-      </ApolloProvider>
-    );
+      render(
+        <ApolloProvider client={client}>
+          <ChangingProps />
+        </ApolloProvider>
+      );
 
-    waitFor(() => expect(done).toBe(true)).then(resolve, reject);
-  });
+      waitFor(() => expect(done).toBe(true)).then(resolve, reject);
+    }
+  );
 
-  itAsync('resets the loading state after a refetched query', (resolve, reject) => {
-    const query: DocumentNode = gql`
-      query people {
-        allPeople(first: 1) {
-          people {
-            name
+  itAsync(
+    "resets the loading state after a refetched query",
+    (resolve, reject) => {
+      const query: DocumentNode = gql`
+        query people {
+          allPeople(first: 1) {
+            people {
+              name
+            }
           }
         }
-      }
-    `;
-    const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
-    const data2 = { allPeople: { people: [{ name: 'Leia Skywalker' }] } };
+      `;
+      const data = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
+      const data2 = { allPeople: { people: [{ name: "Leia Skywalker" }] } };
 
-    type Data = typeof data;
+      type Data = typeof data;
 
-    const link = mockSingleLink(
-      { request: { query }, result: { data } },
-      { request: { query }, result: { data: data2 } }
-    );
-    const client = new ApolloClient({
-      link,
-      cache: new Cache({ addTypename: false })
-    });
+      const link = mockSingleLink(
+        { request: { query }, result: { data } },
+        { request: { query }, result: { data: data2 } }
+      );
+      const client = new ApolloClient({
+        link,
+        cache: new Cache({ addTypename: false }),
+      });
 
-    let count = 0;
-    const Container = graphql<{}, Data>(query, {
-      options: { notifyOnNetworkStatusChange: true }
-    })(
-      class extends React.Component<ChildProps<{}, Data>> {
-        componentDidUpdate() {
-          const { data } = this.props;
-          switch (count++) {
-            case 0:
-              expect(data!.networkStatus).toBe(7);
-              // this isn't reloading fully
-              setTimeout(() => {
-                data!.refetch();
-              });
-              break;
-            case 1:
-              expect(data!.loading).toBeTruthy();
-              expect(data!.networkStatus).toBe(NetworkStatus.refetch);
-              expect(data!.allPeople).toEqual(data!.allPeople);
-              break;
-            case 2:
-              expect(data!.loading).toBeFalsy();
-              expect(data!.networkStatus).toBe(7);
-              expect(data!.allPeople).toEqual(data2.allPeople);
-              break;
-            default:
-              reject(new Error('Too many props updates'));
+      let count = 0;
+      const Container = graphql<{}, Data>(query, {
+        options: { notifyOnNetworkStatusChange: true },
+      })(
+        class extends React.Component<ChildProps<{}, Data>> {
+          componentDidUpdate() {
+            const { data } = this.props;
+            switch (count++) {
+              case 0:
+                expect(data!.networkStatus).toBe(7);
+                // this isn't reloading fully
+                setTimeout(() => {
+                  data!.refetch();
+                });
+                break;
+              case 1:
+                expect(data!.loading).toBeTruthy();
+                expect(data!.networkStatus).toBe(NetworkStatus.refetch);
+                expect(data!.allPeople).toEqual(data!.allPeople);
+                break;
+              case 2:
+                expect(data!.loading).toBeFalsy();
+                expect(data!.networkStatus).toBe(7);
+                expect(data!.allPeople).toEqual(data2.allPeople);
+                break;
+              default:
+                reject(new Error("Too many props updates"));
+            }
           }
-        }
 
-        render() {
-          return null;
+          render() {
+            return null;
+          }
         }
-      }
-    );
+      );
 
-    render(
-      <ApolloProvider client={client}>
-        <Container />
-      </ApolloProvider>
-    );
+      render(
+        <ApolloProvider client={client}>
+          <Container />
+        </ApolloProvider>
+      );
 
-    waitFor(() => {
-      expect(count).toBe(3)
-    }).then(resolve, reject);
-  });
+      waitFor(() => {
+        expect(count).toBe(3);
+      }).then(resolve, reject);
+    }
+  );
 
-  it('correctly sets loading state on remounted network-only query', async () => {
+  it("correctly sets loading state on remounted network-only query", async () => {
     const query: DocumentNode = gql`
       query pollingPeople {
         allPeople(first: 1) {
@@ -339,7 +367,7 @@ describe('[queries] loading', () => {
         }
       }
     `;
-    const data = { allPeople: { people: [{ name: 'Darth Skywalker' }] } };
+    const data = { allPeople: { people: [{ name: "Darth Skywalker" }] } };
     type Data = typeof data;
 
     const link = mockSingleLink({
@@ -348,16 +376,16 @@ describe('[queries] loading', () => {
       newData: () => ({
         data: {
           allPeople: {
-            people: [{ name: `Darth Skywalker - ${Math.random()}` }]
-          }
-        }
-      })
+            people: [{ name: `Darth Skywalker - ${Math.random()}` }],
+          },
+        },
+      }),
     });
 
     const client = new ApolloClient({
       link,
       cache: new Cache({ addTypename: false }),
-      queryDeduplication: false
+      queryDeduplication: false,
     });
 
     let count = 0;
@@ -365,7 +393,7 @@ describe('[queries] loading', () => {
     const usedFetchPolicies: WatchQueryFetchPolicy[] = [];
     const Container = graphql<{}, Data>(query, {
       options: {
-        fetchPolicy: 'network-only',
+        fetchPolicy: "network-only",
         nextFetchPolicy(currentFetchPolicy, info) {
           if (info.reason === "variables-changed") {
             return info.initialFetchPolicy;
@@ -375,7 +403,7 @@ describe('[queries] loading', () => {
             return "cache-first";
           }
           return currentFetchPolicy;
-        }
+        },
       },
     })(
       class extends React.Component<ChildProps<{}, Data>> {
@@ -415,300 +443,319 @@ describe('[queries] loading', () => {
 
     render(App);
 
-    await waitFor(() => {
-      expect(usedFetchPolicies).toEqual([
-        "network-only",
-        "network-only",
-        "cache-first",
-      ]);
-    }, { interval: 1 });
-    await waitFor(() => {
+    await waitFor(
+      () => {
+        expect(usedFetchPolicies).toEqual([
+          "network-only",
+          "network-only",
+          "cache-first",
+        ]);
+      },
+      { interval: 1 }
+    );
+    await waitFor(
+      () => {
         expect(count).toBe(5);
-    }, { interval: 1 });
+      },
+      { interval: 1 }
+    );
   });
 
-  itAsync('correctly sets loading state on remounted component with changed variables', (resolve, reject) => {
-    const query: DocumentNode = gql`
-      query remount($first: Int) {
-        allPeople(first: $first) {
-          people {
-            name
+  itAsync(
+    "correctly sets loading state on remounted component with changed variables",
+    (resolve, reject) => {
+      const query: DocumentNode = gql`
+        query remount($first: Int) {
+          allPeople(first: $first) {
+            people {
+              name
+            }
           }
         }
+      `;
+
+      interface Data {
+        allPeople: {
+          people: { name: string }[];
+        };
       }
-    `;
+      const data = { allPeople: null };
+      const variables = { first: 1 };
+      const variables2 = { first: 2 };
 
-    interface Data {
-      allPeople: {
-        people: { name: string }[];
-      };
-    }
-    const data = { allPeople: null };
-    const variables = { first: 1 };
-    const variables2 = { first: 2 };
+      type Vars = typeof variables;
 
-    type Vars = typeof variables;
+      const link = mockSingleLink(
+        { request: { query, variables }, result: { data }, delay: 10 },
+        {
+          request: { query, variables: variables2 },
+          result: { data },
+          delay: 10,
+        }
+      );
+      const client = new ApolloClient({
+        link,
+        cache: new Cache({ addTypename: false }),
+      });
+      let renderFn: (num: number) => React.ReactElement<any>,
+        count = 0;
+      const testFailures: any[] = [];
 
-    const link = mockSingleLink(
-      { request: { query, variables }, result: { data }, delay: 10 },
-      {
-        request: { query, variables: variables2 },
-        result: { data },
-        delay: 10
+      interface Props {
+        first: number;
       }
-    );
-    const client = new ApolloClient({
-      link,
-      cache: new Cache({ addTypename: false })
-    });
-    let renderFn: (num: number) => React.ReactElement<any>,
-      count = 0;
-    const testFailures: any[] = [];
-
-    interface Props {
-      first: number;
-    }
-    const Container = graphql<Props, Data, Vars>(query, {
-      options: ({ first }) => ({ variables: { first } })
-    })(
-      class extends React.Component<ChildProps<Props, Data, Vars>> {
-        componentDidUpdate() {
-          try {
-            if (count === 0) {
-              // has data
-              unmount();
-              setTimeout(() => {
-                render(renderFn(2));
-              }, 5);
-            }
+      const Container = graphql<Props, Data, Vars>(query, {
+        options: ({ first }) => ({ variables: { first } }),
+      })(
+        class extends React.Component<ChildProps<Props, Data, Vars>> {
+          componentDidUpdate() {
+            try {
+              if (count === 0) {
+                // has data
+                unmount();
+                setTimeout(() => {
+                  render(renderFn(2));
+                }, 5);
+              }
 
-            if (count === 2) {
-              // remounted data after fetch
-              expect(this.props.data!.loading).toBeFalsy();
+              if (count === 2) {
+                // remounted data after fetch
+                expect(this.props.data!.loading).toBeFalsy();
+              }
+              count++;
+            } catch (e) {
+              testFailures.push(e);
             }
-            count++;
-          } catch (e) {
-            testFailures.push(e);
           }
-        }
 
-        render() {
-          try {
-            if (count === 1) {
-              expect(this.props.data!.loading).toBeTruthy(); // on remount
-              count++;
+          render() {
+            try {
+              if (count === 1) {
+                expect(this.props.data!.loading).toBeTruthy(); // on remount
+                count++;
+              }
+            } catch (e) {
+              testFailures.push(e);
             }
-          } catch (e) {
-            testFailures.push(e);
-          }
 
-          return null;
+            return null;
+          }
         }
-      }
-    );
+      );
 
-    renderFn = (first: number) => (
-      <ApolloProvider client={client}>
-        <Container first={first} />
-      </ApolloProvider>
-    );
-    const { unmount } = render(renderFn(1));
-    waitFor(() => {
-      if (testFailures.length > 0) {
-        throw testFailures[0];
-      }
-      expect(count).toBe(3);
-    }).then(resolve, reject);
-  });
+      renderFn = (first: number) => (
+        <ApolloProvider client={client}>
+          <Container first={first} />
+        </ApolloProvider>
+      );
+      const { unmount } = render(renderFn(1));
+      waitFor(() => {
+        if (testFailures.length > 0) {
+          throw testFailures[0];
+        }
+        expect(count).toBe(3);
+      }).then(resolve, reject);
+    }
+  );
 
-  itAsync('correctly sets loading state on remounted component with changed variables (alt)', (resolve, reject) => {
-    const query: DocumentNode = gql`
-      query remount($name: String) {
-        allPeople(name: $name) {
-          people {
-            name
+  itAsync(
+    "correctly sets loading state on remounted component with changed variables (alt)",
+    (resolve, reject) => {
+      const query: DocumentNode = gql`
+        query remount($name: String) {
+          allPeople(name: $name) {
+            people {
+              name
+            }
           }
         }
-      }
-    `;
+      `;
 
-    interface Data {
-      allPeople: {
-        people: { name: string }[];
-      };
-    }
-    const data = { allPeople: null };
-    const variables = { name: 'does-not-exist' };
-    const variables2 = { name: 'nothing-either' };
+      interface Data {
+        allPeople: {
+          people: { name: string }[];
+        };
+      }
+      const data = { allPeople: null };
+      const variables = { name: "does-not-exist" };
+      const variables2 = { name: "nothing-either" };
 
-    type Vars = typeof variables;
+      type Vars = typeof variables;
 
-    const link = mockSingleLink(
-      { request: { query, variables }, result: { data } },
-      {
-        request: { query, variables: variables2 },
-        result: { data }
-      }
-    );
-    const client = new ApolloClient({
-      link,
-      cache: new Cache({ addTypename: false })
-    });
+      const link = mockSingleLink(
+        { request: { query, variables }, result: { data } },
+        {
+          request: { query, variables: variables2 },
+          result: { data },
+        }
+      );
+      const client = new ApolloClient({
+        link,
+        cache: new Cache({ addTypename: false }),
+      });
 
-    let count = 0;
+      let count = 0;
 
-    const Container = graphql<Vars, Data, Vars>(query)(
-      class extends React.Component<ChildProps<Vars, Data, Vars>> {
-        render() {
-          const { loading } = this.props.data!;
-          if (count === 0) expect(loading).toBeTruthy();
-          if (count === 1) {
-            expect(loading).toBeFalsy();
-            setTimeout(() => {
-              unmount();
-              render(
-                <ApolloProvider client={client}>
-                  <Container {...variables2} />
-                </ApolloProvider>
-              );
-            }, 0);
-          }
-          if (count === 2) expect(loading).toBeTruthy();
-          if (count === 3) {
-            expect(loading).toBeFalsy();
-          }
-          count++;
-          return null;
+      const Container = graphql<Vars, Data, Vars>(query)(
+        class extends React.Component<ChildProps<Vars, Data, Vars>> {
+          render() {
+            const { loading } = this.props.data!;
+            if (count === 0) expect(loading).toBeTruthy();
+            if (count === 1) {
+              expect(loading).toBeFalsy();
+              setTimeout(() => {
+                unmount();
+                render(
+                  <ApolloProvider client={client}>
+                    <Container {...variables2} />
+                  </ApolloProvider>
+                );
+              }, 0);
+            }
+            if (count === 2) expect(loading).toBeTruthy();
+            if (count === 3) {
+              expect(loading).toBeFalsy();
+            }
+            count++;
+            return null;
+          }
         }
-      }
-    );
+      );
 
-    const { unmount } = render(
-      <ApolloProvider client={client}>
-        <Container {...variables} />
-      </ApolloProvider>
-    );
+      const { unmount } = render(
+        <ApolloProvider client={client}>
+          <Container {...variables} />
+        </ApolloProvider>
+      );
 
-    waitFor(() => expect(count).toBe(4)).then(resolve, reject);
-  });
+      waitFor(() => expect(count).toBe(4)).then(resolve, reject);
+    }
+  );
 
-  itAsync('correctly sets loading state on component with changed variables and unchanged result', (resolve, reject) => {
-    const query: DocumentNode = gql`
-      query remount($first: Int) {
-        allPeople(first: $first) {
-          people {
-            name
+  itAsync(
+    "correctly sets loading state on component with changed variables and unchanged result",
+    (resolve, reject) => {
+      const query: DocumentNode = gql`
+        query remount($first: Int) {
+          allPeople(first: $first) {
+            people {
+              name
+            }
           }
         }
+      `;
+      interface Data {
+        allPeople: {
+          people: { name: string }[];
+        };
       }
-    `;
-    interface Data {
-      allPeople: {
-        people: { name: string }[];
-      };
-    }
 
-    const data = { allPeople: null };
-    const variables = { first: 1 };
-    const variables2 = { first: 2 };
+      const data = { allPeople: null };
+      const variables = { first: 1 };
+      const variables2 = { first: 2 };
 
-    type Vars = typeof variables;
-    const link = mockSingleLink(
-      { request: { query, variables }, result: { data } },
-      {
-        request: { query, variables: variables2 },
-        result: { data }
+      type Vars = typeof variables;
+      const link = mockSingleLink(
+        { request: { query, variables }, result: { data } },
+        {
+          request: { query, variables: variables2 },
+          result: { data },
+        }
+      );
+      const client = new ApolloClient({
+        link,
+        cache: new Cache({ addTypename: false }),
+      });
+      let count = 0;
+
+      interface Props extends Vars {
+        setFirst: (first: number) => void;
       }
-    );
-    const client = new ApolloClient({
-      link,
-      cache: new Cache({ addTypename: false })
-    });
-    let count = 0;
 
-    interface Props extends Vars {
-      setFirst: (first: number) => void;
-    }
+      const connect = (
+        component: React.ComponentType<
+          React.PropsWithChildren<React.PropsWithChildren<Props>>
+        >
+      ): React.ComponentType<
+        React.PropsWithChildren<React.PropsWithChildren<{}>>
+      > => {
+        return class extends React.Component<{}, { first: number }> {
+          constructor(props: {}) {
+            super(props);
 
-    const connect = (
-      component: React.ComponentType<React.PropsWithChildren<React.PropsWithChildren<Props>>>
-    ): React.ComponentType<React.PropsWithChildren<React.PropsWithChildren<{}>>> => {
-      return class extends React.Component<{}, { first: number }> {
-        constructor(props: {}) {
-          super(props);
-
-          this.state = {
-            first: 1
-          };
-          this.setFirst = this.setFirst.bind(this);
-        }
+            this.state = {
+              first: 1,
+            };
+            this.setFirst = this.setFirst.bind(this);
+          }
 
-        setFirst(first: number) {
-          this.setState({ first });
-        }
+          setFirst(first: number) {
+            this.setState({ first });
+          }
 
-        render() {
-          return React.createElement(component, {
-            first: this.state.first,
-            setFirst: this.setFirst
-          });
-        }
+          render() {
+            return React.createElement(component, {
+              first: this.state.first,
+              setFirst: this.setFirst,
+            });
+          }
+        };
       };
-    };
 
-    const Container = connect(
-      graphql<Props, Data, Vars>(query, {
-        options: ({ first }) => ({ variables: { first } })
-      })(
-        class extends React.Component<ChildProps<Props, Data, Vars>> {
-          render() {
-            try {
-              switch (count) {
-                case 0:
-                  expect(this.props.data!.loading).toBe(true);
-                  expect(this.props.data!.allPeople).toBeUndefined();
-                  break;
-                case 1:
-                  expect(this.props.data!.loading).toBe(false);
-                  expect(this.props.data!.allPeople).toBe(data.allPeople);
-                  setTimeout(() => {
-                    this.props.setFirst(2);
-                  });
-                  break;
-                case 2:
-                  expect(this.props.data!.loading).toBe(true); // on variables change
-                  expect(this.props.data!.allPeople).toBeUndefined();
-                  break;
-                case 4:
-                  // new data after fetch
-                  expect(this.props.data!.loading).toBe(false);
-                  expect(this.props.data!.allPeople).toBe(data.allPeople);
-                  break;
+      const Container = connect(
+        graphql<Props, Data, Vars>(query, {
+          options: ({ first }) => ({ variables: { first } }),
+        })(
+          class extends React.Component<ChildProps<Props, Data, Vars>> {
+            render() {
+              try {
+                switch (count) {
+                  case 0:
+                    expect(this.props.data!.loading).toBe(true);
+                    expect(this.props.data!.allPeople).toBeUndefined();
+                    break;
+                  case 1:
+                    expect(this.props.data!.loading).toBe(false);
+                    expect(this.props.data!.allPeople).toBe(data.allPeople);
+                    setTimeout(() => {
+                      this.props.setFirst(2);
+                    });
+                    break;
+                  case 2:
+                    expect(this.props.data!.loading).toBe(true); // on variables change
+                    expect(this.props.data!.allPeople).toBeUndefined();
+                    break;
+                  case 4:
+                    // new data after fetch
+                    expect(this.props.data!.loading).toBe(false);
+                    expect(this.props.data!.allPeople).toBe(data.allPeople);
+                    break;
+                }
+              } catch (err) {
+                reject(err);
               }
-            } catch (err) {
-              reject(err);
-            }
 
-            count++;
+              count++;
 
-            return null;
+              return null;
+            }
           }
-        }
-      )
-    );
+        )
+      );
 
-    render(
-      <ApolloProvider client={client}>
-        <Container />
-      </ApolloProvider>
-    );
+      render(
+        <ApolloProvider client={client}>
+          <Container />
+        </ApolloProvider>
+      );
 
-    waitFor(() => expect(count).toBe(4)).then(resolve, reject);
-  });
+      waitFor(() => expect(count).toBe(4)).then(resolve, reject);
+    }
+  );
 
   itAsync(
-    'correctly sets loading state on component with changed variables, ' +
-      'unchanged result, and network-only',
+    "correctly sets loading state on component with changed variables, " +
+      "unchanged result, and network-only",
     (resolve, reject) => {
       const query: DocumentNode = gql`
         query remount($first: Int) {
@@ -725,7 +772,7 @@ describe('[queries] loading', () => {
         };
       }
 
-      const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
+      const data = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
       const variables = { first: 1 };
       const variables2 = { first: 2 };
 
@@ -735,12 +782,12 @@ describe('[queries] loading', () => {
         {
           request: { query, variables: variables2 },
           result: { data },
-          delay: 10
+          delay: 10,
         }
       );
       const client = new ApolloClient({
         link,
-        cache: new Cache({ addTypename: false })
+        cache: new Cache({ addTypename: false }),
       });
       let count = 0;
 
@@ -749,14 +796,18 @@ describe('[queries] loading', () => {
       }
 
       const connect = (
-        component: React.ComponentType<React.PropsWithChildren<React.PropsWithChildren<Props>>>
-      ): React.ComponentType<React.PropsWithChildren<React.PropsWithChildren<{}>>> => {
+        component: React.ComponentType<
+          React.PropsWithChildren<React.PropsWithChildren<Props>>
+        >
+      ): React.ComponentType<
+        React.PropsWithChildren<React.PropsWithChildren<{}>>
+      > => {
         return class extends React.Component<{}, { first: number }> {
           constructor(props: {}) {
             super(props);
 
             this.state = {
-              first: 1
+              first: 1,
             };
             this.setFirst = this.setFirst.bind(this);
           }
@@ -768,7 +819,7 @@ describe('[queries] loading', () => {
           render() {
             return React.createElement(component, {
               first: this.state.first,
-              setFirst: this.setFirst
+              setFirst: this.setFirst,
             });
           }
         };
@@ -778,8 +829,8 @@ describe('[queries] loading', () => {
         graphql<Props, Data, Vars>(query, {
           options: ({ first }) => ({
             variables: { first },
-            fetchPolicy: 'network-only'
-          })
+            fetchPolicy: "network-only",
+          }),
         })(
           class extends React.Component<ChildProps<Props, Data, Vars>> {
             render() {
diff --git a/src/react/hoc/__tests__/queries/observableQuery.test.tsx b/src/react/hoc/__tests__/queries/observableQuery.test.tsx
index 71ad09a5b33..dd05663aac2 100644
--- a/src/react/hoc/__tests__/queries/observableQuery.test.tsx
+++ b/src/react/hoc/__tests__/queries/observableQuery.test.tsx
@@ -1,19 +1,19 @@
-import React from 'react';
-import userEvent from '@testing-library/user-event';
-import { render, waitFor, screen } from '@testing-library/react';
-import gql from 'graphql-tag';
-import { DocumentNode } from 'graphql';
-
-import { ApolloClient } from '../../../../core';
-import { ApolloProvider } from '../../../context';
-import { InMemoryCache as Cache } from '../../../../cache';
-import { itAsync, mockSingleLink } from '../../../../testing';
-import { graphql } from '../../graphql';
-import { ChildProps } from '../../types';
-
-describe('[queries] observableQuery', () => {
+import React from "react";
+import userEvent from "@testing-library/user-event";
+import { render, waitFor, screen } from "@testing-library/react";
+import gql from "graphql-tag";
+import { DocumentNode } from "graphql";
+
+import { ApolloClient } from "../../../../core";
+import { ApolloProvider } from "../../../context";
+import { InMemoryCache as Cache } from "../../../../cache";
+import { itAsync, mockSingleLink } from "../../../../testing";
+import { graphql } from "../../graphql";
+import { ChildProps } from "../../types";
+
+describe("[queries] observableQuery", () => {
   // observableQuery
-  it('will recycle `ObservableQuery`s when re-rendering the entire tree', async () => {
+  it("will recycle `ObservableQuery`s when re-rendering the entire tree", async () => {
     const query: DocumentNode = gql`
       query people {
         allPeople(first: 1) {
@@ -23,7 +23,7 @@ describe('[queries] observableQuery', () => {
         }
       }
     `;
-    const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
+    const data = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
     type Data = typeof data;
 
     const link = mockSingleLink(
@@ -32,7 +32,7 @@ describe('[queries] observableQuery', () => {
     );
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     let count = 0;
@@ -41,32 +41,30 @@ describe('[queries] observableQuery', () => {
       const keys = Array.from(
         ((client as any).queryManager as any).queries.keys()
       );
-      await waitFor(() => expect(keys).toEqual(['1']), { interval: 1 });
+      await waitFor(() => expect(keys).toEqual(["1"]), { interval: 1 });
     };
 
     const assert2 = async () => {
       const keys = Array.from(
         ((client as any).queryManager as any).queries.keys()
       );
-      await waitFor(() => expect(keys).toEqual(['1']), { interval: 1 });
+      await waitFor(() => expect(keys).toEqual(["1"]), { interval: 1 });
     };
 
     let done = false;
     const Container = graphql<{}, Data>(query, {
-      options: { fetchPolicy: 'cache-and-network' }
+      options: { fetchPolicy: "cache-and-network" },
     })(
       class extends React.Component<ChildProps<{}, Data>> {
         async componentDidUpdate() {
           if (count === 2) {
             expect(this.props.data!.loading).toBeFalsy();
-            expect(this.props.data!.allPeople).toEqual(
-              data.allPeople
-            );
+            expect(this.props.data!.allPeople).toEqual(data.allPeople);
 
             // ensure first assertion and umount tree
             await assert1();
 
-            userEvent.click(screen.getByText('Break things'));
+            userEvent.click(screen.getByText("Break things"));
 
             // ensure cleanup
             await assert2();
@@ -87,9 +85,7 @@ describe('[queries] observableQuery', () => {
           // be present;
           if (count === 3) {
             expect(this.props.data!.loading).toBeFalsy();
-            expect(this.props.data!.allPeople).toEqual(
-              data.allPeople
-            );
+            expect(this.props.data!.allPeople).toEqual(data.allPeople);
           }
           count++;
           return null;
@@ -109,7 +105,7 @@ describe('[queries] observableQuery', () => {
 
     class AppWrapper extends React.Component<{}, { renderRedirect: boolean }> {
       state = {
-        renderRedirect: false
+        renderRedirect: false,
       };
 
       goToRedirect = () => {
@@ -147,129 +143,131 @@ describe('[queries] observableQuery', () => {
     });
   });
 
-  itAsync("will recycle `ObservableQuery`s when re-rendering a portion of the tree but not return stale data if variables don't match", (resolve, reject) => {
-    const query: DocumentNode = gql`
-      query people($first: Int!) {
-        allPeople(first: $first) {
-          people {
-            name
-            friends(id: $first) {
+  itAsync(
+    "will recycle `ObservableQuery`s when re-rendering a portion of the tree but not return stale data if variables don't match",
+    (resolve, reject) => {
+      const query: DocumentNode = gql`
+        query people($first: Int!) {
+          allPeople(first: $first) {
+            people {
               name
+              friends(id: $first) {
+                name
+              }
             }
           }
         }
-      }
-    `;
-    const variables1 = { first: 1 };
-    const variables2 = { first: 2 };
-    const data = {
-      allPeople: {
-        people: [{ name: 'Luke Skywalker', friends: [{ name: 'r2d2' }] }]
-      }
-    };
-    const data2 = {
-      allPeople: {
-        people: [{ name: 'Leia Skywalker', friends: [{ name: 'luke' }] }]
-      }
-    };
+      `;
+      const variables1 = { first: 1 };
+      const variables2 = { first: 2 };
+      const data = {
+        allPeople: {
+          people: [{ name: "Luke Skywalker", friends: [{ name: "r2d2" }] }],
+        },
+      };
+      const data2 = {
+        allPeople: {
+          people: [{ name: "Leia Skywalker", friends: [{ name: "luke" }] }],
+        },
+      };
 
-    type Data = typeof data;
-    type Vars = typeof variables1;
+      type Data = typeof data;
+      type Vars = typeof variables1;
 
-    const link = mockSingleLink(
-      { request: { query, variables: variables1 }, result: { data } },
-      { request: { query, variables: variables2 }, result: { data: data2 } }
-    );
-    const client = new ApolloClient({
-      link,
-      cache: new Cache({ addTypename: false })
-    });
-    let remount: any;
+      const link = mockSingleLink(
+        { request: { query, variables: variables1 }, result: { data } },
+        { request: { query, variables: variables2 }, result: { data: data2 } }
+      );
+      const client = new ApolloClient({
+        link,
+        cache: new Cache({ addTypename: false }),
+      });
+      let remount: any;
+
+      const Container = graphql<Vars, Data, Vars>(query)(
+        class extends React.Component<ChildProps<Vars, Data, Vars>> {
+          render() {
+            try {
+              const { variables, loading, allPeople } = this.props.data!;
+              // first variable render
+              if (variables.first === 1) {
+                if (loading) expect(allPeople).toBeUndefined();
+                if (!loading) {
+                  expect(allPeople).toEqual(data.allPeople);
+                }
+              }
 
-    const Container = graphql<Vars, Data, Vars>(query)(
-      class extends React.Component<ChildProps<Vars, Data, Vars>> {
-        render() {
-          try {
-            const { variables, loading, allPeople } = this.props.data!;
-            // first variable render
-            if (variables.first === 1) {
-              if (loading) expect(allPeople).toBeUndefined();
-              if (!loading) {
-                expect(allPeople).toEqual(data.allPeople);
+              if (variables.first === 2) {
+                // second variables render
+                if (loading) expect(allPeople).toBeUndefined();
+                if (!loading) expect(allPeople).toEqual(data2.allPeople);
               }
+            } catch (e) {
+              reject(e);
             }
 
-            if (variables.first === 2) {
-              // second variables render
-              if (loading) expect(allPeople).toBeUndefined();
-              if (!loading)
-                expect(allPeople).toEqual(data2.allPeople);
-            }
-          } catch (e) {
-            reject(e);
+            return null;
           }
-
-          return null;
         }
-      }
-    );
-
-    class Remounter extends React.Component<
-      { render: typeof Container },
-      { showChildren: boolean; variables: Vars }
-    > {
-      state = {
-        showChildren: true,
-        variables: variables1
-      };
+      );
 
-      componentDidMount() {
-        remount = () => {
-          this.setState({ showChildren: false }, () => {
-            setTimeout(() => {
-              this.setState({
-                showChildren: true,
-                variables: variables2
-              });
-            }, 10);
-          });
+      class Remounter extends React.Component<
+        { render: typeof Container },
+        { showChildren: boolean; variables: Vars }
+      > {
+        state = {
+          showChildren: true,
+          variables: variables1,
         };
-      }
 
-      render() {
-        if (!this.state.showChildren) return null;
-        const Thing = this.props.render;
-        return <Thing first={this.state.variables.first} />;
+        componentDidMount() {
+          remount = () => {
+            this.setState({ showChildren: false }, () => {
+              setTimeout(() => {
+                this.setState({
+                  showChildren: true,
+                  variables: variables2,
+                });
+              }, 10);
+            });
+          };
+        }
+
+        render() {
+          if (!this.state.showChildren) return null;
+          const Thing = this.props.render;
+          return <Thing first={this.state.variables.first} />;
+        }
       }
-    }
 
-    // the initial mount fires off the query
-    // the same as episode id = 1
-    render(
-      <ApolloProvider client={client}>
-        <Remounter render={Container} />
-      </ApolloProvider>
-    );
+      // the initial mount fires off the query
+      // the same as episode id = 1
+      render(
+        <ApolloProvider client={client}>
+          <Remounter render={Container} />
+        </ApolloProvider>
+      );
 
-    // after the initial data has been returned
-    // the user navigates to a different page
-    // but the query is recycled
-    let done = false;
-    setTimeout(() => {
-      // move to the "home" page from the "episode" page
-      remount();
+      // after the initial data has been returned
+      // the user navigates to a different page
+      // but the query is recycled
+      let done = false;
       setTimeout(() => {
-        // move to a new "epsiode" page
-        // epsiode id = 2
-        // wait to verify the data isn't stale then end
-        done = true;
-      }, 20);
-    }, 5);
-
-    return waitFor(() => expect(done).toBeTruthy()).then(resolve, reject);
-  });
+        // move to the "home" page from the "episode" page
+        remount();
+        setTimeout(() => {
+          // move to a new "epsiode" page
+          // epsiode id = 2
+          // wait to verify the data isn't stale then end
+          done = true;
+        }, 20);
+      }, 5);
+
+      return waitFor(() => expect(done).toBeTruthy()).then(resolve, reject);
+    }
+  );
 
-  it('not overly rerender', async () => {
+  it("not overly rerender", async () => {
     const query: DocumentNode = gql`
       query people($first: Int!) {
         allPeople(first: $first) {
@@ -286,20 +284,20 @@ describe('[queries] observableQuery', () => {
     const variables = { first: 1 };
     const data = {
       allPeople: {
-        people: [{ name: 'Luke Skywalker', friends: [{ name: 'r2d2' }] }]
-      }
+        people: [{ name: "Luke Skywalker", friends: [{ name: "r2d2" }] }],
+      },
     };
     type Data = typeof data;
     type Vars = typeof variables;
 
     const link = mockSingleLink({
       request: { query, variables },
-      result: { data }
+      result: { data },
     });
 
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
     let remount: any;
 
@@ -335,7 +333,7 @@ describe('[queries] observableQuery', () => {
     > {
       state = {
         showChildren: true,
-        variables
+        variables,
       };
 
       componentDidMount() {
@@ -382,93 +380,96 @@ describe('[queries] observableQuery', () => {
     });
   });
 
-  itAsync('does rerender if query returns differnt result', (resolve, reject) => {
-    const query: DocumentNode = gql`
-      query people($first: Int!) {
-        allPeople(first: $first) {
-          people {
-            name
-            friends(id: $first) {
+  itAsync(
+    "does rerender if query returns differnt result",
+    (resolve, reject) => {
+      const query: DocumentNode = gql`
+        query people($first: Int!) {
+          allPeople(first: $first) {
+            people {
               name
+              friends(id: $first) {
+                name
+              }
             }
           }
         }
-      }
-    `;
-
-    const variables = { first: 1 };
-    const dataOne = {
-      allPeople: {
-        people: [{ name: 'Luke Skywalker', friends: [{ name: 'r2d2' }] }]
-      }
-    };
-    const dataTwo = {
-      allPeople: {
-        people: [
-          { name: 'Luke Skywalker', friends: [{ name: 'Leia Skywalker' }] }
-        ]
-      }
-    };
-
-    type Data = typeof dataOne;
-    type Vars = typeof variables;
+      `;
 
-    const link = mockSingleLink(
-      {
-        request: { query, variables },
-        result: { data: dataOne }
-      },
-      {
-        request: { query, variables },
-        result: { data: dataTwo }
-      }
-    );
+      const variables = { first: 1 };
+      const dataOne = {
+        allPeople: {
+          people: [{ name: "Luke Skywalker", friends: [{ name: "r2d2" }] }],
+        },
+      };
+      const dataTwo = {
+        allPeople: {
+          people: [
+            { name: "Luke Skywalker", friends: [{ name: "Leia Skywalker" }] },
+          ],
+        },
+      };
 
-    const client = new ApolloClient({
-      link,
-      cache: new Cache({ addTypename: false })
-    });
+      type Data = typeof dataOne;
+      type Vars = typeof variables;
+
+      const link = mockSingleLink(
+        {
+          request: { query, variables },
+          result: { data: dataOne },
+        },
+        {
+          request: { query, variables },
+          result: { data: dataTwo },
+        }
+      );
 
-    let count = 0;
-    const Container = graphql<Vars, Data, Vars>(query)(
-      class extends React.Component<ChildProps<Vars, Data, Vars>> {
-        render() {
-          count++;
-          try {
-            const { loading, allPeople, refetch } = this.props.data!;
-            // first variable render
-            if (count === 1) {
-              expect(loading).toBe(true);
-            }
-            if (count === 2) {
-              expect(loading).toBe(false);
-              expect(allPeople).toEqual(dataOne.allPeople);
-              refetch();
-            }
-            if (count === 3) {
-              expect(loading).toBe(false);
-              expect(allPeople).toEqual(dataTwo.allPeople);
-            }
-            if (count > 3) {
-              throw new Error('too many renders');
+      const client = new ApolloClient({
+        link,
+        cache: new Cache({ addTypename: false }),
+      });
+
+      let count = 0;
+      const Container = graphql<Vars, Data, Vars>(query)(
+        class extends React.Component<ChildProps<Vars, Data, Vars>> {
+          render() {
+            count++;
+            try {
+              const { loading, allPeople, refetch } = this.props.data!;
+              // first variable render
+              if (count === 1) {
+                expect(loading).toBe(true);
+              }
+              if (count === 2) {
+                expect(loading).toBe(false);
+                expect(allPeople).toEqual(dataOne.allPeople);
+                refetch();
+              }
+              if (count === 3) {
+                expect(loading).toBe(false);
+                expect(allPeople).toEqual(dataTwo.allPeople);
+              }
+              if (count > 3) {
+                throw new Error("too many renders");
+              }
+            } catch (e) {
+              reject(e);
             }
-          } catch (e) {
-            reject(e);
-          }
 
-          return null;
+            return null;
+          }
         }
-      }
-    );
+      );
 
-    // the initial mount fires off the query
-    // the same as episode id = 1
-    render(
-      <ApolloProvider client={client}>
-        <Container first={1} />
-      </ApolloProvider>
-    );
+      // the initial mount fires off the query
+      // the same as episode id = 1
+      render(
+        <ApolloProvider client={client}>
+          <Container first={1} />
+        </ApolloProvider>
+      );
 
-    return waitFor(() => expect(count).toBe(3)).then(resolve, reject);
-  });
+      return waitFor(() => expect(count).toBe(3)).then(resolve, reject);
+    }
+  );
 });
diff --git a/src/react/hoc/__tests__/queries/polling.test.tsx b/src/react/hoc/__tests__/queries/polling.test.tsx
index 37786c5d300..70441733341 100644
--- a/src/react/hoc/__tests__/queries/polling.test.tsx
+++ b/src/react/hoc/__tests__/queries/polling.test.tsx
@@ -1,17 +1,17 @@
-import React from 'react';
-import { render, waitFor } from '@testing-library/react';
-import gql from 'graphql-tag';
-import { DocumentNode } from 'graphql';
-
-import { ApolloClient, ApolloLink } from '../../../../core';
-import { ApolloProvider } from '../../../context';
-import { InMemoryCache as Cache } from '../../../../cache';
-import { itAsync, mockSingleLink } from '../../../../testing';
-import { Observable } from '../../../../utilities';
-import { graphql } from '../../graphql';
-import { ChildProps } from '../../types';
-
-describe('[queries] polling', () => {
+import React from "react";
+import { render, waitFor } from "@testing-library/react";
+import gql from "graphql-tag";
+import { DocumentNode } from "graphql";
+
+import { ApolloClient, ApolloLink } from "../../../../core";
+import { ApolloProvider } from "../../../context";
+import { InMemoryCache as Cache } from "../../../../cache";
+import { itAsync, mockSingleLink } from "../../../../testing";
+import { Observable } from "../../../../utilities";
+import { graphql } from "../../graphql";
+import { ChildProps } from "../../types";
+
+describe("[queries] polling", () => {
   let error: typeof console.error;
 
   beforeEach(() => {
@@ -25,7 +25,7 @@ describe('[queries] polling', () => {
   });
 
   // polling
-  itAsync('allows a polling query to be created', (resolve, reject) => {
+  itAsync("allows a polling query to be created", (resolve, reject) => {
     const POLL_INTERVAL = 5;
     const query: DocumentNode = gql`
       query people {
@@ -36,14 +36,14 @@ describe('[queries] polling', () => {
         }
       }
     `;
-    const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
-    const data2 = { allPeople: { people: [{ name: 'Leia Skywalker' }] } };
+    const data = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
+    const data2 = { allPeople: { people: [{ name: "Leia Skywalker" }] } };
     const link = mockSingleLink(
       { request: { query }, result: { data } },
       { request: { query }, result: { data: data2 } },
       { request: { query }, result: { data } }
     );
-    const cache = new Cache({ addTypename: false })
+    const cache = new Cache({ addTypename: false });
     const client = new ApolloClient({
       link,
       cache,
@@ -54,12 +54,12 @@ describe('[queries] polling', () => {
       options: () => ({
         pollInterval: POLL_INTERVAL,
         notifyOnNetworkStatusChange: false,
-      })
+      }),
     })(({ data }) => {
       count++;
       if (count === 4) {
         data!.stopPolling();
-        expect(cache.readQuery({query})).toBeTruthy();
+        expect(cache.readQuery({ query })).toBeTruthy();
         resolve();
       }
       return null;
@@ -74,55 +74,58 @@ describe('[queries] polling', () => {
     waitFor(() => expect(count).toBe(4)).then(resolve, reject);
   });
 
-  itAsync('ensures polling respects no-cache fetchPolicy', (resolve, reject) => {
-    const POLL_INTERVAL = 5;
-    const query: DocumentNode = gql`
-      query people {
-        allPeople(first: 1) {
-          people {
-            name
+  itAsync(
+    "ensures polling respects no-cache fetchPolicy",
+    (resolve, reject) => {
+      const POLL_INTERVAL = 5;
+      const query: DocumentNode = gql`
+        query people {
+          allPeople(first: 1) {
+            people {
+              name
+            }
           }
         }
-      }
-    `;
-    const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
-    const data2 = { allPeople: { people: [{ name: 'Leia Skywalker' }] } };
-    const link = mockSingleLink(
-      { request: { query }, result: { data } },
-      { request: { query }, result: { data: data2 } },
-      { request: { query }, result: { data } }
-    );
-    const cache = new Cache({ addTypename: false })
-    const client = new ApolloClient({
-      link,
-      cache,
-    });
-
-    let count = 0;
-    const Container = graphql(query, {
-      options: () => ({
-        pollInterval: POLL_INTERVAL,
-        notifyOnNetworkStatusChange: false,
-        fetchPolicy: 'no-cache'
-      })
-    })(({ data }) => {
-      count++;
-      if (count === 4) {
-        data!.stopPolling();
-        expect(cache.readQuery({query})).toBeNull();
-        resolve();
-      }
-      return null;
-    });
+      `;
+      const data = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
+      const data2 = { allPeople: { people: [{ name: "Leia Skywalker" }] } };
+      const link = mockSingleLink(
+        { request: { query }, result: { data } },
+        { request: { query }, result: { data: data2 } },
+        { request: { query }, result: { data } }
+      );
+      const cache = new Cache({ addTypename: false });
+      const client = new ApolloClient({
+        link,
+        cache,
+      });
+
+      let count = 0;
+      const Container = graphql(query, {
+        options: () => ({
+          pollInterval: POLL_INTERVAL,
+          notifyOnNetworkStatusChange: false,
+          fetchPolicy: "no-cache",
+        }),
+      })(({ data }) => {
+        count++;
+        if (count === 4) {
+          data!.stopPolling();
+          expect(cache.readQuery({ query })).toBeNull();
+          resolve();
+        }
+        return null;
+      });
 
-    render(
-      <ApolloProvider client={client}>
-        <Container />
-      </ApolloProvider>
-    );
+      render(
+        <ApolloProvider client={client}>
+          <Container />
+        </ApolloProvider>
+      );
 
-    waitFor(() => expect(count).toBe(4)).then(resolve, reject);
-  });
+      waitFor(() => expect(count).toBe(4)).then(resolve, reject);
+    }
+  );
 
   const allPeopleQuery: DocumentNode = gql`
     query people {
@@ -134,25 +137,26 @@ describe('[queries] polling', () => {
     }
   `;
 
-  const lukeLink = new ApolloLink(operation => new Observable(observer => {
-    expect(operation.query).toBe(allPeopleQuery);
-    observer.next({
-      data: {
-        allPeople: {
-          people: [
-            { name: "Luke Skywalker" },
-          ],
-        },
-      },
-    });
-    observer.complete();
-  }));
+  const lukeLink = new ApolloLink(
+    (operation) =>
+      new Observable((observer) => {
+        expect(operation.query).toBe(allPeopleQuery);
+        observer.next({
+          data: {
+            allPeople: {
+              people: [{ name: "Luke Skywalker" }],
+            },
+          },
+        });
+        observer.complete();
+      })
+  );
 
-  itAsync('exposes stopPolling as part of the props api', (resolve, reject) => {
+  itAsync("exposes stopPolling as part of the props api", (resolve, reject) => {
     let done = false;
     const client = new ApolloClient({
       link: lukeLink,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     const Container = graphql(allPeopleQuery)(
@@ -184,39 +188,44 @@ describe('[queries] polling', () => {
     }).then(resolve, reject);
   });
 
-  itAsync('exposes startPolling as part of the props api', (resolve, reject) => {
-    let done = false;
-    const client = new ApolloClient({
-      link: lukeLink,
-      cache: new Cache({ addTypename: false })
-    });
-
-    const Container = graphql(allPeopleQuery, { options: { pollInterval: 10 } })(
-      class extends React.Component<ChildProps> {
-        componentDidUpdate() {
-          try {
-            const { data } = this.props;
-            expect(data!.startPolling).toBeTruthy();
-            expect(data!.startPolling instanceof Function).toBeTruthy();
-            done = true;
-          } catch (e) {
-            reject(e);
+  itAsync(
+    "exposes startPolling as part of the props api",
+    (resolve, reject) => {
+      let done = false;
+      const client = new ApolloClient({
+        link: lukeLink,
+        cache: new Cache({ addTypename: false }),
+      });
+
+      const Container = graphql(allPeopleQuery, {
+        options: { pollInterval: 10 },
+      })(
+        class extends React.Component<ChildProps> {
+          componentDidUpdate() {
+            try {
+              const { data } = this.props;
+              expect(data!.startPolling).toBeTruthy();
+              expect(data!.startPolling instanceof Function).toBeTruthy();
+              done = true;
+            } catch (e) {
+              reject(e);
+            }
+          }
+          render() {
+            return null;
           }
         }
-        render() {
-          return null;
-        }
-      }
-    );
+      );
 
-    render(
-      <ApolloProvider client={client}>
-        <Container />
-      </ApolloProvider>
-    );
+      render(
+        <ApolloProvider client={client}>
+          <Container />
+        </ApolloProvider>
+      );
 
-    waitFor(() => {
-      expect(done).toBe(true);
-    }).then(resolve, reject);
-  });
+      waitFor(() => {
+        expect(done).toBe(true);
+      }).then(resolve, reject);
+    }
+  );
 });
diff --git a/src/react/hoc/__tests__/queries/recomposeWithState.ts b/src/react/hoc/__tests__/queries/recomposeWithState.ts
index 578148db490..a1bde0a6c18 100644
--- a/src/react/hoc/__tests__/queries/recomposeWithState.ts
+++ b/src/react/hoc/__tests__/queries/recomposeWithState.ts
@@ -34,7 +34,10 @@ export const withState =
   (stateName: string, stateUpdaterName: string, initialState: unknown) =>
   (BaseComponent: React.ComponentClass) => {
     const factory = createFactory(BaseComponent);
-    class WithState extends Component<Record<string, unknown>, { stateValue: unknown }> {
+    class WithState extends Component<
+      Record<string, unknown>,
+      { stateValue: unknown }
+    > {
       state = {
         stateValue:
           typeof initialState === "function"
diff --git a/src/react/hoc/__tests__/queries/reducer.test.tsx b/src/react/hoc/__tests__/queries/reducer.test.tsx
index ae75bcd7d80..93407151864 100644
--- a/src/react/hoc/__tests__/queries/reducer.test.tsx
+++ b/src/react/hoc/__tests__/queries/reducer.test.tsx
@@ -1,18 +1,18 @@
-import React from 'react';
-import { render, waitFor } from '@testing-library/react';
-import gql from 'graphql-tag';
-import { DocumentNode } from 'graphql';
-
-import { ApolloClient } from '../../../../core';
-import { ApolloProvider } from '../../../context';
-import { InMemoryCache as Cache } from '../../../../cache';
-import { itAsync, mockSingleLink } from '../../../../testing';
-import { graphql } from '../../graphql';
-import { DataValue } from '../../types';
-
-describe('[queries] reducer', () => {
+import React from "react";
+import { render, waitFor } from "@testing-library/react";
+import gql from "graphql-tag";
+import { DocumentNode } from "graphql";
+
+import { ApolloClient } from "../../../../core";
+import { ApolloProvider } from "../../../context";
+import { InMemoryCache as Cache } from "../../../../cache";
+import { itAsync, mockSingleLink } from "../../../../testing";
+import { graphql } from "../../graphql";
+import { DataValue } from "../../types";
+
+describe("[queries] reducer", () => {
   // props reducer
-  itAsync('allows custom mapping of a result to props', (resolve, reject) => {
+  itAsync("allows custom mapping of a result to props", (resolve, reject) => {
     const query: DocumentNode = gql`
       query thing {
         getThing {
@@ -23,11 +23,11 @@ describe('[queries] reducer', () => {
     const result = { getThing: { thing: true } };
     const link = mockSingleLink({
       request: { query },
-      result: { data: result }
+      result: { data: result },
     });
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     type Data = typeof result;
@@ -36,7 +36,7 @@ describe('[queries] reducer', () => {
 
     let count = 0;
     const ContainerWithData = graphql<{}, Data, {}, ChildProps>(query, {
-      props: ({ data }) => ({ ...data! })
+      props: ({ data }) => ({ ...data! }),
     })(({ getThing, loading }) => {
       count++;
       if (count === 1) expect(loading).toBe(true);
@@ -55,60 +55,63 @@ describe('[queries] reducer', () => {
     waitFor(() => expect(count).toBe(2)).then(resolve, reject);
   });
 
-  itAsync('allows custom mapping of a result to props that includes the passed props', (resolve, reject) => {
-    const query: DocumentNode = gql`
-      query thing {
-        getThing {
-          thing
+  itAsync(
+    "allows custom mapping of a result to props that includes the passed props",
+    (resolve, reject) => {
+      const query: DocumentNode = gql`
+        query thing {
+          getThing {
+            thing
+          }
         }
+      `;
+      const link = mockSingleLink({
+        request: { query },
+        result: { data: { getThing: { thing: true } } },
+      });
+      const client = new ApolloClient({
+        link,
+        cache: new Cache({ addTypename: false }),
+      });
+
+      interface Data {
+        getThing: { thing: boolean };
       }
-    `;
-    const link = mockSingleLink({
-      request: { query },
-      result: { data: { getThing: { thing: true } } }
-    });
-    const client = new ApolloClient({
-      link,
-      cache: new Cache({ addTypename: false })
-    });
-
-    interface Data {
-      getThing: { thing: boolean };
-    }
-    interface Props {
-      sample: number;
-    }
-
-    type FinalProps = {
-      showSpinner: boolean;
-    };
-
-    let count = 0;
-    const ContainerWithData = graphql<Props, Data, {}, FinalProps>(query, {
-      props: ({ data, ownProps }) => {
-        expect(ownProps.sample).toBe(1);
-        return { showSpinner: data!.loading };
-      }
-    })(({ showSpinner }: FinalProps) => {
-      if (count === 0) {
-        expect(showSpinner).toBeTruthy();
+      interface Props {
+        sample: number;
       }
-      count += 1;
-      return null;
-    });
 
-    render(
-      <ApolloProvider client={client}>
-        <ContainerWithData sample={1} />
-      </ApolloProvider>
-    );
+      type FinalProps = {
+        showSpinner: boolean;
+      };
+
+      let count = 0;
+      const ContainerWithData = graphql<Props, Data, {}, FinalProps>(query, {
+        props: ({ data, ownProps }) => {
+          expect(ownProps.sample).toBe(1);
+          return { showSpinner: data!.loading };
+        },
+      })(({ showSpinner }: FinalProps) => {
+        if (count === 0) {
+          expect(showSpinner).toBeTruthy();
+        }
+        count += 1;
+        return null;
+      });
 
-    waitFor(() => {
-      expect(count).toBe(2);
-    }).then(resolve, reject);
-  });
+      render(
+        <ApolloProvider client={client}>
+          <ContainerWithData sample={1} />
+        </ApolloProvider>
+      );
+
+      waitFor(() => {
+        expect(count).toBe(2);
+      }).then(resolve, reject);
+    }
+  );
 
-  itAsync('allows custom mapping of a result to props 2', (resolve, reject) => {
+  itAsync("allows custom mapping of a result to props 2", (resolve, reject) => {
     let done = false;
     const query: DocumentNode = gql`
       query thing {
@@ -120,11 +123,11 @@ describe('[queries] reducer', () => {
     const expectedData = { getThing: { thing: true } };
     const link = mockSingleLink({
       request: { query },
-      result: { data: expectedData }
+      result: { data: expectedData },
     });
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     interface Data {
@@ -136,7 +139,7 @@ describe('[queries] reducer', () => {
     }
 
     const withData = graphql<{}, Data, {}, FinalProps>(query, {
-      props: ({ data }) => ({ thingy: data!.getThing! })
+      props: ({ data }) => ({ thingy: data!.getThing! }),
     });
 
     class Container extends React.Component<FinalProps> {
@@ -158,85 +161,89 @@ describe('[queries] reducer', () => {
     );
 
     waitFor(() => {
-      expect(done).toBe(true)
+      expect(done).toBe(true);
     }).then(resolve, reject);
   });
 
-  itAsync('passes the prior props to the result-props mapper', (resolve, reject) => {
-    const query: DocumentNode = gql`
-      query thing {
-        getThing {
-          thing
+  itAsync(
+    "passes the prior props to the result-props mapper",
+    (resolve, reject) => {
+      const query: DocumentNode = gql`
+        query thing {
+          getThing {
+            thing
+          }
+          other
         }
-        other
-      }
-    `;
-    const expectedData = { getThing: { thing: true }, other: false };
-    const expectedDataAfterRefetch = { getThing: { thing: true }, other: true };
-    const link = mockSingleLink(
-      {
-        request: { query },
-        result: { data: expectedData }
-      },
-      {
-        request: { query },
-        result: { data: expectedDataAfterRefetch }
-      }
-    );
-    const client = new ApolloClient({
-      link,
-      cache: new Cache({ addTypename: false })
-    });
-
-    type Data = typeof expectedData;
-    interface FinalProps {
-      wrapper: { thingy: { thing: boolean } };
-      refetch: () => any;
-    }
-
-    const withData = graphql<{}, Data, {}, FinalProps>(query, {
-      props: ({ data }, lastProps) => {
-        const refetch = data!.refetch!;
-        let wrapper = { thingy: data!.getThing! };
-
-        // If the current thingy is equal to the last thingy,
-        // reuse the wrapper (to preserve referential equality).
-        if (lastProps && lastProps.wrapper.thingy === wrapper.thingy) {
-          wrapper = lastProps!.wrapper!;
+      `;
+      const expectedData = { getThing: { thing: true }, other: false };
+      const expectedDataAfterRefetch = {
+        getThing: { thing: true },
+        other: true,
+      };
+      const link = mockSingleLink(
+        {
+          request: { query },
+          result: { data: expectedData },
+        },
+        {
+          request: { query },
+          result: { data: expectedDataAfterRefetch },
         }
-
-        return { wrapper, refetch };
+      );
+      const client = new ApolloClient({
+        link,
+        cache: new Cache({ addTypename: false }),
+      });
+
+      type Data = typeof expectedData;
+      interface FinalProps {
+        wrapper: { thingy: { thing: boolean } };
+        refetch: () => any;
       }
-    });
 
-    let counter = 0;
-    let done = false;
-    class Container extends React.Component<FinalProps> {
-      componentDidUpdate(nextProps: FinalProps) {
-        expect(this.props.wrapper.thingy).toEqual(
-          expectedData.getThing
-        );
-        if (counter === 1) {
-          expect(this.props.wrapper).toEqual(nextProps.wrapper);
-          done = true;
-        } else {
-          counter++;
-          this.props.refetch();
+      const withData = graphql<{}, Data, {}, FinalProps>(query, {
+        props: ({ data }, lastProps) => {
+          const refetch = data!.refetch!;
+          let wrapper = { thingy: data!.getThing! };
+
+          // If the current thingy is equal to the last thingy,
+          // reuse the wrapper (to preserve referential equality).
+          if (lastProps && lastProps.wrapper.thingy === wrapper.thingy) {
+            wrapper = lastProps!.wrapper!;
+          }
+
+          return { wrapper, refetch };
+        },
+      });
+
+      let counter = 0;
+      let done = false;
+      class Container extends React.Component<FinalProps> {
+        componentDidUpdate(nextProps: FinalProps) {
+          expect(this.props.wrapper.thingy).toEqual(expectedData.getThing);
+          if (counter === 1) {
+            expect(this.props.wrapper).toEqual(nextProps.wrapper);
+            done = true;
+          } else {
+            counter++;
+            this.props.refetch();
+          }
+        }
+        render() {
+          return null;
         }
       }
-      render() {
-        return null;
-      }
-    }
 
-    const ContainerWithData = withData(Container);
+      const ContainerWithData = withData(Container);
 
-    render(
-      <ApolloProvider client={client}>
-        <ContainerWithData />
-      </ApolloProvider>
-    );
+      render(
+        <ApolloProvider client={client}>
+          <ContainerWithData />
+        </ApolloProvider>
+      );
 
-    waitFor(() => expect(done).toBeTruthy()).then(resolve, reject);
-  });
+      waitFor(() => expect(done).toBeTruthy()).then(resolve, reject);
+    }
+  );
 });
diff --git a/src/react/hoc/__tests__/queries/skip.test.tsx b/src/react/hoc/__tests__/queries/skip.test.tsx
index 4a25a770c73..ee0892df472 100644
--- a/src/react/hoc/__tests__/queries/skip.test.tsx
+++ b/src/react/hoc/__tests__/queries/skip.test.tsx
@@ -1,744 +1,772 @@
-import React from 'react';
-import { render, waitFor } from '@testing-library/react';
-import gql from 'graphql-tag';
-import { DocumentNode } from 'graphql';
-
-import { ApolloClient } from '../../../../core';
-import { ApolloProvider } from '../../../context';
-import { InMemoryCache as Cache } from '../../../../cache';
-import { ApolloLink } from '../../../../link/core';
-import { itAsync, mockSingleLink } from '../../../../testing';
-import { graphql } from '../../graphql';
-import { ChildProps } from '../../types';
-
-describe('[queries] skip', () => {
-  itAsync('allows you to skip a query without running it', (resolve, reject) => {
-    const query: DocumentNode = gql`
-      query people {
-        allPeople(first: 1) {
-          people {
-            name
+import React from "react";
+import { render, waitFor } from "@testing-library/react";
+import gql from "graphql-tag";
+import { DocumentNode } from "graphql";
+
+import { ApolloClient } from "../../../../core";
+import { ApolloProvider } from "../../../context";
+import { InMemoryCache as Cache } from "../../../../cache";
+import { ApolloLink } from "../../../../link/core";
+import { itAsync, mockSingleLink } from "../../../../testing";
+import { graphql } from "../../graphql";
+import { ChildProps } from "../../types";
+
+describe("[queries] skip", () => {
+  itAsync(
+    "allows you to skip a query without running it",
+    (resolve, reject) => {
+      const query: DocumentNode = gql`
+        query people {
+          allPeople(first: 1) {
+            people {
+              name
+            }
           }
         }
-      }
-    `;
-    const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
-    const link = mockSingleLink({
-      request: { query },
-      result: { data }
-    });
-    const client = new ApolloClient({
-      link,
-      cache: new Cache({ addTypename: false })
-    });
-    interface Props {
-      skip: boolean;
-    }
-
-    let queryExecuted = false;
-    const Container = graphql<Props>(query, {
-      skip: ({ skip }) => skip
-    })(
-      class extends React.Component<ChildProps<Props>> {
-        componentDidUpdate() {
-          queryExecuted = true;
-        }
-        render() {
-          expect(this.props.data).toBeUndefined();
-          return null;
-        }
-      }
-    );
-
-    render(
-      <ApolloProvider client={client}>
-        <Container skip={true} />
-      </ApolloProvider>
-    );
-
-    let done = false;
-    setTimeout(() => {
-      if (!queryExecuted) {
-        done = true;
-        return;
-      }
-      reject(new Error('query ran even though skip present'));
-    }, 25);
-
-    waitFor(() => expect(done).toBeTruthy()).then(resolve, reject);
-  });
-
-  itAsync('continues to not subscribe to a skipped query when props change', (resolve, reject) => {
-    const query: DocumentNode = gql`
-      query people {
-        allPeople(first: 1) {
-          people {
-            name
+      `;
+      const data = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
+      const link = mockSingleLink({
+        request: { query },
+        result: { data },
+      });
+      const client = new ApolloClient({
+        link,
+        cache: new Cache({ addTypename: false }),
+      });
+      interface Props {
+        skip: boolean;
+      }
+
+      let queryExecuted = false;
+      const Container = graphql<Props>(query, {
+        skip: ({ skip }) => skip,
+      })(
+        class extends React.Component<ChildProps<Props>> {
+          componentDidUpdate() {
+            queryExecuted = true;
+          }
+          render() {
+            expect(this.props.data).toBeUndefined();
+            return null;
           }
         }
-      }
-    `;
+      );
 
-    const link = new ApolloLink((o, f) => {
-      reject(new Error('query ran even though skip present'));
-      return f ? f(o) : null;
-    }).concat(mockSingleLink());
-    // const oldQuery = link.query;
-    const client = new ApolloClient({
-      link,
-      cache: new Cache({ addTypename: false })
-    });
-
-    interface Props {
-      foo: number;
-    }
+      render(
+        <ApolloProvider client={client}>
+          <Container skip={true} />
+        </ApolloProvider>
+      );
 
-    let done = false;
-    const Container = graphql<Props>(query, { skip: true })(
-      class extends React.Component<ChildProps<Props>> {
-        componentDidUpdate() {
+      let done = false;
+      setTimeout(() => {
+        if (!queryExecuted) {
           done = true;
+          return;
         }
-        render() {
-          return null;
-        }
-      }
-    );
+        reject(new Error("query ran even though skip present"));
+      }, 25);
 
-    class Parent extends React.Component<{}, { foo: number }> {
-      state = { foo: 42 };
-
-      componentDidMount() {
-        this.setState({ foo: 43 });
-      }
-      render() {
-        return <Container foo={this.state.foo} />;
-      }
+      waitFor(() => expect(done).toBeTruthy()).then(resolve, reject);
     }
-
-    render(
-      <ApolloProvider client={client}>
-        <Parent />
-      </ApolloProvider>
-    );
-
-    waitFor(() => expect(done).toBeTruthy()).then(resolve, reject);
-  });
-
-  itAsync('supports using props for skipping which are used in options', (resolve, reject) => {
-    const query: DocumentNode = gql`
-      query people($id: ID!) {
-        allPeople(first: $id) {
-          people {
-            id
+  );
+
+  itAsync(
+    "continues to not subscribe to a skipped query when props change",
+    (resolve, reject) => {
+      const query: DocumentNode = gql`
+        query people {
+          allPeople(first: 1) {
+            people {
+              name
+            }
           }
         }
-      }
-    `;
+      `;
 
-    const data = {
-      allPeople: { people: { id: 1 } }
-    };
+      const link = new ApolloLink((o, f) => {
+        reject(new Error("query ran even though skip present"));
+        return f ? f(o) : null;
+      }).concat(mockSingleLink());
+      // const oldQuery = link.query;
+      const client = new ApolloClient({
+        link,
+        cache: new Cache({ addTypename: false }),
+      });
 
-    type Data = typeof data;
-
-    const variables = { id: 1 };
-    type Vars = typeof variables;
-
-    const link = mockSingleLink({
-      request: { query, variables },
-      result: { data }
-    });
+      interface Props {
+        foo: number;
+      }
 
-    const client = new ApolloClient({
-      link,
-      cache: new Cache({ addTypename: false })
-    });
+      let done = false;
+      const Container = graphql<Props>(query, { skip: true })(
+        class extends React.Component<ChildProps<Props>> {
+          componentDidUpdate() {
+            done = true;
+          }
+          render() {
+            return null;
+          }
+        }
+      );
 
-    let count = 0;
-    let renderCount = 0;
+      class Parent extends React.Component<{}, { foo: number }> {
+        state = { foo: 42 };
 
-    interface Props {
-      person: { id: number } | null;
-    }
-    const Container = graphql<Props, Data, Vars>(query, {
-      skip: ({ person }) => !person,
-      options: ({ person }) => ({
-        variables: {
-          id: person!.id
-        }
-      })
-    })(
-      class extends React.Component<ChildProps<Props, Data, Vars>> {
-        componentDidUpdate() {
-          try {
-            const { props } = this;
-            switch (++count) {
-              case 1:
-                expect(props.data!.loading).toBe(true);
-                break;
-              case 2:
-                expect(props.data!.loading).toBe(false);
-                expect(props.data!.allPeople).toEqual(data.allPeople);
-                expect(renderCount).toBe(3);
-                break;
-              default:
-                reject(`Too many renders (${count})`);
-            }
-          } catch (err) {
-            reject(err);
-          }
+        componentDidMount() {
+          this.setState({ foo: 43 });
         }
         render() {
-          renderCount++;
-          return null;
+          return <Container foo={this.state.foo} />;
         }
       }
-    );
 
-    class Parent extends React.Component<
-      {},
-      { person: { id: number } | null }
-    > {
-      state = { person: null };
+      render(
+        <ApolloProvider client={client}>
+          <Parent />
+        </ApolloProvider>
+      );
 
-      componentDidMount() {
-        this.setState({ person: { id: 1 } });
-      }
-      render() {
-        return <Container person={this.state.person} />;
-      }
+      waitFor(() => expect(done).toBeTruthy()).then(resolve, reject);
     }
-
-    render(
-      <ApolloProvider client={client}>
-        <Parent />
-      </ApolloProvider>
-    );
-
-    waitFor(() => expect(count).toBe(2)).then(resolve, reject);
-  });
-
-  itAsync("doesn't run options or props when skipped, including option.client", (resolve, reject) => {
-    const query: DocumentNode = gql`
-      query people {
-        allPeople(first: 1) {
-          people {
-            name
+  );
+
+  itAsync(
+    "supports using props for skipping which are used in options",
+    (resolve, reject) => {
+      const query: DocumentNode = gql`
+        query people($id: ID!) {
+          allPeople(first: $id) {
+            people {
+              id
+            }
           }
         }
-      }
-    `;
-    const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
-    const link = mockSingleLink({
-      request: { query },
-      result: { data }
-    });
-    const client = new ApolloClient({
-      link,
-      cache: new Cache({ addTypename: false })
-    });
-
-    let queryExecuted = false;
-    let optionsCalled = false;
-
-    interface Props {
-      skip: boolean;
-      pollInterval?: number;
-    }
+      `;
+
+      const data = {
+        allPeople: { people: { id: 1 } },
+      };
+
+      type Data = typeof data;
+
+      const variables = { id: 1 };
+      type Vars = typeof variables;
+
+      const link = mockSingleLink({
+        request: { query, variables },
+        result: { data },
+      });
+
+      const client = new ApolloClient({
+        link,
+        cache: new Cache({ addTypename: false }),
+      });
+
+      let count = 0;
+      let renderCount = 0;
+
+      interface Props {
+        person: { id: number } | null;
+      }
+      const Container = graphql<Props, Data, Vars>(query, {
+        skip: ({ person }) => !person,
+        options: ({ person }) => ({
+          variables: {
+            id: person!.id,
+          },
+        }),
+      })(
+        class extends React.Component<ChildProps<Props, Data, Vars>> {
+          componentDidUpdate() {
+            try {
+              const { props } = this;
+              switch (++count) {
+                case 1:
+                  expect(props.data!.loading).toBe(true);
+                  break;
+                case 2:
+                  expect(props.data!.loading).toBe(false);
+                  expect(props.data!.allPeople).toEqual(data.allPeople);
+                  expect(renderCount).toBe(3);
+                  break;
+                default:
+                  reject(`Too many renders (${count})`);
+              }
+            } catch (err) {
+              reject(err);
+            }
+          }
+          render() {
+            renderCount++;
+            return null;
+          }
+        }
+      );
 
-    interface FinalProps {
-      pollInterval: number;
-      data?: {};
-    }
+      class Parent extends React.Component<
+        {},
+        { person: { id: number } | null }
+      > {
+        state = { person: null };
 
-    const Container = graphql<Props, {}, {}, FinalProps>(query, {
-      skip: ({ skip }) => skip,
-      options: props => {
-        optionsCalled = true;
-        return {
-          pollInterval: props.pollInterval
-        };
-      },
-      props: props => ({
-        // intentionally incorrect
-        pollInterval: (props as any).willThrowIfAccesed.pollInterval
-      })
-    })(
-      class extends React.Component<FinalProps & Props> {
-        componentDidUpdate() {
-          queryExecuted = true;
+        componentDidMount() {
+          this.setState({ person: { id: 1 } });
         }
         render() {
-          expect(this.props.data).toBeFalsy();
-          return null;
+          return <Container person={this.state.person} />;
         }
       }
-    );
-
-    render(
-      <ApolloProvider client={client}>
-        <Container skip={true} />
-      </ApolloProvider>
-    );
-
-    let done = false;
-    setTimeout(() => {
-      if (!queryExecuted) {
-        done = true;
-        return;
-      }
-      if (optionsCalled) {
-        reject(new Error('options ran even though skip present'));
-        return;
-      }
-      reject(new Error('query ran even though skip present'));
-    }, 25);
 
-    waitFor(() => expect(done).toBeTruthy()).then(resolve, reject);
-  });
+      render(
+        <ApolloProvider client={client}>
+          <Parent />
+        </ApolloProvider>
+      );
 
-  itAsync("doesn't run options or props when skipped even if the component updates", (resolve, reject) => {
-    const query: DocumentNode = gql`
-      query people {
-        allPeople(first: 1) {
-          people {
-            name
+      waitFor(() => expect(count).toBe(2)).then(resolve, reject);
+    }
+  );
+
+  itAsync(
+    "doesn't run options or props when skipped, including option.client",
+    (resolve, reject) => {
+      const query: DocumentNode = gql`
+        query people {
+          allPeople(first: 1) {
+            people {
+              name
+            }
           }
         }
-      }
-    `;
-
-    const link = mockSingleLink({
-      request: { query },
-      result: {}
-    });
-
-    const client = new ApolloClient({
-      link,
-      cache: new Cache({ addTypename: false })
-    });
-
-    let queryWasSkipped = true;
+      `;
+      const data = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
+      const link = mockSingleLink({
+        request: { query },
+        result: { data },
+      });
+      const client = new ApolloClient({
+        link,
+        cache: new Cache({ addTypename: false }),
+      });
+
+      let queryExecuted = false;
+      let optionsCalled = false;
+
+      interface Props {
+        skip: boolean;
+        pollInterval?: number;
+      }
+
+      interface FinalProps {
+        pollInterval: number;
+        data?: {};
+      }
+
+      const Container = graphql<Props, {}, {}, FinalProps>(query, {
+        skip: ({ skip }) => skip,
+        options: (props) => {
+          optionsCalled = true;
+          return {
+            pollInterval: props.pollInterval,
+          };
+        },
+        props: (props) => ({
+          // intentionally incorrect
+          pollInterval: (props as any).willThrowIfAccesed.pollInterval,
+        }),
+      })(
+        class extends React.Component<FinalProps & Props> {
+          componentDidUpdate() {
+            queryExecuted = true;
+          }
+          render() {
+            expect(this.props.data).toBeFalsy();
+            return null;
+          }
+        }
+      );
 
-    interface Props {
-      foo: string;
-    }
+      render(
+        <ApolloProvider client={client}>
+          <Container skip={true} />
+        </ApolloProvider>
+      );
 
-    let done = false;
-    const Container = graphql<Props>(query, {
-      skip: true,
-      options: () => {
-        queryWasSkipped = false;
-        return {};
-      },
-      props: () => {
-        queryWasSkipped = false;
-        return {};
-      }
-    })(
-      class extends React.Component<ChildProps<Props>> {
-        componentDidUpdate() {
-          expect(queryWasSkipped).toBeTruthy();
+      let done = false;
+      setTimeout(() => {
+        if (!queryExecuted) {
           done = true;
+          return;
         }
-        render() {
-          return null;
+        if (optionsCalled) {
+          reject(new Error("options ran even though skip present"));
+          return;
         }
-      }
-    );
+        reject(new Error("query ran even though skip present"));
+      }, 25);
 
-    class Parent extends React.Component<{}, { foo: string }> {
-      state = { foo: 'bar' };
-      componentDidMount() {
-        this.setState({ foo: 'baz' });
-      }
-      render() {
-        return <Container foo={this.state.foo} />;
-      }
+      waitFor(() => expect(done).toBeTruthy()).then(resolve, reject);
     }
-
-    render(
-      <ApolloProvider client={client}>
-        <Parent />
-      </ApolloProvider>
-    );
-
-    waitFor(() => expect(done).toBeTruthy()).then(resolve, reject);
-  });
-
-  itAsync('allows you to skip a query without running it (alternate syntax)', (resolve, reject) => {
-    const query: DocumentNode = gql`
-      query people {
-        allPeople(first: 1) {
-          people {
-            name
+  );
+
+  itAsync(
+    "doesn't run options or props when skipped even if the component updates",
+    (resolve, reject) => {
+      const query: DocumentNode = gql`
+        query people {
+          allPeople(first: 1) {
+            people {
+              name
+            }
           }
         }
-      }
-    `;
-    const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
-    const link = mockSingleLink({
-      request: { query },
-      result: { data }
-    });
-    const client = new ApolloClient({
-      link,
-      cache: new Cache({ addTypename: false })
-    });
+      `;
 
-    let queryExecuted = false;
-    const Container = graphql(query, { skip: true })(
-      class extends React.Component<ChildProps> {
-        componentDidUpdate() {
-          queryExecuted = true;
-        }
-        render() {
-          expect(this.props.data).toBeFalsy();
-          return null;
-        }
-      }
-    );
+      const link = mockSingleLink({
+        request: { query },
+        result: {},
+      });
 
-    render(
-      <ApolloProvider client={client}>
-        <Container />
-      </ApolloProvider>
-    );
+      const client = new ApolloClient({
+        link,
+        cache: new Cache({ addTypename: false }),
+      });
 
-    let done = false;
-    setTimeout(() => {
-      if (!queryExecuted) {
-        done = true;
-        return;
-      }
-      reject(new Error('query ran even though skip present'));
-    }, 25);
+      let queryWasSkipped = true;
 
-    waitFor(() => expect(done).toBeTruthy()).then(resolve, reject);
-  });
+      interface Props {
+        foo: string;
+      }
 
-  // test the case of skip:false -> skip:true -> skip:false to make sure things
-  // are cleaned up properly
-  itAsync('allows you to skip then unskip a query with top-level syntax', (resolve, reject) => {
-    const query: DocumentNode = gql`
-      query people {
-        allPeople(first: 1) {
-          people {
-            name
+      let done = false;
+      const Container = graphql<Props>(query, {
+        skip: true,
+        options: () => {
+          queryWasSkipped = false;
+          return {};
+        },
+        props: () => {
+          queryWasSkipped = false;
+          return {};
+        },
+      })(
+        class extends React.Component<ChildProps<Props>> {
+          componentDidUpdate() {
+            expect(queryWasSkipped).toBeTruthy();
+            done = true;
+          }
+          render() {
+            return null;
           }
         }
-      }
-    `;
-    const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
-    const link = mockSingleLink({
-      request: { query },
-      result: { data }
-    });
-    const client = new ApolloClient({
-      link,
-      cache: new Cache({ addTypename: false })
-    });
+      );
 
-    let hasSkipped = false;
-
-    interface Props {
-      skip: boolean;
-      setSkip: (skip: boolean) => void;
-    }
-
-    const Container = graphql<Props>(query, { skip: ({ skip }) => skip })(
-      class extends React.Component<ChildProps<Props>> {
-        componentDidUpdate(prevProps: ChildProps<Props>) {
-          if (this.props.skip) {
-            hasSkipped = true;
-            prevProps.setSkip(false);
-          } else {
-            if (!hasSkipped) {
-              prevProps.setSkip(true);
-            }
-          }
+      class Parent extends React.Component<{}, { foo: string }> {
+        state = { foo: "bar" };
+        componentDidMount() {
+          this.setState({ foo: "baz" });
         }
         render() {
-          return null;
+          return <Container foo={this.state.foo} />;
         }
       }
-    );
-
-    class Parent extends React.Component<any, any> {
-      state = { skip: false };
-      render() {
-        return (
-          <Container
-            skip={this.state.skip}
-            setSkip={skip => this.setState({ skip })}
-          />
-        );
-      }
-    }
-
-    render(
-      <ApolloProvider client={client}>
-        <Parent />
-      </ApolloProvider>
-    );
 
-    waitFor(() => expect(hasSkipped).toBeTruthy()).then(resolve, reject);
-  });
+      render(
+        <ApolloProvider client={client}>
+          <Parent />
+        </ApolloProvider>
+      );
 
-  itAsync('allows you to skip then unskip a query with new options (top-level syntax)', (resolve, reject) => {
-    const query: DocumentNode = gql`
-      query people($first: Int) {
-        allPeople(first: $first) {
-          people {
-            name
+      waitFor(() => expect(done).toBeTruthy()).then(resolve, reject);
+    }
+  );
+
+  itAsync(
+    "allows you to skip a query without running it (alternate syntax)",
+    (resolve, reject) => {
+      const query: DocumentNode = gql`
+        query people {
+          allPeople(first: 1) {
+            people {
+              name
+            }
           }
         }
-      }
-    `;
-    const dataOne = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
-    const dataTwo = { allPeople: { people: [{ name: 'Leia Skywalker' }] } };
-
-    type Data = typeof dataOne;
-    type Vars = { first: number };
+      `;
+      const data = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
+      const link = mockSingleLink({
+        request: { query },
+        result: { data },
+      });
+      const client = new ApolloClient({
+        link,
+        cache: new Cache({ addTypename: false }),
+      });
+
+      let queryExecuted = false;
+      const Container = graphql(query, { skip: true })(
+        class extends React.Component<ChildProps> {
+          componentDidUpdate() {
+            queryExecuted = true;
+          }
+          render() {
+            expect(this.props.data).toBeFalsy();
+            return null;
+          }
+        }
+      );
 
-    const link = mockSingleLink(
-      {
-        request: { query, variables: { first: 1 } },
-        result: { data: dataOne }
-      },
-      {
-        request: { query, variables: { first: 2 } },
-        result: { data: dataTwo }
-      },
-      {
-        request: { query, variables: { first: 2 } },
-        result: { data: dataTwo }
-      }
-    );
-    const client = new ApolloClient({
-      link,
-      cache: new Cache({ addTypename: false })
-    });
+      render(
+        <ApolloProvider client={client}>
+          <Container />
+        </ApolloProvider>
+      );
 
-    let hasSkipped = false;
+      let done = false;
+      setTimeout(() => {
+        if (!queryExecuted) {
+          done = true;
+          return;
+        }
+        reject(new Error("query ran even though skip present"));
+      }, 25);
 
-    interface Props {
-      skip: boolean;
-      first: number;
-      setState: <K extends 'skip' | 'first'>(
-        state: Pick<{ skip: boolean; first: number }, K>
-      ) => void;
+      waitFor(() => expect(done).toBeTruthy()).then(resolve, reject);
     }
+  );
 
-    let done = false;
-    const Container = graphql<Props, Data, Vars>(query, {
-      skip: ({ skip }) => skip
-    })(
-      class extends React.Component<ChildProps<Props, Data, Vars>> {
-        componentDidUpdate(prevProps: ChildProps<Props, Data, Vars>) {
-          if (this.props.skip) {
-            hasSkipped = true;
-            // change back to skip: false, with a different variable
-            prevProps.setState({ skip: false, first: 2 });
-          } else {
-            if (hasSkipped) {
-              if (!this.props.data!.loading) {
-                expect(this.props.data!.allPeople).toEqual(
-                  dataTwo.allPeople
-                );
-                done = true;
-              }
+  // test the case of skip:false -> skip:true -> skip:false to make sure things
+  // are cleaned up properly
+  itAsync(
+    "allows you to skip then unskip a query with top-level syntax",
+    (resolve, reject) => {
+      const query: DocumentNode = gql`
+        query people {
+          allPeople(first: 1) {
+            people {
+              name
+            }
+          }
+        }
+      `;
+      const data = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
+      const link = mockSingleLink({
+        request: { query },
+        result: { data },
+      });
+      const client = new ApolloClient({
+        link,
+        cache: new Cache({ addTypename: false }),
+      });
+
+      let hasSkipped = false;
+
+      interface Props {
+        skip: boolean;
+        setSkip: (skip: boolean) => void;
+      }
+
+      const Container = graphql<Props>(query, { skip: ({ skip }) => skip })(
+        class extends React.Component<ChildProps<Props>> {
+          componentDidUpdate(prevProps: ChildProps<Props>) {
+            if (this.props.skip) {
+              hasSkipped = true;
+              prevProps.setSkip(false);
             } else {
-              expect(this.props.data!.allPeople).toEqual(
-                dataOne.allPeople
-              );
-              prevProps.setState({ skip: true });
+              if (!hasSkipped) {
+                prevProps.setSkip(true);
+              }
             }
           }
+          render() {
+            return null;
+          }
         }
+      );
+
+      class Parent extends React.Component<any, any> {
+        state = { skip: false };
         render() {
-          return null;
+          return (
+            <Container
+              skip={this.state.skip}
+              setSkip={(skip) => this.setState({ skip })}
+            />
+          );
         }
       }
-    );
-
-    class Parent extends React.Component<{}, { skip: boolean; first: number }> {
-      state = { skip: false, first: 1 };
-      render() {
-        return (
-          <Container
-            skip={this.state.skip}
-            first={this.state.first}
-            setState={state => this.setState(state)}
-          />
-        );
-      }
-    }
-
-    render(
-      <ApolloProvider client={client}>
-        <Parent />
-      </ApolloProvider>
-    );
 
-    waitFor(() => expect(done).toBeTruthy()).then(resolve, reject);
-  });
+      render(
+        <ApolloProvider client={client}>
+          <Parent />
+        </ApolloProvider>
+      );
 
-  it('allows you to skip then unskip a query with opts syntax', () => new Promise((resolve, reject) => {
-    const query: DocumentNode = gql`
-      query people {
-        allPeople(first: 1) {
-          people {
-            name
+      waitFor(() => expect(hasSkipped).toBeTruthy()).then(resolve, reject);
+    }
+  );
+
+  itAsync(
+    "allows you to skip then unskip a query with new options (top-level syntax)",
+    (resolve, reject) => {
+      const query: DocumentNode = gql`
+        query people($first: Int) {
+          allPeople(first: $first) {
+            people {
+              name
+            }
           }
         }
-      }
-    `;
-
-    const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
-    const nextData = { allPeople: { people: [{ name: 'Anakin Skywalker' }] } };
-    const finalData = { allPeople: { people: [{ name: 'Darth Vader' }] } };
+      `;
+      const dataOne = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
+      const dataTwo = { allPeople: { people: [{ name: "Leia Skywalker" }] } };
 
-    let ranQuery = 0;
+      type Data = typeof dataOne;
+      type Vars = { first: number };
 
-    const link = new ApolloLink((o, f) => {
-      ranQuery++;
-      return f ? f(o) : null;
-    }).concat(
-      mockSingleLink(
+      const link = mockSingleLink(
         {
-          request: { query },
-          result: { data },
+          request: { query, variables: { first: 1 } },
+          result: { data: dataOne },
         },
         {
-          request: { query },
-          result: { data: nextData },
+          request: { query, variables: { first: 2 } },
+          result: { data: dataTwo },
         },
         {
-          request: { query },
-          result: { data: finalData },
-        },
-      )
-    );
-
-    const client = new ApolloClient({
-      link,
-      cache: new Cache({ addTypename: false }),
-      queryDeduplication: false
-    });
+          request: { query, variables: { first: 2 } },
+          result: { data: dataTwo },
+        }
+      );
+      const client = new ApolloClient({
+        link,
+        cache: new Cache({ addTypename: false }),
+      });
+
+      let hasSkipped = false;
+
+      interface Props {
+        skip: boolean;
+        first: number;
+        setState: <K extends "skip" | "first">(
+          state: Pick<{ skip: boolean; first: number }, K>
+        ) => void;
+      }
+
+      let done = false;
+      const Container = graphql<Props, Data, Vars>(query, {
+        skip: ({ skip }) => skip,
+      })(
+        class extends React.Component<ChildProps<Props, Data, Vars>> {
+          componentDidUpdate(prevProps: ChildProps<Props, Data, Vars>) {
+            if (this.props.skip) {
+              hasSkipped = true;
+              // change back to skip: false, with a different variable
+              prevProps.setState({ skip: false, first: 2 });
+            } else {
+              if (hasSkipped) {
+                if (!this.props.data!.loading) {
+                  expect(this.props.data!.allPeople).toEqual(dataTwo.allPeople);
+                  done = true;
+                }
+              } else {
+                expect(this.props.data!.allPeople).toEqual(dataOne.allPeople);
+                prevProps.setState({ skip: true });
+              }
+            }
+          }
+          render() {
+            return null;
+          }
+        }
+      );
 
-    let count = 0;
-    const Container = graphql<any>(query, {
-      options: {
-        fetchPolicy: 'network-only',
-        nextFetchPolicy: 'cache-first',
-        notifyOnNetworkStatusChange: true
-      },
-      skip: ({ skip }) => skip
-    })(
-      class extends React.Component<any> {
+      class Parent extends React.Component<
+        {},
+        { skip: boolean; first: number }
+      > {
+        state = { skip: false, first: 1 };
         render() {
-          expect(this.props.data?.error).toBeUndefined();
-
-          try {
-            switch (++count) {
-              case 1:
-                expect(this.props.data.loading).toBe(true);
-                expect(ranQuery).toBe(0);
-                break;
-              case 2:
-                // The first batch of data is fetched over the network, and
-                // verified here, followed by telling the component we want to
-                // skip running subsequent queries.
-                expect(this.props.data.loading).toBe(false);
-                expect(this.props.data.allPeople).toEqual(data.allPeople);
-                expect(ranQuery).toBe(1);
-                setTimeout(() => {
-                  this.props.setSkip(true);
-                }, 10);
-                break;
-              case 3:
-                // This render is triggered after setting skip to true. Now
-                // let's set skip to false to re-trigger the query.
-                setTimeout(() => {
-                  this.props.setSkip(false);
-                }, 10);
-                expect(this.props.skip).toBe(true);
-                expect(this.props.data).toBeUndefined();
-                expect(ranQuery).toBe(1);
-                break;
-              case 4:
-                expect(this.props.skip).toBe(false);
-                expect(this.props.data!.loading).toBe(false);
-                expect(this.props.data.allPeople).toEqual(data.allPeople);
-                expect(ranQuery).toBe(2);
-                break;
-              case 5:
-                expect(this.props.skip).toBe(false);
-                expect(this.props.data!.loading).toBe(false);
-                expect(this.props.data.allPeople).toEqual(nextData.allPeople);
-                expect(ranQuery).toBe(2);
-                // Since the `nextFetchPolicy` was set to `cache-first`, our
-                // query isn't loading as it's able to find the result of the
-                // query directly from the cache. Let's trigger a refetch
-                // to manually load the next batch of data.
-                setTimeout(() => {
-                  this.props.data.refetch();
-                }, 10);
-                break;
-              case 6:
-                expect(this.props.skip).toBe(false);
-                expect(ranQuery).toBe(3);
-                expect(this.props.data.allPeople).toEqual(nextData.allPeople);
-                expect(this.props.data!.loading).toBe(true);
-                break;
-              case 7:
-                // The next batch of data has loaded.
-                expect(this.props.skip).toBe(false);
-                expect(this.props.data!.loading).toBe(false);
-                expect(this.props.data.allPeople).toEqual(finalData.allPeople);
-                expect(ranQuery).toBe(3);
-                break;
-              default:
-                throw new Error(`too many renders (${count})`);
+          return (
+            <Container
+              skip={this.state.skip}
+              first={this.state.first}
+              setState={(state) => this.setState(state)}
+            />
+          );
+        }
+      }
+
+      render(
+        <ApolloProvider client={client}>
+          <Parent />
+        </ApolloProvider>
+      );
+
+      waitFor(() => expect(done).toBeTruthy()).then(resolve, reject);
+    }
+  );
+
+  it("allows you to skip then unskip a query with opts syntax", () =>
+    new Promise((resolve, reject) => {
+      const query: DocumentNode = gql`
+        query people {
+          allPeople(first: 1) {
+            people {
+              name
             }
-          } catch (err) {
-            reject(err);
           }
+        }
+      `;
+
+      const data = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
+      const nextData = {
+        allPeople: { people: [{ name: "Anakin Skywalker" }] },
+      };
+      const finalData = { allPeople: { people: [{ name: "Darth Vader" }] } };
+
+      let ranQuery = 0;
+
+      const link = new ApolloLink((o, f) => {
+        ranQuery++;
+        return f ? f(o) : null;
+      }).concat(
+        mockSingleLink(
+          {
+            request: { query },
+            result: { data },
+          },
+          {
+            request: { query },
+            result: { data: nextData },
+          },
+          {
+            request: { query },
+            result: { data: finalData },
+          }
+        )
+      );
+
+      const client = new ApolloClient({
+        link,
+        cache: new Cache({ addTypename: false }),
+        queryDeduplication: false,
+      });
+
+      let count = 0;
+      const Container = graphql<any>(query, {
+        options: {
+          fetchPolicy: "network-only",
+          nextFetchPolicy: "cache-first",
+          notifyOnNetworkStatusChange: true,
+        },
+        skip: ({ skip }) => skip,
+      })(
+        class extends React.Component<any> {
+          render() {
+            expect(this.props.data?.error).toBeUndefined();
+
+            try {
+              switch (++count) {
+                case 1:
+                  expect(this.props.data.loading).toBe(true);
+                  expect(ranQuery).toBe(0);
+                  break;
+                case 2:
+                  // The first batch of data is fetched over the network, and
+                  // verified here, followed by telling the component we want to
+                  // skip running subsequent queries.
+                  expect(this.props.data.loading).toBe(false);
+                  expect(this.props.data.allPeople).toEqual(data.allPeople);
+                  expect(ranQuery).toBe(1);
+                  setTimeout(() => {
+                    this.props.setSkip(true);
+                  }, 10);
+                  break;
+                case 3:
+                  // This render is triggered after setting skip to true. Now
+                  // let's set skip to false to re-trigger the query.
+                  setTimeout(() => {
+                    this.props.setSkip(false);
+                  }, 10);
+                  expect(this.props.skip).toBe(true);
+                  expect(this.props.data).toBeUndefined();
+                  expect(ranQuery).toBe(1);
+                  break;
+                case 4:
+                  expect(this.props.skip).toBe(false);
+                  expect(this.props.data!.loading).toBe(false);
+                  expect(this.props.data.allPeople).toEqual(data.allPeople);
+                  expect(ranQuery).toBe(2);
+                  break;
+                case 5:
+                  expect(this.props.skip).toBe(false);
+                  expect(this.props.data!.loading).toBe(false);
+                  expect(this.props.data.allPeople).toEqual(nextData.allPeople);
+                  expect(ranQuery).toBe(2);
+                  // Since the `nextFetchPolicy` was set to `cache-first`, our
+                  // query isn't loading as it's able to find the result of the
+                  // query directly from the cache. Let's trigger a refetch
+                  // to manually load the next batch of data.
+                  setTimeout(() => {
+                    this.props.data.refetch();
+                  }, 10);
+                  break;
+                case 6:
+                  expect(this.props.skip).toBe(false);
+                  expect(ranQuery).toBe(3);
+                  expect(this.props.data.allPeople).toEqual(nextData.allPeople);
+                  expect(this.props.data!.loading).toBe(true);
+                  break;
+                case 7:
+                  // The next batch of data has loaded.
+                  expect(this.props.skip).toBe(false);
+                  expect(this.props.data!.loading).toBe(false);
+                  expect(this.props.data.allPeople).toEqual(
+                    finalData.allPeople
+                  );
+                  expect(ranQuery).toBe(3);
+                  break;
+                default:
+                  throw new Error(`too many renders (${count})`);
+              }
+            } catch (err) {
+              reject(err);
+            }
 
-          return null;
+            return null;
+          }
         }
-      },
-    );
+      );
 
-    class Parent extends React.Component<{}, { skip: boolean }> {
-      state = { skip: false };
-      render() {
-        return (
-          <Container
-            skip={this.state.skip}
-            setSkip={(skip: boolean) => this.setState({ skip })}
-          />
-        );
+      class Parent extends React.Component<{}, { skip: boolean }> {
+        state = { skip: false };
+        render() {
+          return (
+            <Container
+              skip={this.state.skip}
+              setSkip={(skip: boolean) => this.setState({ skip })}
+            />
+          );
+        }
       }
-    }
 
-    render(
-      <ApolloProvider client={client}>
-        <Parent />
-      </ApolloProvider>
-    );
+      render(
+        <ApolloProvider client={client}>
+          <Parent />
+        </ApolloProvider>
+      );
 
-    waitFor(() => {
-      expect(count).toEqual(7)
-    }).then(resolve, reject);
-  }));
+      waitFor(() => {
+        expect(count).toEqual(7);
+      }).then(resolve, reject);
+    }));
 
   // This test might have value, but is currently broken (the count === 0 test
   // is never hit, for example, because count++ happens the first time before
   // componentDidUpdate is called), so we are skipping it for now.
-  it.skip('removes the injected props if skip becomes true', async () => {
+  it.skip("removes the injected props if skip becomes true", async () => {
     let count = 0;
     const query: DocumentNode = gql`
       query people($first: Int) {
@@ -750,13 +778,13 @@ describe('[queries] skip', () => {
       }
     `;
 
-    const data1 = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
+    const data1 = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
     const variables1 = { first: 1 };
 
-    const data2 = { allPeople: { people: [{ name: 'Leia Skywalker' }] } };
+    const data2 = { allPeople: { people: [{ name: "Leia Skywalker" }] } };
     const variables2 = { first: 2 };
 
-    const data3 = { allPeople: { people: [{ name: 'Anakin Skywalker' }] } };
+    const data3 = { allPeople: { people: [{ name: "Anakin Skywalker" }] } };
     const variables3 = { first: 3 };
 
     type Data = typeof data1;
@@ -770,18 +798,17 @@ describe('[queries] skip', () => {
 
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     const Container = graphql<Vars, Data>(query, {
-      skip: () => count === 1
+      skip: () => count === 1,
     })(
       class extends React.Component<ChildProps<Vars, Data>> {
         componentDidUpdate() {
           const { data } = this.props;
           // loading is true, but data still there
-          if (count === 0)
-            expect(data!.allPeople).toEqual(data1.allPeople);
+          if (count === 0) expect(data!.allPeople).toEqual(data1.allPeople);
           if (count === 1) expect(data).toBeUndefined();
           if (count === 2 && !data!.loading) {
             expect(data!.allPeople).toEqual(data3.allPeople);
@@ -823,7 +850,7 @@ describe('[queries] skip', () => {
     });
   });
 
-  itAsync('allows you to unmount a skipped query', (resolve, reject) => {
+  itAsync("allows you to unmount a skipped query", (resolve, reject) => {
     const query: DocumentNode = gql`
       query people {
         allPeople(first: 1) {
@@ -836,7 +863,7 @@ describe('[queries] skip', () => {
     const link = mockSingleLink();
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     interface Props {
@@ -845,7 +872,7 @@ describe('[queries] skip', () => {
 
     let done = false;
     const Container = graphql<Props>(query, {
-      skip: true
+      skip: true,
     })(
       class extends React.Component<ChildProps<Props>> {
         componentDidMount() {
diff --git a/src/react/hoc/__tests__/queries/updateQuery.test.tsx b/src/react/hoc/__tests__/queries/updateQuery.test.tsx
index 14b25360e7b..0d3056b862e 100644
--- a/src/react/hoc/__tests__/queries/updateQuery.test.tsx
+++ b/src/react/hoc/__tests__/queries/updateQuery.test.tsx
@@ -1,18 +1,18 @@
-import React from 'react';
-import gql from 'graphql-tag';
-import { DocumentNode } from 'graphql';
-import { render, waitFor } from '@testing-library/react';
+import React from "react";
+import gql from "graphql-tag";
+import { DocumentNode } from "graphql";
+import { render, waitFor } from "@testing-library/react";
 
-import { ApolloClient } from '../../../../core';
-import { ApolloProvider } from '../../../context';
-import { InMemoryCache as Cache } from '../../../../cache';
-import { itAsync, mockSingleLink } from '../../../../testing';
-import { graphql } from '../../graphql';
-import { ChildProps } from '../../types';
+import { ApolloClient } from "../../../../core";
+import { ApolloProvider } from "../../../context";
+import { InMemoryCache as Cache } from "../../../../cache";
+import { itAsync, mockSingleLink } from "../../../../testing";
+import { graphql } from "../../graphql";
+import { ChildProps } from "../../types";
 
-describe('[queries] updateQuery', () => {
+describe("[queries] updateQuery", () => {
   // updateQuery
-  itAsync('exposes updateQuery as part of the props api', (resolve, reject) => {
+  itAsync("exposes updateQuery as part of the props api", (resolve, reject) => {
     const query: DocumentNode = gql`
       query people {
         allPeople(first: 1) {
@@ -24,11 +24,11 @@ describe('[queries] updateQuery', () => {
     `;
     const link = mockSingleLink({
       request: { query },
-      result: { data: { allPeople: { people: [{ name: 'Luke Skywalker' }] } } }
+      result: { data: { allPeople: { people: [{ name: "Luke Skywalker" }] } } },
     });
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     let done = false;
@@ -39,7 +39,9 @@ describe('[queries] updateQuery', () => {
           expect(data!.updateQuery).toBeTruthy();
           expect(data!.updateQuery instanceof Function).toBeTruthy();
           try {
-            data!.updateQuery(() => { done = true; });
+            data!.updateQuery(() => {
+              done = true;
+            });
           } catch (error) {
             reject(error);
           }
@@ -59,213 +61,229 @@ describe('[queries] updateQuery', () => {
     waitFor(() => expect(done).toBeTruthy()).then(resolve, reject);
   });
 
-  itAsync('exposes updateQuery as part of the props api during componentWillMount', (resolve, reject) => {
-    let done = false;
-    const query: DocumentNode = gql`
-      query people {
-        allPeople(first: 1) {
-          people {
-            name
+  itAsync(
+    "exposes updateQuery as part of the props api during componentWillMount",
+    (resolve, reject) => {
+      let done = false;
+      const query: DocumentNode = gql`
+        query people {
+          allPeople(first: 1) {
+            people {
+              name
+            }
           }
         }
-      }
-    `;
-    const link = mockSingleLink({
-      request: { query },
-      result: { data: { allPeople: { people: [{ name: 'Luke Skywalker' }] } } }
-    });
-    const client = new ApolloClient({
-      link,
-      cache: new Cache({ addTypename: false })
-    });
+      `;
+      const link = mockSingleLink({
+        request: { query },
+        result: {
+          data: { allPeople: { people: [{ name: "Luke Skywalker" }] } },
+        },
+      });
+      const client = new ApolloClient({
+        link,
+        cache: new Cache({ addTypename: false }),
+      });
 
-    const Container = graphql(query)(
-      class extends React.Component<ChildProps> {
-        render() {
-          expect(this.props.data!.updateQuery).toBeTruthy();
-          expect(this.props.data!.updateQuery instanceof Function).toBeTruthy();
-          done = true;
-          return null;
+      const Container = graphql(query)(
+        class extends React.Component<ChildProps> {
+          render() {
+            expect(this.props.data!.updateQuery).toBeTruthy();
+            expect(
+              this.props.data!.updateQuery instanceof Function
+            ).toBeTruthy();
+            done = true;
+            return null;
+          }
         }
-      }
-    );
+      );
 
-    render(
-      <ApolloProvider client={client}>
-        <Container />
-      </ApolloProvider>
-    );
+      render(
+        <ApolloProvider client={client}>
+          <Container />
+        </ApolloProvider>
+      );
 
-    waitFor(() => {
-      expect(done).toBe(true)
-    }).then(resolve, reject);
-  });
+      waitFor(() => {
+        expect(done).toBe(true);
+      }).then(resolve, reject);
+    }
+  );
 
-  itAsync('updateQuery throws if called before data has returned', (resolve, reject) => {
-    let renderCount = 0;
-    const query: DocumentNode = gql`
-      query people {
-        allPeople(first: 1) {
-          people {
-            name
+  itAsync(
+    "updateQuery throws if called before data has returned",
+    (resolve, reject) => {
+      let renderCount = 0;
+      const query: DocumentNode = gql`
+        query people {
+          allPeople(first: 1) {
+            people {
+              name
+            }
           }
         }
-      }
-    `;
-    const link = mockSingleLink({
-      request: { query },
-      result: { data: { allPeople: { people: [{ name: 'Luke Skywalker' }] } } }
-    });
-    const client = new ApolloClient({
-      link,
-      cache: new Cache({ addTypename: false })
-    });
+      `;
+      const link = mockSingleLink({
+        request: { query },
+        result: {
+          data: { allPeople: { people: [{ name: "Luke Skywalker" }] } },
+        },
+      });
+      const client = new ApolloClient({
+        link,
+        cache: new Cache({ addTypename: false }),
+      });
 
-    const Container = graphql(query)(
-      class extends React.Component<ChildProps> {
-        render() {
-          expect(this.props.data!.updateQuery).toBeTruthy();
-          expect(this.props.data!.updateQuery instanceof Function).toBeTruthy();
-          try {
-            this.props.data!.updateQuery(p => p);
-          } catch (e) {
-            // TODO: branch never hit in test
-            expect(e.toString()).toMatch(
-              /ObservableQuery with this id doesn't exist:/
-            );
-          }
-          renderCount += 1;
+      const Container = graphql(query)(
+        class extends React.Component<ChildProps> {
+          render() {
+            expect(this.props.data!.updateQuery).toBeTruthy();
+            expect(
+              this.props.data!.updateQuery instanceof Function
+            ).toBeTruthy();
+            try {
+              this.props.data!.updateQuery((p) => p);
+            } catch (e) {
+              // TODO: branch never hit in test
+              expect(e.toString()).toMatch(
+                /ObservableQuery with this id doesn't exist:/
+              );
+            }
+            renderCount += 1;
 
-          return null;
+            return null;
+          }
         }
-      }
-    );
+      );
 
-    render(
-      <ApolloProvider client={client}>
-        <Container />
-      </ApolloProvider>
-    );
+      render(
+        <ApolloProvider client={client}>
+          <Container />
+        </ApolloProvider>
+      );
 
-    waitFor(() => {
-      expect(renderCount).toBe(2)
-    }).then(resolve, reject);
-  });
+      waitFor(() => {
+        expect(renderCount).toBe(2);
+      }).then(resolve, reject);
+    }
+  );
 
-  itAsync('allows updating query results after query has finished (early binding)', (resolve, reject) => {
-    let done = false;
-    const query: DocumentNode = gql`
-      query people {
-        allPeople(first: 1) {
-          people {
-            name
+  itAsync(
+    "allows updating query results after query has finished (early binding)",
+    (resolve, reject) => {
+      let done = false;
+      const query: DocumentNode = gql`
+        query people {
+          allPeople(first: 1) {
+            people {
+              name
+            }
           }
         }
-      }
-    `;
-    const data1 = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
-    type Data = typeof data1;
-    const data2 = { allPeople: { people: [{ name: 'Leia Skywalker' }] } };
-    const link = mockSingleLink(
-      { request: { query }, result: { data: data1 } },
-      { request: { query }, result: { data: data2 } }
-    );
-    const client = new ApolloClient({
-      link,
-      cache: new Cache({ addTypename: false })
-    });
+      `;
+      const data1 = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
+      type Data = typeof data1;
+      const data2 = { allPeople: { people: [{ name: "Leia Skywalker" }] } };
+      const link = mockSingleLink(
+        { request: { query }, result: { data: data1 } },
+        { request: { query }, result: { data: data2 } }
+      );
+      const client = new ApolloClient({
+        link,
+        cache: new Cache({ addTypename: false }),
+      });
 
-    let isUpdated = false;
-    const Container = graphql<{}, Data>(query)(
-      class extends React.Component<ChildProps<{}, Data>> {
-        public updateQuery: any;
-        componentDidUpdate() {
-          if (isUpdated) {
-            expect(this.props.data!.allPeople).toEqual(
-              data2.allPeople
-            );
-            done = true;
-            return;
-          } else {
-            isUpdated = true;
-            this.updateQuery(() => {
-              return data2;
-            });
+      let isUpdated = false;
+      const Container = graphql<{}, Data>(query)(
+        class extends React.Component<ChildProps<{}, Data>> {
+          public updateQuery: any;
+          componentDidUpdate() {
+            if (isUpdated) {
+              expect(this.props.data!.allPeople).toEqual(data2.allPeople);
+              done = true;
+              return;
+            } else {
+              isUpdated = true;
+              this.updateQuery(() => {
+                return data2;
+              });
+            }
+          }
+          render() {
+            this.updateQuery = this.props.data!.updateQuery;
+            return null;
           }
         }
-        render() {
-          this.updateQuery = this.props.data!.updateQuery;
-          return null;
-        }
-      }
-    );
+      );
 
-    render(
-      <ApolloProvider client={client}>
-        <Container />
-      </ApolloProvider>
-    );
+      render(
+        <ApolloProvider client={client}>
+          <Container />
+        </ApolloProvider>
+      );
 
-    waitFor(() => {
-      expect(done).toBe(true);
-    }).then(resolve, reject);
-  });
+      waitFor(() => {
+        expect(done).toBe(true);
+      }).then(resolve, reject);
+    }
+  );
 
-  itAsync('allows updating query results after query has finished', (resolve, reject) => {
-    let done = false;
-    const query: DocumentNode = gql`
-      query people {
-        allPeople(first: 1) {
-          people {
-            name
+  itAsync(
+    "allows updating query results after query has finished",
+    (resolve, reject) => {
+      let done = false;
+      const query: DocumentNode = gql`
+        query people {
+          allPeople(first: 1) {
+            people {
+              name
+            }
           }
         }
-      }
-    `;
-    const data1 = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
-    type Data = typeof data1;
+      `;
+      const data1 = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
+      type Data = typeof data1;
 
-    const data2 = { allPeople: { people: [{ name: 'Leia Skywalker' }] } };
-    const link = mockSingleLink(
-      { request: { query }, result: { data: data1 } },
-      { request: { query }, result: { data: data2 } }
-    );
-    const client = new ApolloClient({
-      link,
-      cache: new Cache({ addTypename: false })
-    });
+      const data2 = { allPeople: { people: [{ name: "Leia Skywalker" }] } };
+      const link = mockSingleLink(
+        { request: { query }, result: { data: data1 } },
+        { request: { query }, result: { data: data2 } }
+      );
+      const client = new ApolloClient({
+        link,
+        cache: new Cache({ addTypename: false }),
+      });
 
-    let isUpdated = false;
-    const Container = graphql<{}, Data>(query)(
-      class extends React.Component<ChildProps<{}, Data>> {
-        componentDidUpdate() {
-          if (isUpdated) {
-            expect(this.props.data!.allPeople).toEqual(
-              data2.allPeople
-            );
-            done = true
-            return;
-          } else {
-            isUpdated = true;
-            this.props.data!.updateQuery(() => {
-              return data2;
-            });
+      let isUpdated = false;
+      const Container = graphql<{}, Data>(query)(
+        class extends React.Component<ChildProps<{}, Data>> {
+          componentDidUpdate() {
+            if (isUpdated) {
+              expect(this.props.data!.allPeople).toEqual(data2.allPeople);
+              done = true;
+              return;
+            } else {
+              isUpdated = true;
+              this.props.data!.updateQuery(() => {
+                return data2;
+              });
+            }
+          }
+          render() {
+            return null;
           }
         }
-        render() {
-          return null;
-        }
-      }
-    );
+      );
 
-    render(
-      <ApolloProvider client={client}>
-        <Container />
-      </ApolloProvider>
-    );
+      render(
+        <ApolloProvider client={client}>
+          <Container />
+        </ApolloProvider>
+      );
 
-    waitFor(() => {
-      expect(done).toBe(true)
-    }).then(resolve, reject);
-  });
+      waitFor(() => {
+        expect(done).toBe(true);
+      }).then(resolve, reject);
+    }
+  );
 });
diff --git a/src/react/hoc/__tests__/shared-operations.test.tsx b/src/react/hoc/__tests__/shared-operations.test.tsx
index b7195be84f8..efd0b12924c 100644
--- a/src/react/hoc/__tests__/shared-operations.test.tsx
+++ b/src/react/hoc/__tests__/shared-operations.test.tsx
@@ -1,41 +1,41 @@
-import React from 'react';
-import { render, cleanup } from '@testing-library/react';
-import gql from 'graphql-tag';
-import { DocumentNode } from 'graphql';
-
-import { ApolloClient } from '../../../core';
-import { ApolloProvider } from '../../context';
-import { InMemoryCache as Cache } from '../../../cache';
-import { ApolloLink } from '../../../link/core';
-import { itAsync, mockSingleLink } from '../../../testing';
-import { graphql } from '../graphql';
-import { ChildProps, DataValue } from '../types';
-import { withApollo } from '../withApollo';
+import React from "react";
+import { render, cleanup } from "@testing-library/react";
+import gql from "graphql-tag";
+import { DocumentNode } from "graphql";
+
+import { ApolloClient } from "../../../core";
+import { ApolloProvider } from "../../context";
+import { InMemoryCache as Cache } from "../../../cache";
+import { ApolloLink } from "../../../link/core";
+import { itAsync, mockSingleLink } from "../../../testing";
+import { graphql } from "../graphql";
+import { ChildProps, DataValue } from "../types";
+import { withApollo } from "../withApollo";
 
 function compose(...funcs: Function[]) {
   const functions = funcs.reverse();
-  return function(...args: any[]) {
+  return function (...args: any[]) {
     const [firstFunction, ...restFunctions] = functions;
     let result = firstFunction.apply(null, args);
-    restFunctions.forEach(fnc => {
+    restFunctions.forEach((fnc) => {
       result = fnc.call(null, result);
     });
     return result;
   };
 }
 
-describe('shared operations', () => {
+describe("shared operations", () => {
   afterEach(cleanup);
 
-  describe('withApollo', () => {
-    it('passes apollo-client to props', () => {
+  describe("withApollo", () => {
+    it("passes apollo-client to props", () => {
       const client = new ApolloClient({
         link: new ApolloLink((o, f) => (f ? f(o) : null)),
-        cache: new Cache()
+        cache: new Cache(),
       });
 
       @withApollo
-      class ContainerWithData extends React.Component<any > {
+      class ContainerWithData extends React.Component<any> {
         render(): React.ReactNode {
           expect(this.props.client).toEqual(client);
           return null;
@@ -50,7 +50,7 @@ describe('shared operations', () => {
     });
   });
 
-  it('binds two queries to props', () => {
+  it("binds two queries to props", () => {
     const peopleQuery: DocumentNode = gql`
       query people {
         allPeople(first: 1) {
@@ -60,7 +60,7 @@ describe('shared operations', () => {
         }
       }
     `;
-    const peopleData = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
+    const peopleData = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
     interface PeopleData {
       allPeople: { people: [{ name: string }] };
     }
@@ -74,7 +74,7 @@ describe('shared operations', () => {
         }
       }
     `;
-    const shipsData = { allships: { ships: [{ name: 'Tie Fighter' }] } };
+    const shipsData = { allships: { ships: [{ name: "Tie Fighter" }] } };
     interface ShipsData {
       allShips: { ships: [{ name: string }] };
     }
@@ -85,7 +85,7 @@ describe('shared operations', () => {
     );
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     interface PeopleChildProps {
@@ -97,7 +97,7 @@ describe('shared operations', () => {
     const withPeople: any = graphql<{}, PeopleData, {}, PeopleChildProps>(
       peopleQuery,
       {
-        name: 'people'
+        name: "people",
       }
     );
 
@@ -107,7 +107,7 @@ describe('shared operations', () => {
     const withShips: any = graphql<{}, ShipsData, {}, ShipsChildProps>(
       shipsQuery,
       {
-        name: 'ships'
+        name: "ships",
       }
     );
 
@@ -134,7 +134,7 @@ describe('shared operations', () => {
     unmount();
   });
 
-  it('binds two queries to props with different syntax', () => {
+  it("binds two queries to props with different syntax", () => {
     const peopleQuery: DocumentNode = gql`
       query people {
         allPeople(first: 1) {
@@ -144,7 +144,7 @@ describe('shared operations', () => {
         }
       }
     `;
-    const peopleData = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
+    const peopleData = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
     interface PeopleData {
       allPeople: { people: [{ name: string }] };
     }
@@ -157,7 +157,7 @@ describe('shared operations', () => {
         }
       }
     `;
-    const shipsData = { allships: { ships: [{ name: 'Tie Fighter' }] } };
+    const shipsData = { allships: { ships: [{ name: "Tie Fighter" }] } };
     interface ShipsData {
       allShips: { ships: [{ name: string }] };
     }
@@ -168,7 +168,7 @@ describe('shared operations', () => {
     );
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     interface PeopleChildProps {
@@ -178,7 +178,7 @@ describe('shared operations', () => {
     const withPeople = graphql<{}, PeopleData, {}, PeopleChildProps>(
       peopleQuery,
       {
-        name: 'people'
+        name: "people",
       }
     );
 
@@ -191,7 +191,7 @@ describe('shared operations', () => {
       {},
       ShipsAndPeopleChildProps
     >(shipsQuery, {
-      name: 'ships'
+      name: "ships",
     });
 
     const ContainerWithData = withPeople(
@@ -216,7 +216,7 @@ describe('shared operations', () => {
     unmount();
   });
 
-  it('binds two operations to props', () => {
+  it("binds two operations to props", () => {
     const peopleQuery: DocumentNode = gql`
       query people {
         allPeople(first: 1) {
@@ -226,7 +226,7 @@ describe('shared operations', () => {
         }
       }
     `;
-    const peopleData = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
+    const peopleData = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
 
     const peopleMutation: DocumentNode = gql`
       mutation addPerson {
@@ -238,23 +238,23 @@ describe('shared operations', () => {
       }
     `;
     const peopleMutationData = {
-      allPeople: { people: [{ name: 'Leia Skywalker' }] }
+      allPeople: { people: [{ name: "Leia Skywalker" }] },
     };
 
     const link = mockSingleLink(
       { request: { query: peopleQuery }, result: { data: peopleData } },
       {
         request: { query: peopleMutation },
-        result: { data: peopleMutationData }
+        result: { data: peopleMutationData },
       }
     );
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
-    const withPeople = graphql(peopleQuery, { name: 'people' });
-    const withPeopleMutation = graphql(peopleMutation, { name: 'addPerson' });
+    const withPeople = graphql(peopleQuery, { name: "people" });
+    const withPeopleMutation = graphql(peopleMutation, { name: "addPerson" });
 
     const ContainerWithData = withPeople(
       withPeopleMutation(
@@ -281,7 +281,7 @@ describe('shared operations', () => {
     unmount();
   });
 
-  itAsync('allows options to take an object', (resolve, reject) => {
+  itAsync("allows options to take an object", (resolve, reject) => {
     const query: DocumentNode = gql`
       query people {
         allPeople(first: 1) {
@@ -291,16 +291,16 @@ describe('shared operations', () => {
         }
       }
     `;
-    const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
+    const data = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
     type Data = typeof data;
 
     const link = mockSingleLink({
       request: { query },
-      result: { data }
+      result: { data },
     });
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     let queryExecuted = false;
@@ -327,12 +327,12 @@ describe('shared operations', () => {
         resolve();
         return;
       }
-      reject(new Error('query ran even though skip present'));
+      reject(new Error("query ran even though skip present"));
     }, 25);
   });
 
-  describe('compose', () => {
-    it('binds two queries to props with different syntax', () => {
+  describe("compose", () => {
+    it("binds two queries to props with different syntax", () => {
       const peopleQuery: DocumentNode = gql`
         query people {
           allPeople(first: 1) {
@@ -343,7 +343,7 @@ describe('shared operations', () => {
         }
       `;
       const peopleData = {
-        allPeople: { people: [{ name: 'Luke Skywalker' }] }
+        allPeople: { people: [{ name: "Luke Skywalker" }] },
       };
 
       type PeopleData = typeof peopleData;
@@ -357,7 +357,7 @@ describe('shared operations', () => {
           }
         }
       `;
-      const shipsData = { allships: { ships: [{ name: 'Tie Fighter' }] } };
+      const shipsData = { allships: { ships: [{ name: "Tie Fighter" }] } };
 
       type ShipsData = typeof shipsData;
 
@@ -367,7 +367,7 @@ describe('shared operations', () => {
       );
       const client = new ApolloClient({
         link,
-        cache: new Cache({ addTypename: false })
+        cache: new Cache({ addTypename: false }),
       });
 
       interface PeopleChildProps {
@@ -381,12 +381,12 @@ describe('shared operations', () => {
 
       const enhanced = compose(
         graphql<{}, PeopleData, {}, PeopleChildProps>(peopleQuery, {
-          name: 'people'
+          name: "people",
         }),
         graphql<PeopleChildProps, ShipsData, {}, ShipsAndPeopleChildProps>(
           shipsQuery,
           {
-            name: 'ships'
+            name: "ships",
           }
         )
       );
diff --git a/src/react/hoc/__tests__/ssr/getDataFromTree.test.tsx b/src/react/hoc/__tests__/ssr/getDataFromTree.test.tsx
index 101961e1638..b4a0ab6fc6c 100644
--- a/src/react/hoc/__tests__/ssr/getDataFromTree.test.tsx
+++ b/src/react/hoc/__tests__/ssr/getDataFromTree.test.tsx
@@ -1,21 +1,21 @@
 /** @jest-environment node */
-import React from 'react';
-import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom/server';
-import gql from 'graphql-tag';
-import { DocumentNode } from 'graphql';
-
-import { ApolloClient } from '../../../../core';
-import { ApolloProvider } from '../../../context';
-import { InMemoryCache as Cache } from '../../../../cache';
-import { itAsync, mockSingleLink } from '../../../../testing';
-import { Query } from '../../../components';
-import { getDataFromTree, getMarkupFromTree } from '../../../ssr';
-import { graphql } from '../../graphql';
-import { ChildProps, DataValue } from '../../types';
-
-describe('SSR', () => {
-  describe('`getDataFromTree`', () => {
+import React from "react";
+import PropTypes from "prop-types";
+import ReactDOM from "react-dom/server";
+import gql from "graphql-tag";
+import { DocumentNode } from "graphql";
+
+import { ApolloClient } from "../../../../core";
+import { ApolloProvider } from "../../../context";
+import { InMemoryCache as Cache } from "../../../../cache";
+import { itAsync, mockSingleLink } from "../../../../testing";
+import { Query } from "../../../components";
+import { getDataFromTree, getMarkupFromTree } from "../../../ssr";
+import { graphql } from "../../graphql";
+import { ChildProps, DataValue } from "../../types";
+
+describe("SSR", () => {
+  describe("`getDataFromTree`", () => {
     const consoleWarn = console.warn;
     beforeAll(() => {
       console.warn = () => null;
@@ -25,7 +25,7 @@ describe('SSR', () => {
       console.warn = consoleWarn;
     });
 
-    it('should run through all of the queries that want SSR', async () => {
+    it("should run through all of the queries that want SSR", async () => {
       const query = gql`
         {
           currentUser {
@@ -33,14 +33,14 @@ describe('SSR', () => {
           }
         }
       `;
-      const data1 = { currentUser: { firstName: 'James' } };
+      const data1 = { currentUser: { firstName: "James" } };
       const link = mockSingleLink({
         request: { query },
         result: { data: data1 },
       });
       const apolloClient = new ApolloClient({
         link,
-        cache: new Cache({ addTypename: false })
+        cache: new Cache({ addTypename: false }),
       });
 
       interface Props {}
@@ -49,15 +49,15 @@ describe('SSR', () => {
           firstName: string;
         };
       }
-      const WrappedElement = graphql<Props, Data>(
-        query
-      )(({ data }: ChildProps<Props, Data>) => (
-        <div>
-          {!data || data.loading || !data.currentUser
-            ? 'loading'
-            : data.currentUser.firstName}
-        </div>
-      ));
+      const WrappedElement = graphql<Props, Data>(query)(
+        ({ data }: ChildProps<Props, Data>) => (
+          <div>
+            {!data || data.loading || !data.currentUser
+              ? "loading"
+              : data.currentUser.firstName}
+          </div>
+        )
+      );
 
       const app = (
         <ApolloProvider client={apolloClient}>
@@ -65,19 +65,19 @@ describe('SSR', () => {
         </ApolloProvider>
       );
 
-      await getDataFromTree(app).then(markup => {
+      await getDataFromTree(app).then((markup) => {
         expect(markup).toMatch(/James/);
       });
 
       await getMarkupFromTree({
         tree: app,
-        renderFunction: ReactDOM.renderToString
-      }).then(markup => {
+        renderFunction: ReactDOM.renderToString,
+      }).then((markup) => {
         expect(markup).toMatch(/James/);
       });
     });
 
-    it('should allow network-only fetchPolicy as an option and still render prefetched data', () => {
+    it("should allow network-only fetchPolicy as an option and still render prefetched data", () => {
       const query = gql`
         {
           currentUser {
@@ -87,12 +87,12 @@ describe('SSR', () => {
       `;
       const link = mockSingleLink({
         request: { query },
-        result: { data: { currentUser: { firstName: 'James' } } },
+        result: { data: { currentUser: { firstName: "James" } } },
       });
       const apolloClient = new ApolloClient({
         link,
         cache: new Cache({ addTypename: false }),
-        ssrMode: true
+        ssrMode: true,
       });
 
       interface Props {}
@@ -102,11 +102,11 @@ describe('SSR', () => {
         };
       }
       const WrappedElement = graphql<Props, Data>(query, {
-        options: { fetchPolicy: 'network-only' }
+        options: { fetchPolicy: "network-only" },
       })(({ data }: ChildProps<Props, Data>) => (
         <div>
           {!data || data.loading || !data.currentUser
-            ? 'loading'
+            ? "loading"
             : data.currentUser.firstName}
         </div>
       ));
@@ -117,12 +117,12 @@ describe('SSR', () => {
         </ApolloProvider>
       );
 
-      return getDataFromTree(app).then(markup => {
+      return getDataFromTree(app).then((markup) => {
         expect(markup).toMatch(/James/);
       });
     });
 
-    it('should allow cache-and-network fetchPolicy as an option and still render prefetched data', () => {
+    it("should allow cache-and-network fetchPolicy as an option and still render prefetched data", () => {
       const query = gql`
         {
           currentUser {
@@ -132,11 +132,11 @@ describe('SSR', () => {
       `;
       const link = mockSingleLink({
         request: { query },
-        result: { data: { currentUser: { firstName: 'James' } } }
+        result: { data: { currentUser: { firstName: "James" } } },
       });
       const apolloClient = new ApolloClient({
         link,
-        cache: new Cache({ addTypename: false })
+        cache: new Cache({ addTypename: false }),
       });
 
       interface Props {}
@@ -146,10 +146,10 @@ describe('SSR', () => {
         };
       }
       const WrappedElement = graphql<Props, Data>(query, {
-        options: { fetchPolicy: 'cache-and-network' }
+        options: { fetchPolicy: "cache-and-network" },
       })(({ data }: ChildProps<Props, Data>) => (
         <div>
-          {data && data.currentUser ? data.currentUser.firstName : 'loading'}
+          {data && data.currentUser ? data.currentUser.firstName : "loading"}
         </div>
       ));
 
@@ -159,12 +159,12 @@ describe('SSR', () => {
         </ApolloProvider>
       );
 
-      return getDataFromTree(app).then(markup => {
+      return getDataFromTree(app).then((markup) => {
         expect(markup).toMatch(/James/);
       });
     });
 
-    it('should pick up queries deep in the render tree', () => {
+    it("should pick up queries deep in the render tree", () => {
       const query = gql`
         {
           currentUser {
@@ -174,11 +174,11 @@ describe('SSR', () => {
       `;
       const link = mockSingleLink({
         request: { query },
-        result: { data: { currentUser: { firstName: 'James' } } },
+        result: { data: { currentUser: { firstName: "James" } } },
       });
       const apolloClient = new ApolloClient({
         link,
-        cache: new Cache({ addTypename: false })
+        cache: new Cache({ addTypename: false }),
       });
 
       interface Props {}
@@ -188,15 +188,15 @@ describe('SSR', () => {
         };
       }
 
-      const WrappedElement = graphql<Props, Data>(
-        query
-      )(({ data }: ChildProps<Props, Data>) => (
-        <div>
-          {!data || data.loading || !data.currentUser
-            ? 'loading'
-            : data.currentUser.firstName}
-        </div>
-      ));
+      const WrappedElement = graphql<Props, Data>(query)(
+        ({ data }: ChildProps<Props, Data>) => (
+          <div>
+            {!data || data.loading || !data.currentUser
+              ? "loading"
+              : data.currentUser.firstName}
+          </div>
+        )
+      );
 
       const Page = () => (
         <div>
@@ -213,12 +213,12 @@ describe('SSR', () => {
         </ApolloProvider>
       );
 
-      return getDataFromTree(app).then(markup => {
+      return getDataFromTree(app).then((markup) => {
         expect(markup).toMatch(/James/);
       });
     });
 
-    it('should handle nested queries that depend on each other', () => {
+    it("should handle nested queries that depend on each other", () => {
       const idQuery: DocumentNode = gql`
         {
           currentUser {
@@ -226,7 +226,7 @@ describe('SSR', () => {
           }
         }
       `;
-      const idData = { currentUser: { id: '1234' } };
+      const idData = { currentUser: { id: "1234" } };
       const userQuery: DocumentNode = gql`
         query getUser($id: String) {
           user(id: $id) {
@@ -234,8 +234,8 @@ describe('SSR', () => {
           }
         }
       `;
-      const variables = { id: '1234' };
-      const userData = { user: { firstName: 'James' } };
+      const variables = { id: "1234" };
+      const userData = { user: { firstName: "James" } };
       const link = mockSingleLink(
         { request: { query: idQuery }, result: { data: idData } },
         {
@@ -245,7 +245,7 @@ describe('SSR', () => {
       );
       const apolloClient = new ApolloClient({
         link,
-        cache: new Cache({ addTypename: false })
+        cache: new Cache({ addTypename: false }),
       });
 
       interface Props {}
@@ -275,15 +275,15 @@ describe('SSR', () => {
       >(userQuery, {
         skip: ({ data }) => data!.loading,
         options: ({ data }) => ({
-          variables: { id: data!.currentUser!.id }
-        })
+          variables: { id: data!.currentUser!.id },
+        }),
       });
-      const Component: React.FunctionComponent<React.PropsWithChildren<React.PropsWithChildren<any>>> = ({
-        data
-      }) => (
+      const Component: React.FunctionComponent<
+        React.PropsWithChildren<React.PropsWithChildren<any>>
+      > = ({ data }) => (
         <div>
           {!data || data.loading || !data.user
-            ? 'loading'
+            ? "loading"
             : data.user.firstName}
         </div>
       );
@@ -296,12 +296,12 @@ describe('SSR', () => {
         </ApolloProvider>
       );
 
-      return getDataFromTree(app).then(markup => {
+      return getDataFromTree(app).then((markup) => {
         expect(markup).toMatch(/James/);
       });
     });
 
-    it.skip('should return the first of multiple errors thrown by nested wrapped components', () => {
+    it.skip("should return the first of multiple errors thrown by nested wrapped components", () => {
       const lastNameQuery = gql`
         {
           currentUser {
@@ -328,9 +328,9 @@ describe('SSR', () => {
           result: {
             data: {
               currentUser: {
-                lastName: 'Tester'
+                lastName: "Tester",
               },
-            }
+            },
           },
         },
         {
@@ -338,15 +338,15 @@ describe('SSR', () => {
           result: {
             data: {
               currentUser: {
-                firstName: 'James'
+                firstName: "James",
               },
-            }
+            },
           },
         }
       );
       const apolloClient = new ApolloClient({
         link,
-        cache: new Cache({ addTypename: false })
+        cache: new Cache({ addTypename: false }),
       });
 
       interface Props {}
@@ -354,19 +354,19 @@ describe('SSR', () => {
       type WithLastNameProps = ChildProps<Props, LastNameData>;
       const withLastName = graphql<Props, LastNameData>(lastNameQuery);
 
-      const fooError = new Error('foo');
+      const fooError = new Error("foo");
       const BorkedComponent = () => {
         throw fooError;
       };
 
       const WrappedBorkedComponent = withLastName(BorkedComponent);
 
-      const ContainerComponent: React.FunctionComponent<React.PropsWithChildren<React.PropsWithChildren<WithLastNameProps>>> = ({
-        data
-      }) => (
+      const ContainerComponent: React.FunctionComponent<
+        React.PropsWithChildren<React.PropsWithChildren<WithLastNameProps>>
+      > = ({ data }) => (
         <div>
           {!data || data.loading || !data.currentUser
-            ? 'loading'
+            ? "loading"
             : data.currentUser.lastName}
           <WrappedBorkedComponent />
           <WrappedBorkedComponent />
@@ -385,16 +385,16 @@ describe('SSR', () => {
 
       return getDataFromTree(app).then(
         () => {
-          throw new Error('Should have thrown an error');
+          throw new Error("Should have thrown an error");
         },
-        e => {
-          expect(e.toString()).toEqual('Error: foo');
+        (e) => {
+          expect(e.toString()).toEqual("Error: foo");
           expect(e).toBe(fooError);
         }
       );
     });
 
-    it('should handle errors thrown by queries', () => {
+    it("should handle errors thrown by queries", () => {
       const query = gql`
         {
           currentUser {
@@ -404,11 +404,11 @@ describe('SSR', () => {
       `;
       const link = mockSingleLink({
         request: { query },
-        error: new Error('Failed to fetch'),
+        error: new Error("Failed to fetch"),
       });
       const apolloClient = new ApolloClient({
         link,
-        cache: new Cache({ addTypename: false })
+        cache: new Cache({ addTypename: false }),
       });
 
       interface Props {}
@@ -417,11 +417,13 @@ describe('SSR', () => {
           firstName: string;
         };
       }
-      const WrappedElement = graphql<Props, Data>(
-        query
-      )(({ data }: ChildProps<Props, Data>) => (
-        <div>{!data || data.loading ? 'loading' : data.error?.toString()}</div>
-      ));
+      const WrappedElement = graphql<Props, Data>(query)(
+        ({ data }: ChildProps<Props, Data>) => (
+          <div>
+            {!data || data.loading ? "loading" : data.error?.toString()}
+          </div>
+        )
+      );
 
       const Page = () => (
         <div>
@@ -438,13 +440,13 @@ describe('SSR', () => {
         </ApolloProvider>
       );
 
-      return getDataFromTree(app).catch(e => {
+      return getDataFromTree(app).catch((e) => {
         expect(e).toBeTruthy();
         expect(e.toString()).toMatch(/Failed to fetch/);
       });
     });
 
-    it('should correctly skip queries (deprecated)', () => {
+    it("should correctly skip queries (deprecated)", () => {
       const query = gql`
         {
           currentUser {
@@ -454,11 +456,11 @@ describe('SSR', () => {
       `;
       const link = mockSingleLink({
         request: { query },
-        result: { data: { currentUser: { firstName: 'James' } } },
+        result: { data: { currentUser: { firstName: "James" } } },
       });
       const apolloClient = new ApolloClient({
         link,
-        cache: new Cache({ addTypename: false })
+        cache: new Cache({ addTypename: false }),
       });
 
       interface Props {}
@@ -468,9 +470,9 @@ describe('SSR', () => {
         };
       }
       const WrappedElement = graphql<Props, Data>(query, {
-        skip: true
+        skip: true,
       })(({ data }: ChildProps<Props, Data>) => (
-        <div>{!data ? 'skipped' : 'dang'}</div>
+        <div>{!data ? "skipped" : "dang"}</div>
       ));
 
       const app = (
@@ -479,12 +481,12 @@ describe('SSR', () => {
         </ApolloProvider>
       );
 
-      return getDataFromTree(app).then(markup => {
+      return getDataFromTree(app).then((markup) => {
         expect(markup).toMatch(/skipped/);
       });
     });
 
-    it('should use the correct default props for a query', () => {
+    it("should use the correct default props for a query", () => {
       const query = gql`
         query user($id: ID) {
           currentUser(id: $id) {
@@ -492,8 +494,8 @@ describe('SSR', () => {
           }
         }
       `;
-      const resultData = { currentUser: { firstName: 'James' } };
-      const variables = { id: '1' };
+      const resultData = { currentUser: { firstName: "James" } };
+      const variables = { id: "1" };
       const link = mockSingleLink({
         request: { query, variables },
         result: { data: resultData },
@@ -502,7 +504,7 @@ describe('SSR', () => {
       const cache = new Cache({ addTypename: false });
       const apolloClient = new ApolloClient({
         link,
-        cache
+        cache,
       });
 
       interface Props {
@@ -516,19 +518,19 @@ describe('SSR', () => {
       interface Variables {
         id: string;
       }
-      const Element = graphql<Props, Data, Variables>(
-        query,
-      )(({ data }: ChildProps<Props, Data, Variables>) => (
-        <div>
-          {!data || data.loading || !data.currentUser
-            ? 'loading'
-            : data.currentUser.firstName}
-        </div>
-      ));
+      const Element = graphql<Props, Data, Variables>(query)(
+        ({ data }: ChildProps<Props, Data, Variables>) => (
+          <div>
+            {!data || data.loading || !data.currentUser
+              ? "loading"
+              : data.currentUser.firstName}
+          </div>
+        )
+      );
 
       const app = (
         <ApolloProvider client={apolloClient}>
-          <Element id={'1'} />
+          <Element id={"1"} />
         </ApolloProvider>
       );
 
@@ -541,85 +543,88 @@ describe('SSR', () => {
       });
     });
 
-    itAsync('should allow for setting state in a component', (resolve, reject) => {
-      const query = gql`
-        query user($id: ID) {
-          currentUser(id: $id) {
-            firstName
+    itAsync(
+      "should allow for setting state in a component",
+      (resolve, reject) => {
+        const query = gql`
+          query user($id: ID) {
+            currentUser(id: $id) {
+              firstName
+            }
           }
+        `;
+        const resultData = { currentUser: { firstName: "James" } };
+        const variables = { id: "1" };
+        const link = mockSingleLink({
+          request: { query, variables },
+          result: { data: resultData },
+        });
+
+        const cache = new Cache({ addTypename: false });
+        const apolloClient = new ApolloClient({
+          link,
+          cache,
+        });
+
+        interface Props {
+          id: string;
         }
-      `;
-      const resultData = { currentUser: { firstName: 'James' } };
-      const variables = { id: '1' };
-      const link = mockSingleLink({
-        request: { query, variables },
-        result: { data: resultData },
-      });
-
-      const cache = new Cache({ addTypename: false });
-      const apolloClient = new ApolloClient({
-        link,
-        cache
-      });
-
-      interface Props {
-        id: string;
-      }
-      interface Data {
-        currentUser: {
-          firstName: string;
-        };
-      }
-      interface Variables {
-        id: string;
-      }
-
-      class Element extends React.Component<
-        ChildProps<Props, Data, Variables>,
-        { thing: number }
-      > {
-        state = { thing: 1 };
-
-        static getDerivedStateFromProps() {
-          return {
-            thing: 2
+        interface Data {
+          currentUser: {
+            firstName: string;
           };
         }
-
-        render() {
-          const { data } = this.props;
-          expect(this.state.thing).toBe(2);
-          return (
-            <div>
-              {!data || data.loading || !data.currentUser
-                ? 'loading'
-                : data.currentUser.firstName}
-            </div>
-          );
+        interface Variables {
+          id: string;
         }
-      }
 
-      const ElementWithData = graphql<Props, Data, Variables>(query)(Element);
+        class Element extends React.Component<
+          ChildProps<Props, Data, Variables>,
+          { thing: number }
+        > {
+          state = { thing: 1 };
 
-      const app = (
-        <ApolloProvider client={apolloClient}>
-          <ElementWithData id={'1'} />
-        </ApolloProvider>
-      );
+          static getDerivedStateFromProps() {
+            return {
+              thing: 2,
+            };
+          }
 
-      getDataFromTree(app)
-        .then(() => {
-          const initialState = cache.extract();
-          expect(initialState).toBeTruthy();
-          expect(
-            initialState.ROOT_QUERY!['currentUser({"id":"1"})']
-          ).toBeTruthy();
-          resolve();
-        })
-        .catch(console.error);
-    });
+          render() {
+            const { data } = this.props;
+            expect(this.state.thing).toBe(2);
+            return (
+              <div>
+                {!data || data.loading || !data.currentUser
+                  ? "loading"
+                  : data.currentUser.firstName}
+              </div>
+            );
+          }
+        }
+
+        const ElementWithData = graphql<Props, Data, Variables>(query)(Element);
+
+        const app = (
+          <ApolloProvider client={apolloClient}>
+            <ElementWithData id={"1"} />
+          </ApolloProvider>
+        );
+
+        getDataFromTree(app)
+          .then(() => {
+            const initialState = cache.extract();
+            expect(initialState).toBeTruthy();
+            expect(
+              initialState.ROOT_QUERY!['currentUser({"id":"1"})']
+            ).toBeTruthy();
+            resolve();
+          })
+          .catch(console.error);
+      }
+    );
 
-    it('should correctly initialize an empty state to null', () => {
+    it("should correctly initialize an empty state to null", () => {
       class Element extends React.Component<any, any> {
         render() {
           expect(this.state).toBeNull();
@@ -630,15 +635,15 @@ describe('SSR', () => {
       return getDataFromTree(<Element />);
     });
 
-    it('should maintain any state set in the element constructor', () => {
+    it("should maintain any state set in the element constructor", () => {
       class Element extends React.Component<{}, { foo: string }> {
         constructor(props: {}) {
           super(props);
-          this.state = { foo: 'bar' };
+          this.state = { foo: "bar" };
         }
 
         render() {
-          expect(this.state).toEqual({ foo: 'bar' });
+          expect(this.state).toEqual({ foo: "bar" });
           return null;
         }
       }
@@ -646,7 +651,7 @@ describe('SSR', () => {
       return getDataFromTree(<Element />);
     });
 
-    itAsync('should allow prepping state from props', (resolve, reject) => {
+    itAsync("should allow prepping state from props", (resolve, reject) => {
       const query = gql`
         query user($id: ID) {
           currentUser(id: $id) {
@@ -654,8 +659,8 @@ describe('SSR', () => {
           }
         }
       `;
-      const resultData = { currentUser: { firstName: 'James' } };
-      const variables = { id: '1' };
+      const resultData = { currentUser: { firstName: "James" } };
+      const variables = { id: "1" };
       const link = mockSingleLink({
         request: { query, variables },
         result: { data: resultData },
@@ -663,8 +668,8 @@ describe('SSR', () => {
       const apolloClient = new ApolloClient({
         link,
         cache: new Cache({
-          addTypename: false
-        })
+          addTypename: false,
+        }),
       });
       interface Props {
         id: string;
@@ -691,14 +696,14 @@ describe('SSR', () => {
         state: State = {
           thing: 1,
           userId: null,
-          client: null
+          client: null,
         };
 
         static getDerivedStateFromProps(props: Props, state: State) {
           return {
             thing: state.thing + 1,
             userId: props.id,
-            client: apolloClient
+            client: apolloClient,
           };
         }
 
@@ -710,7 +715,7 @@ describe('SSR', () => {
           return (
             <div>
               {!data || data.loading || !data.currentUser
-                ? 'loading'
+                ? "loading"
                 : data.currentUser.firstName}
             </div>
           );
@@ -721,7 +726,7 @@ describe('SSR', () => {
 
       const app = (
         <ApolloProvider client={apolloClient}>
-          <ElementWithData id={'1'} />
+          <ElementWithData id={"1"} />
         </ApolloProvider>
       );
 
@@ -745,8 +750,8 @@ describe('SSR', () => {
           }
         }
       `;
-      const resultData = { currentUser: { firstName: 'James' } };
-      const variables = { id: '1' };
+      const resultData = { currentUser: { firstName: "James" } };
+      const variables = { id: "1" };
       const link = mockSingleLink({
         request: { query, variables },
         result: { data: resultData },
@@ -755,7 +760,7 @@ describe('SSR', () => {
       const cache = new Cache({ addTypename: false });
       const apolloClient = new ApolloClient({
         link,
-        cache
+        cache,
       });
 
       interface Data {
@@ -777,18 +782,18 @@ describe('SSR', () => {
       }
 
       const Element = graphql<Props, Data, Variables>(query, {
-        options: props => ({ variables: props, ssr: false })
+        options: (props) => ({ variables: props, ssr: false }),
       })(({ data }) => (
         <div>
           {!data || data.loading || !data.currentUser
-            ? 'loading'
+            ? "loading"
             : data.currentUser.firstName}
         </div>
       ));
 
       const app = (
         <ApolloProvider client={apolloClient}>
-          <Element id={'1'} />
+          <Element id={"1"} />
         </ApolloProvider>
       );
 
@@ -807,8 +812,8 @@ describe('SSR', () => {
           }
         }
       `;
-      const resultData = { currentUser: { firstName: 'James' } };
-      const variables = { id: '1' };
+      const resultData = { currentUser: { firstName: "James" } };
+      const variables = { id: "1" };
       const link = mockSingleLink({
         request: { query, variables },
         result: { data: resultData },
@@ -817,7 +822,7 @@ describe('SSR', () => {
       const cache = new Cache({ addTypename: false });
       const apolloClient = new ApolloClient({
         link,
-        cache
+        cache,
       });
 
       interface Data {
@@ -830,7 +835,7 @@ describe('SSR', () => {
         <Query query={query} ssr={false} variables={props}>
           {({ data, loading }: { data: Data; loading: boolean }) => (
             <div>
-              {loading || !data ? 'loading' : data.currentUser!.firstName}
+              {loading || !data ? "loading" : data.currentUser!.firstName}
             </div>
           )}
         </Query>
@@ -838,7 +843,7 @@ describe('SSR', () => {
 
       const app = (
         <ApolloProvider client={apolloClient}>
-          <Element id={'1'} />
+          <Element id={"1"} />
         </ApolloProvider>
       );
 
@@ -849,7 +854,7 @@ describe('SSR', () => {
       });
     });
 
-    it('should correctly handle SSR mutations', () => {
+    it("should correctly handle SSR mutations", () => {
       const query = gql`
         {
           currentUser {
@@ -857,7 +862,7 @@ describe('SSR', () => {
           }
         }
       `;
-      const data1 = { currentUser: { firstName: 'James' } };
+      const data1 = { currentUser: { firstName: "James" } };
 
       const mutation = gql`
         mutation {
@@ -866,7 +871,7 @@ describe('SSR', () => {
           }
         }
       `;
-      const mutationData = { logRoutes: { id: 'foo' } };
+      const mutationData = { logRoutes: { id: "foo" } };
 
       const link = mockSingleLink(
         { request: { query }, result: { data: data1 } },
@@ -877,7 +882,7 @@ describe('SSR', () => {
       );
       const apolloClient = new ApolloClient({
         link,
-        cache: new Cache({ addTypename: false })
+        cache: new Cache({ addTypename: false }),
       });
 
       interface Data {
@@ -900,9 +905,9 @@ describe('SSR', () => {
             expect(data!.refetch).toBeTruthy();
             return {
               refetchQuery: data!.refetch,
-              data: data!
+              data: data!,
             };
-          }
+          },
         }
       );
 
@@ -913,23 +918,29 @@ describe('SSR', () => {
         { action: (variables: {}) => Promise<any> }
       >(mutation, {
         props: ({ ownProps, mutate }: any) => {
-          if (ownProps.loading || typeof ownProps.loading === 'undefined')
+          if (ownProps.loading || typeof ownProps.loading === "undefined")
             return { action: () => Promise.resolve() };
           expect(ownProps.refetchQuery).toBeTruthy();
           return {
             action(variables: {}) {
               return mutate!({ variables }).then(() => ownProps.refetchQuery());
-            }
+            },
           };
-        }
+        },
       });
 
-      const Element: React.FunctionComponent<React.PropsWithChildren<React.PropsWithChildren<QueryChildProps & {
-        action: (variables: {}) => Promise<any>;
-      }>>> = ({ data }) => (
+      const Element: React.FunctionComponent<
+        React.PropsWithChildren<
+          React.PropsWithChildren<
+            QueryChildProps & {
+              action: (variables: {}) => Promise<any>;
+            }
+          >
+        >
+      > = ({ data }) => (
         <div>
           {!data || data.loading || !data.currentUser
-            ? 'loading'
+            ? "loading"
             : data.currentUser.firstName}
         </div>
       );
@@ -942,12 +953,12 @@ describe('SSR', () => {
         </ApolloProvider>
       );
 
-      return getDataFromTree(app).then(markup => {
+      return getDataFromTree(app).then((markup) => {
         expect(markup).toMatch(/James/);
       });
     });
 
-    it('should correctly handle SSR mutations, reverse order', () => {
+    it("should correctly handle SSR mutations, reverse order", () => {
       const query = gql`
         {
           currentUser {
@@ -979,16 +990,16 @@ describe('SSR', () => {
       const link = mockSingleLink(
         {
           request: { query },
-          result: { data: { currentUser: { firstName: 'James' } } },
+          result: { data: { currentUser: { firstName: "James" } } },
         },
         {
           request: { query: mutation },
-          result: { data: { logRoutes: { id: 'foo' } } },
+          result: { data: { logRoutes: { id: "foo" } } },
         }
       );
       const apolloClient = new ApolloClient({
         link,
-        cache: new Cache({ addTypename: false })
+        cache: new Cache({ addTypename: false }),
       });
 
       const withMutation = graphql<Props, MutationData>(mutation);
@@ -999,19 +1010,21 @@ describe('SSR', () => {
         props: ({ ownProps, data }) => {
           expect(ownProps.mutate).toBeTruthy();
           return {
-            data
+            data,
           };
-        }
+        },
       });
 
-      const Element: React.FunctionComponent<React.PropsWithChildren<React.PropsWithChildren<ChildProps<
-        ChildProps<Props, MutationData>,
-        QueryData,
-        {}
-      >>>> = ({ data }) => (
+      const Element: React.FunctionComponent<
+        React.PropsWithChildren<
+          React.PropsWithChildren<
+            ChildProps<ChildProps<Props, MutationData>, QueryData, {}>
+          >
+        >
+      > = ({ data }) => (
         <div>
           {!data || data.loading || !data.currentUser
-            ? 'loading'
+            ? "loading"
             : data.currentUser.firstName}
         </div>
       );
@@ -1024,12 +1037,12 @@ describe('SSR', () => {
         </ApolloProvider>
       );
 
-      return getDataFromTree(app).then(markup => {
+      return getDataFromTree(app).then((markup) => {
         expect(markup).toMatch(/James/);
       });
     });
 
-    it('should not require `ApolloProvider` to be the root component', () => {
+    it("should not require `ApolloProvider` to be the root component", () => {
       const query = gql`
         {
           currentUser {
@@ -1045,27 +1058,30 @@ describe('SSR', () => {
 
       const link = mockSingleLink({
         request: { query },
-        result: { data: { currentUser: { firstName: 'James' } } },
+        result: { data: { currentUser: { firstName: "James" } } },
       });
       const apolloClient = new ApolloClient({
         link,
-        cache: new Cache({ addTypename: false })
+        cache: new Cache({ addTypename: false }),
       });
 
-      const WrappedElement = graphql<{}, Data>(
-        query
-      )(({ data }: ChildProps<{}, Data>) => (
-        <div>
-          {!data || data.loading || !data.currentUser
-            ? 'loading'
-            : data.currentUser.firstName}
-        </div>
-      ));
+      const WrappedElement = graphql<{}, Data>(query)(
+        ({ data }: ChildProps<{}, Data>) => (
+          <div>
+            {!data || data.loading || !data.currentUser
+              ? "loading"
+              : data.currentUser.firstName}
+          </div>
+        )
+      );
 
-      class MyRootContainer extends React.Component<React.PropsWithChildren, { color: string }> {
+      class MyRootContainer extends React.Component<
+        React.PropsWithChildren,
+        { color: string }
+      > {
         constructor(props: {}) {
           super(props);
-          this.state = { color: 'purple' };
+          this.state = { color: "purple" };
         }
 
         getChildContext() {
@@ -1078,7 +1094,7 @@ describe('SSR', () => {
       }
 
       (MyRootContainer as any).childContextTypes = {
-        color: PropTypes.string
+        color: PropTypes.string,
       };
 
       const app = (
@@ -1089,7 +1105,7 @@ describe('SSR', () => {
         </MyRootContainer>
       );
 
-      return getDataFromTree(app).then(markup => {
+      return getDataFromTree(app).then((markup) => {
         expect(markup).toMatch(/James/);
       });
     });
diff --git a/src/react/hoc/__tests__/ssr/server.test.tsx b/src/react/hoc/__tests__/ssr/server.test.tsx
index a1322817ca3..e911a754df5 100644
--- a/src/react/hoc/__tests__/ssr/server.test.tsx
+++ b/src/react/hoc/__tests__/ssr/server.test.tsx
@@ -1,5 +1,5 @@
 /** @jest-environment node */
-import React from 'react';
+import React from "react";
 import {
   print,
   graphql as execute,
@@ -8,134 +8,136 @@ import {
   GraphQLList,
   GraphQLString,
   GraphQLID,
-  DocumentNode
-} from 'graphql';
-import gql from 'graphql-tag';
+  DocumentNode,
+} from "graphql";
+import gql from "graphql-tag";
 
-import { ApolloClient } from '../../../../core';
-import { ApolloProvider } from '../../../context';
-import { InMemoryCache as Cache } from '../../../../cache';
-import { ApolloLink } from '../../../../link/core';
-import { Observable } from '../../../../utilities';
-import { renderToStringWithData } from '../../../ssr';
-import { graphql } from '../../graphql';
-import { ChildProps } from '../../types';
+import { ApolloClient } from "../../../../core";
+import { ApolloProvider } from "../../../context";
+import { InMemoryCache as Cache } from "../../../../cache";
+import { ApolloLink } from "../../../../link/core";
+import { Observable } from "../../../../utilities";
+import { renderToStringWithData } from "../../../ssr";
+import { graphql } from "../../graphql";
+import { ChildProps } from "../../types";
 
-const planetMap = new Map([['Planet:1', { id: 'Planet:1', name: 'Tatooine' }]]);
+const planetMap = new Map([["Planet:1", { id: "Planet:1", name: "Tatooine" }]]);
 
 const shipMap = new Map([
   [
-    'Ship:2',
+    "Ship:2",
     {
-      id: 'Ship:2',
-      name: 'CR90 corvette',
-      films: ['Film:4', 'Film:6', 'Film:3']
-    }
+      id: "Ship:2",
+      name: "CR90 corvette",
+      films: ["Film:4", "Film:6", "Film:3"],
+    },
   ],
   [
-    'Ship:3',
+    "Ship:3",
     {
-      id: 'Ship:3',
-      name: 'Star Destroyer',
-      films: ['Film:4', 'Film:5', 'Film:6']
-    }
-  ]
+      id: "Ship:3",
+      name: "Star Destroyer",
+      films: ["Film:4", "Film:5", "Film:6"],
+    },
+  ],
 ]);
 
 const filmMap = new Map([
-  ['Film:3', { id: 'Film:3', title: 'Revenge of the Sith' }],
-  ['Film:4', { id: 'Film:4', title: 'A New Hope' }],
-  ['Film:5', { id: 'Film:5', title: 'the Empire Strikes Back' }],
-  ['Film:6', { id: 'Film:6', title: 'Return of the Jedi' }]
+  ["Film:3", { id: "Film:3", title: "Revenge of the Sith" }],
+  ["Film:4", { id: "Film:4", title: "A New Hope" }],
+  ["Film:5", { id: "Film:5", title: "the Empire Strikes Back" }],
+  ["Film:6", { id: "Film:6", title: "Return of the Jedi" }],
 ]);
 
 const PlanetType = new GraphQLObjectType({
-  name: 'Planet',
+  name: "Planet",
   fields: {
     id: { type: GraphQLID },
-    name: { type: GraphQLString }
-  }
+    name: { type: GraphQLString },
+  },
 });
 
 const FilmType = new GraphQLObjectType({
-  name: 'Film',
+  name: "Film",
   fields: {
     id: { type: GraphQLID },
-    title: { type: GraphQLString }
-  }
+    title: { type: GraphQLString },
+  },
 });
 
 const ShipType = new GraphQLObjectType({
-  name: 'Ship',
+  name: "Ship",
   fields: {
     id: { type: GraphQLID },
     name: { type: GraphQLString },
     films: {
       type: new GraphQLList(FilmType),
-      resolve: ({ films }) => films.map((id: string) => filmMap.get(id))
-    }
-  }
+      resolve: ({ films }) => films.map((id: string) => filmMap.get(id)),
+    },
+  },
 });
 
 const QueryType = new GraphQLObjectType({
-  name: 'Query',
+  name: "Query",
   fields: {
     allPlanets: {
       type: new GraphQLList(PlanetType),
-      resolve: () => Array.from(planetMap.values())
+      resolve: () => Array.from(planetMap.values()),
     },
     allShips: {
       type: new GraphQLList(ShipType),
-      resolve: () => Array.from(shipMap.values())
+      resolve: () => Array.from(shipMap.values()),
     },
     ship: {
       type: ShipType,
       args: { id: { type: GraphQLID } },
-      resolve: (_, { id }) => shipMap.get(id)
+      resolve: (_, { id }) => shipMap.get(id),
     },
     film: {
       type: FilmType,
       args: { id: { type: GraphQLID } },
-      resolve: (_, { id }) => filmMap.get(id)
-    }
-  }
+      resolve: (_, { id }) => filmMap.get(id),
+    },
+  },
 });
 
 const Schema = new GraphQLSchema({ query: QueryType });
 
-describe('SSR', () => {
-  describe('`renderToStringWithData`', () => {
+describe("SSR", () => {
+  describe("`renderToStringWithData`", () => {
     // XXX break into smaller tests
     // XXX mock all queries
-    it('should work on a non trivial example', function() {
+    it("should work on a non trivial example", function () {
       const apolloClient = new ApolloClient({
-        link: new ApolloLink(config => {
-          return new Observable(observer => {
+        link: new ApolloLink((config) => {
+          return new Observable((observer) => {
             execute({
               schema: Schema,
               source: print(config.query),
               variableValues: config.variables,
-              operationName: config.operationName
+              operationName: config.operationName,
             })
-              .then(result => {
+              .then((result) => {
                 observer.next(result);
                 observer.complete();
               })
-              .catch(e => {
+              .catch((e) => {
                 observer.error(e);
               });
           });
         }),
-        cache: new Cache()
+        cache: new Cache(),
       });
 
-      @graphql(gql`
-        query data($id: ID!) {
-          film(id: $id) {
-            title
+      @graphql(
+        gql`
+          query data($id: ID!) {
+            film(id: $id) {
+              title
+            }
           }
-        }
-      ` as DocumentNode)
+        ` as DocumentNode
+      )
       class Film extends React.Component<any, any> {
         render(): React.ReactNode {
           const { data } = this.props;
@@ -156,16 +158,18 @@ describe('SSR', () => {
         id: string;
       }
 
-      @graphql<ShipVariables, ShipData, ShipVariables>(gql`
-        query data($id: ID!) {
-          ship(id: $id) {
-            name
-            films {
-              id
+      @graphql<ShipVariables, ShipData, ShipVariables>(
+        gql`
+          query data($id: ID!) {
+            ship(id: $id) {
+              name
+              films {
+                id
+              }
             }
           }
-        }
-      ` as DocumentNode)
+        ` as DocumentNode
+      )
       class Starship extends React.Component<
         ChildProps<ShipVariables, ShipData, ShipVariables>
       > {
@@ -193,13 +197,15 @@ describe('SSR', () => {
         allShips: { id: string }[];
       }
 
-      @graphql<{}, AllShipsData>(gql`
-        query data {
-          allShips {
-            id
+      @graphql<{}, AllShipsData>(
+        gql`
+          query data {
+            allShips {
+              id
+            }
           }
-        }
-      ` as DocumentNode)
+        ` as DocumentNode
+      )
       class AllShips extends React.Component<ChildProps<{}, AllShipsData>> {
         render(): React.ReactNode {
           const { data } = this.props;
@@ -222,13 +228,15 @@ describe('SSR', () => {
         allPlanets: { name: string }[];
       }
 
-      @graphql<{}, AllPlanetsData>(gql`
-        query data {
-          allPlanets {
-            name
+      @graphql<{}, AllPlanetsData>(
+        gql`
+          query data {
+            allPlanets {
+              name
+            }
           }
-        }
-      ` as DocumentNode)
+        ` as DocumentNode
+      )
       class AllPlanets extends React.Component<ChildProps<{}, AllPlanetsData>> {
         render(): React.ReactNode {
           const { data } = this.props;
@@ -267,7 +275,7 @@ describe('SSR', () => {
         </ApolloProvider>
       );
 
-      return renderToStringWithData(app).then(markup => {
+      return renderToStringWithData(app).then((markup) => {
         expect(markup).toMatch(/CR90 corvette/);
         expect(markup).toMatch(/Return of the Jedi/);
         expect(markup).toMatch(/A New Hope/);
diff --git a/src/react/hoc/__tests__/statics.test.tsx b/src/react/hoc/__tests__/statics.test.tsx
index 9c7150d7a6d..45b321053b5 100644
--- a/src/react/hoc/__tests__/statics.test.tsx
+++ b/src/react/hoc/__tests__/statics.test.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
-import gql from 'graphql-tag';
+import React from "react";
+import gql from "graphql-tag";
 
-import { graphql } from '../graphql';
+import { graphql } from "../graphql";
 
 let sampleOperation = gql`
   {
@@ -11,33 +11,33 @@ let sampleOperation = gql`
   }
 `;
 
-describe('statics', () => {
-  it('should be preserved', () => {
+describe("statics", () => {
+  it("should be preserved", () => {
     const ApolloContainer = graphql(sampleOperation)(
       class extends React.Component<any, any> {
-        static veryStatic = 'such global';
+        static veryStatic = "such global";
       }
     );
 
-    expect((ApolloContainer as any).veryStatic).toBe('such global');
+    expect((ApolloContainer as any).veryStatic).toBe("such global");
   });
 
-  it('exposes a debuggable displayName', () => {
+  it("exposes a debuggable displayName", () => {
     @graphql(sampleOperation)
     class ApolloContainer extends React.Component<any, any> {}
 
     expect((ApolloContainer as any).displayName).toBe(
-      'Apollo(ApolloContainer)'
+      "Apollo(ApolloContainer)"
     );
   });
 
-  it('honors custom display names', () => {
+  it("honors custom display names", () => {
     const ApolloContainer = graphql(sampleOperation)(
       class extends React.Component<any, any> {
-        static displayName = 'Foo';
+        static displayName = "Foo";
       }
     );
 
-    expect((ApolloContainer as any).displayName).toBe('Apollo(Foo)');
+    expect((ApolloContainer as any).displayName).toBe("Apollo(Foo)");
   });
 });
diff --git a/src/react/hoc/__tests__/subscriptions/subscriptions.test.tsx b/src/react/hoc/__tests__/subscriptions/subscriptions.test.tsx
index d3c59d582ac..b81567ca0d5 100644
--- a/src/react/hoc/__tests__/subscriptions/subscriptions.test.tsx
+++ b/src/react/hoc/__tests__/subscriptions/subscriptions.test.tsx
@@ -1,19 +1,19 @@
-import React from 'react';
-import { act, render } from '@testing-library/react';
-import gql from 'graphql-tag';
-import { DocumentNode } from 'graphql';
-
-import { ApolloClient } from '../../../../core';
-import { ApolloProvider } from '../../../context';
-import { InMemoryCache as Cache } from '../../../../cache';
-import { ApolloLink } from '../../../../link/core';
-import { itAsync, MockSubscriptionLink } from '../../../../testing';
-import { graphql } from '../../graphql';
-import { ChildProps } from '../../types';
+import React from "react";
+import { act, render } from "@testing-library/react";
+import gql from "graphql-tag";
+import { DocumentNode } from "graphql";
+
+import { ApolloClient } from "../../../../core";
+import { ApolloProvider } from "../../../context";
+import { InMemoryCache as Cache } from "../../../../cache";
+import { ApolloLink } from "../../../../link/core";
+import { itAsync, MockSubscriptionLink } from "../../../../testing";
+import { graphql } from "../../graphql";
+import { ChildProps } from "../../types";
 
 const IS_REACT_18 = React.version.startsWith("18");
 
-describe('subscriptions', () => {
+describe("subscriptions", () => {
   let error: typeof console.error;
 
   beforeEach(() => {
@@ -27,16 +27,16 @@ describe('subscriptions', () => {
   });
 
   const results = [
-    'James Baxley',
-    'John Pinkerton',
-    'Sam Claridge',
-    'Ben Coleman'
-  ].map(name => ({
+    "James Baxley",
+    "John Pinkerton",
+    "Sam Claridge",
+    "Ben Coleman",
+  ].map((name) => ({
     result: { data: { user: { name } } },
-    delay: 10
+    delay: 10,
   }));
 
-  it('binds a subscription to props', () => {
+  it("binds a subscription to props", () => {
     const query: DocumentNode = gql`
       subscription UserInfo {
         user {
@@ -47,7 +47,7 @@ describe('subscriptions', () => {
     const link = new MockSubscriptionLink();
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     interface Props {}
@@ -55,14 +55,14 @@ describe('subscriptions', () => {
       user: { name: string };
     }
 
-    const ContainerWithData = graphql<Props, Data>(query)(
-      ({ data }: ChildProps<Props, Data>) => {
-        expect(data).toBeTruthy();
-        expect(data!.user).toBeFalsy();
-        expect(data!.loading).toBeTruthy();
-        return null;
-      }
-    );
+    const ContainerWithData = graphql<Props, Data>(query)(({
+      data,
+    }: ChildProps<Props, Data>) => {
+      expect(data).toBeTruthy();
+      expect(data!.user).toBeFalsy();
+      expect(data!.loading).toBeTruthy();
+      return null;
+    });
 
     render(
       <ApolloProvider client={client}>
@@ -71,7 +71,7 @@ describe('subscriptions', () => {
     );
   });
 
-  it('includes the variables in the props', () => {
+  it("includes the variables in the props", () => {
     const query: DocumentNode = gql`
       subscription UserInfo($name: String) {
         user(name: $name) {
@@ -79,11 +79,11 @@ describe('subscriptions', () => {
         }
       }
     `;
-    const variables = { name: 'James Baxley' };
+    const variables = { name: "James Baxley" };
     const link = new MockSubscriptionLink();
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     interface Variables {
@@ -94,22 +94,22 @@ describe('subscriptions', () => {
       user: { name: string };
     }
 
-    const ContainerWithData = graphql<Variables, Data>(query)(
-      ({ data }: ChildProps<Variables, Data>) => {
-        expect(data).toBeTruthy();
-        expect(data!.variables).toEqual(variables);
-        return null;
-      }
-    );
+    const ContainerWithData = graphql<Variables, Data>(query)(({
+      data,
+    }: ChildProps<Variables, Data>) => {
+      expect(data).toBeTruthy();
+      expect(data!.variables).toEqual(variables);
+      return null;
+    });
 
     render(
       <ApolloProvider client={client}>
-        <ContainerWithData name={'James Baxley'} />
+        <ContainerWithData name={"James Baxley"} />
       </ApolloProvider>
     );
   });
 
-  itAsync('does not swallow children errors', (resolve, reject) => {
+  itAsync("does not swallow children errors", (resolve, reject) => {
     const query: DocumentNode = gql`
       subscription UserInfo {
         user {
@@ -120,7 +120,7 @@ describe('subscriptions', () => {
     const link = new MockSubscriptionLink();
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     let bar: any;
@@ -151,7 +151,7 @@ describe('subscriptions', () => {
     );
   });
 
-  itAsync('executes a subscription', (resolve, reject) => {
+  itAsync("executes a subscription", (resolve, reject) => {
     jest.useFakeTimers();
 
     const query: DocumentNode = gql`
@@ -168,7 +168,7 @@ describe('subscriptions', () => {
     const link = new MockSubscriptionLink();
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     let count = 0;
@@ -218,34 +218,34 @@ describe('subscriptions', () => {
 
     act(() => {
       jest.advanceTimersByTime(230);
-    })
+    });
   });
 
-  itAsync('resubscribes to a subscription', (resolve, reject) => {
+  itAsync("resubscribes to a subscription", (resolve, reject) => {
     //we make an extra Hoc which will trigger the inner HoC to resubscribe
     //these are the results for the outer subscription
     const triggerResults = [
-      '0',
-      'trigger resubscribe',
-      '3',
-      '4',
-      '5',
-      '6',
-      '7'
-    ].map(trigger => ({
+      "0",
+      "trigger resubscribe",
+      "3",
+      "4",
+      "5",
+      "6",
+      "7",
+    ].map((trigger) => ({
       result: { data: { trigger } },
-      delay: 10
+      delay: 10,
     }));
 
     //These are the results from the resubscription
     const results3 = [
-      'NewUser: 1',
-      'NewUser: 2',
-      'NewUser: 3',
-      'NewUser: 4'
-    ].map(name => ({
+      "NewUser: 1",
+      "NewUser: 2",
+      "NewUser: 3",
+      "NewUser: 4",
+    ].map((name) => ({
       result: { data: { user: { name } } },
-      delay: 10
+      delay: 10,
     }));
 
     const query: DocumentNode = gql`
@@ -271,14 +271,14 @@ describe('subscriptions', () => {
     const userLink = new MockSubscriptionLink();
     const triggerLink = new MockSubscriptionLink();
     const link = new ApolloLink((o, f) => (f ? f(o) : null)).split(
-      ({ operationName }) => operationName === 'UserInfo',
+      ({ operationName }) => operationName === "UserInfo",
       userLink,
       triggerLink
     );
 
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     let count = 0;
@@ -288,9 +288,9 @@ describe('subscriptions', () => {
 
     const Container = graphql<{}, TriggerData>(triggerQuery)(
       graphql<TriggerQueryChildProps, QueryData>(query, {
-        shouldResubscribe: nextProps => {
-          return nextProps.data!.trigger === 'trigger resubscribe';
-        }
+        shouldResubscribe: (nextProps) => {
+          return nextProps.data!.trigger === "trigger resubscribe";
+        },
       })(
         class Query extends React.Component<ComposedProps> {
           componentDidUpdate() {
diff --git a/src/react/hoc/graphql.tsx b/src/react/hoc/graphql.tsx
index 02220646731..88bf39e9961 100644
--- a/src/react/hoc/graphql.tsx
+++ b/src/react/hoc/graphql.tsx
@@ -1,18 +1,18 @@
-import type { DocumentNode } from 'graphql';
+import type { DocumentNode } from "graphql";
 
-import { parser, DocumentType } from '../parser/index.js';
-import { withQuery } from './query-hoc.js';
-import { withMutation } from './mutation-hoc.js';
-import { withSubscription } from './subscription-hoc.js';
-import type { OperationOption, DataProps, MutateProps } from './types.js';
-import type { OperationVariables } from '../../core/index.js';
+import { parser, DocumentType } from "../parser/index.js";
+import { withQuery } from "./query-hoc.js";
+import { withMutation } from "./mutation-hoc.js";
+import { withSubscription } from "./subscription-hoc.js";
+import type { OperationOption, DataProps, MutateProps } from "./types.js";
+import type { OperationVariables } from "../../core/index.js";
 
 export function graphql<
   TProps extends TGraphQLVariables | {} = {},
   TData extends object = {},
   TGraphQLVariables extends OperationVariables = {},
   TChildProps extends object = Partial<DataProps<TData, TGraphQLVariables>> &
-    Partial<MutateProps<TData, TGraphQLVariables>>
+    Partial<MutateProps<TData, TGraphQLVariables>>,
 >(
   document: DocumentNode,
   operationOptions: OperationOption<
diff --git a/src/react/hoc/hoc-utils.tsx b/src/react/hoc/hoc-utils.tsx
index 11ec8f381d4..2e59f74e944 100644
--- a/src/react/hoc/hoc-utils.tsx
+++ b/src/react/hoc/hoc-utils.tsx
@@ -1,14 +1,14 @@
-import { invariant } from '../../utilities/globals/index.js';
-import * as React from 'react';
-import type { OperationVariables } from '../../core/index.js';
-import type { IDocumentDefinition } from '../parser/index.js';
+import { invariant } from "../../utilities/globals/index.js";
+import * as React from "react";
+import type { OperationVariables } from "../../core/index.js";
+import type { IDocumentDefinition } from "../parser/index.js";
 
 export const defaultMapPropsToOptions = () => ({});
-export const defaultMapResultToProps: <P>(props: P) => P = props => props;
+export const defaultMapResultToProps: <P>(props: P) => P = (props) => props;
 export const defaultMapPropsToSkip = () => false;
 
 export function getDisplayName<P>(WrappedComponent: React.ComponentType<P>) {
-  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
+  return WrappedComponent.displayName || WrappedComponent.name || "Component";
 }
 
 export function calculateVariablesFromProps<TProps>(
@@ -22,13 +22,13 @@ export function calculateVariablesFromProps<TProps>(
     const variableName = variable.name.value;
     const variableProp = (props as any)[variableName];
 
-    if (typeof variableProp !== 'undefined') {
+    if (typeof variableProp !== "undefined") {
       variables[variableName] = variableProp;
       continue;
     }
 
     // Allow optional props
-    if (type.kind !== 'NonNullType') {
+    if (type.kind !== "NonNullType") {
       variables[variableName] = undefined;
     }
   }
@@ -43,7 +43,7 @@ export type RefSetter<TChildProps> = (
 export class GraphQLBase<
   TProps,
   TChildProps,
-  TState = any
+  TState = any,
 > extends React.Component<TProps, TState> {
   public withRef: boolean = false;
   // wrapped instance
diff --git a/src/react/hoc/index.ts b/src/react/hoc/index.ts
index 0d75eba7de2..477bc234122 100644
--- a/src/react/hoc/index.ts
+++ b/src/react/hoc/index.ts
@@ -1,10 +1,10 @@
-import '../../utilities/globals/index.js';
+import "../../utilities/globals/index.js";
 
-export { graphql } from './graphql.js';
+export { graphql } from "./graphql.js";
 
-export { withQuery } from './query-hoc.js';
-export { withMutation } from './mutation-hoc.js';
-export { withSubscription } from './subscription-hoc.js';
-export { withApollo } from './withApollo.js';
+export { withQuery } from "./query-hoc.js";
+export { withMutation } from "./mutation-hoc.js";
+export { withSubscription } from "./subscription-hoc.js";
+export { withApollo } from "./withApollo.js";
 
-export * from './types.js';
+export * from "./types.js";
diff --git a/src/react/hoc/mutation-hoc.tsx b/src/react/hoc/mutation-hoc.tsx
index 67f5a96184b..a0098a0f290 100644
--- a/src/react/hoc/mutation-hoc.tsx
+++ b/src/react/hoc/mutation-hoc.tsx
@@ -1,24 +1,24 @@
-import * as React from 'react';
-import type { DocumentNode } from 'graphql';
-import hoistNonReactStatics from 'hoist-non-react-statics';
+import * as React from "react";
+import type { DocumentNode } from "graphql";
+import hoistNonReactStatics from "hoist-non-react-statics";
 
-import { parser } from '../parser/index.js';
-import type { DefaultContext, OperationVariables } from '../../core/types.js';
+import { parser } from "../parser/index.js";
+import type { DefaultContext, OperationVariables } from "../../core/types.js";
 import type {
   BaseMutationOptions,
   MutationFunction,
-  MutationResult
-} from '../types/types.js';
-import { Mutation } from '../components/index.js';
+  MutationResult,
+} from "../types/types.js";
+import { Mutation } from "../components/index.js";
 
 import {
   defaultMapPropsToOptions,
   getDisplayName,
   calculateVariablesFromProps,
-  GraphQLBase
-} from './hoc-utils.js';
-import type { OperationOption, OptionProps, MutateProps } from './types.js';
-import type { ApolloCache } from '../../core/index.js';
+  GraphQLBase,
+} from "./hoc-utils.js";
+import type { OperationOption, OptionProps, MutateProps } from "./types.js";
+import type { ApolloCache } from "../../core/index.js";
 
 export function withMutation<
   TProps extends TGraphQLVariables | {} = {},
@@ -40,14 +40,20 @@ export function withMutation<
   const operation = parser(document);
   // extract options
 
-  const {
-    options = defaultMapPropsToOptions,
-    alias = 'Apollo'
-  } = operationOptions;
+  const { options = defaultMapPropsToOptions, alias = "Apollo" } =
+    operationOptions;
 
-  let mapPropsToOptions = options as (props: any) => BaseMutationOptions<TData, TGraphQLVariables, TContext, TCache>;
-  if (typeof mapPropsToOptions !== 'function')
-    mapPropsToOptions = () => options as BaseMutationOptions<TData, TGraphQLVariables, TContext, TCache>;
+  let mapPropsToOptions = options as (
+    props: any
+  ) => BaseMutationOptions<TData, TGraphQLVariables, TContext, TCache>;
+  if (typeof mapPropsToOptions !== "function")
+    mapPropsToOptions = () =>
+      options as BaseMutationOptions<
+        TData,
+        TGraphQLVariables,
+        TContext,
+        TCache
+      >;
 
   return (
     WrappedComponent: React.ComponentType<TProps & TChildProps>
@@ -58,16 +64,24 @@ export function withMutation<
       static WrappedComponent = WrappedComponent;
       render() {
         let props = this.props as TProps;
-        const opts = mapPropsToOptions(props) as BaseMutationOptions<TData, TGraphQLVariables, TContext, TCache>;
+        const opts = mapPropsToOptions(props) as BaseMutationOptions<
+          TData,
+          TGraphQLVariables,
+          TContext,
+          TCache
+        >;
 
         if (operationOptions.withRef) {
           this.withRef = true;
           props = Object.assign({}, props, {
-            ref: this.setWrappedInstance
+            ref: this.setWrappedInstance,
           });
         }
         if (!opts.variables && operation.variables.length > 0) {
-          opts.variables = calculateVariablesFromProps(operation, props) as TGraphQLVariables;
+          opts.variables = calculateVariablesFromProps(
+            operation,
+            props
+          ) as TGraphQLVariables;
         }
 
         return (
@@ -81,24 +95,21 @@ export function withMutation<
               // we massage the Mutation component's shape here to replicate that
               // this matches the query HoC
               const result = Object.assign(r, data || {});
-              const name = operationOptions.name || 'mutate';
+              const name = operationOptions.name || "mutate";
               const resultName = operationOptions.name
                 ? `${name}Result`
-                : 'result';
-              let childProps = ({
+                : "result";
+              let childProps = {
                 [name]: mutate,
-                [resultName]: result
-              } as any) as TChildProps;
+                [resultName]: result,
+              } as any as TChildProps;
               if (operationOptions.props) {
-                const newResult: OptionProps<
-                  TProps,
-                  TData,
-                  TGraphQLVariables
-                > = {
-                  [name]: mutate,
-                  [resultName]: result,
-                  ownProps: props
-                };
+                const newResult: OptionProps<TProps, TData, TGraphQLVariables> =
+                  {
+                    [name]: mutate,
+                    [resultName]: result,
+                    ownProps: props,
+                  };
                 childProps = operationOptions.props(newResult) as any;
               }
 
diff --git a/src/react/hoc/query-hoc.tsx b/src/react/hoc/query-hoc.tsx
index 04cf7a2b3d5..144133494c6 100644
--- a/src/react/hoc/query-hoc.tsx
+++ b/src/react/hoc/query-hoc.tsx
@@ -1,24 +1,24 @@
-import * as React from 'react';
-import type { DocumentNode } from 'graphql';
-import hoistNonReactStatics from 'hoist-non-react-statics';
+import * as React from "react";
+import type { DocumentNode } from "graphql";
+import hoistNonReactStatics from "hoist-non-react-statics";
 
-import { parser } from '../parser/index.js';
-import type { BaseQueryOptions } from '../types/types.js';
-import { Query } from '../components/index.js';
+import { parser } from "../parser/index.js";
+import type { BaseQueryOptions } from "../types/types.js";
+import { Query } from "../components/index.js";
 import {
   getDisplayName,
   GraphQLBase,
   calculateVariablesFromProps,
   defaultMapPropsToOptions,
-  defaultMapPropsToSkip
-} from './hoc-utils.js';
-import type { OperationOption, OptionProps, DataProps } from './types.js';
+  defaultMapPropsToSkip,
+} from "./hoc-utils.js";
+import type { OperationOption, OptionProps, DataProps } from "./types.js";
 
 export function withQuery<
   TProps extends TGraphQLVariables | Record<string, any> = Record<string, any>,
   TData extends object = {},
   TGraphQLVariables extends object = {},
-  TChildProps extends object = DataProps<TData, TGraphQLVariables>
+  TChildProps extends object = DataProps<TData, TGraphQLVariables>,
 >(
   document: DocumentNode,
   operationOptions: OperationOption<
@@ -34,16 +34,16 @@ export function withQuery<
   const {
     options = defaultMapPropsToOptions,
     skip = defaultMapPropsToSkip,
-    alias = 'Apollo'
+    alias = "Apollo",
   } = operationOptions;
 
   let mapPropsToOptions = options as (props: any) => BaseQueryOptions;
-  if (typeof mapPropsToOptions !== 'function') {
+  if (typeof mapPropsToOptions !== "function") {
     mapPropsToOptions = () => options as BaseQueryOptions;
   }
 
   let mapPropsToSkip = skip as (props: any) => boolean;
-  if (typeof mapPropsToSkip !== 'function') {
+  if (typeof mapPropsToSkip !== "function") {
     mapPropsToSkip = () => skip as any;
   }
 
@@ -79,7 +79,7 @@ export function withQuery<
               if (operationOptions.withRef) {
                 this.withRef = true;
                 props = Object.assign({}, props, {
-                  ref: this.setWrappedInstance
+                  ref: this.setWrappedInstance,
                 });
               }
 
@@ -97,17 +97,14 @@ export function withQuery<
               // up onto the result since it was passed as a nested prop
               // we massage the Query components shape here to replicate that
               const result = Object.assign(r, data || {});
-              const name = operationOptions.name || 'data';
+              const name = operationOptions.name || "data";
               let childProps = { [name]: result };
               if (operationOptions.props) {
-                const newResult: OptionProps<
-                  TProps,
-                  TData,
-                  TGraphQLVariables
-                > = {
-                  [name]: result,
-                  ownProps: props as TProps
-                };
+                const newResult: OptionProps<TProps, TData, TGraphQLVariables> =
+                  {
+                    [name]: result,
+                    ownProps: props as TProps,
+                  };
                 lastResultProps = operationOptions.props(
                   newResult,
                   lastResultProps
diff --git a/src/react/hoc/subscription-hoc.tsx b/src/react/hoc/subscription-hoc.tsx
index 7f092c72a51..b044c1c2658 100644
--- a/src/react/hoc/subscription-hoc.tsx
+++ b/src/react/hoc/subscription-hoc.tsx
@@ -1,24 +1,24 @@
-import * as React from 'react';
-import type { DocumentNode } from 'graphql';
-import hoistNonReactStatics from 'hoist-non-react-statics';
+import * as React from "react";
+import type { DocumentNode } from "graphql";
+import hoistNonReactStatics from "hoist-non-react-statics";
 
-import { parser } from '../parser/index.js';
-import type { BaseQueryOptions } from '../types/types.js';
-import { Subscription } from '../components/index.js';
+import { parser } from "../parser/index.js";
+import type { BaseQueryOptions } from "../types/types.js";
+import { Subscription } from "../components/index.js";
 import {
   getDisplayName,
   GraphQLBase,
   calculateVariablesFromProps,
   defaultMapPropsToOptions,
-  defaultMapPropsToSkip
-} from './hoc-utils.js';
-import type { OperationOption, OptionProps, DataProps } from './types.js';
+  defaultMapPropsToSkip,
+} from "./hoc-utils.js";
+import type { OperationOption, OptionProps, DataProps } from "./types.js";
 
 export function withSubscription<
   TProps extends TGraphQLVariables | {} = {},
   TData extends object = {},
   TGraphQLVariables extends object = {},
-  TChildProps extends object = DataProps<TData, TGraphQLVariables>
+  TChildProps extends object = DataProps<TData, TGraphQLVariables>,
 >(
   document: DocumentNode,
   operationOptions: OperationOption<
@@ -34,16 +34,16 @@ export function withSubscription<
   const {
     options = defaultMapPropsToOptions,
     skip = defaultMapPropsToSkip,
-    alias = 'Apollo',
-    shouldResubscribe
+    alias = "Apollo",
+    shouldResubscribe,
   } = operationOptions;
 
   let mapPropsToOptions = options as (props: any) => BaseQueryOptions;
-  if (typeof mapPropsToOptions !== 'function')
+  if (typeof mapPropsToOptions !== "function")
     mapPropsToOptions = () => options as BaseQueryOptions;
 
   let mapPropsToSkip = skip as (props: any) => boolean;
-  if (typeof mapPropsToSkip !== 'function') mapPropsToSkip = () => skip as any;
+  if (typeof mapPropsToSkip !== "function") mapPropsToSkip = () => skip as any;
 
   // allow for advanced referential equality checks
   let lastResultProps: TChildProps | void;
@@ -69,8 +69,7 @@ export function withSubscription<
 
       componentDidUpdate(prevProps: TProps) {
         const resubscribe = !!(
-          shouldResubscribe &&
-          shouldResubscribe(prevProps, this.props)
+          shouldResubscribe && shouldResubscribe(prevProps, this.props)
         );
         if (this.state.resubscribe !== resubscribe) {
           this.updateResubscribe(resubscribe);
@@ -99,7 +98,7 @@ export function withSubscription<
               if (operationOptions.withRef) {
                 this.withRef = true;
                 props = Object.assign({}, props, {
-                  ref: this.setWrappedInstance
+                  ref: this.setWrappedInstance,
                 });
               }
               // if we have skipped, no reason to manage any reshaping
@@ -116,17 +115,14 @@ export function withSubscription<
               // up onto the result since it was passed as a nested prop
               // we massage the Query components shape here to replicate that
               const result = Object.assign(r, data || {});
-              const name = operationOptions.name || 'data';
+              const name = operationOptions.name || "data";
               let childProps = { [name]: result };
               if (operationOptions.props) {
-                const newResult: OptionProps<
-                  TProps,
-                  TData,
-                  TGraphQLVariables
-                > = {
-                  [name]: result,
-                  ownProps: props as TProps
-                };
+                const newResult: OptionProps<TProps, TData, TGraphQLVariables> =
+                  {
+                    [name]: result,
+                    ownProps: props as TProps,
+                  };
                 lastResultProps = operationOptions.props(
                   newResult,
                   lastResultProps
diff --git a/src/react/hoc/types.ts b/src/react/hoc/types.ts
index 26a24f1ef73..0d67f4c1ca0 100644
--- a/src/react/hoc/types.ts
+++ b/src/react/hoc/types.ts
@@ -1,5 +1,5 @@
-import type { ApolloCache, ApolloClient } from '../../core/index.js';
-import type { ApolloError } from '../../errors/index.js';
+import type { ApolloCache, ApolloClient } from "../../core/index.js";
+import type { ApolloError } from "../../errors/index.js";
 import type {
   ApolloQueryResult,
   OperationVariables,
@@ -8,17 +8,17 @@ import type {
   FetchMoreQueryOptions,
   SubscribeToMoreOptions,
   DefaultContext,
-} from '../../core/index.js';
+} from "../../core/index.js";
 import type {
   MutationFunction,
   BaseQueryOptions,
   BaseMutationOptions,
-  MutationResult
-} from '../types/types.js';
+  MutationResult,
+} from "../types/types.js";
 
 export interface QueryControls<
   TData = any,
-  TGraphQLVariables = OperationVariables
+  TGraphQLVariables = OperationVariables,
 > {
   error?: ApolloError;
   networkStatus: number;
@@ -39,7 +39,7 @@ export interface QueryControls<
 
 export type DataValue<
   TData,
-  TGraphQLVariables = OperationVariables
+  TGraphQLVariables = OperationVariables,
 > = QueryControls<TData, TGraphQLVariables> &
   // data may not yet be loaded
   Partial<TData>;
@@ -50,7 +50,7 @@ export interface DataProps<TData, TGraphQLVariables = OperationVariables> {
 
 export interface MutateProps<
   TData = any,
-  TGraphQLVariables = OperationVariables
+  TGraphQLVariables = OperationVariables,
 > {
   mutate: MutationFunction<TData, TGraphQLVariables>;
   result: MutationResult<TData>;
@@ -59,7 +59,7 @@ export interface MutateProps<
 export type ChildProps<
   TProps = {},
   TData = {},
-  TGraphQLVariables = OperationVariables
+  TGraphQLVariables = OperationVariables,
 > = TProps &
   Partial<DataProps<TData, TGraphQLVariables>> &
   Partial<MutateProps<TData, TGraphQLVariables>>;
@@ -67,21 +67,20 @@ export type ChildProps<
 export type ChildDataProps<
   TProps = {},
   TData = {},
-  TGraphQLVariables = OperationVariables
+  TGraphQLVariables = OperationVariables,
 > = TProps & DataProps<TData, TGraphQLVariables>;
 
 export type ChildMutateProps<
   TProps = {},
   TData = {},
-  TGraphQLVariables = OperationVariables
+  TGraphQLVariables = OperationVariables,
 > = TProps & MutateProps<TData, TGraphQLVariables>;
 
 export interface OptionProps<
   TProps = any,
   TData = any,
-  TGraphQLVariables = OperationVariables
->
-  extends Partial<DataProps<TData, TGraphQLVariables>>,
+  TGraphQLVariables = OperationVariables,
+> extends Partial<DataProps<TData, TGraphQLVariables>>,
     Partial<MutateProps<TData, TGraphQLVariables>> {
   ownProps: TProps;
 }
@@ -101,8 +100,7 @@ export interface OperationOption<
         props: TProps
       ) =>
         | BaseQueryOptions<TGraphQLVariables>
-        | BaseMutationOptions<TData, TGraphQLVariables, TContext, TCache>
-      );
+        | BaseMutationOptions<TData, TGraphQLVariables, TContext, TCache>);
   props?: (
     props: OptionProps<TProps, TData, TGraphQLVariables>,
     lastProps?: TChildProps | void
diff --git a/src/react/hoc/withApollo.tsx b/src/react/hoc/withApollo.tsx
index c039c9c2421..bfa21b454a4 100644
--- a/src/react/hoc/withApollo.tsx
+++ b/src/react/hoc/withApollo.tsx
@@ -1,30 +1,30 @@
-import { invariant } from '../../utilities/globals/index.js';
-import * as React from 'react';
-import hoistNonReactStatics from 'hoist-non-react-statics';
+import { invariant } from "../../utilities/globals/index.js";
+import * as React from "react";
+import hoistNonReactStatics from "hoist-non-react-statics";
 
-import { ApolloConsumer } from '../context/index.js';
-import type { OperationOption, WithApolloClient } from './types.js';
+import { ApolloConsumer } from "../context/index.js";
+import type { OperationOption, WithApolloClient } from "./types.js";
 
 function getDisplayName<P>(WrappedComponent: React.ComponentType<P>) {
-  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
+  return WrappedComponent.displayName || WrappedComponent.name || "Component";
 }
 
 export function withApollo<TProps, TResult = any>(
   WrappedComponent: React.ComponentType<
-    WithApolloClient<Omit<TProps, 'client'>>
+    WithApolloClient<Omit<TProps, "client">>
   >,
   operationOptions: OperationOption<TProps, TResult> = {}
-): React.ComponentClass<Omit<TProps, 'client'>> {
+): React.ComponentClass<Omit<TProps, "client">> {
   const withDisplayName = `withApollo(${getDisplayName(WrappedComponent)})`;
 
-  class WithApollo extends React.Component<Omit<TProps, 'client'>> {
+  class WithApollo extends React.Component<Omit<TProps, "client">> {
     static displayName = withDisplayName;
     static WrappedComponent = WrappedComponent;
 
     // wrapped instance
     private wrappedInstance: any;
 
-    constructor(props: Omit<TProps, 'client'>) {
+    constructor(props: Omit<TProps, "client">) {
       super(props);
       this.setWrappedInstance = this.setWrappedInstance.bind(this);
     }
@@ -46,12 +46,12 @@ export function withApollo<TProps, TResult = any>(
     render() {
       return (
         <ApolloConsumer>
-          {client => {
+          {(client) => {
             const props = Object.assign({}, this.props, {
               client,
               ref: operationOptions.withRef
                 ? this.setWrappedInstance
-                : undefined
+                : undefined,
             });
             return <WrappedComponent {...props} />;
           }}
diff --git a/src/react/hooks/__tests__/useApolloClient.test.tsx b/src/react/hooks/__tests__/useApolloClient.test.tsx
index 3f3f9883665..920353ae283 100644
--- a/src/react/hooks/__tests__/useApolloClient.test.tsx
+++ b/src/react/hooks/__tests__/useApolloClient.test.tsx
@@ -1,18 +1,18 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { InvariantError } from 'ts-invariant';
+import React from "react";
+import { render } from "@testing-library/react";
+import { InvariantError } from "ts-invariant";
 
-import { ApolloClient } from '../../../core';
-import { ApolloLink } from '../../../link/core';
-import { ApolloProvider } from '../../context';
-import { InMemoryCache } from '../../../cache';
-import { useApolloClient } from '../useApolloClient';
+import { ApolloClient } from "../../../core";
+import { ApolloLink } from "../../../link/core";
+import { ApolloProvider } from "../../context";
+import { InMemoryCache } from "../../../cache";
+import { useApolloClient } from "../useApolloClient";
 
-describe('useApolloClient Hook', () => {
-  it('should return a client instance from the context if available', () => {
+describe("useApolloClient Hook", () => {
+  it("should return a client instance from the context if available", () => {
     const client = new ApolloClient({
       cache: new InMemoryCache(),
-      link: ApolloLink.empty()
+      link: ApolloLink.empty(),
     });
 
     function App() {
diff --git a/src/react/hooks/__tests__/useBackgroundQuery.test.tsx b/src/react/hooks/__tests__/useBackgroundQuery.test.tsx
index 0799d23329f..65b551d6000 100644
--- a/src/react/hooks/__tests__/useBackgroundQuery.test.tsx
+++ b/src/react/hooks/__tests__/useBackgroundQuery.test.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, StrictMode, Suspense } from 'react';
+import React, { Fragment, StrictMode, Suspense } from "react";
 import {
   act,
   render,
@@ -6,11 +6,11 @@ import {
   renderHook,
   RenderHookOptions,
   waitFor,
-} from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { ErrorBoundary, ErrorBoundaryProps } from 'react-error-boundary';
-import { expectTypeOf } from 'expect-type';
-import { GraphQLError } from 'graphql';
+} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { ErrorBoundary, ErrorBoundaryProps } from "react-error-boundary";
+import { expectTypeOf } from "expect-type";
+import { GraphQLError } from "graphql";
 import {
   gql,
   ApolloError,
@@ -26,35 +26,35 @@ import {
   FetchMoreQueryOptions,
   OperationVariables,
   ApolloQueryResult,
-} from '../../../core';
+} from "../../../core";
 import {
   MockedResponse,
   MockedProvider,
   MockLink,
   MockSubscriptionLink,
   mockSingleLink,
-} from '../../../testing';
+} from "../../../testing";
 import {
   concatPagination,
   offsetLimitPagination,
   DeepPartial,
-} from '../../../utilities';
-import { useBackgroundQuery } from '../useBackgroundQuery';
-import { useReadQuery } from '../useReadQuery';
-import { ApolloProvider } from '../../context';
-import { QUERY_REFERENCE_SYMBOL } from '../../cache/QueryReference';
-import { InMemoryCache } from '../../../cache';
+} from "../../../utilities";
+import { useBackgroundQuery } from "../useBackgroundQuery";
+import { useReadQuery } from "../useReadQuery";
+import { ApolloProvider } from "../../context";
+import { QUERY_REFERENCE_SYMBOL } from "../../cache/QueryReference";
+import { InMemoryCache } from "../../../cache";
 import {
   FetchMoreFunction,
   RefetchFunction,
   QueryReference,
-} from '../../../react';
+} from "../../../react";
 import {
   SuspenseQueryHookFetchPolicy,
   SuspenseQueryHookOptions,
-} from '../../types/types';
-import equal from '@wry/equality';
-import { RefetchWritePolicy } from '../../../core/watchQueryOptions';
+} from "../../types/types";
+import equal from "@wry/equality";
+import { RefetchWritePolicy } from "../../../core/watchQueryOptions";
 
 function renderIntegrationTest({
   client,
@@ -72,7 +72,7 @@ function renderIntegrationTest({
   const mocks = [
     {
       request: { query },
-      result: { data: { foo: { bar: 'hello' } } },
+      result: { data: { foo: { bar: "hello" } } },
     },
   ];
   const _client =
@@ -166,7 +166,7 @@ function useVariablesIntegrationTestCase() {
       }
     }
   `;
-  const CHARACTERS = ['Spider-Man', 'Black Widow', 'Iron Man', 'Hulk'];
+  const CHARACTERS = ["Spider-Man", "Black Widow", "Iron Man", "Hulk"];
   let mocks = [...CHARACTERS].map((name, index) => ({
     request: { query, variables: { id: String(index + 1) } },
     result: { data: { character: { id: String(index + 1), name } } },
@@ -285,7 +285,7 @@ function renderVariablesIntegrationTest({
         </button>
         <button
           onClick={() => {
-            setVariables({ id: '2' });
+            setVariables({ id: "2" });
           }}
         >
           Set variables to id: 2
@@ -297,7 +297,7 @@ function renderVariablesIntegrationTest({
 
   function ParentWithVariables({
     variables,
-    errorPolicy = 'none',
+    errorPolicy = "none",
   }: {
     variables: VariablesCaseVariables;
     errorPolicy?: ErrorPolicy;
@@ -384,8 +384,8 @@ function renderPaginatedIntegrationTest({
     }
   `;
 
-  const data = 'ABCDEFG'
-    .split('')
+  const data = "ABCDEFG"
+    .split("")
     .map((letter, index) => ({ letter, position: index + 1 }));
 
   const link = new ApolloLink((operation) => {
@@ -511,7 +511,7 @@ function renderPaginatedIntegrationTest({
 
 type RenderSuspenseHookOptions<Props, TSerializedCache = {}> = Omit<
   RenderHookOptions<Props>,
-  'wrapper'
+  "wrapper"
 > & {
   client?: ApolloClient<TSerializedCache>;
   link?: ApolloLink;
@@ -550,11 +550,7 @@ function renderSuspenseHook<Result, Props>(
     frames: [],
   };
 
-  const {
-    mocks = [],
-    strictMode,
-    ...renderHookOptions
-  } = options;
+  const { mocks = [], strictMode, ...renderHookOptions } = options;
 
   const client =
     options.client ||
@@ -588,9 +584,7 @@ function renderSuspenseHook<Result, Props>(
                   renders.errors.push(error);
                 }}
               >
-                <ApolloProvider client={client}>
-                  {children}
-                </ApolloProvider>
+                <ApolloProvider client={client}>{children}</ApolloProvider>
               </ErrorBoundary>
             </Suspense>
           </Wrapper>
@@ -602,8 +596,8 @@ function renderSuspenseHook<Result, Props>(
   return { ...view, renders };
 }
 
-describe('useBackgroundQuery', () => {
-  it('fetches a simple query with minimal config', async () => {
+describe("useBackgroundQuery", () => {
+  it("fetches a simple query with minimal config", async () => {
     const query = gql`
       query {
         hello
@@ -612,7 +606,7 @@ describe('useBackgroundQuery', () => {
     const mocks = [
       {
         request: { query },
-        result: { data: { hello: 'world 1' } },
+        result: { data: { hello: "world 1" } },
       },
     ];
     const { result } = renderHook(() => useBackgroundQuery(query), {
@@ -626,13 +620,13 @@ describe('useBackgroundQuery', () => {
     const _result = await queryRef[QUERY_REFERENCE_SYMBOL].promise;
 
     expect(_result).toEqual({
-      data: { hello: 'world 1' },
+      data: { hello: "world 1" },
       loading: false,
       networkStatus: 7,
     });
   });
 
-  it('allows the client to be overridden', async () => {
+  it("allows the client to be overridden", async () => {
     const query: TypedDocumentNode<SimpleQueryData> = gql`
       query UserQuery {
         greeting
@@ -641,14 +635,14 @@ describe('useBackgroundQuery', () => {
 
     const globalClient = new ApolloClient({
       link: new ApolloLink(() =>
-        Observable.of({ data: { greeting: 'global hello' } })
+        Observable.of({ data: { greeting: "global hello" } })
       ),
       cache: new InMemoryCache(),
     });
 
     const localClient = new ApolloClient({
       link: new ApolloLink(() =>
-        Observable.of({ data: { greeting: 'local hello' } })
+        Observable.of({ data: { greeting: "local hello" } })
       ),
       cache: new InMemoryCache(),
     });
@@ -664,14 +658,14 @@ describe('useBackgroundQuery', () => {
 
     await waitFor(() => {
       expect(_result).toEqual({
-        data: { greeting: 'local hello' },
+        data: { greeting: "local hello" },
         loading: false,
         networkStatus: NetworkStatus.ready,
       });
     });
   });
 
-  it('passes context to the link', async () => {
+  it("passes context to the link", async () => {
     const query = gql`
       query ContextQuery {
         context
@@ -690,13 +684,11 @@ describe('useBackgroundQuery', () => {
     const { result } = renderHook(
       () =>
         useBackgroundQuery(query, {
-          context: { valueA: 'A', valueB: 'B' },
+          context: { valueA: "A", valueB: "B" },
         }),
       {
         wrapper: ({ children }) => (
-          <MockedProvider link={link}>
-            {children}
-          </MockedProvider>
+          <MockedProvider link={link}>{children}</MockedProvider>
         ),
       }
     );
@@ -707,7 +699,7 @@ describe('useBackgroundQuery', () => {
 
     await waitFor(() => {
       expect(_result).toMatchObject({
-        data: { context: { valueA: 'A', valueB: 'B' } },
+        data: { context: { valueA: "A", valueB: "B" } },
         networkStatus: NetworkStatus.ready,
       });
     });
@@ -736,12 +728,12 @@ describe('useBackgroundQuery', () => {
     `;
 
     const results: Result[] = [
-      { __typename: 'Result', value: 0 },
-      { __typename: 'Result', value: 1 },
-      { __typename: 'Result', value: 1 },
-      { __typename: 'Result', value: 2 },
-      { __typename: 'Result', value: 3 },
-      { __typename: 'Result', value: 5 },
+      { __typename: "Result", value: 0 },
+      { __typename: "Result", value: 1 },
+      { __typename: "Result", value: 1 },
+      { __typename: "Result", value: 2 },
+      { __typename: "Result", value: 3 },
+      { __typename: "Result", value: 5 },
     ];
 
     cache.writeQuery({
@@ -756,9 +748,7 @@ describe('useBackgroundQuery', () => {
         }),
       {
         wrapper: ({ children }) => (
-          <MockedProvider cache={cache}>
-            {children}
-          </MockedProvider>
+          <MockedProvider cache={cache}>{children}</MockedProvider>
         ),
       }
     );
@@ -799,12 +789,12 @@ describe('useBackgroundQuery', () => {
     `;
 
     const results: Result[] = [
-      { __typename: 'Result', value: 0 },
-      { __typename: 'Result', value: 1 },
-      { __typename: 'Result', value: 1 },
-      { __typename: 'Result', value: 2 },
-      { __typename: 'Result', value: 3 },
-      { __typename: 'Result', value: 5 },
+      { __typename: "Result", value: 0 },
+      { __typename: "Result", value: 1 },
+      { __typename: "Result", value: 1 },
+      { __typename: "Result", value: 2 },
+      { __typename: "Result", value: 3 },
+      { __typename: "Result", value: 5 },
     ];
 
     cache.writeQuery({
@@ -819,9 +809,7 @@ describe('useBackgroundQuery', () => {
         }),
       {
         wrapper: ({ children }) => (
-          <MockedProvider cache={cache}>
-            {children}
-          </MockedProvider>
+          <MockedProvider cache={cache}>{children}</MockedProvider>
         ),
       }
     );
@@ -839,7 +827,7 @@ describe('useBackgroundQuery', () => {
   });
 
   // TODO(FIXME): test fails, should return cache data first if it exists
-  it.skip('returns initial cache data followed by network data when the fetch policy is `cache-and-network`', async () => {
+  it.skip("returns initial cache data followed by network data when the fetch policy is `cache-and-network`", async () => {
     const query = gql`
       {
         hello
@@ -848,7 +836,7 @@ describe('useBackgroundQuery', () => {
     const cache = new InMemoryCache();
     const link = mockSingleLink({
       request: { query },
-      result: { data: { hello: 'from link' } },
+      result: { data: { hello: "from link" } },
       delay: 20,
     });
 
@@ -857,15 +845,13 @@ describe('useBackgroundQuery', () => {
       cache,
     });
 
-    cache.writeQuery({ query, data: { hello: 'from cache' } });
+    cache.writeQuery({ query, data: { hello: "from cache" } });
 
     const { result } = renderHook(
-      () => useBackgroundQuery(query, { fetchPolicy: 'cache-and-network' }),
+      () => useBackgroundQuery(query, { fetchPolicy: "cache-and-network" }),
       {
         wrapper: ({ children }) => (
-          <ApolloProvider client={client}>
-            {children}
-          </ApolloProvider>
+          <ApolloProvider client={client}>{children}</ApolloProvider>
         ),
       }
     );
@@ -875,13 +861,13 @@ describe('useBackgroundQuery', () => {
     const _result = await queryRef[QUERY_REFERENCE_SYMBOL].promise;
 
     expect(_result).toEqual({
-      data: { hello: 'from link' },
+      data: { hello: "from link" },
       loading: false,
       networkStatus: 7,
     });
   });
 
-  it('all data is present in the cache, no network request is made', async () => {
+  it("all data is present in the cache, no network request is made", async () => {
     const query = gql`
       {
         hello
@@ -890,7 +876,7 @@ describe('useBackgroundQuery', () => {
     const cache = new InMemoryCache();
     const link = mockSingleLink({
       request: { query },
-      result: { data: { hello: 'from link' } },
+      result: { data: { hello: "from link" } },
       delay: 20,
     });
 
@@ -899,15 +885,13 @@ describe('useBackgroundQuery', () => {
       cache,
     });
 
-    cache.writeQuery({ query, data: { hello: 'from cache' } });
+    cache.writeQuery({ query, data: { hello: "from cache" } });
 
     const { result } = renderHook(
-      () => useBackgroundQuery(query, { fetchPolicy: 'cache-first' }),
+      () => useBackgroundQuery(query, { fetchPolicy: "cache-first" }),
       {
         wrapper: ({ children }) => (
-          <ApolloProvider client={client}>
-            {children}
-          </ApolloProvider>
+          <ApolloProvider client={client}>{children}</ApolloProvider>
         ),
       }
     );
@@ -917,12 +901,12 @@ describe('useBackgroundQuery', () => {
     const _result = await queryRef[QUERY_REFERENCE_SYMBOL].promise;
 
     expect(_result).toEqual({
-      data: { hello: 'from cache' },
+      data: { hello: "from cache" },
       loading: false,
       networkStatus: 7,
     });
   });
-  it('partial data is present in the cache so it is ignored and network request is made', async () => {
+  it("partial data is present in the cache so it is ignored and network request is made", async () => {
     const query = gql`
       {
         hello
@@ -932,7 +916,7 @@ describe('useBackgroundQuery', () => {
     const cache = new InMemoryCache();
     const link = mockSingleLink({
       request: { query },
-      result: { data: { hello: 'from link', foo: 'bar' } },
+      result: { data: { hello: "from link", foo: "bar" } },
       delay: 20,
     });
 
@@ -947,16 +931,14 @@ describe('useBackgroundQuery', () => {
     console.error = () => {
       /* noop */
     };
-    cache.writeQuery({ query, data: { hello: 'from cache' } });
+    cache.writeQuery({ query, data: { hello: "from cache" } });
     console.error = originalConsoleError;
 
     const { result } = renderHook(
-      () => useBackgroundQuery(query, { fetchPolicy: 'cache-first' }),
+      () => useBackgroundQuery(query, { fetchPolicy: "cache-first" }),
       {
         wrapper: ({ children }) => (
-          <ApolloProvider client={client}>
-            {children}
-          </ApolloProvider>
+          <ApolloProvider client={client}>{children}</ApolloProvider>
         ),
       }
     );
@@ -966,13 +948,13 @@ describe('useBackgroundQuery', () => {
     const _result = await queryRef[QUERY_REFERENCE_SYMBOL].promise;
 
     expect(_result).toEqual({
-      data: { foo: 'bar', hello: 'from link' },
+      data: { foo: "bar", hello: "from link" },
       loading: false,
       networkStatus: 7,
     });
   });
 
-  it('existing data in the cache is ignored', async () => {
+  it("existing data in the cache is ignored", async () => {
     const query = gql`
       {
         hello
@@ -981,7 +963,7 @@ describe('useBackgroundQuery', () => {
     const cache = new InMemoryCache();
     const link = mockSingleLink({
       request: { query },
-      result: { data: { hello: 'from link' } },
+      result: { data: { hello: "from link" } },
       delay: 20,
     });
 
@@ -990,15 +972,13 @@ describe('useBackgroundQuery', () => {
       cache,
     });
 
-    cache.writeQuery({ query, data: { hello: 'from cache' } });
+    cache.writeQuery({ query, data: { hello: "from cache" } });
 
     const { result } = renderHook(
-      () => useBackgroundQuery(query, { fetchPolicy: 'network-only' }),
+      () => useBackgroundQuery(query, { fetchPolicy: "network-only" }),
       {
         wrapper: ({ children }) => (
-          <ApolloProvider client={client}>
-            {children}
-          </ApolloProvider>
+          <ApolloProvider client={client}>{children}</ApolloProvider>
         ),
       }
     );
@@ -1008,16 +988,16 @@ describe('useBackgroundQuery', () => {
     const _result = await queryRef[QUERY_REFERENCE_SYMBOL].promise;
 
     expect(_result).toEqual({
-      data: { hello: 'from link' },
+      data: { hello: "from link" },
       loading: false,
       networkStatus: 7,
     });
     expect(client.cache.extract()).toEqual({
-      ROOT_QUERY: { __typename: 'Query', hello: 'from link' },
+      ROOT_QUERY: { __typename: "Query", hello: "from link" },
     });
   });
 
-  it('fetches data from the network but does not update the cache', async () => {
+  it("fetches data from the network but does not update the cache", async () => {
     const query = gql`
       {
         hello
@@ -1026,7 +1006,7 @@ describe('useBackgroundQuery', () => {
     const cache = new InMemoryCache();
     const link = mockSingleLink({
       request: { query },
-      result: { data: { hello: 'from link' } },
+      result: { data: { hello: "from link" } },
       delay: 20,
     });
 
@@ -1035,15 +1015,13 @@ describe('useBackgroundQuery', () => {
       cache,
     });
 
-    cache.writeQuery({ query, data: { hello: 'from cache' } });
+    cache.writeQuery({ query, data: { hello: "from cache" } });
 
     const { result } = renderHook(
-      () => useBackgroundQuery(query, { fetchPolicy: 'no-cache' }),
+      () => useBackgroundQuery(query, { fetchPolicy: "no-cache" }),
       {
         wrapper: ({ children }) => (
-          <ApolloProvider client={client}>
-            {children}
-          </ApolloProvider>
+          <ApolloProvider client={client}>{children}</ApolloProvider>
         ),
       }
     );
@@ -1053,29 +1031,29 @@ describe('useBackgroundQuery', () => {
     const _result = await queryRef[QUERY_REFERENCE_SYMBOL].promise;
 
     expect(_result).toEqual({
-      data: { hello: 'from link' },
+      data: { hello: "from link" },
       loading: false,
       networkStatus: 7,
     });
     // ...but not updated in the cache
     expect(client.cache.extract()).toEqual({
-      ROOT_QUERY: { __typename: 'Query', hello: 'from cache' },
+      ROOT_QUERY: { __typename: "Query", hello: "from cache" },
     });
   });
 
-  describe('integration tests with useReadQuery', () => {
-    it('suspends and renders hello', async () => {
+  describe("integration tests with useReadQuery", () => {
+    it("suspends and renders hello", async () => {
       const { renders } = renderIntegrationTest();
       // ensure the hook suspends immediately
       expect(renders.suspenseCount).toBe(1);
-      expect(screen.getByText('loading')).toBeInTheDocument();
+      expect(screen.getByText("loading")).toBeInTheDocument();
 
       // the parent component re-renders when promise fulfilled
-      expect(await screen.findByText('hello')).toBeInTheDocument();
+      expect(await screen.findByText("hello")).toBeInTheDocument();
       expect(renders.count).toBe(1);
     });
 
-    it('works with startTransition to change variables', async () => {
+    it("works with startTransition to change variables", async () => {
       type Variables = {
         id: string;
       };
@@ -1101,17 +1079,17 @@ describe('useBackgroundQuery', () => {
 
       const mocks: MockedResponse<Data, Variables>[] = [
         {
-          request: { query, variables: { id: '1' } },
+          request: { query, variables: { id: "1" } },
           result: {
-            data: { todo: { id: '1', name: 'Clean room', completed: false } },
+            data: { todo: { id: "1", name: "Clean room", completed: false } },
           },
           delay: 10,
         },
         {
-          request: { query, variables: { id: '2' } },
+          request: { query, variables: { id: "2" } },
           result: {
             data: {
-              todo: { id: '2', name: 'Take out trash', completed: true },
+              todo: { id: "2", name: "Take out trash", completed: true },
             },
           },
           delay: 10,
@@ -1138,7 +1116,7 @@ describe('useBackgroundQuery', () => {
       }
 
       function Parent() {
-        const [id, setId] = React.useState('1');
+        const [id, setId] = React.useState("1");
         const [queryRef] = useBackgroundQuery(query, {
           variables: { id },
         });
@@ -1161,7 +1139,7 @@ describe('useBackgroundQuery', () => {
             <button
               onClick={() => {
                 startTransition(() => {
-                  onChange('2');
+                  onChange("2");
                 });
               }}
             >
@@ -1169,7 +1147,7 @@ describe('useBackgroundQuery', () => {
             </button>
             <div data-testid="todo" aria-busy={isPending}>
               {todo.name}
-              {todo.completed && ' (completed)'}
+              {todo.completed && " (completed)"}
             </div>
           </>
         );
@@ -1177,14 +1155,14 @@ describe('useBackgroundQuery', () => {
 
       render(<App />);
 
-      expect(screen.getByText('Loading')).toBeInTheDocument();
+      expect(screen.getByText("Loading")).toBeInTheDocument();
 
-      expect(await screen.findByTestId('todo')).toBeInTheDocument();
+      expect(await screen.findByTestId("todo")).toBeInTheDocument();
 
-      const todo = screen.getByTestId('todo');
-      const button = screen.getByText('Refresh');
+      const todo = screen.getByTestId("todo");
+      const button = screen.getByText("Refresh");
 
-      expect(todo).toHaveTextContent('Clean room');
+      expect(todo).toHaveTextContent("Clean room");
 
       await act(() => user.click(button));
 
@@ -1195,18 +1173,18 @@ describe('useBackgroundQuery', () => {
       // Here we should not see the suspense fallback while the component suspends
       // until the todo is finished loading. Seeing the suspense fallback is an
       // indication that we are suspending the component too late in the process.
-      expect(screen.queryByText('Loading')).not.toBeInTheDocument();
+      expect(screen.queryByText("Loading")).not.toBeInTheDocument();
 
       // We can ensure this works with isPending from useTransition in the process
-      expect(todo).toHaveAttribute('aria-busy', 'true');
+      expect(todo).toHaveAttribute("aria-busy", "true");
 
       // Ensure we are showing the stale UI until the new todo has loaded
-      expect(todo).toHaveTextContent('Clean room');
+      expect(todo).toHaveTextContent("Clean room");
 
       // Eventually we should see the updated todo content once its done
       // suspending.
       await waitFor(() => {
-        expect(todo).toHaveTextContent('Take out trash (completed)');
+        expect(todo).toHaveTextContent("Take out trash (completed)");
       });
     });
 
@@ -1238,9 +1216,9 @@ describe('useBackgroundQuery', () => {
         query,
         data: {
           greeting: {
-            __typename: 'Greeting',
-            message: 'Hello cached',
-            recipient: { __typename: 'Person', name: 'Cached Alice' },
+            __typename: "Greeting",
+            message: "Hello cached",
+            recipient: { __typename: "Person", name: "Cached Alice" },
           },
         },
       });
@@ -1265,7 +1243,7 @@ describe('useBackgroundQuery', () => {
 
       function Parent() {
         const [queryRef] = useBackgroundQuery(query, {
-          fetchPolicy: 'cache-and-network',
+          fetchPolicy: "cache-and-network",
         });
         return <Todo queryRef={queryRef} />;
       }
@@ -1280,7 +1258,7 @@ describe('useBackgroundQuery', () => {
             <div>Message: {greeting.message}</div>
             <div>Recipient: {greeting.recipient.name}</div>
             <div>Network status: {networkStatus}</div>
-            <div>Error: {error ? error.message : 'none'}</div>
+            <div>Error: {error ? error.message : "none"}</div>
           </>
         );
       }
@@ -1288,20 +1266,20 @@ describe('useBackgroundQuery', () => {
       render(<App />);
 
       expect(screen.getByText(/Message/i)).toHaveTextContent(
-        'Message: Hello cached'
+        "Message: Hello cached"
       );
       expect(screen.getByText(/Recipient/i)).toHaveTextContent(
-        'Recipient: Cached Alice'
+        "Recipient: Cached Alice"
       );
       expect(screen.getByText(/Network status/i)).toHaveTextContent(
-        'Network status: 1' // loading
+        "Network status: 1" // loading
       );
-      expect(screen.getByText(/Error/i)).toHaveTextContent('none');
+      expect(screen.getByText(/Error/i)).toHaveTextContent("none");
 
       link.simulateResult({
         result: {
           data: {
-            greeting: { __typename: 'Greeting', message: 'Hello world' },
+            greeting: { __typename: "Greeting", message: "Hello world" },
           },
           hasNext: true,
         },
@@ -1309,26 +1287,26 @@ describe('useBackgroundQuery', () => {
 
       await waitFor(() => {
         expect(screen.getByText(/Message/i)).toHaveTextContent(
-          'Message: Hello world'
+          "Message: Hello world"
         );
       });
       expect(screen.getByText(/Recipient/i)).toHaveTextContent(
-        'Recipient: Cached Alice'
+        "Recipient: Cached Alice"
       );
       expect(screen.getByText(/Network status/i)).toHaveTextContent(
-        'Network status: 7' // ready
+        "Network status: 7" // ready
       );
-      expect(screen.getByText(/Error/i)).toHaveTextContent('none');
+      expect(screen.getByText(/Error/i)).toHaveTextContent("none");
 
       link.simulateResult({
         result: {
           incremental: [
             {
               data: {
-                recipient: { name: 'Alice', __typename: 'Person' },
-                __typename: 'Greeting',
+                recipient: { name: "Alice", __typename: "Person" },
+                __typename: "Greeting",
               },
-              path: ['greeting'],
+              path: ["greeting"],
             },
           ],
           hasNext: false,
@@ -1337,72 +1315,72 @@ describe('useBackgroundQuery', () => {
 
       await waitFor(() => {
         expect(screen.getByText(/Recipient/i)).toHaveTextContent(
-          'Recipient: Alice'
+          "Recipient: Alice"
         );
       });
       expect(screen.getByText(/Message/i)).toHaveTextContent(
-        'Message: Hello world'
+        "Message: Hello world"
       );
       expect(screen.getByText(/Network status/i)).toHaveTextContent(
-        'Network status: 7' // ready
+        "Network status: 7" // ready
       );
-      expect(screen.getByText(/Error/i)).toHaveTextContent('none');
+      expect(screen.getByText(/Error/i)).toHaveTextContent("none");
 
       expect(renders).toBe(3);
       expect(suspenseCount).toBe(0);
     });
   });
 
-  it('reacts to cache updates', async () => {
+  it("reacts to cache updates", async () => {
     const { renders, client, query } = renderIntegrationTest();
 
     expect(renders.suspenseCount).toBe(1);
-    expect(screen.getByText('loading')).toBeInTheDocument();
+    expect(screen.getByText("loading")).toBeInTheDocument();
 
     // the parent component re-renders when promise fulfilled
-    expect(await screen.findByText('hello')).toBeInTheDocument();
+    expect(await screen.findByText("hello")).toBeInTheDocument();
     expect(renders.count).toBe(1);
 
     client.writeQuery({
       query,
-      data: { foo: { bar: 'baz' } },
+      data: { foo: { bar: "baz" } },
     });
 
     // the parent component re-renders when promise fulfilled
-    expect(await screen.findByText('baz')).toBeInTheDocument();
+    expect(await screen.findByText("baz")).toBeInTheDocument();
 
     expect(renders.count).toBe(2);
     expect(renders.suspenseCount).toBe(1);
 
     client.writeQuery({
       query,
-      data: { foo: { bar: 'bat' } },
+      data: { foo: { bar: "bat" } },
     });
 
-    expect(await screen.findByText('bat')).toBeInTheDocument();
+    expect(await screen.findByText("bat")).toBeInTheDocument();
 
     expect(renders.suspenseCount).toBe(1);
   });
 
-  it('reacts to variables updates', async () => {
+  it("reacts to variables updates", async () => {
     const { renders, rerender } = renderVariablesIntegrationTest({
-      variables: { id: '1' },
+      variables: { id: "1" },
     });
 
     expect(renders.suspenseCount).toBe(1);
-    expect(screen.getByText('loading')).toBeInTheDocument();
+    expect(screen.getByText("loading")).toBeInTheDocument();
 
-    expect(await screen.findByText('1 - Spider-Man')).toBeInTheDocument();
+    expect(await screen.findByText("1 - Spider-Man")).toBeInTheDocument();
 
-    rerender({ variables: { id: '2' } });
+    rerender({ variables: { id: "2" } });
 
     expect(renders.suspenseCount).toBe(2);
-    expect(screen.getByText('loading')).toBeInTheDocument();
+    expect(screen.getByText("loading")).toBeInTheDocument();
 
-    expect(await screen.findByText('2 - Black Widow')).toBeInTheDocument();
+    expect(await screen.findByText("2 - Black Widow")).toBeInTheDocument();
   });
 
-  it('does not suspend when `skip` is true', async () => {
+  it("does not suspend when `skip` is true", async () => {
     interface Data {
       greeting: string;
     }
@@ -1416,7 +1394,7 @@ describe('useBackgroundQuery', () => {
     const mocks = [
       {
         request: { query },
-        result: { data: { greeting: 'Hello' } },
+        result: { data: { greeting: "Hello" } },
       },
     ];
 
@@ -1447,7 +1425,7 @@ describe('useBackgroundQuery', () => {
       const { data } = useReadQuery(queryRef);
 
       return (
-        <div data-testid="greeting">{data ? data.greeting : 'Unknown'}</div>
+        <div data-testid="greeting">{data ? data.greeting : "Unknown"}</div>
       );
     }
 
@@ -1461,10 +1439,10 @@ describe('useBackgroundQuery', () => {
 
     render(<App />);
 
-    expect(screen.getByTestId('greeting')).toHaveTextContent('Unknown');
+    expect(screen.getByTestId("greeting")).toHaveTextContent("Unknown");
   });
 
-  it('suspends when `skip` becomes `false` after it was `true`', async () => {
+  it("suspends when `skip` becomes `false` after it was `true`", async () => {
     interface Data {
       greeting: string;
     }
@@ -1480,7 +1458,7 @@ describe('useBackgroundQuery', () => {
     const mocks = [
       {
         request: { query },
-        result: { data: { greeting: 'Hello' } },
+        result: { data: { greeting: "Hello" } },
       },
     ];
 
@@ -1515,7 +1493,7 @@ describe('useBackgroundQuery', () => {
       const { data } = useReadQuery(queryRef);
 
       return (
-        <div data-testid="greeting">{data ? data.greeting : 'Unknown'}</div>
+        <div data-testid="greeting">{data ? data.greeting : "Unknown"}</div>
       );
     }
 
@@ -1529,20 +1507,20 @@ describe('useBackgroundQuery', () => {
 
     render(<App />);
 
-    const greeting = screen.getByTestId('greeting');
+    const greeting = screen.getByTestId("greeting");
 
-    expect(greeting).toHaveTextContent('Unknown');
+    expect(greeting).toHaveTextContent("Unknown");
 
-    await act(() => user.click(screen.getByText('Run query')));
+    await act(() => user.click(screen.getByText("Run query")));
 
-    expect(screen.getByText('Loading...')).toBeInTheDocument();
+    expect(screen.getByText("Loading...")).toBeInTheDocument();
 
     await waitFor(() => {
-      expect(greeting).toHaveTextContent('Hello');
+      expect(greeting).toHaveTextContent("Hello");
     });
   });
 
-  it('renders skip result, does not suspend, and maintains `data` when `skip` becomes `true` after it was `false`', async () => {
+  it("renders skip result, does not suspend, and maintains `data` when `skip` becomes `true` after it was `false`", async () => {
     interface Data {
       greeting: string;
     }
@@ -1558,7 +1536,7 @@ describe('useBackgroundQuery', () => {
     const mocks = [
       {
         request: { query },
-        result: { data: { greeting: 'Hello' } },
+        result: { data: { greeting: "Hello" } },
       },
     ];
 
@@ -1593,7 +1571,7 @@ describe('useBackgroundQuery', () => {
       const { data } = useReadQuery(queryRef);
 
       return (
-        <div data-testid="greeting">{data ? data.greeting : 'Unknown'}</div>
+        <div data-testid="greeting">{data ? data.greeting : "Unknown"}</div>
       );
     }
 
@@ -1607,18 +1585,18 @@ describe('useBackgroundQuery', () => {
 
     render(<App />);
 
-    expect(screen.getByText('Loading...')).toBeInTheDocument();
+    expect(screen.getByText("Loading...")).toBeInTheDocument();
 
     await waitFor(() => {
-      expect(screen.getByTestId('greeting')).toHaveTextContent('Hello');
+      expect(screen.getByTestId("greeting")).toHaveTextContent("Hello");
     });
 
-    await act(() => user.click(screen.getByText('Toggle skip')));
+    await act(() => user.click(screen.getByText("Toggle skip")));
 
-    expect(screen.getByTestId('greeting')).toHaveTextContent('Hello');
+    expect(screen.getByTestId("greeting")).toHaveTextContent("Hello");
   });
 
-  it('does not make network requests when `skip` is `true`', async () => {
+  it("does not make network requests when `skip` is `true`", async () => {
     interface Data {
       greeting: string;
     }
@@ -1634,7 +1612,7 @@ describe('useBackgroundQuery', () => {
     const mocks = [
       {
         request: { query },
-        result: { data: { greeting: 'Hello' } },
+        result: { data: { greeting: "Hello" } },
       },
     ];
 
@@ -1649,7 +1627,7 @@ describe('useBackgroundQuery', () => {
         );
 
         if (!mock) {
-          throw new Error('Could not find mock for operation');
+          throw new Error("Could not find mock for operation");
         }
 
         observer.next(mock.result);
@@ -1688,7 +1666,7 @@ describe('useBackgroundQuery', () => {
       const { data } = useReadQuery(queryRef);
 
       return (
-        <div data-testid="greeting">{data ? data.greeting : 'Unknown'}</div>
+        <div data-testid="greeting">{data ? data.greeting : "Unknown"}</div>
       );
     }
 
@@ -1705,21 +1683,21 @@ describe('useBackgroundQuery', () => {
     expect(fetchCount).toBe(0);
 
     // Toggle skip to `false`
-    await act(() => user.click(screen.getByText('Toggle skip')));
+    await act(() => user.click(screen.getByText("Toggle skip")));
 
     expect(fetchCount).toBe(1);
 
     await waitFor(() => {
-      expect(screen.getByTestId('greeting')).toHaveTextContent('Hello');
+      expect(screen.getByTestId("greeting")).toHaveTextContent("Hello");
     });
 
     // Toggle skip to `true`
-    await act(() => user.click(screen.getByText('Toggle skip')));
+    await act(() => user.click(screen.getByText("Toggle skip")));
 
     expect(fetchCount).toBe(1);
   });
 
-  it('`skip` result is referentially stable', async () => {
+  it("`skip` result is referentially stable", async () => {
     interface Data {
       greeting: string;
     }
@@ -1743,7 +1721,7 @@ describe('useBackgroundQuery', () => {
     const mocks = [
       {
         request: { query },
-        result: { data: { greeting: 'Hello' } },
+        result: { data: { greeting: "Hello" } },
       },
     ];
 
@@ -1780,7 +1758,7 @@ describe('useBackgroundQuery', () => {
       result.current = data;
 
       return (
-        <div data-testid="greeting">{data ? data.greeting : 'Unknown'}</div>
+        <div data-testid="greeting">{data ? data.greeting : "Unknown"}</div>
       );
     }
 
@@ -1801,12 +1779,12 @@ describe('useBackgroundQuery', () => {
     expect(result.current).toBe(skipResult);
 
     // Toggle skip to `false`
-    await act(() => user.click(screen.getByText('Toggle skip')));
+    await act(() => user.click(screen.getByText("Toggle skip")));
 
-    expect(screen.getByText('Loading...')).toBeInTheDocument();
+    expect(screen.getByText("Loading...")).toBeInTheDocument();
 
     await waitFor(() => {
-      expect(screen.getByTestId('greeting')).toHaveTextContent('Hello');
+      expect(screen.getByTestId("greeting")).toHaveTextContent("Hello");
     });
 
     const fetchedResult = result.current;
@@ -1816,7 +1794,7 @@ describe('useBackgroundQuery', () => {
     expect(result.current).toBe(fetchedResult);
   });
 
-  it('`skip` option works with `startTransition`', async () => {
+  it("`skip` option works with `startTransition`", async () => {
     interface Data {
       greeting: string;
     }
@@ -1832,7 +1810,7 @@ describe('useBackgroundQuery', () => {
     const mocks = [
       {
         request: { query },
-        result: { data: { greeting: 'Hello' } },
+        result: { data: { greeting: "Hello" } },
         delay: 10,
       },
     ];
@@ -1878,7 +1856,7 @@ describe('useBackgroundQuery', () => {
       const { data } = useReadQuery(queryRef);
 
       return (
-        <div data-testid="greeting">{data ? data.greeting : 'Unknown'}</div>
+        <div data-testid="greeting">{data ? data.greeting : "Unknown"}</div>
       );
     }
 
@@ -1892,21 +1870,21 @@ describe('useBackgroundQuery', () => {
 
     render(<App />);
 
-    const button = screen.getByText('Toggle skip');
+    const button = screen.getByText("Toggle skip");
 
     // Toggle skip to `false`
     await act(() => user.click(button));
 
-    expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
+    expect(screen.queryByText("Loading...")).not.toBeInTheDocument();
     expect(button).toBeDisabled();
-    expect(screen.getByTestId('greeting')).toHaveTextContent('Unknown');
+    expect(screen.getByTestId("greeting")).toHaveTextContent("Unknown");
 
     await waitFor(() => {
-      expect(screen.getByTestId('greeting')).toHaveTextContent('Hello');
+      expect(screen.getByTestId("greeting")).toHaveTextContent("Hello");
     });
   });
 
-  it('applies `errorPolicy` on next fetch when it changes between renders', async () => {
+  it("applies `errorPolicy` on next fetch when it changes between renders", async () => {
     interface Data {
       greeting: string;
     }
@@ -1922,12 +1900,12 @@ describe('useBackgroundQuery', () => {
     const mocks = [
       {
         request: { query },
-        result: { data: { greeting: 'Hello' } },
+        result: { data: { greeting: "Hello" } },
       },
       {
         request: { query },
         result: {
-          errors: [new GraphQLError('oops')],
+          errors: [new GraphQLError("oops")],
         },
       },
     ];
@@ -1942,14 +1920,14 @@ describe('useBackgroundQuery', () => {
     }
 
     function Parent() {
-      const [errorPolicy, setErrorPolicy] = React.useState<ErrorPolicy>('none');
+      const [errorPolicy, setErrorPolicy] = React.useState<ErrorPolicy>("none");
       const [queryRef, { refetch }] = useBackgroundQuery(query, {
         errorPolicy,
       });
 
       return (
         <>
-          <button onClick={() => setErrorPolicy('all')}>
+          <button onClick={() => setErrorPolicy("all")}>
             Change error policy
           </button>
           <button onClick={() => refetch()}>Refetch greeting</button>
@@ -1984,17 +1962,17 @@ describe('useBackgroundQuery', () => {
 
     render(<App />);
 
-    expect(await screen.findByTestId('greeting')).toHaveTextContent('Hello');
+    expect(await screen.findByTestId("greeting")).toHaveTextContent("Hello");
 
-    await act(() => user.click(screen.getByText('Change error policy')));
-    await act(() => user.click(screen.getByText('Refetch greeting')));
+    await act(() => user.click(screen.getByText("Change error policy")));
+    await act(() => user.click(screen.getByText("Refetch greeting")));
 
     // Ensure we aren't rendering the error boundary and instead rendering the
     // error message in the Greeting component.
-    expect(await screen.findByTestId('error')).toHaveTextContent('oops');
+    expect(await screen.findByTestId("error")).toHaveTextContent("oops");
   });
 
-  it('applies `context` on next fetch when it changes between renders', async () => {
+  it("applies `context` on next fetch when it changes between renders", async () => {
     interface Data {
       context: Record<string, any>;
     }
@@ -2025,14 +2003,14 @@ describe('useBackgroundQuery', () => {
     }
 
     function Parent() {
-      const [phase, setPhase] = React.useState('initial');
+      const [phase, setPhase] = React.useState("initial");
       const [queryRef, { refetch }] = useBackgroundQuery(query, {
         context: { phase },
       });
 
       return (
         <>
-          <button onClick={() => setPhase('rerender')}>Update context</button>
+          <button onClick={() => setPhase("rerender")}>Update context</button>
           <button onClick={() => refetch()}>Refetch</button>
           <Suspense fallback={<SuspenseFallback />}>
             <Context queryRef={queryRef} />
@@ -2057,18 +2035,18 @@ describe('useBackgroundQuery', () => {
 
     render(<App />);
 
-    expect(await screen.findByTestId('context')).toHaveTextContent('initial');
+    expect(await screen.findByTestId("context")).toHaveTextContent("initial");
 
-    await act(() => user.click(screen.getByText('Update context')));
-    await act(() => user.click(screen.getByText('Refetch')));
+    await act(() => user.click(screen.getByText("Update context")));
+    await act(() => user.click(screen.getByText("Refetch")));
 
-    expect(await screen.findByTestId('context')).toHaveTextContent('rerender');
+    expect(await screen.findByTestId("context")).toHaveTextContent("rerender");
   });
 
   // NOTE: We only test the `false` -> `true` path here. If the option changes
   // from `true` -> `false`, the data has already been canonized, so it has no
   // effect on the output.
-  it('returns canonical results immediately when `canonizeResults` changes from `false` to `true` between renders', async () => {
+  it("returns canonical results immediately when `canonizeResults` changes from `false` to `true` between renders", async () => {
     interface Result {
       __typename: string;
       value: number;
@@ -2095,12 +2073,12 @@ describe('useBackgroundQuery', () => {
     `;
 
     const results: Result[] = [
-      { __typename: 'Result', value: 0 },
-      { __typename: 'Result', value: 1 },
-      { __typename: 'Result', value: 1 },
-      { __typename: 'Result', value: 2 },
-      { __typename: 'Result', value: 3 },
-      { __typename: 'Result', value: 5 },
+      { __typename: "Result", value: 0 },
+      { __typename: "Result", value: 1 },
+      { __typename: "Result", value: 1 },
+      { __typename: "Result", value: 2 },
+      { __typename: "Result", value: 3 },
+      { __typename: "Result", value: 5 },
     ];
 
     const user = userEvent.setup();
@@ -2178,12 +2156,12 @@ describe('useBackgroundQuery', () => {
 
     verifyCanonicalResults(result.current!, false);
 
-    await act(() => user.click(screen.getByText('Canonize results')));
+    await act(() => user.click(screen.getByText("Canonize results")));
 
     verifyCanonicalResults(result.current!, true);
   });
 
-  it('applies changed `refetchWritePolicy` to next fetch when changing between renders', async () => {
+  it("applies changed `refetchWritePolicy` to next fetch when changing between renders", async () => {
     interface Data {
       primes: number[];
     }
@@ -2242,7 +2220,7 @@ describe('useBackgroundQuery', () => {
 
     function Parent() {
       const [refetchWritePolicy, setRefetchWritePolicy] =
-        React.useState<RefetchWritePolicy>('merge');
+        React.useState<RefetchWritePolicy>("merge");
 
       const [queryRef, { refetch }] = useBackgroundQuery(query, {
         refetchWritePolicy,
@@ -2251,7 +2229,7 @@ describe('useBackgroundQuery', () => {
 
       return (
         <>
-          <button onClick={() => setRefetchWritePolicy('overwrite')}>
+          <button onClick={() => setRefetchWritePolicy("overwrite")}>
             Change refetch write policy
           </button>
           <button onClick={() => refetch({ min: 12, max: 30 })}>
@@ -2270,7 +2248,7 @@ describe('useBackgroundQuery', () => {
     function Primes({ queryRef }: { queryRef: QueryReference<Data> }) {
       const { data } = useReadQuery(queryRef);
 
-      return <span data-testid="primes">{data.primes.join(', ')}</span>;
+      return <span data-testid="primes">{data.primes.join(", ")}</span>;
     }
 
     function App() {
@@ -2283,15 +2261,15 @@ describe('useBackgroundQuery', () => {
 
     render(<App />);
 
-    const primes = await screen.findByTestId('primes');
+    const primes = await screen.findByTestId("primes");
 
-    expect(primes).toHaveTextContent('2, 3, 5, 7, 11');
+    expect(primes).toHaveTextContent("2, 3, 5, 7, 11");
     expect(mergeParams).toEqual([[undefined, [2, 3, 5, 7, 11]]]);
 
-    await act(() => user.click(screen.getByText('Refetch next')));
+    await act(() => user.click(screen.getByText("Refetch next")));
 
     await waitFor(() => {
-      expect(primes).toHaveTextContent('2, 3, 5, 7, 11, 13, 17, 19, 23, 29');
+      expect(primes).toHaveTextContent("2, 3, 5, 7, 11, 13, 17, 19, 23, 29");
     });
 
     expect(mergeParams).toEqual([
@@ -2303,13 +2281,13 @@ describe('useBackgroundQuery', () => {
     ]);
 
     await act(() =>
-      user.click(screen.getByText('Change refetch write policy'))
+      user.click(screen.getByText("Change refetch write policy"))
     );
 
-    await act(() => user.click(screen.getByText('Refetch last')));
+    await act(() => user.click(screen.getByText("Refetch last")));
 
     await waitFor(() => {
-      expect(primes).toHaveTextContent('31, 37, 41, 43, 47');
+      expect(primes).toHaveTextContent("31, 37, 41, 43, 47");
     });
 
     expect(mergeParams).toEqual([
@@ -2322,10 +2300,10 @@ describe('useBackgroundQuery', () => {
     ]);
   });
 
-  it('applies `returnPartialData` on next fetch when it changes between renders', async () => {
+  it("applies `returnPartialData` on next fetch when it changes between renders", async () => {
     interface Data {
       character: {
-        __typename: 'Character';
+        __typename: "Character";
         id: string;
         name: string;
       };
@@ -2333,7 +2311,7 @@ describe('useBackgroundQuery', () => {
 
     interface PartialData {
       character: {
-        __typename: 'Character';
+        __typename: "Character";
         id: string;
       };
     }
@@ -2365,9 +2343,9 @@ describe('useBackgroundQuery', () => {
         result: {
           data: {
             character: {
-              __typename: 'Character',
-              id: '1',
-              name: 'Doctor Strange',
+              __typename: "Character",
+              id: "1",
+              name: "Doctor Strange",
             },
           },
         },
@@ -2377,9 +2355,9 @@ describe('useBackgroundQuery', () => {
         result: {
           data: {
             character: {
-              __typename: 'Character',
-              id: '1',
-              name: 'Doctor Strange (refetched)',
+              __typename: "Character",
+              id: "1",
+              name: "Doctor Strange (refetched)",
             },
           },
         },
@@ -2391,7 +2369,7 @@ describe('useBackgroundQuery', () => {
 
     cache.writeQuery({
       query: partialQuery,
-      data: { character: { __typename: 'Character', id: '1' } },
+      data: { character: { __typename: "Character", id: "1" } },
     });
 
     const client = new ApolloClient({
@@ -2426,7 +2404,7 @@ describe('useBackgroundQuery', () => {
       const { data } = useReadQuery(queryRef);
 
       return (
-        <span data-testid="character">{data.character.name ?? 'unknown'}</span>
+        <span data-testid="character">{data.character.name ?? "unknown"}</span>
       );
     }
 
@@ -2440,32 +2418,32 @@ describe('useBackgroundQuery', () => {
 
     render(<App />);
 
-    const character = await screen.findByTestId('character');
+    const character = await screen.findByTestId("character");
 
-    expect(character).toHaveTextContent('Doctor Strange');
+    expect(character).toHaveTextContent("Doctor Strange");
 
-    await act(() => user.click(screen.getByText('Update partial data')));
+    await act(() => user.click(screen.getByText("Update partial data")));
 
     cache.modify({
-      id: cache.identify({ __typename: 'Character', id: '1' }),
+      id: cache.identify({ __typename: "Character", id: "1" }),
       fields: {
         name: (_, { DELETE }) => DELETE,
       },
     });
 
     await waitFor(() => {
-      expect(character).toHaveTextContent('unknown');
+      expect(character).toHaveTextContent("unknown");
     });
 
     await waitFor(() => {
-      expect(character).toHaveTextContent('Doctor Strange (refetched)');
+      expect(character).toHaveTextContent("Doctor Strange (refetched)");
     });
   });
 
-  it('applies updated `fetchPolicy` on next fetch when it changes between renders', async () => {
+  it("applies updated `fetchPolicy` on next fetch when it changes between renders", async () => {
     interface Data {
       character: {
-        __typename: 'Character';
+        __typename: "Character";
         id: string;
         name: string;
       };
@@ -2489,9 +2467,9 @@ describe('useBackgroundQuery', () => {
         result: {
           data: {
             character: {
-              __typename: 'Character',
-              id: '1',
-              name: 'Doctor Strange',
+              __typename: "Character",
+              id: "1",
+              name: "Doctor Strange",
             },
           },
         },
@@ -2505,9 +2483,9 @@ describe('useBackgroundQuery', () => {
       query,
       data: {
         character: {
-          __typename: 'Character',
-          id: '1',
-          name: 'Doctor Strangecache',
+          __typename: "Character",
+          id: "1",
+          name: "Doctor Strangecache",
         },
       },
     });
@@ -2523,7 +2501,7 @@ describe('useBackgroundQuery', () => {
 
     function Parent() {
       const [fetchPolicy, setFetchPolicy] =
-        React.useState<SuspenseQueryHookFetchPolicy>('cache-first');
+        React.useState<SuspenseQueryHookFetchPolicy>("cache-first");
 
       const [queryRef, { refetch }] = useBackgroundQuery(query, {
         fetchPolicy,
@@ -2531,7 +2509,7 @@ describe('useBackgroundQuery', () => {
 
       return (
         <>
-          <button onClick={() => setFetchPolicy('no-cache')}>
+          <button onClick={() => setFetchPolicy("no-cache")}>
             Change fetch policy
           </button>
           <button onClick={() => refetch()}>Refetch</button>
@@ -2558,31 +2536,31 @@ describe('useBackgroundQuery', () => {
 
     render(<App />);
 
-    const character = await screen.findByTestId('character');
+    const character = await screen.findByTestId("character");
 
-    expect(character).toHaveTextContent('Doctor Strangecache');
+    expect(character).toHaveTextContent("Doctor Strangecache");
 
-    await act(() => user.click(screen.getByText('Change fetch policy')));
-    await act(() => user.click(screen.getByText('Refetch')));
+    await act(() => user.click(screen.getByText("Change fetch policy")));
+    await act(() => user.click(screen.getByText("Refetch")));
     await waitFor(() => {
-      expect(character).toHaveTextContent('Doctor Strange');
+      expect(character).toHaveTextContent("Doctor Strange");
     });
 
     // Because we switched to a `no-cache` fetch policy, we should not see the
     // newly fetched data in the cache after the fetch occured.
     expect(cache.readQuery({ query })).toEqual({
       character: {
-        __typename: 'Character',
-        id: '1',
-        name: 'Doctor Strangecache',
+        __typename: "Character",
+        id: "1",
+        name: "Doctor Strangecache",
       },
     });
   });
 
-  it('properly handles changing options along with changing `variables`', async () => {
+  it("properly handles changing options along with changing `variables`", async () => {
     interface Data {
       character: {
-        __typename: 'Character';
+        __typename: "Character";
         id: string;
         name: string;
       };
@@ -2601,20 +2579,20 @@ describe('useBackgroundQuery', () => {
 
     const mocks = [
       {
-        request: { query, variables: { id: '1' } },
+        request: { query, variables: { id: "1" } },
         result: {
-          errors: [new GraphQLError('oops')],
+          errors: [new GraphQLError("oops")],
         },
         delay: 10,
       },
       {
-        request: { query, variables: { id: '2' } },
+        request: { query, variables: { id: "2" } },
         result: {
           data: {
             character: {
-              __typename: 'Character',
-              id: '2',
-              name: 'Hulk',
+              __typename: "Character",
+              id: "2",
+              name: "Hulk",
             },
           },
         },
@@ -2627,13 +2605,13 @@ describe('useBackgroundQuery', () => {
     cache.writeQuery({
       query,
       variables: {
-        id: '1',
+        id: "1",
       },
       data: {
         character: {
-          __typename: 'Character',
-          id: '1',
-          name: 'Doctor Strangecache',
+          __typename: "Character",
+          id: "1",
+          name: "Doctor Strangecache",
         },
       },
     });
@@ -2648,17 +2626,17 @@ describe('useBackgroundQuery', () => {
     }
 
     function Parent() {
-      const [id, setId] = React.useState('1');
+      const [id, setId] = React.useState("1");
 
       const [queryRef, { refetch }] = useBackgroundQuery(query, {
-        errorPolicy: id === '1' ? 'all' : 'none',
+        errorPolicy: id === "1" ? "all" : "none",
         variables: { id },
       });
 
       return (
         <>
-          <button onClick={() => setId('1')}>Get first character</button>
-          <button onClick={() => setId('2')}>Get second character</button>
+          <button onClick={() => setId("1")}>Get first character</button>
+          <button onClick={() => setId("2")}>Get second character</button>
           <button onClick={() => refetch()}>Refetch</button>
           <ErrorBoundary
             fallback={<div data-testid="error">Error boundary</div>}
@@ -2691,41 +2669,41 @@ describe('useBackgroundQuery', () => {
 
     render(<App />);
 
-    const character = await screen.findByTestId('character');
+    const character = await screen.findByTestId("character");
 
-    expect(character).toHaveTextContent('Doctor Strangecache');
+    expect(character).toHaveTextContent("Doctor Strangecache");
 
-    await act(() => user.click(screen.getByText('Get second character')));
+    await act(() => user.click(screen.getByText("Get second character")));
 
     await waitFor(() => {
-      expect(character).toHaveTextContent('Hulk');
+      expect(character).toHaveTextContent("Hulk");
     });
 
-    await act(() => user.click(screen.getByText('Get first character')));
+    await act(() => user.click(screen.getByText("Get first character")));
 
     await waitFor(() => {
-      expect(character).toHaveTextContent('Doctor Strangecache');
+      expect(character).toHaveTextContent("Doctor Strangecache");
     });
 
-    await act(() => user.click(screen.getByText('Refetch')));
+    await act(() => user.click(screen.getByText("Refetch")));
 
     // Ensure we render the inline error instead of the error boundary, which
     // tells us the error policy was properly applied.
-    expect(await screen.findByTestId('error')).toHaveTextContent('oops');
+    expect(await screen.findByTestId("error")).toHaveTextContent("oops");
   });
 
-  describe('refetch', () => {
-    it('re-suspends when calling `refetch`', async () => {
+  describe("refetch", () => {
+    it("re-suspends when calling `refetch`", async () => {
       const { renders } = renderVariablesIntegrationTest({
-        variables: { id: '1' },
+        variables: { id: "1" },
       });
 
       expect(renders.suspenseCount).toBe(1);
-      expect(screen.getByText('loading')).toBeInTheDocument();
+      expect(screen.getByText("loading")).toBeInTheDocument();
 
-      expect(await screen.findByText('1 - Spider-Man')).toBeInTheDocument();
+      expect(await screen.findByText("1 - Spider-Man")).toBeInTheDocument();
 
-      const button = screen.getByText('Refetch');
+      const button = screen.getByText("Refetch");
       const user = userEvent.setup();
       await act(() => user.click(button));
 
@@ -2734,10 +2712,10 @@ describe('useBackgroundQuery', () => {
       expect(renders.count).toBe(2);
 
       expect(
-        await screen.findByText('1 - Spider-Man (updated)')
+        await screen.findByText("1 - Spider-Man (updated)")
       ).toBeInTheDocument();
     });
-    it('re-suspends when calling `refetch` with new variables', async () => {
+    it("re-suspends when calling `refetch` with new variables", async () => {
       interface QueryData {
         character: {
           id: string;
@@ -2759,39 +2737,39 @@ describe('useBackgroundQuery', () => {
 
       const mocks = [
         {
-          request: { query, variables: { id: '1' } },
+          request: { query, variables: { id: "1" } },
           result: {
-            data: { character: { id: '1', name: 'Captain Marvel' } },
+            data: { character: { id: "1", name: "Captain Marvel" } },
           },
         },
         {
-          request: { query, variables: { id: '2' } },
+          request: { query, variables: { id: "2" } },
           result: {
-            data: { character: { id: '2', name: 'Captain America' } },
+            data: { character: { id: "2", name: "Captain America" } },
           },
         },
       ];
 
       const { renders } = renderVariablesIntegrationTest({
-        variables: { id: '1' },
+        variables: { id: "1" },
         mocks,
       });
 
       expect(renders.suspenseCount).toBe(1);
-      expect(screen.getByText('loading')).toBeInTheDocument();
+      expect(screen.getByText("loading")).toBeInTheDocument();
 
-      expect(await screen.findByText('1 - Captain Marvel')).toBeInTheDocument();
+      expect(await screen.findByText("1 - Captain Marvel")).toBeInTheDocument();
 
       const newVariablesRefetchButton = screen.getByText(
-        'Set variables to id: 2'
+        "Set variables to id: 2"
       );
-      const refetchButton = screen.getByText('Refetch');
+      const refetchButton = screen.getByText("Refetch");
       const user = userEvent.setup();
       await act(() => user.click(newVariablesRefetchButton));
       await act(() => user.click(refetchButton));
 
       expect(
-        await screen.findByText('2 - Captain America')
+        await screen.findByText("2 - Captain America")
       ).toBeInTheDocument();
 
       // parent component re-suspends
@@ -2817,17 +2795,17 @@ describe('useBackgroundQuery', () => {
         },
       ]);
     });
-    it('re-suspends multiple times when calling `refetch` multiple times', async () => {
+    it("re-suspends multiple times when calling `refetch` multiple times", async () => {
       const { renders } = renderVariablesIntegrationTest({
-        variables: { id: '1' },
+        variables: { id: "1" },
       });
 
       expect(renders.suspenseCount).toBe(1);
-      expect(screen.getByText('loading')).toBeInTheDocument();
+      expect(screen.getByText("loading")).toBeInTheDocument();
 
-      expect(await screen.findByText('1 - Spider-Man')).toBeInTheDocument();
+      expect(await screen.findByText("1 - Spider-Man")).toBeInTheDocument();
 
-      const button = screen.getByText('Refetch');
+      const button = screen.getByText("Refetch");
       const user = userEvent.setup();
       await act(() => user.click(button));
 
@@ -2836,7 +2814,7 @@ describe('useBackgroundQuery', () => {
       expect(renders.count).toBe(2);
 
       expect(
-        await screen.findByText('1 - Spider-Man (updated)')
+        await screen.findByText("1 - Spider-Man (updated)")
       ).toBeInTheDocument();
 
       await act(() => user.click(button));
@@ -2846,11 +2824,11 @@ describe('useBackgroundQuery', () => {
       expect(renders.count).toBe(3);
 
       expect(
-        await screen.findByText('1 - Spider-Man (updated again)')
+        await screen.findByText("1 - Spider-Man (updated again)")
       ).toBeInTheDocument();
     });
-    it('throws errors when errors are returned after calling `refetch`', async () => {
-      const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
+    it("throws errors when errors are returned after calling `refetch`", async () => {
+      const consoleSpy = jest.spyOn(console, "error").mockImplementation();
       interface QueryData {
         character: {
           id: string;
@@ -2871,29 +2849,29 @@ describe('useBackgroundQuery', () => {
       `;
       const mocks = [
         {
-          request: { query, variables: { id: '1' } },
+          request: { query, variables: { id: "1" } },
           result: {
-            data: { character: { id: '1', name: 'Captain Marvel' } },
+            data: { character: { id: "1", name: "Captain Marvel" } },
           },
         },
         {
-          request: { query, variables: { id: '1' } },
+          request: { query, variables: { id: "1" } },
           result: {
-            errors: [new GraphQLError('Something went wrong')],
+            errors: [new GraphQLError("Something went wrong")],
           },
         },
       ];
       const { renders } = renderVariablesIntegrationTest({
-        variables: { id: '1' },
+        variables: { id: "1" },
         mocks,
       });
 
       expect(renders.suspenseCount).toBe(1);
-      expect(screen.getByText('loading')).toBeInTheDocument();
+      expect(screen.getByText("loading")).toBeInTheDocument();
 
-      expect(await screen.findByText('1 - Captain Marvel')).toBeInTheDocument();
+      expect(await screen.findByText("1 - Captain Marvel")).toBeInTheDocument();
 
-      const button = screen.getByText('Refetch');
+      const button = screen.getByText("Refetch");
       const user = userEvent.setup();
       await act(() => user.click(button));
 
@@ -2903,7 +2881,7 @@ describe('useBackgroundQuery', () => {
 
       expect(renders.errors).toEqual([
         new ApolloError({
-          graphQLErrors: [new GraphQLError('Something went wrong')],
+          graphQLErrors: [new GraphQLError("Something went wrong")],
         }),
       ]);
 
@@ -2930,28 +2908,28 @@ describe('useBackgroundQuery', () => {
       `;
       const mocks = [
         {
-          request: { query, variables: { id: '1' } },
+          request: { query, variables: { id: "1" } },
           result: {
-            data: { character: { id: '1', name: 'Captain Marvel' } },
+            data: { character: { id: "1", name: "Captain Marvel" } },
           },
         },
         {
-          request: { query, variables: { id: '1' } },
+          request: { query, variables: { id: "1" } },
           result: {
-            errors: [new GraphQLError('Something went wrong')],
+            errors: [new GraphQLError("Something went wrong")],
           },
         },
       ];
 
       const { renders } = renderVariablesIntegrationTest({
-        variables: { id: '1' },
-        errorPolicy: 'ignore',
+        variables: { id: "1" },
+        errorPolicy: "ignore",
         mocks,
       });
 
-      expect(await screen.findByText('1 - Captain Marvel')).toBeInTheDocument();
+      expect(await screen.findByText("1 - Captain Marvel")).toBeInTheDocument();
 
-      const button = screen.getByText('Refetch');
+      const button = screen.getByText("Refetch");
       const user = userEvent.setup();
       await act(() => user.click(button));
 
@@ -2979,28 +2957,28 @@ describe('useBackgroundQuery', () => {
       `;
       const mocks = [
         {
-          request: { query, variables: { id: '1' } },
+          request: { query, variables: { id: "1" } },
           result: {
-            data: { character: { id: '1', name: 'Captain Marvel' } },
+            data: { character: { id: "1", name: "Captain Marvel" } },
           },
         },
         {
-          request: { query, variables: { id: '1' } },
+          request: { query, variables: { id: "1" } },
           result: {
-            errors: [new GraphQLError('Something went wrong')],
+            errors: [new GraphQLError("Something went wrong")],
           },
         },
       ];
 
       const { renders } = renderVariablesIntegrationTest({
-        variables: { id: '1' },
-        errorPolicy: 'all',
+        variables: { id: "1" },
+        errorPolicy: "all",
         mocks,
       });
 
-      expect(await screen.findByText('1 - Captain Marvel')).toBeInTheDocument();
+      expect(await screen.findByText("1 - Captain Marvel")).toBeInTheDocument();
 
-      const button = screen.getByText('Refetch');
+      const button = screen.getByText("Refetch");
       const user = userEvent.setup();
       await act(() => user.click(button));
 
@@ -3008,7 +2986,7 @@ describe('useBackgroundQuery', () => {
       expect(renders.errors).toEqual([]);
 
       expect(
-        await screen.findByText('Something went wrong')
+        await screen.findByText("Something went wrong")
       ).toBeInTheDocument();
     });
     it('handles partial data results after calling `refetch` when errorPolicy is set to "all"', async () => {
@@ -3032,29 +3010,29 @@ describe('useBackgroundQuery', () => {
       `;
       const mocks = [
         {
-          request: { query, variables: { id: '1' } },
+          request: { query, variables: { id: "1" } },
           result: {
-            data: { character: { id: '1', name: 'Captain Marvel' } },
+            data: { character: { id: "1", name: "Captain Marvel" } },
           },
         },
         {
-          request: { query, variables: { id: '1' } },
+          request: { query, variables: { id: "1" } },
           result: {
-            data: { character: { id: '1', name: null } },
-            errors: [new GraphQLError('Something went wrong')],
+            data: { character: { id: "1", name: null } },
+            errors: [new GraphQLError("Something went wrong")],
           },
         },
       ];
 
       const { renders } = renderVariablesIntegrationTest({
-        variables: { id: '1' },
-        errorPolicy: 'all',
+        variables: { id: "1" },
+        errorPolicy: "all",
         mocks,
       });
 
-      expect(await screen.findByText('1 - Captain Marvel')).toBeInTheDocument();
+      expect(await screen.findByText("1 - Captain Marvel")).toBeInTheDocument();
 
-      const button = screen.getByText('Refetch');
+      const button = screen.getByText("Refetch");
       const user = userEvent.setup();
       await act(() => user.click(button));
 
@@ -3062,11 +3040,11 @@ describe('useBackgroundQuery', () => {
       expect(renders.errors).toEqual([]);
 
       expect(
-        await screen.findByText('Something went wrong')
+        await screen.findByText("Something went wrong")
       ).toBeInTheDocument();
 
       const expectedError = new ApolloError({
-        graphQLErrors: [new GraphQLError('Something went wrong')],
+        graphQLErrors: [new GraphQLError("Something went wrong")],
       });
 
       expect(renders.frames).toMatchObject([
@@ -3082,7 +3060,7 @@ describe('useBackgroundQuery', () => {
         },
       ]);
     });
-    it('`refetch` works with startTransition to allow React to show stale UI until finished suspending', async () => {
+    it("`refetch` works with startTransition to allow React to show stale UI until finished suspending", async () => {
       type Variables = {
         id: string;
       };
@@ -3108,16 +3086,16 @@ describe('useBackgroundQuery', () => {
 
       const mocks: MockedResponse<Data, Variables>[] = [
         {
-          request: { query, variables: { id: '1' } },
+          request: { query, variables: { id: "1" } },
           result: {
-            data: { todo: { id: '1', name: 'Clean room', completed: false } },
+            data: { todo: { id: "1", name: "Clean room", completed: false } },
           },
           delay: 10,
         },
         {
-          request: { query, variables: { id: '1' } },
+          request: { query, variables: { id: "1" } },
           result: {
-            data: { todo: { id: '1', name: 'Clean room', completed: true } },
+            data: { todo: { id: "1", name: "Clean room", completed: true } },
           },
           delay: 10,
         },
@@ -3143,7 +3121,7 @@ describe('useBackgroundQuery', () => {
       }
 
       function Parent() {
-        const [id, setId] = React.useState('1');
+        const [id, setId] = React.useState("1");
         const [queryRef, { refetch }] = useBackgroundQuery(query, {
           variables: { id },
         });
@@ -3175,7 +3153,7 @@ describe('useBackgroundQuery', () => {
             </button>
             <div data-testid="todo" aria-busy={isPending}>
               {todo.name}
-              {todo.completed && ' (completed)'}
+              {todo.completed && " (completed)"}
             </div>
           </>
         );
@@ -3183,14 +3161,14 @@ describe('useBackgroundQuery', () => {
 
       render(<App />);
 
-      expect(screen.getByText('Loading')).toBeInTheDocument();
+      expect(screen.getByText("Loading")).toBeInTheDocument();
 
-      expect(await screen.findByTestId('todo')).toBeInTheDocument();
+      expect(await screen.findByTestId("todo")).toBeInTheDocument();
 
-      const todo = screen.getByTestId('todo');
-      const button = screen.getByText('Refresh');
+      const todo = screen.getByTestId("todo");
+      const button = screen.getByText("Refresh");
 
-      expect(todo).toHaveTextContent('Clean room');
+      expect(todo).toHaveTextContent("Clean room");
 
       await act(() => user.click(button));
 
@@ -3201,40 +3179,40 @@ describe('useBackgroundQuery', () => {
       // Here we should not see the suspense fallback while the component suspends
       // until the todo is finished loading. Seeing the suspense fallback is an
       // indication that we are suspending the component too late in the process.
-      expect(screen.queryByText('Loading')).not.toBeInTheDocument();
+      expect(screen.queryByText("Loading")).not.toBeInTheDocument();
 
       // We can ensure this works with isPending from useTransition in the process
-      expect(todo).toHaveAttribute('aria-busy', 'true');
+      expect(todo).toHaveAttribute("aria-busy", "true");
 
       // Ensure we are showing the stale UI until the new todo has loaded
-      expect(todo).toHaveTextContent('Clean room');
+      expect(todo).toHaveTextContent("Clean room");
 
       // Eventually we should see the updated todo content once its done
       // suspending.
       await waitFor(() => {
-        expect(todo).toHaveTextContent('Clean room (completed)');
+        expect(todo).toHaveTextContent("Clean room (completed)");
       });
     });
   });
 
-  describe('fetchMore', () => {
+  describe("fetchMore", () => {
     function getItemTexts() {
       return screen.getAllByTestId(/letter/).map(
         // eslint-disable-next-line testing-library/no-node-access
         (li) => li.firstChild!.textContent
       );
     }
-    it('re-suspends when calling `fetchMore` with different variables', async () => {
+    it("re-suspends when calling `fetchMore` with different variables", async () => {
       const { renders } = renderPaginatedIntegrationTest();
 
       expect(renders.suspenseCount).toBe(1);
-      expect(screen.getByText('loading')).toBeInTheDocument();
+      expect(screen.getByText("loading")).toBeInTheDocument();
 
       const items = await screen.findAllByTestId(/letter/i);
       expect(items).toHaveLength(2);
-      expect(getItemTexts()).toStrictEqual(['A', 'B']);
+      expect(getItemTexts()).toStrictEqual(["A", "B"]);
 
-      const button = screen.getByText('Fetch more');
+      const button = screen.getByText("Fetch more");
       const user = userEvent.setup();
       await act(() => user.click(button));
 
@@ -3244,22 +3222,22 @@ describe('useBackgroundQuery', () => {
         expect(renders.count).toBe(2);
       });
 
-      expect(getItemTexts()).toStrictEqual(['C', 'D']);
+      expect(getItemTexts()).toStrictEqual(["C", "D"]);
     });
-    it('properly uses `updateQuery` when calling `fetchMore`', async () => {
+    it("properly uses `updateQuery` when calling `fetchMore`", async () => {
       const { renders } = renderPaginatedIntegrationTest({
         updateQuery: true,
       });
 
       expect(renders.suspenseCount).toBe(1);
-      expect(screen.getByText('loading')).toBeInTheDocument();
+      expect(screen.getByText("loading")).toBeInTheDocument();
 
       const items = await screen.findAllByTestId(/letter/i);
 
       expect(items).toHaveLength(2);
-      expect(getItemTexts()).toStrictEqual(['A', 'B']);
+      expect(getItemTexts()).toStrictEqual(["A", "B"]);
 
-      const button = screen.getByText('Fetch more');
+      const button = screen.getByText("Fetch more");
       const user = userEvent.setup();
       await act(() => user.click(button));
 
@@ -3271,21 +3249,21 @@ describe('useBackgroundQuery', () => {
 
       const moreItems = await screen.findAllByTestId(/letter/i);
       expect(moreItems).toHaveLength(4);
-      expect(getItemTexts()).toStrictEqual(['A', 'B', 'C', 'D']);
+      expect(getItemTexts()).toStrictEqual(["A", "B", "C", "D"]);
     });
-    it('properly uses cache field policies when calling `fetchMore` without `updateQuery`', async () => {
+    it("properly uses cache field policies when calling `fetchMore` without `updateQuery`", async () => {
       const { renders } = renderPaginatedIntegrationTest({
         fieldPolicies: true,
       });
       expect(renders.suspenseCount).toBe(1);
-      expect(screen.getByText('loading')).toBeInTheDocument();
+      expect(screen.getByText("loading")).toBeInTheDocument();
 
       const items = await screen.findAllByTestId(/letter/i);
 
       expect(items).toHaveLength(2);
-      expect(getItemTexts()).toStrictEqual(['A', 'B']);
+      expect(getItemTexts()).toStrictEqual(["A", "B"]);
 
-      const button = screen.getByText('Fetch more');
+      const button = screen.getByText("Fetch more");
       const user = userEvent.setup();
       await act(() => user.click(button));
 
@@ -3297,15 +3275,15 @@ describe('useBackgroundQuery', () => {
 
       const moreItems = await screen.findAllByTestId(/letter/i);
       expect(moreItems).toHaveLength(4);
-      expect(getItemTexts()).toStrictEqual(['A', 'B', 'C', 'D']);
+      expect(getItemTexts()).toStrictEqual(["A", "B", "C", "D"]);
     });
-    it('`fetchMore` works with startTransition to allow React to show stale UI until finished suspending', async () => {
+    it("`fetchMore` works with startTransition to allow React to show stale UI until finished suspending", async () => {
       type Variables = {
         offset: number;
       };
 
       interface Todo {
-        __typename: 'Todo';
+        __typename: "Todo";
         id: string;
         name: string;
         completed: boolean;
@@ -3332,9 +3310,9 @@ describe('useBackgroundQuery', () => {
             data: {
               todos: [
                 {
-                  __typename: 'Todo',
-                  id: '1',
-                  name: 'Clean room',
+                  __typename: "Todo",
+                  id: "1",
+                  name: "Clean room",
                   completed: false,
                 },
               ],
@@ -3348,9 +3326,9 @@ describe('useBackgroundQuery', () => {
             data: {
               todos: [
                 {
-                  __typename: 'Todo',
-                  id: '2',
-                  name: 'Take out trash',
+                  __typename: "Todo",
+                  id: "2",
+                  name: "Take out trash",
                   completed: true,
                 },
               ],
@@ -3420,7 +3398,7 @@ describe('useBackgroundQuery', () => {
               {todos.map((todo) => (
                 <div data-testid={`todo:${todo.id}`} key={todo.id}>
                   {todo.name}
-                  {todo.completed && ' (completed)'}
+                  {todo.completed && " (completed)"}
                 </div>
               ))}
             </div>
@@ -3430,13 +3408,13 @@ describe('useBackgroundQuery', () => {
 
       render(<App />);
 
-      expect(screen.getByText('Loading')).toBeInTheDocument();
+      expect(screen.getByText("Loading")).toBeInTheDocument();
 
-      expect(await screen.findByTestId('todos')).toBeInTheDocument();
+      expect(await screen.findByTestId("todos")).toBeInTheDocument();
 
-      const todos = screen.getByTestId('todos');
-      const todo1 = screen.getByTestId('todo:1');
-      const button = screen.getByText('Load more');
+      const todos = screen.getByTestId("todos");
+      const todo1 = screen.getByTestId("todo:1");
+      const button = screen.getByText("Load more");
 
       expect(todo1).toBeInTheDocument();
 
@@ -3449,21 +3427,21 @@ describe('useBackgroundQuery', () => {
       // Here we should not see the suspense fallback while the component suspends
       // until the todo is finished loading. Seeing the suspense fallback is an
       // indication that we are suspending the component too late in the process.
-      expect(screen.queryByText('Loading')).not.toBeInTheDocument();
+      expect(screen.queryByText("Loading")).not.toBeInTheDocument();
 
       // We can ensure this works with isPending from useTransition in the process
-      expect(todos).toHaveAttribute('aria-busy', 'true');
+      expect(todos).toHaveAttribute("aria-busy", "true");
 
       // Ensure we are showing the stale UI until the new todo has loaded
-      expect(todo1).toHaveTextContent('Clean room');
+      expect(todo1).toHaveTextContent("Clean room");
 
       // Eventually we should see the updated todos content once its done
       // suspending.
       await waitFor(() => {
-        expect(screen.getByTestId('todo:2')).toHaveTextContent(
-          'Take out trash (completed)'
+        expect(screen.getByTestId("todo:2")).toHaveTextContent(
+          "Take out trash (completed)"
         );
-        expect(todo1).toHaveTextContent('Clean room');
+        expect(todo1).toHaveTextContent("Clean room");
       });
     });
 
@@ -3541,9 +3519,9 @@ describe('useBackgroundQuery', () => {
             >
               Refetch
             </button>
-            <div data-testid="primes">{data?.primes.join(', ')}</div>
+            <div data-testid="primes">{data?.primes.join(", ")}</div>
             <div data-testid="network-status">{networkStatus}</div>
-            <div data-testid="error">{error?.message || 'undefined'}</div>
+            <div data-testid="error">{error?.message || "undefined"}</div>
           </div>
         );
       }
@@ -3551,7 +3529,7 @@ describe('useBackgroundQuery', () => {
       function Parent() {
         const [queryRef, { refetch }] = useBackgroundQuery(query, {
           variables: { min: 0, max: 12 },
-          refetchWritePolicy: 'merge',
+          refetchWritePolicy: "merge",
         });
         return <Child refetch={refetch} queryRef={queryRef} />;
       }
@@ -3569,27 +3547,27 @@ describe('useBackgroundQuery', () => {
       render(<App />);
 
       await waitFor(() => {
-        expect(screen.getByTestId('primes')).toHaveTextContent(
-          '2, 3, 5, 7, 11'
+        expect(screen.getByTestId("primes")).toHaveTextContent(
+          "2, 3, 5, 7, 11"
         );
       });
-      expect(screen.getByTestId('network-status')).toHaveTextContent(
-        '7' // ready
+      expect(screen.getByTestId("network-status")).toHaveTextContent(
+        "7" // ready
       );
-      expect(screen.getByTestId('error')).toHaveTextContent('undefined');
+      expect(screen.getByTestId("error")).toHaveTextContent("undefined");
       expect(mergeParams).toEqual([[undefined, [2, 3, 5, 7, 11]]]);
 
-      await act(() => user.click(screen.getByText('Refetch')));
+      await act(() => user.click(screen.getByText("Refetch")));
 
       await waitFor(() => {
-        expect(screen.getByTestId('primes')).toHaveTextContent(
-          '2, 3, 5, 7, 11, 13, 17, 19, 23, 29'
+        expect(screen.getByTestId("primes")).toHaveTextContent(
+          "2, 3, 5, 7, 11, 13, 17, 19, 23, 29"
         );
       });
-      expect(screen.getByTestId('network-status')).toHaveTextContent(
-        '7' // ready
+      expect(screen.getByTestId("network-status")).toHaveTextContent(
+        "7" // ready
       );
-      expect(screen.getByTestId('error')).toHaveTextContent('undefined');
+      expect(screen.getByTestId("error")).toHaveTextContent("undefined");
       expect(mergeParams).toEqual([
         [undefined, [2, 3, 5, 7, 11]],
         [
@@ -3673,9 +3651,9 @@ describe('useBackgroundQuery', () => {
             >
               Refetch
             </button>
-            <div data-testid="primes">{data?.primes.join(', ')}</div>
+            <div data-testid="primes">{data?.primes.join(", ")}</div>
             <div data-testid="network-status">{networkStatus}</div>
-            <div data-testid="error">{error?.message || 'undefined'}</div>
+            <div data-testid="error">{error?.message || "undefined"}</div>
           </div>
         );
       }
@@ -3700,27 +3678,27 @@ describe('useBackgroundQuery', () => {
       render(<App />);
 
       await waitFor(() => {
-        expect(screen.getByTestId('primes')).toHaveTextContent(
-          '2, 3, 5, 7, 11'
+        expect(screen.getByTestId("primes")).toHaveTextContent(
+          "2, 3, 5, 7, 11"
         );
       });
-      expect(screen.getByTestId('network-status')).toHaveTextContent(
-        '7' // ready
+      expect(screen.getByTestId("network-status")).toHaveTextContent(
+        "7" // ready
       );
-      expect(screen.getByTestId('error')).toHaveTextContent('undefined');
+      expect(screen.getByTestId("error")).toHaveTextContent("undefined");
       expect(mergeParams).toEqual([[undefined, [2, 3, 5, 7, 11]]]);
 
-      await act(() => user.click(screen.getByText('Refetch')));
+      await act(() => user.click(screen.getByText("Refetch")));
 
       await waitFor(() => {
-        expect(screen.getByTestId('primes')).toHaveTextContent(
-          '13, 17, 19, 23, 29'
+        expect(screen.getByTestId("primes")).toHaveTextContent(
+          "13, 17, 19, 23, 29"
         );
       });
-      expect(screen.getByTestId('network-status')).toHaveTextContent(
-        '7' // ready
+      expect(screen.getByTestId("network-status")).toHaveTextContent(
+        "7" // ready
       );
-      expect(screen.getByTestId('error')).toHaveTextContent('undefined');
+      expect(screen.getByTestId("error")).toHaveTextContent("undefined");
       expect(mergeParams).toEqual([
         [undefined, [2, 3, 5, 7, 11]],
         [undefined, [13, 17, 19, 23, 29]],
@@ -3754,7 +3732,7 @@ describe('useBackgroundQuery', () => {
       const mocks = [
         {
           request: { query: fullQuery },
-          result: { data: { character: { id: '1', name: 'Doctor Strange' } } },
+          result: { data: { character: { id: "1", name: "Doctor Strange" } } },
         },
       ];
 
@@ -3775,7 +3753,7 @@ describe('useBackgroundQuery', () => {
 
       cache.writeQuery({
         query: partialQuery,
-        data: { character: { id: '1' } },
+        data: { character: { id: "1" } },
       });
 
       const client = new ApolloClient({
@@ -3800,7 +3778,7 @@ describe('useBackgroundQuery', () => {
 
       function Parent() {
         const [queryRef] = useBackgroundQuery(fullQuery, {
-          fetchPolicy: 'cache-first',
+          fetchPolicy: "cache-first",
           returnPartialData: true,
         });
         return <Todo queryRef={queryRef} />;
@@ -3819,7 +3797,7 @@ describe('useBackgroundQuery', () => {
             <div data-testid="character-id">{data.character?.id}</div>
             <div data-testid="character-name">{data.character?.name}</div>
             <div data-testid="network-status">{networkStatus}</div>
-            <div data-testid="error">{error?.message || 'undefined'}</div>
+            <div data-testid="error">{error?.message || "undefined"}</div>
           </>
         );
       }
@@ -3827,19 +3805,19 @@ describe('useBackgroundQuery', () => {
       render(<App />);
 
       expect(renders.suspenseCount).toBe(0);
-      expect(screen.getByTestId('character-id')).toHaveTextContent('1');
-      expect(screen.getByTestId('character-name')).toHaveTextContent('');
-      expect(screen.getByTestId('network-status')).toHaveTextContent('1'); // loading
-      expect(screen.getByTestId('error')).toHaveTextContent('undefined');
+      expect(screen.getByTestId("character-id")).toHaveTextContent("1");
+      expect(screen.getByTestId("character-name")).toHaveTextContent("");
+      expect(screen.getByTestId("network-status")).toHaveTextContent("1"); // loading
+      expect(screen.getByTestId("error")).toHaveTextContent("undefined");
 
       await waitFor(() => {
-        expect(screen.getByTestId('character-name')).toHaveTextContent(
-          'Doctor Strange'
+        expect(screen.getByTestId("character-name")).toHaveTextContent(
+          "Doctor Strange"
         );
       });
-      expect(screen.getByTestId('character-id')).toHaveTextContent('1');
-      expect(screen.getByTestId('network-status')).toHaveTextContent('7'); // ready
-      expect(screen.getByTestId('error')).toHaveTextContent('undefined');
+      expect(screen.getByTestId("character-id")).toHaveTextContent("1");
+      expect(screen.getByTestId("network-status")).toHaveTextContent("7"); // ready
+      expect(screen.getByTestId("error")).toHaveTextContent("undefined");
 
       expect(renders.count).toBe(2);
       expect(renders.suspenseCount).toBe(0);
@@ -3858,25 +3836,25 @@ describe('useBackgroundQuery', () => {
 
       cache.writeQuery({
         query: partialQuery,
-        data: { character: { id: '1' } },
-        variables: { id: '1' },
+        data: { character: { id: "1" } },
+        variables: { id: "1" },
       });
 
       const { renders, mocks, rerender } = renderVariablesIntegrationTest({
-        variables: { id: '1' },
+        variables: { id: "1" },
         cache,
         options: {
-          fetchPolicy: 'cache-first',
+          fetchPolicy: "cache-first",
           returnPartialData: true,
         },
       });
       expect(renders.suspenseCount).toBe(0);
 
-      expect(await screen.findByText('1 - Spider-Man')).toBeInTheDocument();
+      expect(await screen.findByText("1 - Spider-Man")).toBeInTheDocument();
 
-      rerender({ variables: { id: '2' } });
+      rerender({ variables: { id: "2" } });
 
-      expect(await screen.findByText('2 - Black Widow')).toBeInTheDocument();
+      expect(await screen.findByText("2 - Black Widow")).toBeInTheDocument();
 
       expect(renders.frames[2]).toMatchObject({
         ...mocks[1].result,
@@ -3888,7 +3866,7 @@ describe('useBackgroundQuery', () => {
       expect(renders.suspenseCount).toBe(1);
       expect(renders.frames).toMatchObject([
         {
-          data: { character: { id: '1' } },
+          data: { character: { id: "1" } },
           networkStatus: NetworkStatus.loading,
           error: undefined,
         },
@@ -3932,7 +3910,7 @@ describe('useBackgroundQuery', () => {
       const mocks = [
         {
           request: { query: fullQuery },
-          result: { data: { character: { id: '1', name: 'Doctor Strange' } } },
+          result: { data: { character: { id: "1", name: "Doctor Strange" } } },
         },
       ];
 
@@ -3959,7 +3937,7 @@ describe('useBackgroundQuery', () => {
 
       cache.writeQuery({
         query: partialQuery,
-        data: { character: { id: '1' } },
+        data: { character: { id: "1" } },
       });
 
       const client = new ApolloClient({
@@ -3984,7 +3962,7 @@ describe('useBackgroundQuery', () => {
 
       function Parent() {
         const [queryRef] = useBackgroundQuery(fullQuery, {
-          fetchPolicy: 'network-only',
+          fetchPolicy: "network-only",
           returnPartialData: true,
         });
 
@@ -4004,7 +3982,7 @@ describe('useBackgroundQuery', () => {
             <div data-testid="character-id">{data.character?.id}</div>
             <div data-testid="character-name">{data.character?.name}</div>
             <div data-testid="network-status">{networkStatus}</div>
-            <div data-testid="error">{error?.message || 'undefined'}</div>
+            <div data-testid="error">{error?.message || "undefined"}</div>
           </>
         );
       }
@@ -4014,13 +3992,13 @@ describe('useBackgroundQuery', () => {
       expect(renders.suspenseCount).toBe(1);
 
       await waitFor(() => {
-        expect(screen.getByTestId('character-name')).toHaveTextContent(
-          'Doctor Strange'
+        expect(screen.getByTestId("character-name")).toHaveTextContent(
+          "Doctor Strange"
         );
       });
-      expect(screen.getByTestId('character-id')).toHaveTextContent('1');
-      expect(screen.getByTestId('network-status')).toHaveTextContent('7'); // ready
-      expect(screen.getByTestId('error')).toHaveTextContent('undefined');
+      expect(screen.getByTestId("character-id")).toHaveTextContent("1");
+      expect(screen.getByTestId("network-status")).toHaveTextContent("7"); // ready
+      expect(screen.getByTestId("error")).toHaveTextContent("undefined");
 
       expect(renders.count).toBe(1);
       expect(renders.suspenseCount).toBe(1);
@@ -4035,7 +4013,7 @@ describe('useBackgroundQuery', () => {
     });
 
     it('suspends when partial data is in the cache and using a "no-cache" fetch policy with returnPartialData', async () => {
-      const consoleSpy = jest.spyOn(console, 'warn').mockImplementation();
+      const consoleSpy = jest.spyOn(console, "warn").mockImplementation();
       interface Data {
         character: {
           id: string;
@@ -4062,7 +4040,7 @@ describe('useBackgroundQuery', () => {
       const mocks = [
         {
           request: { query: fullQuery },
-          result: { data: { character: { id: '1', name: 'Doctor Strange' } } },
+          result: { data: { character: { id: "1", name: "Doctor Strange" } } },
         },
       ];
 
@@ -4089,7 +4067,7 @@ describe('useBackgroundQuery', () => {
 
       cache.writeQuery({
         query: partialQuery,
-        data: { character: { id: '1' } },
+        data: { character: { id: "1" } },
       });
 
       const client = new ApolloClient({
@@ -4114,7 +4092,7 @@ describe('useBackgroundQuery', () => {
 
       function Parent() {
         const [queryRef] = useBackgroundQuery(fullQuery, {
-          fetchPolicy: 'no-cache',
+          fetchPolicy: "no-cache",
           returnPartialData: true,
         });
 
@@ -4134,7 +4112,7 @@ describe('useBackgroundQuery', () => {
             <div data-testid="character-id">{data.character?.id}</div>
             <div data-testid="character-name">{data.character?.name}</div>
             <div data-testid="network-status">{networkStatus}</div>
-            <div data-testid="error">{error?.message || 'undefined'}</div>
+            <div data-testid="error">{error?.message || "undefined"}</div>
           </>
         );
       }
@@ -4144,13 +4122,13 @@ describe('useBackgroundQuery', () => {
       expect(renders.suspenseCount).toBe(1);
 
       await waitFor(() => {
-        expect(screen.getByTestId('character-name')).toHaveTextContent(
-          'Doctor Strange'
+        expect(screen.getByTestId("character-name")).toHaveTextContent(
+          "Doctor Strange"
         );
       });
-      expect(screen.getByTestId('character-id')).toHaveTextContent('1');
-      expect(screen.getByTestId('network-status')).toHaveTextContent('7'); // ready
-      expect(screen.getByTestId('error')).toHaveTextContent('undefined');
+      expect(screen.getByTestId("character-id")).toHaveTextContent("1");
+      expect(screen.getByTestId("network-status")).toHaveTextContent("7"); // ready
+      expect(screen.getByTestId("error")).toHaveTextContent("undefined");
 
       expect(renders.count).toBe(1);
       expect(renders.suspenseCount).toBe(1);
@@ -4167,7 +4145,7 @@ describe('useBackgroundQuery', () => {
     });
 
     it('warns when using returnPartialData with a "no-cache" fetch policy', async () => {
-      const consoleSpy = jest.spyOn(console, 'warn').mockImplementation();
+      const consoleSpy = jest.spyOn(console, "warn").mockImplementation();
 
       const query: TypedDocumentNode<SimpleQueryData> = gql`
         query UserQuery {
@@ -4177,14 +4155,14 @@ describe('useBackgroundQuery', () => {
       const mocks = [
         {
           request: { query },
-          result: { data: { greeting: 'Hello' } },
+          result: { data: { greeting: "Hello" } },
         },
       ];
 
       renderSuspenseHook(
         () =>
           useBackgroundQuery(query, {
-            fetchPolicy: 'no-cache',
+            fetchPolicy: "no-cache",
             returnPartialData: true,
           }),
         { mocks }
@@ -4192,7 +4170,7 @@ describe('useBackgroundQuery', () => {
 
       expect(console.warn).toHaveBeenCalledTimes(1);
       expect(console.warn).toHaveBeenCalledWith(
-        'Using `returnPartialData` with a `no-cache` fetch policy has no effect. To read partial data from the cache, consider using an alternate fetch policy.'
+        "Using `returnPartialData` with a `no-cache` fetch policy has no effect. To read partial data from the cache, consider using an alternate fetch policy."
       );
 
       consoleSpy.mockRestore();
@@ -4225,7 +4203,7 @@ describe('useBackgroundQuery', () => {
       const mocks = [
         {
           request: { query: fullQuery },
-          result: { data: { character: { id: '1', name: 'Doctor Strange' } } },
+          result: { data: { character: { id: "1", name: "Doctor Strange" } } },
         },
       ];
 
@@ -4252,7 +4230,7 @@ describe('useBackgroundQuery', () => {
 
       cache.writeQuery({
         query: partialQuery,
-        data: { character: { id: '1' } },
+        data: { character: { id: "1" } },
       });
 
       const client = new ApolloClient({
@@ -4277,7 +4255,7 @@ describe('useBackgroundQuery', () => {
 
       function Parent() {
         const [queryRef] = useBackgroundQuery(fullQuery, {
-          fetchPolicy: 'cache-and-network',
+          fetchPolicy: "cache-and-network",
           returnPartialData: true,
         });
 
@@ -4297,7 +4275,7 @@ describe('useBackgroundQuery', () => {
             <div data-testid="character-id">{data.character?.id}</div>
             <div data-testid="character-name">{data.character?.name}</div>
             <div data-testid="network-status">{networkStatus}</div>
-            <div data-testid="error">{error?.message || 'undefined'}</div>
+            <div data-testid="error">{error?.message || "undefined"}</div>
           </>
         );
       }
@@ -4305,27 +4283,27 @@ describe('useBackgroundQuery', () => {
       render(<App />);
 
       expect(renders.suspenseCount).toBe(0);
-      expect(screen.getByTestId('character-id')).toHaveTextContent('1');
+      expect(screen.getByTestId("character-id")).toHaveTextContent("1");
       // name is not present yet, since it's missing in partial data
-      expect(screen.getByTestId('character-name')).toHaveTextContent('');
-      expect(screen.getByTestId('network-status')).toHaveTextContent('1'); // loading
-      expect(screen.getByTestId('error')).toHaveTextContent('undefined');
+      expect(screen.getByTestId("character-name")).toHaveTextContent("");
+      expect(screen.getByTestId("network-status")).toHaveTextContent("1"); // loading
+      expect(screen.getByTestId("error")).toHaveTextContent("undefined");
 
       await waitFor(() => {
-        expect(screen.getByTestId('character-name')).toHaveTextContent(
-          'Doctor Strange'
+        expect(screen.getByTestId("character-name")).toHaveTextContent(
+          "Doctor Strange"
         );
       });
-      expect(screen.getByTestId('character-id')).toHaveTextContent('1');
-      expect(screen.getByTestId('network-status')).toHaveTextContent('7'); // ready
-      expect(screen.getByTestId('error')).toHaveTextContent('undefined');
+      expect(screen.getByTestId("character-id")).toHaveTextContent("1");
+      expect(screen.getByTestId("network-status")).toHaveTextContent("7"); // ready
+      expect(screen.getByTestId("error")).toHaveTextContent("undefined");
 
       expect(renders.count).toBe(2);
       expect(renders.suspenseCount).toBe(0);
 
       expect(renders.frames).toMatchObject([
         {
-          data: { character: { id: '1' } },
+          data: { character: { id: "1" } },
           networkStatus: NetworkStatus.loading,
           error: undefined,
         },
@@ -4350,32 +4328,32 @@ describe('useBackgroundQuery', () => {
 
       cache.writeQuery({
         query: partialQuery,
-        data: { character: { id: '1' } },
-        variables: { id: '1' },
+        data: { character: { id: "1" } },
+        variables: { id: "1" },
       });
 
       const { renders, mocks, rerender } = renderVariablesIntegrationTest({
-        variables: { id: '1' },
+        variables: { id: "1" },
         cache,
         options: {
-          fetchPolicy: 'cache-and-network',
+          fetchPolicy: "cache-and-network",
           returnPartialData: true,
         },
       });
 
       expect(renders.suspenseCount).toBe(0);
 
-      expect(await screen.findByText('1 - Spider-Man')).toBeInTheDocument();
+      expect(await screen.findByText("1 - Spider-Man")).toBeInTheDocument();
 
-      rerender({ variables: { id: '2' } });
+      rerender({ variables: { id: "2" } });
 
-      expect(await screen.findByText('2 - Black Widow')).toBeInTheDocument();
+      expect(await screen.findByText("2 - Black Widow")).toBeInTheDocument();
 
       expect(renders.count).toBe(3);
       expect(renders.suspenseCount).toBe(1);
       expect(renders.frames).toMatchObject([
         {
-          data: { character: { id: '1' } },
+          data: { character: { id: "1" } },
           networkStatus: NetworkStatus.loading,
           error: undefined,
         },
@@ -4422,13 +4400,13 @@ describe('useBackgroundQuery', () => {
 
       // We are intentionally writing partial data to the cache. Supress console
       // warnings to avoid unnecessary noise in the test.
-      const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
+      const consoleSpy = jest.spyOn(console, "error").mockImplementation();
       cache.writeQuery({
         query,
         data: {
           greeting: {
-            __typename: 'Greeting',
-            recipient: { __typename: 'Person', name: 'Cached Alice' },
+            __typename: "Greeting",
+            recipient: { __typename: "Person", name: "Cached Alice" },
           },
         },
       });
@@ -4475,7 +4453,7 @@ describe('useBackgroundQuery', () => {
 
       function Parent() {
         const [queryRef] = useBackgroundQuery(query, {
-          fetchPolicy: 'cache-first',
+          fetchPolicy: "cache-first",
           returnPartialData: true,
         });
 
@@ -4495,7 +4473,7 @@ describe('useBackgroundQuery', () => {
             <div data-testid="message">{data.greeting?.message}</div>
             <div data-testid="recipient">{data.greeting?.recipient?.name}</div>
             <div data-testid="network-status">{networkStatus}</div>
-            <div data-testid="error">{error?.message || 'undefined'}</div>
+            <div data-testid="error">{error?.message || "undefined"}</div>
           </>
         );
       }
@@ -4503,37 +4481,37 @@ describe('useBackgroundQuery', () => {
       render(<App />);
 
       expect(renders.suspenseCount).toBe(0);
-      expect(screen.getByTestId('recipient')).toHaveTextContent('Cached Alice');
+      expect(screen.getByTestId("recipient")).toHaveTextContent("Cached Alice");
       // message is not present yet, since it's missing in partial data
-      expect(screen.getByTestId('message')).toHaveTextContent('');
-      expect(screen.getByTestId('network-status')).toHaveTextContent('1'); // loading
-      expect(screen.getByTestId('error')).toHaveTextContent('undefined');
+      expect(screen.getByTestId("message")).toHaveTextContent("");
+      expect(screen.getByTestId("network-status")).toHaveTextContent("1"); // loading
+      expect(screen.getByTestId("error")).toHaveTextContent("undefined");
 
       link.simulateResult({
         result: {
           data: {
-            greeting: { message: 'Hello world', __typename: 'Greeting' },
+            greeting: { message: "Hello world", __typename: "Greeting" },
           },
           hasNext: true,
         },
       });
 
       await waitFor(() => {
-        expect(screen.getByTestId('message')).toHaveTextContent('Hello world');
+        expect(screen.getByTestId("message")).toHaveTextContent("Hello world");
       });
-      expect(screen.getByTestId('recipient')).toHaveTextContent('Cached Alice');
-      expect(screen.getByTestId('network-status')).toHaveTextContent('7'); // ready
-      expect(screen.getByTestId('error')).toHaveTextContent('undefined');
+      expect(screen.getByTestId("recipient")).toHaveTextContent("Cached Alice");
+      expect(screen.getByTestId("network-status")).toHaveTextContent("7"); // ready
+      expect(screen.getByTestId("error")).toHaveTextContent("undefined");
 
       link.simulateResult({
         result: {
           incremental: [
             {
               data: {
-                __typename: 'Greeting',
-                recipient: { name: 'Alice', __typename: 'Person' },
+                __typename: "Greeting",
+                recipient: { name: "Alice", __typename: "Person" },
               },
-              path: ['greeting'],
+              path: ["greeting"],
             },
           ],
           hasNext: false,
@@ -4541,11 +4519,11 @@ describe('useBackgroundQuery', () => {
       });
 
       await waitFor(() => {
-        expect(screen.getByTestId('recipient').textContent).toEqual('Alice');
+        expect(screen.getByTestId("recipient").textContent).toEqual("Alice");
       });
-      expect(screen.getByTestId('message')).toHaveTextContent('Hello world');
-      expect(screen.getByTestId('network-status')).toHaveTextContent('7'); // ready
-      expect(screen.getByTestId('error')).toHaveTextContent('undefined');
+      expect(screen.getByTestId("message")).toHaveTextContent("Hello world");
+      expect(screen.getByTestId("network-status")).toHaveTextContent("7"); // ready
+      expect(screen.getByTestId("error")).toHaveTextContent("undefined");
 
       expect(renders.count).toBe(3);
       expect(renders.suspenseCount).toBe(0);
@@ -4553,8 +4531,8 @@ describe('useBackgroundQuery', () => {
         {
           data: {
             greeting: {
-              __typename: 'Greeting',
-              recipient: { __typename: 'Person', name: 'Cached Alice' },
+              __typename: "Greeting",
+              recipient: { __typename: "Person", name: "Cached Alice" },
             },
           },
           networkStatus: NetworkStatus.loading,
@@ -4563,9 +4541,9 @@ describe('useBackgroundQuery', () => {
         {
           data: {
             greeting: {
-              __typename: 'Greeting',
-              message: 'Hello world',
-              recipient: { __typename: 'Person', name: 'Cached Alice' },
+              __typename: "Greeting",
+              message: "Hello world",
+              recipient: { __typename: "Person", name: "Cached Alice" },
             },
           },
           networkStatus: NetworkStatus.ready,
@@ -4574,9 +4552,9 @@ describe('useBackgroundQuery', () => {
         {
           data: {
             greeting: {
-              __typename: 'Greeting',
-              message: 'Hello world',
-              recipient: { __typename: 'Person', name: 'Alice' },
+              __typename: "Greeting",
+              message: "Hello world",
+              recipient: { __typename: "Person", name: "Alice" },
             },
           },
           networkStatus: NetworkStatus.ready,
@@ -4586,8 +4564,8 @@ describe('useBackgroundQuery', () => {
     });
   });
 
-  describe.skip('type tests', () => {
-    it('returns unknown when TData cannot be inferred', () => {
+  describe.skip("type tests", () => {
+    it("returns unknown when TData cannot be inferred", () => {
       const query = gql`
         query {
           hello
@@ -4600,14 +4578,14 @@ describe('useBackgroundQuery', () => {
       expectTypeOf(data).toEqualTypeOf<unknown>();
     });
 
-    it('disallows wider variables type than specified', () => {
+    it("disallows wider variables type than specified", () => {
       const { query } = useVariablesIntegrationTestCase();
 
       // @ts-expect-error should not allow wider TVariables type
-      useBackgroundQuery(query, { variables: { id: '1', foo: 'bar' } });
+      useBackgroundQuery(query, { variables: { id: "1", foo: "bar" } });
     });
 
-    it('returns TData in default case', () => {
+    it("returns TData in default case", () => {
       const { query } = useVariablesIntegrationTestCase();
 
       const [inferredQueryRef] = useBackgroundQuery(query);
@@ -4631,7 +4609,7 @@ describe('useBackgroundQuery', () => {
       const { query } = useVariablesIntegrationTestCase();
 
       const [inferredQueryRef] = useBackgroundQuery(query, {
-        errorPolicy: 'ignore',
+        errorPolicy: "ignore",
       });
       const { data: inferred } = useReadQuery(inferredQueryRef);
 
@@ -4642,7 +4620,7 @@ describe('useBackgroundQuery', () => {
         VariablesCaseData,
         VariablesCaseVariables
       >(query, {
-        errorPolicy: 'ignore',
+        errorPolicy: "ignore",
       });
 
       const { data: explicit } = useReadQuery(explicitQueryRef);
@@ -4655,7 +4633,7 @@ describe('useBackgroundQuery', () => {
       const { query } = useVariablesIntegrationTestCase();
 
       const [inferredQueryRef] = useBackgroundQuery(query, {
-        errorPolicy: 'all',
+        errorPolicy: "all",
       });
       const { data: inferred } = useReadQuery(inferredQueryRef);
 
@@ -4663,7 +4641,7 @@ describe('useBackgroundQuery', () => {
       expectTypeOf(inferred).not.toEqualTypeOf<VariablesCaseData>();
 
       const [explicitQueryRef] = useBackgroundQuery(query, {
-        errorPolicy: 'all',
+        errorPolicy: "all",
       });
       const { data: explicit } = useReadQuery(explicitQueryRef);
 
@@ -4675,7 +4653,7 @@ describe('useBackgroundQuery', () => {
       const { query } = useVariablesIntegrationTestCase();
 
       const [inferredQueryRef] = useBackgroundQuery(query, {
-        errorPolicy: 'none',
+        errorPolicy: "none",
       });
       const { data: inferred } = useReadQuery(inferredQueryRef);
 
@@ -4683,7 +4661,7 @@ describe('useBackgroundQuery', () => {
       expectTypeOf(inferred).not.toEqualTypeOf<VariablesCaseData | undefined>();
 
       const [explicitQueryRef] = useBackgroundQuery(query, {
-        errorPolicy: 'none',
+        errorPolicy: "none",
       });
       const { data: explicit } = useReadQuery(explicitQueryRef);
 
@@ -4691,7 +4669,7 @@ describe('useBackgroundQuery', () => {
       expectTypeOf(explicit).not.toEqualTypeOf<VariablesCaseData | undefined>();
     });
 
-    it('returns DeepPartial<TData> with returnPartialData: true', () => {
+    it("returns DeepPartial<TData> with returnPartialData: true", () => {
       const { query } = useVariablesIntegrationTestCase();
 
       const [inferredQueryRef] = useBackgroundQuery(query, {
@@ -4715,7 +4693,7 @@ describe('useBackgroundQuery', () => {
       expectTypeOf(explicit).not.toEqualTypeOf<VariablesCaseData>();
     });
 
-    it('returns TData with returnPartialData: false', () => {
+    it("returns TData with returnPartialData: false", () => {
       const { query } = useVariablesIntegrationTestCase();
 
       const [inferredQueryRef] = useBackgroundQuery(query, {
@@ -4743,11 +4721,11 @@ describe('useBackgroundQuery', () => {
       >();
     });
 
-    it('returns TData when passing an option that does not affect TData', () => {
+    it("returns TData when passing an option that does not affect TData", () => {
       const { query } = useVariablesIntegrationTestCase();
 
       const [inferredQueryRef] = useBackgroundQuery(query, {
-        fetchPolicy: 'no-cache',
+        fetchPolicy: "no-cache",
       });
       const { data: inferred } = useReadQuery(inferredQueryRef);
 
@@ -4760,7 +4738,7 @@ describe('useBackgroundQuery', () => {
         VariablesCaseData,
         VariablesCaseVariables
       >(query, {
-        fetchPolicy: 'no-cache',
+        fetchPolicy: "no-cache",
       });
 
       const { data: explicit } = useReadQuery(explicitQueryRef);
@@ -4771,12 +4749,12 @@ describe('useBackgroundQuery', () => {
       >();
     });
 
-    it('handles combinations of options', () => {
+    it("handles combinations of options", () => {
       const { query } = useVariablesIntegrationTestCase();
 
       const [inferredPartialDataIgnoreQueryRef] = useBackgroundQuery(query, {
         returnPartialData: true,
-        errorPolicy: 'ignore',
+        errorPolicy: "ignore",
       });
       const { data: inferredPartialDataIgnore } = useReadQuery(
         inferredPartialDataIgnoreQueryRef
@@ -4794,7 +4772,7 @@ describe('useBackgroundQuery', () => {
         VariablesCaseVariables
       >(query, {
         returnPartialData: true,
-        errorPolicy: 'ignore',
+        errorPolicy: "ignore",
       });
 
       const { data: explicitPartialDataIgnore } = useReadQuery(
@@ -4810,7 +4788,7 @@ describe('useBackgroundQuery', () => {
 
       const [inferredPartialDataNoneQueryRef] = useBackgroundQuery(query, {
         returnPartialData: true,
-        errorPolicy: 'none',
+        errorPolicy: "none",
       });
 
       const { data: inferredPartialDataNone } = useReadQuery(
@@ -4829,7 +4807,7 @@ describe('useBackgroundQuery', () => {
         VariablesCaseVariables
       >(query, {
         returnPartialData: true,
-        errorPolicy: 'none',
+        errorPolicy: "none",
       });
 
       const { data: explicitPartialDataNone } = useReadQuery(
@@ -4844,13 +4822,13 @@ describe('useBackgroundQuery', () => {
       ).not.toEqualTypeOf<VariablesCaseData>();
     });
 
-    it('returns correct TData type when combined options that do not affect TData', () => {
+    it("returns correct TData type when combined options that do not affect TData", () => {
       const { query } = useVariablesIntegrationTestCase();
 
       const [inferredQueryRef] = useBackgroundQuery(query, {
-        fetchPolicy: 'no-cache',
+        fetchPolicy: "no-cache",
         returnPartialData: true,
-        errorPolicy: 'none',
+        errorPolicy: "none",
       });
       const { data: inferred } = useReadQuery(inferredQueryRef);
 
@@ -4861,9 +4839,9 @@ describe('useBackgroundQuery', () => {
         VariablesCaseData,
         VariablesCaseVariables
       >(query, {
-        fetchPolicy: 'no-cache',
+        fetchPolicy: "no-cache",
         returnPartialData: true,
-        errorPolicy: 'none',
+        errorPolicy: "none",
       });
 
       const { data: explicit } = useReadQuery(explicitQueryRef);
@@ -4872,7 +4850,7 @@ describe('useBackgroundQuery', () => {
       expectTypeOf(explicit).not.toEqualTypeOf<VariablesCaseData>();
     });
 
-    it('returns TData | undefined when `skip` is present', () => {
+    it("returns TData | undefined when `skip` is present", () => {
       const { query } = useVariablesIntegrationTestCase();
 
       const [inferredQueryRef] = useBackgroundQuery(query, {
diff --git a/src/react/hooks/__tests__/useFragment.test.tsx b/src/react/hooks/__tests__/useFragment.test.tsx
index b12e8b4f758..401d1f5f2ed 100644
--- a/src/react/hooks/__tests__/useFragment.test.tsx
+++ b/src/react/hooks/__tests__/useFragment.test.tsx
@@ -1,6 +1,12 @@
 import * as React from "react";
-import { render, waitFor, screen, renderHook, within } from "@testing-library/react";
-import userEvent from '@testing-library/user-event';
+import {
+  render,
+  waitFor,
+  screen,
+  renderHook,
+  within,
+} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { act } from "react-dom/test-utils";
 
 import { UseFragmentOptions, useFragment } from "../useFragment";
@@ -21,7 +27,7 @@ import {
 import { useQuery } from "../useQuery";
 import { concatPagination } from "../../../utilities";
 import assert from "assert";
-import { expectTypeOf } from 'expect-type'
+import { expectTypeOf } from "expect-type";
 import { SubscriptionObserver } from "zen-observable-ts";
 
 describe("useFragment", () => {
@@ -90,7 +96,7 @@ describe("useFragment", () => {
           { __typename: "Item", id: 5 },
         ],
       },
-    })
+    });
 
     const renders: string[] = [];
 
@@ -99,9 +105,7 @@ describe("useFragment", () => {
       const { loading, data } = useQuery(listQuery);
       expect(loading).toBe(false);
       return (
-        <ol>
-          {data?.list.map(item => <Item key={item.id} id={item.id}/>)}
-        </ol>
+        <ol>{data?.list.map((item) => <Item key={item.id} id={item.id} />)}</ol>
       );
     }
 
@@ -127,24 +131,15 @@ describe("useFragment", () => {
     function getItemTexts() {
       return screen.getAllByText(/^Item/).map(
         // eslint-disable-next-line testing-library/no-node-access
-        li => li.firstChild!.textContent
+        (li) => li.firstChild!.textContent
       );
     }
 
     await waitFor(() => {
-      expect(getItemTexts()).toEqual([
-        "Item #1",
-        "Item #2",
-        "Item #5",
-      ]);
+      expect(getItemTexts()).toEqual(["Item #1", "Item #2", "Item #5"]);
     });
 
-    expect(renders).toEqual([
-      "list",
-      "item 1",
-      "item 2",
-      "item 5",
-    ]);
+    expect(renders).toEqual(["list", "item 1", "item 2", "item 5"]);
 
     act(() => {
       cache.writeFragment({
@@ -158,11 +153,7 @@ describe("useFragment", () => {
     });
 
     await waitFor(() => {
-      expect(getItemTexts()).toEqual([
-        "Item #1",
-        "Item #2 updated",
-        "Item #5",
-      ]);
+      expect(getItemTexts()).toEqual(["Item #1", "Item #2 updated", "Item #5"]);
     });
 
     expect(renders).toEqual([
@@ -196,10 +187,11 @@ describe("useFragment", () => {
                   text: "Item #4 from cache.modify",
                 },
               })!,
-            ].sort((ref1, ref2) => (
-              readField<Item["id"]>("id", ref1)! -
-              readField<Item["id"]>("id", ref2)!
-            ));
+            ].sort(
+              (ref1, ref2) =>
+                readField<Item["id"]>("id", ref1)! -
+                readField<Item["id"]>("id", ref2)!
+            );
           },
         },
       });
@@ -302,47 +294,43 @@ describe("useFragment", () => {
         ],
       },
       __META: {
-        extraRootIds: [
-          "Item:2",
-          "Item:3",
-          "Item:4",
-        ],
+        extraRootIds: ["Item:2", "Item:3", "Item:4"],
       },
     });
   });
 
   it("returns data on first render", () => {
     const ItemFragment: TypedDocumentNode<Item> = gql`
-    fragment ItemFragment on Item {
-      id
-      text
-    }
+      fragment ItemFragment on Item {
+        id
+        text
+      }
     `;
     const cache = new InMemoryCache();
-    const item  = { __typename: "Item", id: 1, text: "Item #1" };
+    const item = { __typename: "Item", id: 1, text: "Item #1" };
     cache.writeFragment({
       fragment: ItemFragment,
       data: item,
-    })
+    });
     const client = new ApolloClient({
       cache,
-    })
-    function Component(){
+    });
+    function Component() {
       const { data } = useFragment({
         fragment: ItemFragment,
-        from: { __typename: "Item", id: 1 }
-      })
-      return <>{data.text}</>
+        from: { __typename: "Item", id: 1 },
+      });
+      return <>{data.text}</>;
     }
     render(
       <ApolloProvider client={client}>
         <Component />
-      </ApolloProvider>,
+      </ApolloProvider>
     );
 
     // would throw if not present synchronously
     screen.getByText(/Item #1/);
-  })
+  });
 
   it.each<TypedDocumentNode<{ list: Item[] }>>([
     // This query uses a basic field-level @nonreactive directive.
@@ -388,335 +376,333 @@ describe("useFragment", () => {
         text
       }
     `,
-  ])("Parent list component can use @nonreactive to avoid rerendering", async (query) => {
-    const cache = new InMemoryCache({
-      typePolicies: {
-        Query: {
-          fields: {
-            list: concatPagination(),
+  ])(
+    "Parent list component can use @nonreactive to avoid rerendering",
+    async (query) => {
+      const cache = new InMemoryCache({
+        typePolicies: {
+          Query: {
+            fields: {
+              list: concatPagination(),
+            },
+          },
+          Item: {
+            keyFields: ["id"],
+            // Configuring keyArgs:false for Item.text is one way to prevent field
+            // keys like text@nonreactive, but it's not the only way. Since
+            // @nonreactive is now in the KNOWN_DIRECTIVES array defined in
+            // utilities/graphql/storeUtils.ts, the '@nonreactive' suffix won't be
+            // automatically appended to field keys by default.
+            // fields: {
+            //   text: {
+            //     keyArgs: false,
+            //   },
+            // },
           },
         },
-        Item: {
-          keyFields: ["id"],
-          // Configuring keyArgs:false for Item.text is one way to prevent field
-          // keys like text@nonreactive, but it's not the only way. Since
-          // @nonreactive is now in the KNOWN_DIRECTIVES array defined in
-          // utilities/graphql/storeUtils.ts, the '@nonreactive' suffix won't be
-          // automatically appended to field keys by default.
-          // fields: {
-          //   text: {
-          //     keyArgs: false,
-          //   },
-          // },
-        },
-      },
-    });
+      });
 
-    const client = new ApolloClient({
-      cache,
-      link: ApolloLink.empty(),
-    });
+      const client = new ApolloClient({
+        cache,
+        link: ApolloLink.empty(),
+      });
 
-    const renders: string[] = [];
+      const renders: string[] = [];
 
-    function List() {
-      const { data } = useQuery(query);
+      function List() {
+        const { data } = useQuery(query);
 
-      renders.push("list");
+        renders.push("list");
 
-      return (
-        <ul>
-          {data?.list.map(item => <Item key={item.id} item={item} />)}
-        </ul>
-      );
-    }
+        return (
+          <ul>
+            {data?.list.map((item) => <Item key={item.id} item={item} />)}
+          </ul>
+        );
+      }
 
-    function Item({ item }: { item: Item }) {
-      const { data } = useFragment({
-        fragment: ItemFragment,
-        fragmentName: "ItemFragment",
-        from: item,
-      });
+      function Item({ item }: { item: Item }) {
+        const { data } = useFragment({
+          fragment: ItemFragment,
+          fragmentName: "ItemFragment",
+          from: item,
+        });
 
-      renders.push(`item ${item.id}`);
+        renders.push(`item ${item.id}`);
 
-      if (!data) return null;
+        if (!data) return null;
 
-      return <li>{`Item #${item.id}: ${data.text}`}</li>;
-    }
+        return <li>{`Item #${item.id}: ${data.text}`}</li>;
+      }
 
-    act(() => {
-      cache.writeQuery({
-        query,
-        data: {
+      act(() => {
+        cache.writeQuery({
+          query,
+          data: {
+            list: [
+              { __typename: "Item", id: 1, text: "first" },
+              { __typename: "Item", id: 2, text: "second" },
+              { __typename: "Item", id: 3, text: "third" },
+            ],
+          },
+        });
+      });
+
+      expect(cache.extract()).toEqual({
+        ROOT_QUERY: {
+          __typename: "Query",
           list: [
-            { __typename: "Item", id: 1, text: "first" },
-            { __typename: "Item", id: 2, text: "second" },
-            { __typename: "Item", id: 3, text: "third" },
+            { __ref: 'Item:{"id":1}' },
+            { __ref: 'Item:{"id":2}' },
+            { __ref: 'Item:{"id":3}' },
           ],
         },
+        'Item:{"id":1}': {
+          __typename: "Item",
+          id: 1,
+          text: "first",
+        },
+        'Item:{"id":2}': {
+          __typename: "Item",
+          id: 2,
+          text: "second",
+        },
+        'Item:{"id":3}': {
+          __typename: "Item",
+          id: 3,
+          text: "third",
+        },
       });
-    });
-
-    expect(cache.extract()).toEqual({
-      ROOT_QUERY: {
-        __typename: "Query",
-        list: [
-          { __ref: 'Item:{"id":1}' },
-          { __ref: 'Item:{"id":2}' },
-          { __ref: 'Item:{"id":3}' },
-        ],
-      },
-      'Item:{"id":1}': {
-        __typename: "Item",
-        id: 1,
-        text: "first",
-      },
-      'Item:{"id":2}': {
-        __typename: "Item",
-        id: 2,
-        text: "second",
-      },
-      'Item:{"id":3}': {
-        __typename: "Item",
-        id: 3,
-        text: "third",
-      },
-    });
 
-    render(
-      <ApolloProvider client={client}>
-        <List />
-      </ApolloProvider>,
-    );
+      render(
+        <ApolloProvider client={client}>
+          <List />
+        </ApolloProvider>
+      );
 
-    function getItemTexts() {
-      return screen.getAllByText(/Item #\d+/).map(el => el.textContent);
-    }
+      function getItemTexts() {
+        return screen.getAllByText(/Item #\d+/).map((el) => el.textContent);
+      }
 
-    await waitFor(() => {
-      expect(getItemTexts()).toEqual([
-        "Item #1: first",
-        "Item #2: second",
-        "Item #3: third",
-      ]);
-    });
+      await waitFor(() => {
+        expect(getItemTexts()).toEqual([
+          "Item #1: first",
+          "Item #2: second",
+          "Item #3: third",
+        ]);
+      });
 
-    expect(renders).toEqual([
-      "list",
-      "item 1",
-      "item 2",
-      "item 3",
-    ]);
+      expect(renders).toEqual(["list", "item 1", "item 2", "item 3"]);
 
-    function appendLyToText(id: number) {
-      act(() => {
-        cache.modify({
-          id: cache.identify({ __typename: "Item", id })!,
-          fields: {
-            text(existing) {
-              return existing + "ly";
+      function appendLyToText(id: number) {
+        act(() => {
+          cache.modify({
+            id: cache.identify({ __typename: "Item", id })!,
+            fields: {
+              text(existing) {
+                return existing + "ly";
+              },
             },
-          },
+          });
         });
-      });
-    }
-
-    appendLyToText(2);
-
-    await waitFor(() => {
-      expect(renders).toEqual([
-        "list",
-        "item 1",
-        "item 2",
-        "item 3",
-        "item 2",
-      ]);
-
-      expect(getItemTexts()).toEqual([
-        "Item #1: first",
-        "Item #2: secondly",
-        "Item #3: third",
-      ]);
-    });
-
-    appendLyToText(1);
-
-    await waitFor(() => {
-      expect(renders).toEqual([
-        "list",
-        "item 1",
-        "item 2",
-        "item 3",
-        "item 2",
-        "item 1",
-      ]);
+      }
 
-      expect(getItemTexts()).toEqual([
-        "Item #1: firstly",
-        "Item #2: secondly",
-        "Item #3: third",
-      ]);
-    });
+      appendLyToText(2);
+
+      await waitFor(() => {
+        expect(renders).toEqual([
+          "list",
+          "item 1",
+          "item 2",
+          "item 3",
+          "item 2",
+        ]);
+
+        expect(getItemTexts()).toEqual([
+          "Item #1: first",
+          "Item #2: secondly",
+          "Item #3: third",
+        ]);
+      });
 
-    appendLyToText(3);
+      appendLyToText(1);
+
+      await waitFor(() => {
+        expect(renders).toEqual([
+          "list",
+          "item 1",
+          "item 2",
+          "item 3",
+          "item 2",
+          "item 1",
+        ]);
+
+        expect(getItemTexts()).toEqual([
+          "Item #1: firstly",
+          "Item #2: secondly",
+          "Item #3: third",
+        ]);
+      });
 
-    await waitFor(() => {
-      expect(renders).toEqual([
-        "list",
-        "item 1",
-        "item 2",
-        "item 3",
-        "item 2",
-        "item 1",
-        "item 3",
-      ]);
+      appendLyToText(3);
+
+      await waitFor(() => {
+        expect(renders).toEqual([
+          "list",
+          "item 1",
+          "item 2",
+          "item 3",
+          "item 2",
+          "item 1",
+          "item 3",
+        ]);
+
+        expect(getItemTexts()).toEqual([
+          "Item #1: firstly",
+          "Item #2: secondly",
+          "Item #3: thirdly",
+        ]);
+      });
 
-      expect(getItemTexts()).toEqual([
-        "Item #1: firstly",
-        "Item #2: secondly",
-        "Item #3: thirdly",
-      ]);
-    });
+      act(() => {
+        cache.writeQuery({
+          query,
+          data: {
+            list: [
+              { __typename: "Item", id: 4, text: "fourth" },
+              { __typename: "Item", id: 5, text: "fifth" },
+            ],
+          },
+        });
+      });
 
-    act(() => {
-      cache.writeQuery({
-        query,
-        data: {
+      expect(cache.extract()).toEqual({
+        ROOT_QUERY: {
+          __typename: "Query",
           list: [
-            { __typename: "Item", id: 4, text: "fourth" },
-            { __typename: "Item", id: 5, text: "fifth" },
+            { __ref: 'Item:{"id":1}' },
+            { __ref: 'Item:{"id":2}' },
+            { __ref: 'Item:{"id":3}' },
+            { __ref: 'Item:{"id":4}' },
+            { __ref: 'Item:{"id":5}' },
           ],
         },
+        'Item:{"id":1}': {
+          __typename: "Item",
+          id: 1,
+          text: "firstly",
+        },
+        'Item:{"id":2}': {
+          __typename: "Item",
+          id: 2,
+          text: "secondly",
+        },
+        'Item:{"id":3}': {
+          __typename: "Item",
+          id: 3,
+          text: "thirdly",
+        },
+        'Item:{"id":4}': {
+          __typename: "Item",
+          id: 4,
+          text: "fourth",
+        },
+        'Item:{"id":5}': {
+          __typename: "Item",
+          id: 5,
+          text: "fifth",
+        },
       });
-    });
 
-    expect(cache.extract()).toEqual({
-      ROOT_QUERY: {
-        __typename: "Query",
-        list: [
-          { __ref: 'Item:{"id":1}' },
-          { __ref: 'Item:{"id":2}' },
-          { __ref: 'Item:{"id":3}' },
-          { __ref: 'Item:{"id":4}' },
-          { __ref: 'Item:{"id":5}' },
-        ],
-      },
-      'Item:{"id":1}': {
-        __typename: "Item",
-        id: 1,
-        text: "firstly",
-      },
-      'Item:{"id":2}': {
-        __typename: "Item",
-        id: 2,
-        text: "secondly",
-      },
-      'Item:{"id":3}': {
-        __typename: "Item",
-        id: 3,
-        text: "thirdly",
-      },
-      'Item:{"id":4}': {
-        __typename: "Item",
-        id: 4,
-        text: "fourth",
-      },
-      'Item:{"id":5}': {
-        __typename: "Item",
-        id: 5,
-        text: "fifth",
-      },
-    });
-
-    await waitFor(() => {
-      expect(renders).toEqual([
-        "list",
-        "item 1",
-        "item 2",
-        "item 3",
-        "item 2",
-        "item 1",
-        "item 3",
-        // The whole list had to be rendered again to append 4 and 5
-        "list",
-        "item 1",
-        "item 2",
-        "item 3",
-        "item 4",
-        "item 5",
-      ]);
-
-      expect(getItemTexts()).toEqual([
-        "Item #1: firstly",
-        "Item #2: secondly",
-        "Item #3: thirdly",
-        "Item #4: fourth",
-        "Item #5: fifth",
-      ]);
-    });
-
-    appendLyToText(5);
-
-    await waitFor(() => {
-      expect(renders).toEqual([
-        "list",
-        "item 1",
-        "item 2",
-        "item 3",
-        "item 2",
-        "item 1",
-        "item 3",
-        "list",
-        "item 1",
-        "item 2",
-        "item 3",
-        "item 4",
-        "item 5",
-        // A single new render:
-        "item 5",
-      ]);
-
-      expect(getItemTexts()).toEqual([
-        "Item #1: firstly",
-        "Item #2: secondly",
-        "Item #3: thirdly",
-        "Item #4: fourth",
-        "Item #5: fifthly",
-      ]);
-    });
-
-    appendLyToText(4);
+      await waitFor(() => {
+        expect(renders).toEqual([
+          "list",
+          "item 1",
+          "item 2",
+          "item 3",
+          "item 2",
+          "item 1",
+          "item 3",
+          // The whole list had to be rendered again to append 4 and 5
+          "list",
+          "item 1",
+          "item 2",
+          "item 3",
+          "item 4",
+          "item 5",
+        ]);
+
+        expect(getItemTexts()).toEqual([
+          "Item #1: firstly",
+          "Item #2: secondly",
+          "Item #3: thirdly",
+          "Item #4: fourth",
+          "Item #5: fifth",
+        ]);
+      });
 
-    await waitFor(() => {
-      expect(renders).toEqual([
-        "list",
-        "item 1",
-        "item 2",
-        "item 3",
-        "item 2",
-        "item 1",
-        "item 3",
-        "list",
-        "item 1",
-        "item 2",
-        "item 3",
-        "item 4",
-        "item 5",
-        "item 5",
-        // A single new render:
-        "item 4",
-      ]);
+      appendLyToText(5);
+
+      await waitFor(() => {
+        expect(renders).toEqual([
+          "list",
+          "item 1",
+          "item 2",
+          "item 3",
+          "item 2",
+          "item 1",
+          "item 3",
+          "list",
+          "item 1",
+          "item 2",
+          "item 3",
+          "item 4",
+          "item 5",
+          // A single new render:
+          "item 5",
+        ]);
+
+        expect(getItemTexts()).toEqual([
+          "Item #1: firstly",
+          "Item #2: secondly",
+          "Item #3: thirdly",
+          "Item #4: fourth",
+          "Item #5: fifthly",
+        ]);
+      });
 
-      expect(getItemTexts()).toEqual([
-        "Item #1: firstly",
-        "Item #2: secondly",
-        "Item #3: thirdly",
-        "Item #4: fourthly",
-        "Item #5: fifthly",
-      ]);
-    });
-  });
+      appendLyToText(4);
+
+      await waitFor(() => {
+        expect(renders).toEqual([
+          "list",
+          "item 1",
+          "item 2",
+          "item 3",
+          "item 2",
+          "item 1",
+          "item 3",
+          "list",
+          "item 1",
+          "item 2",
+          "item 3",
+          "item 4",
+          "item 5",
+          "item 5",
+          // A single new render:
+          "item 4",
+        ]);
+
+        expect(getItemTexts()).toEqual([
+          "Item #1: firstly",
+          "Item #2: secondly",
+          "Item #3: thirdly",
+          "Item #4: fourthly",
+          "Item #5: fifthly",
+        ]);
+      });
+    }
+  );
 
   it("List can use useFragment with ListFragment", async () => {
     const cache = new InMemoryCache({
@@ -752,7 +738,7 @@ describe("useFragment", () => {
         ],
         extra: "from ListFragment",
       },
-    })
+    });
 
     const renders: string[] = [];
 
@@ -763,10 +749,12 @@ describe("useFragment", () => {
         from: { __typename: "Query" },
       });
       expect(complete).toBe(true);
-      assert(!!complete)
+      assert(!!complete);
       return (
         <ol>
-          {data.list.map(item => <Item key={item.id} id={item.id}/>)}
+          {data.list.map((item) => (
+            <Item key={item.id} id={item.id} />
+          ))}
         </ol>
       );
     }
@@ -792,24 +780,15 @@ describe("useFragment", () => {
     function getItemTexts() {
       return screen.getAllByText(/^Item/).map(
         // eslint-disable-next-line testing-library/no-node-access
-        li => li.firstChild!.textContent
+        (li) => li.firstChild!.textContent
       );
     }
 
     await waitFor(() => {
-      expect(getItemTexts()).toEqual([
-        "Item #1",
-        "Item #2",
-        "Item #5",
-      ]);
+      expect(getItemTexts()).toEqual(["Item #1", "Item #2", "Item #5"]);
     });
 
-    expect(renders).toEqual([
-      "list",
-      "item 1",
-      "item 2",
-      "item 5",
-    ]);
+    expect(renders).toEqual(["list", "item 1", "item 2", "item 5"]);
 
     act(() => {
       cache.writeFragment({
@@ -823,11 +802,7 @@ describe("useFragment", () => {
     });
 
     await waitFor(() => {
-      expect(getItemTexts()).toEqual([
-        "Item #1",
-        "Item #2 updated",
-        "Item #5",
-      ]);
+      expect(getItemTexts()).toEqual(["Item #1", "Item #2 updated", "Item #5"]);
     });
 
     expect(renders).toEqual([
@@ -859,10 +834,11 @@ describe("useFragment", () => {
                   id: 4,
                 },
               })!,
-            ].sort((ref1, ref2) => (
-              readField<Item["id"]>("id", ref1)! -
-              readField<Item["id"]>("id", ref2)!
-            ));
+            ].sort(
+              (ref1, ref2) =>
+                readField<Item["id"]>("id", ref1)! -
+                readField<Item["id"]>("id", ref2)!
+            );
           },
         },
       });
@@ -965,11 +941,7 @@ describe("useFragment", () => {
         extra: "from ListFragment",
       },
       __META: {
-        extraRootIds: [
-          "Item:2",
-          "Item:3",
-          "Item:4",
-        ],
+        extraRootIds: ["Item:2", "Item:3", "Item:4"],
       },
     });
   });
@@ -987,9 +959,9 @@ describe("useFragment", () => {
               // filtering explicitly here, so this test won't be broken.
               return items && items.filter(canRead);
             },
-          }
-        }
-      }
+          },
+        },
+      },
     });
 
     const wrapper = ({ children }: any) => (
@@ -1024,18 +996,18 @@ describe("useFragment", () => {
     `;
 
     const { result: renderResult } = renderHook(
-      () => useFragment({
-        fragment: ListAndItemFragments,
-        fragmentName: "ListFragment",
-        from: { __typename: "Query" },
-      }),
-      { wrapper },
+      () =>
+        useFragment({
+          fragment: ListAndItemFragments,
+          fragmentName: "ListFragment",
+          from: { __typename: "Query" },
+        }),
+      { wrapper }
     );
 
     function checkHistory(expectedResultCount: number) {
       // Temporarily disabling this check until we can come up with a better
       // (more opt-in) system than result.previousResult.previousResult...
-
       // function historyToArray(
       //   result: UseFragmentResult<QueryData>,
       // ): UseFragmentResult<QueryData>[] {
@@ -1048,7 +1020,6 @@ describe("useFragment", () => {
       // const all = historyToArray(renderResult.current);
       // expect(all.length).toBe(expectedResultCount);
       // expect(all).toEqual(renderResult.all);
-
       // if (renderResult.current.complete) {
       //   expect(renderResult.current).toBe(
       //     renderResult.current.lastCompleteResult
@@ -1118,37 +1089,43 @@ describe("useFragment", () => {
       });
     });
 
-    await waitFor(() => expect(renderResult.current.data).toEqual(data182WithText));
+    await waitFor(() =>
+      expect(renderResult.current.data).toEqual(data182WithText)
+    );
     expect(renderResult.current.complete).toBe(true);
     expect(renderResult.current.missing).toBeUndefined();
 
     checkHistory(3);
 
-    await act(async () => cache.batch({
-      update(cache) {
-        cache.evict({
-          id: cache.identify({
-            __typename: "Item",
-            id: 8,
-          }),
-        });
-
-        cache.evict({
-          id: cache.identify({
-            __typename: "Item",
-            id: 2,
-          }),
-          fieldName: "text",
-        });
-      },
-    }));
+    await act(async () =>
+      cache.batch({
+        update(cache) {
+          cache.evict({
+            id: cache.identify({
+              __typename: "Item",
+              id: 8,
+            }),
+          });
+
+          cache.evict({
+            id: cache.identify({
+              __typename: "Item",
+              id: 2,
+            }),
+            fieldName: "text",
+          });
+        },
+      })
+    );
 
-    await waitFor(() => expect(renderResult.current.data).toEqual({
-      list: [
-        { __typename: "Item", id: 1, text: "oyez1" },
-        { __typename: "Item", id: 2 },
-      ],
-    }));
+    await waitFor(() =>
+      expect(renderResult.current.data).toEqual({
+        list: [
+          { __typename: "Item", id: 1, text: "oyez1" },
+          { __typename: "Item", id: 2 },
+        ],
+      })
+    );
     expect(renderResult.current.complete).toBe(false);
     expect(renderResult.current.missing).toEqual({
       // TODO Figure out why Item:8 is not represented here. Likely because of
@@ -1179,11 +1156,7 @@ describe("useFragment", () => {
       },
       ROOT_QUERY: {
         __typename: "Query",
-        list: [
-          { __ref: "Item:1" },
-          { __ref: "Item:8" },
-          { __ref: "Item:2" },
-        ],
+        list: [{ __ref: "Item:1" }, { __ref: "Item:8" }, { __ref: "Item:2" }],
       },
     });
 
@@ -1213,27 +1186,29 @@ describe("useFragment", () => {
 
     const client = new ApolloClient({
       cache,
-      link: new ApolloLink(operation => new Observable(observer => {
-        if (operation.operationName === "ListQueryWithItemFragment") {
-          setTimeout(() => {
-            observer.next({
-              data: {
-                list: [
-                  { __typename: "Item", id: 1 },
-                  { __typename: "Item", id: 2 },
-                  { __typename: "Item", id: 5 },
-                ],
-              }
-            });
-            observer.complete();
-          }, 10);
-        } else {
-          observer.error(`unexpected query ${
-            operation.operationName ||
-            operation.query
-          }`);
-        }
-      })),
+      link: new ApolloLink(
+        (operation) =>
+          new Observable((observer) => {
+            if (operation.operationName === "ListQueryWithItemFragment") {
+              setTimeout(() => {
+                observer.next({
+                  data: {
+                    list: [
+                      { __typename: "Item", id: 1 },
+                      { __typename: "Item", id: 2 },
+                      { __typename: "Item", id: 5 },
+                    ],
+                  },
+                });
+                observer.complete();
+              }, 10);
+            } else {
+              observer.error(
+                `unexpected query ${operation.operationName || operation.query}`
+              );
+            }
+          })
+      ),
     });
 
     const listQuery: TypedDocumentNode<QueryData> = gql`
@@ -1257,16 +1232,24 @@ describe("useFragment", () => {
 
       return complete ? (
         <>
-          <select onChange={(e) => {
-            setCurrentItem(parseInt(e.currentTarget.value))
-          }}>
-            {data.list.map(item => <option key={item.id} value={item.id}>Select item {item.id}</option>)}
+          <select
+            onChange={(e) => {
+              setCurrentItem(parseInt(e.currentTarget.value));
+            }}
+          >
+            {data.list.map((item) => (
+              <option key={item.id} value={item.id}>
+                Select item {item.id}
+              </option>
+            ))}
           </select>
           <div>
             <Item id={currentItem} />
           </div>
           <ol>
-          {data.list.map(item => <Item key={item.id} id={item.id}/>)}
+            {data.list.map((item) => (
+              <Item key={item.id} id={item.id} />
+            ))}
           </ol>
         </>
       ) : null;
@@ -1292,7 +1275,7 @@ describe("useFragment", () => {
     function getItemTexts() {
       return screen.getAllByText(/^Item/).map(
         // eslint-disable-next-line testing-library/no-node-access
-        li => li.firstChild!.textContent
+        (li) => li.firstChild!.textContent
       );
     }
 
@@ -1310,8 +1293,8 @@ describe("useFragment", () => {
     // Select "Item #2" via <select />
     const user = userEvent.setup();
     await user.selectOptions(
-      screen.getByRole('combobox'),
-      screen.getByRole('option', { name: 'Select item 2' })
+      screen.getByRole("combobox"),
+      screen.getByRole("option", { name: "Select item 2" })
     );
 
     await waitFor(() => {
@@ -1337,10 +1320,12 @@ describe("useFragment", () => {
 
     beforeEach(() => {
       cache = new InMemoryCache();
-      wrapper = ({ children }: any) => <MockedProvider cache={cache}>{children}</MockedProvider>;
+      wrapper = ({ children }: any) => (
+        <MockedProvider cache={cache}>{children}</MockedProvider>
+      );
 
       // silence the console for the incomplete fragment write
-      const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
+      const spy = jest.spyOn(console, "error").mockImplementation(() => {});
       cache.writeFragment({
         fragment: ItemFragment,
         data: {
@@ -1377,7 +1362,9 @@ describe("useFragment", () => {
 
     beforeEach(() => {
       cache = new InMemoryCache();
-      wrapper = ({ children }: any) => <MockedProvider cache={cache}>{children}</MockedProvider>;
+      wrapper = ({ children }: any) => (
+        <MockedProvider cache={cache}>{children}</MockedProvider>
+      );
     });
 
     test("if all data is available, `complete` is `true`", () => {
@@ -1475,10 +1462,12 @@ describe("has the same timing as `useQuery`", () => {
     const cache = new InMemoryCache();
     const client = new ApolloClient({
       cache,
-      link: new ApolloLink(operation => new Observable(o => void (observer = o))),
+      link: new ApolloLink(
+        (operation) => new Observable((o) => void (observer = o))
+      ),
     });
 
-    function Component(){
+    function Component() {
       const { data: queryData } = useQuery(query, { returnPartialData: true });
       const { data: fragmentData, complete } = useFragment({
         fragment: itemFragment,
@@ -1490,25 +1479,27 @@ describe("has the same timing as `useQuery`", () => {
       } else {
         expect({ item: fragmentData }).toStrictEqual(queryData);
       }
-      return complete ? JSON.stringify(fragmentData) : 'loading';
+      return complete ? JSON.stringify(fragmentData) : "loading";
     }
-    render(<Component />, { wrapper: ({ children }) => (
-      <ApolloProvider client={client}>{children}</ApolloProvider>
-    )});
+    render(<Component />, {
+      wrapper: ({ children }) => (
+        <ApolloProvider client={client}>{children}</ApolloProvider>
+      ),
+    });
     await screen.findByText(/loading/);
-    assert(observer!)
+    assert(observer!);
     observer.next({ data: { item: initialItem } });
     observer.complete();
-    await screen.findByText(/Item #initial/)
+    await screen.findByText(/Item #initial/);
     cache.writeQuery({ query, data: { item: updatedItem } });
-    await screen.findByText(/Item #updated/)
-    await new Promise(resolve => setTimeout(resolve, 50))
+    await screen.findByText(/Item #updated/);
+    await new Promise((resolve) => setTimeout(resolve, 50));
   });
 
   it("`useQuery` in parent, `useFragment` in child", async () => {
     const item1 = { __typename: "Item", id: 1, title: "Item #1" };
     const item2 = { __typename: "Item", id: 2, title: "Item #2" };
-    const query: TypedDocumentNode<{items: Array<typeof item1>}> = gql`
+    const query: TypedDocumentNode<{ items: Array<typeof item1> }> = gql`
       query {
         items {
           ...ItemFragment
@@ -1518,48 +1509,70 @@ describe("has the same timing as `useQuery`", () => {
     `;
     const cache = new InMemoryCache();
     const client = new ApolloClient({
-      cache
+      cache,
     });
-    cache.writeQuery({ query, data: { items: [ item1, item2 ] } });
+    cache.writeQuery({ query, data: { items: [item1, item2] } });
 
-    const valuePairs: Array<[item: string, parentCount: number, childCount: number]> = []
-    function captureDOMState(){
+    const valuePairs: Array<
+      [item: string, parentCount: number, childCount: number]
+    > = [];
+    function captureDOMState() {
       const parent = screen.getByTestId("parent");
       const children = screen.getByTestId("children");
-      valuePairs.push(['Item 1', within(parent).queryAllByText(/Item #1/).length, within(children).queryAllByText(/Item #1/).length])
-      valuePairs.push(['Item 2', within(parent).queryAllByText(/Item #2/).length, within(children).queryAllByText(/Item #2/).length])
+      valuePairs.push([
+        "Item 1",
+        within(parent).queryAllByText(/Item #1/).length,
+        within(children).queryAllByText(/Item #1/).length,
+      ]);
+      valuePairs.push([
+        "Item 2",
+        within(parent).queryAllByText(/Item #2/).length,
+        within(children).queryAllByText(/Item #2/).length,
+      ]);
     }
 
-    function Parent(){
+    function Parent() {
       const { data } = useQuery(query);
-      if (!data) throw new Error("should never happen")
+      if (!data) throw new Error("should never happen");
       React.useEffect(captureDOMState);
-      return <>
-        <div data-testid="parent"><p>{JSON.stringify(data)}</p></div>
-        <div data-testid="children">{data.items.map((item, i) => <p key={i}><Child id={item.id} /></p>)}</div>
-      </>
+      return (
+        <>
+          <div data-testid="parent">
+            <p>{JSON.stringify(data)}</p>
+          </div>
+          <div data-testid="children">
+            {data.items.map((item, i) => (
+              <p key={i}>
+                <Child id={item.id} />
+              </p>
+            ))}
+          </div>
+        </>
+      );
     }
-    function Child({ id }: { id: number }){
-      const {data} = useFragment({
+    function Child({ id }: { id: number }) {
+      const { data } = useFragment({
         fragment: itemFragment,
         from: { __typename: "Item", id },
-      })
+      });
       React.useEffect(captureDOMState);
-      return <>{JSON.stringify({item: data })}</>
+      return <>{JSON.stringify({ item: data })}</>;
     }
 
-    render(<Parent />, { wrapper: ({ children }) => (
-      <ApolloProvider client={client}>{children}</ApolloProvider>
-    )});
+    render(<Parent />, {
+      wrapper: ({ children }) => (
+        <ApolloProvider client={client}>{children}</ApolloProvider>
+      ),
+    });
     cache.evict({
-      id: cache.identify(item2)
+      id: cache.identify(item2),
     });
     await waitFor(() => {
-      expect(() => screen.getByText(/Item #2/)).toThrow()
-    })
+      expect(() => screen.getByText(/Item #2/)).toThrow();
+    });
 
     for (const [_item, parentChount, childCount] of valuePairs) {
-      expect(parentChount).toBe(childCount)
+      expect(parentChount).toBe(childCount);
     }
   });
 
@@ -1569,7 +1582,7 @@ describe("has the same timing as `useQuery`", () => {
    * the current implementation.
    * The best we can do is to make sure that `useFragment` is not
    * faster than `useQuery` in reasonable cases (of course, `useQuery`
-   * could trigger a network request on cache update, which would be slower 
+   * could trigger a network request on cache update, which would be slower
    * than `useFragment`, no matter how much we delay it).
    * If we change the core implementation into a more synchronous one,
    * we should try to get this test to work, too.
@@ -1577,7 +1590,7 @@ describe("has the same timing as `useQuery`", () => {
   it.failing("`useFragment` in parent, `useQuery` in child", async () => {
     const item1 = { __typename: "Item", id: 1, title: "Item #1" };
     const item2 = { __typename: "Item", id: 2, title: "Item #2" };
-    const query: TypedDocumentNode<{items: Array<typeof item1>}> = gql`
+    const query: TypedDocumentNode<{ items: Array<typeof item1> }> = gql`
       query {
         items {
           ...ItemFragment
@@ -1587,79 +1600,102 @@ describe("has the same timing as `useQuery`", () => {
     `;
     const cache = new InMemoryCache();
     const client = new ApolloClient({
-      cache
+      cache,
     });
-    cache.writeQuery({ query, data: { items: [ item1, item2 ] } });
+    cache.writeQuery({ query, data: { items: [item1, item2] } });
 
-    const valuePairs: Array<[item: string, parentCount: number, childCount: number]> = []
-    function captureDOMState(){
+    const valuePairs: Array<
+      [item: string, parentCount: number, childCount: number]
+    > = [];
+    function captureDOMState() {
       const parent = screen.getByTestId("parent");
       const children = screen.getByTestId("children");
-      valuePairs.push(['Item 1', within(parent).queryAllByText(/Item #1/).length, within(children).queryAllByText(/Item #1/).length])
-      valuePairs.push(['Item 2', within(parent).queryAllByText(/Item #2/).length, within(children).queryAllByText(/Item #2/).length])
+      valuePairs.push([
+        "Item 1",
+        within(parent).queryAllByText(/Item #1/).length,
+        within(children).queryAllByText(/Item #1/).length,
+      ]);
+      valuePairs.push([
+        "Item 2",
+        within(parent).queryAllByText(/Item #2/).length,
+        within(children).queryAllByText(/Item #2/).length,
+      ]);
     }
 
-    function Parent(){
-      const {data: data1} = useFragment({
+    function Parent() {
+      const { data: data1 } = useFragment({
         fragment: itemFragment,
         from: { __typename: "Item", id: 1 },
-      })
-      const {data: data2} = useFragment({
+      });
+      const { data: data2 } = useFragment({
         fragment: itemFragment,
         from: { __typename: "Item", id: 2 },
-      })
+      });
       React.useEffect(captureDOMState);
-      return <>
-        <div data-testid="parent"><p>{JSON.stringify(data1)}</p><p>{JSON.stringify(data2)}</p></div>
-        <div data-testid="children"><p><Child /></p></div>
-      </>
+      return (
+        <>
+          <div data-testid="parent">
+            <p>{JSON.stringify(data1)}</p>
+            <p>{JSON.stringify(data2)}</p>
+          </div>
+          <div data-testid="children">
+            <p>
+              <Child />
+            </p>
+          </div>
+        </>
+      );
     }
-    function Child(){
+    function Child() {
       const { data } = useQuery(query);
-      if (!data) throw new Error("should never happen")
+      if (!data) throw new Error("should never happen");
       React.useEffect(captureDOMState);
-      return <>{JSON.stringify(data)}</>
+      return <>{JSON.stringify(data)}</>;
     }
 
-    render(<Parent />, { wrapper: ({ children }) => (
-      <ApolloProvider client={client}>{children}</ApolloProvider>
-    )});
-    act(() => void cache.evict({
-      id: cache.identify(item2)
-    }));
+    render(<Parent />, {
+      wrapper: ({ children }) => (
+        <ApolloProvider client={client}>{children}</ApolloProvider>
+      ),
+    });
+    act(
+      () =>
+        void cache.evict({
+          id: cache.identify(item2),
+        })
+    );
     await waitFor(() => {
-      expect(() => screen.getByText(/Item #2/)).toThrow()
-    })
+      expect(() => screen.getByText(/Item #2/)).toThrow();
+    });
 
     for (const [_item, parentChount, childCount] of valuePairs) {
-      expect(parentChount).toBe(childCount)
+      expect(parentChount).toBe(childCount);
     }
   });
 });
 
 describe.skip("Type Tests", () => {
-  test('NoInfer prevents adding arbitrary additional variables', () => {
-    const typedNode = {} as TypedDocumentNode<{ foo: string}, { bar: number }>
+  test("NoInfer prevents adding arbitrary additional variables", () => {
+    const typedNode = {} as TypedDocumentNode<{ foo: string }, { bar: number }>;
     useFragment({
       fragment: typedNode,
       from: { __typename: "Query" },
       variables: {
         bar: 4,
         // @ts-expect-error
-        nonExistingVariable: "string"
-      }
+        nonExistingVariable: "string",
+      },
     });
-  })
-
-  test("UseFragmentOptions interface shape", <TData, TVars>()=>{
-    expectTypeOf<UseFragmentOptions<TData, TVars>>()
-      .toEqualTypeOf<{
-        from: string | StoreObject | Reference;
-        fragment: DocumentNode | TypedDocumentNode<TData, TVars>;
-        fragmentName?: string;
-        optimistic?: boolean;
-        variables?: TVars;
-        canonizeResults?: boolean;
-      }>();
-  })
-})
+  });
+
+  test("UseFragmentOptions interface shape", <TData, TVars>() => {
+    expectTypeOf<UseFragmentOptions<TData, TVars>>().toEqualTypeOf<{
+      from: string | StoreObject | Reference;
+      fragment: DocumentNode | TypedDocumentNode<TData, TVars>;
+      fragmentName?: string;
+      optimistic?: boolean;
+      variables?: TVars;
+      canonizeResults?: boolean;
+    }>();
+  });
+});
diff --git a/src/react/hooks/__tests__/useLazyQuery.test.tsx b/src/react/hooks/__tests__/useLazyQuery.test.tsx
index 3bbb949e3f1..879ef22ac76 100644
--- a/src/react/hooks/__tests__/useLazyQuery.test.tsx
+++ b/src/react/hooks/__tests__/useLazyQuery.test.tsx
@@ -1,134 +1,135 @@
-import React from 'react';
-import { GraphQLError } from 'graphql';
-import gql from 'graphql-tag';
-import { act, renderHook, waitFor } from '@testing-library/react';
+import React from "react";
+import { GraphQLError } from "graphql";
+import gql from "graphql-tag";
+import { act, renderHook, waitFor } from "@testing-library/react";
 
-import { 
+import {
   ApolloClient,
   ApolloLink,
   ErrorPolicy,
   InMemoryCache,
   NetworkStatus,
-  TypedDocumentNode 
-} from '../../../core';
-import { Observable } from '../../../utilities';
-import { ApolloProvider } from '../../../react';
-import { 
+  TypedDocumentNode,
+} from "../../../core";
+import { Observable } from "../../../utilities";
+import { ApolloProvider } from "../../../react";
+import {
   MockedProvider,
   mockSingleLink,
   wait,
   tick,
-  MockSubscriptionLink 
-} from '../../../testing';
-import { useLazyQuery } from '../useLazyQuery';
-import { QueryResult } from '../../types/types';
+  MockSubscriptionLink,
+} from "../../../testing";
+import { useLazyQuery } from "../useLazyQuery";
+import { QueryResult } from "../../types/types";
 
 const IS_REACT_18 = React.version.startsWith("18");
 
-describe('useLazyQuery Hook', () => {
+describe("useLazyQuery Hook", () => {
   const helloQuery: TypedDocumentNode<{
     hello: string;
-  }> = gql`query { hello }`;
+  }> = gql`
+    query {
+      hello
+    }
+  `;
 
-  it('should hold query execution until manually triggered', async () => {
+  it("should hold query execution until manually triggered", async () => {
     const mocks = [
       {
         request: { query: helloQuery },
-        result: { data: { hello: 'world' } },
+        result: { data: { hello: "world" } },
         delay: 20,
       },
     ];
-    const { result } = renderHook(
-      () => useLazyQuery(helloQuery),
-      {
-        wrapper: ({ children }) => (
-          <MockedProvider mocks={mocks}>
-            {children}
-          </MockedProvider>
-        ),
-      },
-    );
+    const { result } = renderHook(() => useLazyQuery(helloQuery), {
+      wrapper: ({ children }) => (
+        <MockedProvider mocks={mocks}>{children}</MockedProvider>
+      ),
+    });
 
     expect(result.current[1].loading).toBe(false);
     expect(result.current[1].data).toBe(undefined);
     const execute = result.current[0];
     setTimeout(() => execute());
 
-    await waitFor(() => {
-      expect(result.current[1].loading).toBe(true);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(true);
+      },
+      { interval: 1 }
+    );
 
-    await waitFor(() => {
-      expect(result.current[1].loading).toBe(false);
-    }, { interval: 1 });
-    expect(result.current[1].data).toEqual({ hello: 'world' });
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(false);
+      },
+      { interval: 1 }
+    );
+    expect(result.current[1].data).toEqual({ hello: "world" });
   });
 
-  it('should set `called` to false by default', async () => {
+  it("should set `called` to false by default", async () => {
     const mocks = [
       {
         request: { query: helloQuery },
-        result: { data: { hello: 'world' } },
+        result: { data: { hello: "world" } },
         delay: 20,
       },
     ];
-    const { result } = renderHook(
-      () => useLazyQuery(helloQuery),
-      {
-        wrapper: ({ children }) => (
-          <MockedProvider mocks={mocks}>
-            {children}
-          </MockedProvider>
-        ),
-      },
-    );
+    const { result } = renderHook(() => useLazyQuery(helloQuery), {
+      wrapper: ({ children }) => (
+        <MockedProvider mocks={mocks}>{children}</MockedProvider>
+      ),
+    });
 
     expect(result.current[1].loading).toBe(false);
     expect(result.current[1].data).toBe(undefined);
     expect(result.current[1].called).toBe(false);
   });
 
-  it('should set `called` to true after calling the lazy execute function', async () => {
+  it("should set `called` to true after calling the lazy execute function", async () => {
     const mocks = [
       {
         request: { query: helloQuery },
-        result: { data: { hello: 'world' } },
+        result: { data: { hello: "world" } },
         delay: 20,
       },
     ];
 
-    const { result } = renderHook(
-      () => useLazyQuery(helloQuery),
-      {
-        wrapper: ({ children }) => (
-          <MockedProvider mocks={mocks}>
-            {children}
-          </MockedProvider>
-        ),
-      },
-    );
+    const { result } = renderHook(() => useLazyQuery(helloQuery), {
+      wrapper: ({ children }) => (
+        <MockedProvider mocks={mocks}>{children}</MockedProvider>
+      ),
+    });
 
     expect(result.current[1].loading).toBe(false);
     expect(result.current[1].called).toBe(false);
     const execute = result.current[0];
     setTimeout(() => execute());
 
-    await waitFor(() => {
-      expect(result.current[1].loading).toBe(true);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(true);
+      },
+      { interval: 1 }
+    );
     expect(result.current[1].called).toBe(true);
 
-    await waitFor(() => {
-      expect(result.current[1].loading).toBe(false);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(false);
+      },
+      { interval: 1 }
+    );
     expect(result.current[1].called).toBe(true);
   });
 
-  it('should override `skip` if lazy mode execution function is called', async () => {
+  it("should override `skip` if lazy mode execution function is called", async () => {
     const mocks = [
       {
         request: { query: helloQuery },
-        result: { data: { hello: 'world' } },
+        result: { data: { hello: "world" } },
         delay: 20,
       },
     ];
@@ -138,11 +139,9 @@ describe('useLazyQuery Hook', () => {
       () => useLazyQuery(helloQuery, { skip: true } as any),
       {
         wrapper: ({ children }) => (
-          <MockedProvider mocks={mocks}>
-            {children}
-          </MockedProvider>
+          <MockedProvider mocks={mocks}>{children}</MockedProvider>
         ),
-      },
+      }
     );
 
     expect(result.current[1].loading).toBe(false);
@@ -150,20 +149,26 @@ describe('useLazyQuery Hook', () => {
     const execute = result.current[0];
     setTimeout(() => execute());
 
-    await waitFor(() => {
-      expect(result.current[1].loading).toBe(true);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(true);
+      },
+      { interval: 1 }
+    );
     expect(result.current[1].called).toBe(true);
 
-    await waitFor(() => {
-      expect(result.current[1].loading).toBe(false);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(false);
+      },
+      { interval: 1 }
+    );
     expect(result.current[1].called).toBe(true);
   });
 
-  it('should use variables defined in hook options (if any), when running the lazy execution function', async () => {
+  it("should use variables defined in hook options (if any), when running the lazy execution function", async () => {
     const query = gql`
-      query($id: number) {
+      query ($id: number) {
         hello(id: $id)
       }
     `;
@@ -171,41 +176,46 @@ describe('useLazyQuery Hook', () => {
     const mocks = [
       {
         request: { query, variables: { id: 1 } },
-        result: { data: { hello: 'world 1' } },
+        result: { data: { hello: "world 1" } },
         delay: 20,
       },
     ];
 
     const { result } = renderHook(
-      () => useLazyQuery(query, {
-        variables: { id: 1 },
-      }),
+      () =>
+        useLazyQuery(query, {
+          variables: { id: 1 },
+        }),
       {
         wrapper: ({ children }) => (
-          <MockedProvider mocks={mocks}>
-            {children}
-          </MockedProvider>
+          <MockedProvider mocks={mocks}>{children}</MockedProvider>
         ),
-      },
+      }
     );
 
     const execute = result.current[0];
     setTimeout(() => execute());
 
-    await waitFor(() => {
-      expect(result.current[1].loading).toBe(true);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(true);
+      },
+      { interval: 1 }
+    );
 
-    await waitFor(() => {
-      expect(result.current[1].loading).toBe(false);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(false);
+      },
+      { interval: 1 }
+    );
 
-    expect(result.current[1].data).toEqual({ hello: 'world 1' });
+    expect(result.current[1].data).toEqual({ hello: "world 1" });
   });
 
-  it('should use variables passed into lazy execution function, overriding similar variables defined in Hook options', async () => {
+  it("should use variables passed into lazy execution function, overriding similar variables defined in Hook options", async () => {
     const query = gql`
-      query($id: number) {
+      query ($id: number) {
         hello(id: $id)
       }
     `;
@@ -213,52 +223,60 @@ describe('useLazyQuery Hook', () => {
     const mocks = [
       {
         request: { query, variables: { id: 1 } },
-        result: { data: { hello: 'world 1' } },
+        result: { data: { hello: "world 1" } },
         delay: 20,
       },
       {
         request: { query, variables: { id: 2 } },
-        result: { data: { hello: 'world 2' } },
+        result: { data: { hello: "world 2" } },
         delay: 20,
       },
     ];
 
     const { result } = renderHook(
-      () => useLazyQuery(query, {
-        variables: { id: 1 },
-      }),
+      () =>
+        useLazyQuery(query, {
+          variables: { id: 1 },
+        }),
       {
         wrapper: ({ children }) => (
-          <MockedProvider mocks={mocks}>
-            {children}
-          </MockedProvider>
+          <MockedProvider mocks={mocks}>{children}</MockedProvider>
         ),
-      },
+      }
     );
 
     const execute = result.current[0];
     setTimeout(() => execute({ variables: { id: 2 } }));
 
-    await waitFor(() => {
-      expect(result.current[1].loading).toBe(true);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(true);
+      },
+      { interval: 1 }
+    );
 
-    await waitFor(() => {
-      expect(result.current[1].loading).toBe(false);
-    }, { interval: 1 });
-    expect(result.current[1].data).toEqual({ hello: 'world 2' });
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(false);
+      },
+      { interval: 1 }
+    );
+    expect(result.current[1].data).toEqual({ hello: "world 2" });
   });
 
-  it('should merge variables from original hook and execution function', async () => {
-    const counterQuery: TypedDocumentNode<{
-      counter: number;
-    }, {
-      hookVar?: boolean;
-      execVar?: boolean;
-      localDefaultVar?: boolean;
-      globalDefaultVar?: boolean;
-    }> = gql`
-      query GetCounter (
+  it("should merge variables from original hook and execution function", async () => {
+    const counterQuery: TypedDocumentNode<
+      {
+        counter: number;
+      },
+      {
+        hookVar?: boolean;
+        execVar?: boolean;
+        localDefaultVar?: boolean;
+        globalDefaultVar?: boolean;
+      }
+    > = gql`
+      query GetCounter(
         $hookVar: Boolean
         $execVar: Boolean
         $localDefaultVar: Boolean
@@ -279,23 +297,28 @@ describe('useLazyQuery Hook', () => {
         },
       },
       cache: new InMemoryCache(),
-      link: new ApolloLink(request => new Observable(observer => {
-        if (request.operationName === "GetCounter") {
-          observer.next({
-            data: {
-              counter: ++count,
-              vars: request.variables,
-            },
-          });
-          setTimeout(() => {
-            observer.complete();
-          }, 10);
-        } else {
-          observer.error(new Error(`Unknown query: ${
-            request.operationName || request.query
-          }`));
-        }
-      })),
+      link: new ApolloLink(
+        (request) =>
+          new Observable((observer) => {
+            if (request.operationName === "GetCounter") {
+              observer.next({
+                data: {
+                  counter: ++count,
+                  vars: request.variables,
+                },
+              });
+              setTimeout(() => {
+                observer.complete();
+              }, 10);
+            } else {
+              observer.error(
+                new Error(
+                  `Unknown query: ${request.operationName || request.query}`
+                )
+              );
+            }
+          })
+      ),
     });
 
     const { result } = renderHook(
@@ -318,22 +341,29 @@ describe('useLazyQuery Hook', () => {
       },
       {
         wrapper: ({ children }) => (
-          <ApolloProvider client={client}>
-            {children}
-          </ApolloProvider>
+          <ApolloProvider client={client}>{children}</ApolloProvider>
         ),
-      },
+      }
     );
 
-    await waitFor(() => {
-      expect(result.current.query.loading).toBe(false);
-    }, { interval: 1 });
-    await waitFor(() => {
-      expect(result.current.query.called).toBe(false);
-    }, { interval: 1 });
-    await waitFor(() => {
-      expect(result.current.query.data).toBeUndefined();
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current.query.loading).toBe(false);
+      },
+      { interval: 1 }
+    );
+    await waitFor(
+      () => {
+        expect(result.current.query.called).toBe(false);
+      },
+      { interval: 1 }
+    );
+    await waitFor(
+      () => {
+        expect(result.current.query.data).toBeUndefined();
+      },
+      { interval: 1 }
+    );
 
     const expectedFinalData = {
       counter: 1,
@@ -345,32 +375,48 @@ describe('useLazyQuery Hook', () => {
       },
     };
 
-    const execResult = await result.current.exec(
-      {
-        variables: {
-          execVar: true
-        }
-      }
-    );
+    const execResult = await result.current.exec({
+      variables: {
+        execVar: true,
+      },
+    });
 
-    await waitFor(() => {
-      expect(execResult.loading).toBe(false);
-    }, { interval: 1 });
-    await waitFor(() => {
-      expect(execResult.called).toBe(true);
-    }, { interval: 1 });
-    await waitFor(() => {
-      expect(execResult.networkStatus).toBe(NetworkStatus.ready);
-    }, { interval: 1 });
-    await waitFor(() => {
-      expect(execResult.data).toEqual(expectedFinalData);
-    }, { interval: 1 });
-    await waitFor(() => {
-      expect(result.current.query.called).toBe(true);
-    }, { interval: 1 });
-    await waitFor(() => {
-      expect(result.current.query.loading).toBe(false);
-    }, { interval: 10 });
+    await waitFor(
+      () => {
+        expect(execResult.loading).toBe(false);
+      },
+      { interval: 1 }
+    );
+    await waitFor(
+      () => {
+        expect(execResult.called).toBe(true);
+      },
+      { interval: 1 }
+    );
+    await waitFor(
+      () => {
+        expect(execResult.networkStatus).toBe(NetworkStatus.ready);
+      },
+      { interval: 1 }
+    );
+    await waitFor(
+      () => {
+        expect(execResult.data).toEqual(expectedFinalData);
+      },
+      { interval: 1 }
+    );
+    await waitFor(
+      () => {
+        expect(result.current.query.called).toBe(true);
+      },
+      { interval: 1 }
+    );
+    await waitFor(
+      () => {
+        expect(result.current.query.loading).toBe(false);
+      },
+      { interval: 10 }
+    );
 
     expect(result.current.query.called).toBe(true);
     expect(result.current.query.data).toEqual(expectedFinalData);
@@ -390,20 +436,29 @@ describe('useLazyQuery Hook', () => {
       },
     });
 
-    await waitFor(() => {
-      expect(result.current.query.loading).toBe(false);
-    }, { interval: 1 });
-    await waitFor(() => {
-      expect(result.current.query.called).toBe(true);
-    }, { interval: 1 });
-    await waitFor(() => {
-      expect(result.current.query.data).toEqual({
-        counter: 2,
-        vars: {
-          execVar: false,
-        },
-      });
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current.query.loading).toBe(false);
+      },
+      { interval: 1 }
+    );
+    await waitFor(
+      () => {
+        expect(result.current.query.called).toBe(true);
+      },
+      { interval: 1 }
+    );
+    await waitFor(
+      () => {
+        expect(result.current.query.data).toEqual({
+          counter: 2,
+          vars: {
+            execVar: false,
+          },
+        });
+      },
+      { interval: 1 }
+    );
 
     const execResult2 = await result.current.exec({
       fetchPolicy: "cache-and-network",
@@ -413,29 +468,44 @@ describe('useLazyQuery Hook', () => {
       },
     });
 
-    await waitFor(() => {
-      expect(execResult2.loading).toBe(false);
-    }, { interval: 1 });
-    await waitFor(() => {
-      expect(execResult2.called).toBe(true);
-    }, { interval: 1 });
-    await waitFor(() => {
-      expect(execResult2.data).toEqual({
-        counter: 3,
-        vars: {
-          ...expectedFinalData.vars,
-          execVar: true,
-        },
-      });
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(execResult2.loading).toBe(false);
+      },
+      { interval: 1 }
+    );
+    await waitFor(
+      () => {
+        expect(execResult2.called).toBe(true);
+      },
+      { interval: 1 }
+    );
+    await waitFor(
+      () => {
+        expect(execResult2.data).toEqual({
+          counter: 3,
+          vars: {
+            ...expectedFinalData.vars,
+            execVar: true,
+          },
+        });
+      },
+      { interval: 1 }
+    );
 
-    await waitFor(() => {
-      expect(result.current.query.called).toBe(true);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current.query.called).toBe(true);
+      },
+      { interval: 1 }
+    );
 
-    await waitFor(() => {
-      expect(result.current.query.loading).toBe(false);
-    }, { interval: 10 });
+    await waitFor(
+      () => {
+        expect(result.current.query.loading).toBe(false);
+      },
+      { interval: 10 }
+    );
     expect(result.current.query.called).toBe(true);
     expect(result.current.query.data).toEqual({
       counter: 3,
@@ -446,7 +516,6 @@ describe('useLazyQuery Hook', () => {
     });
   });
 
-
   it("changing queries", async () => {
     const query1 = gql`
       query {
@@ -462,12 +531,12 @@ describe('useLazyQuery Hook', () => {
       {
         request: { query: query1 },
         result: { data: { hello: "world" } },
-        delay: 20
+        delay: 20,
       },
       {
         request: { query: query2 },
         result: { data: { name: "changed" } },
-        delay: 20
+        delay: 20,
       },
     ];
 
@@ -523,80 +592,90 @@ describe('useLazyQuery Hook', () => {
     const mocks = [
       {
         request: { query: helloQuery },
-        result: { data: { hello: 'world 1' } },
+        result: { data: { hello: "world 1" } },
         delay: 20,
       },
       {
         request: { query: helloQuery },
-        result: { data: { hello: 'world 2' } },
+        result: { data: { hello: "world 2" } },
         delay: 20,
       },
     ];
 
     const { result } = renderHook(
-      () => useLazyQuery(helloQuery, {
-        fetchPolicy: 'network-only',
-      }),
+      () =>
+        useLazyQuery(helloQuery, {
+          fetchPolicy: "network-only",
+        }),
       {
         wrapper: ({ children }) => (
-          <MockedProvider mocks={mocks}>
-            {children}
-          </MockedProvider>
+          <MockedProvider mocks={mocks}>{children}</MockedProvider>
         ),
-      },
+      }
     );
 
     expect(result.current[1].loading).toBe(false);
     const execute = result.current[0];
     setTimeout(() => execute());
 
-    await waitFor(() => {
-      expect(result.current[1].loading).toBe(true);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(true);
+      },
+      { interval: 1 }
+    );
 
-    await waitFor(() => {
-      expect(result.current[1].loading).toBe(false);
-    }, { interval: 1 });
-    expect(result.current[1].data).toEqual({ hello: 'world 1' });
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(false);
+      },
+      { interval: 1 }
+    );
+    expect(result.current[1].data).toEqual({ hello: "world 1" });
 
     setTimeout(() => execute());
 
-    await waitFor(() => {
-      expect(result.current[1].loading).toBe(true);
-    }, { interval: 1 });
-    expect(result.current[1].data).toEqual({ hello: 'world 1' });
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(true);
+      },
+      { interval: 1 }
+    );
+    expect(result.current[1].data).toEqual({ hello: "world 1" });
 
-    await waitFor(() => {
-      expect(result.current[1].loading).toBe(false);
-    }, { interval: 1 });
-    expect(result.current[1].data).toEqual({ hello: 'world 2' });
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(false);
+      },
+      { interval: 1 }
+    );
+    expect(result.current[1].data).toEqual({ hello: "world 2" });
   });
 
-  it('should persist previous data when a query is re-run', async () => {
+  it("should persist previous data when a query is re-run", async () => {
     const mocks = [
       {
         request: { query: helloQuery },
-        result: { data: { hello: 'world 1' } },
+        result: { data: { hello: "world 1" } },
         delay: 20,
       },
       {
         request: { query: helloQuery },
-        result: { data: { hello: 'world 2' } },
+        result: { data: { hello: "world 2" } },
         delay: 20,
       },
     ];
 
     const { result } = renderHook(
-      () => useLazyQuery(helloQuery, {
-        notifyOnNetworkStatusChange: true,
-      }),
+      () =>
+        useLazyQuery(helloQuery, {
+          notifyOnNetworkStatusChange: true,
+        }),
       {
         wrapper: ({ children }) => (
-          <MockedProvider mocks={mocks}>
-            {children}
-          </MockedProvider>
+          <MockedProvider mocks={mocks}>{children}</MockedProvider>
         ),
-      },
+      }
     );
 
     expect(result.current[1].loading).toBe(false);
@@ -605,35 +684,47 @@ describe('useLazyQuery Hook', () => {
     const execute = result.current[0];
     setTimeout(() => execute());
 
-    await waitFor(() => {
-      expect(result.current[1].loading).toBe(true);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(true);
+      },
+      { interval: 1 }
+    );
     expect(result.current[1].data).toBe(undefined);
     expect(result.current[1].previousData).toBe(undefined);
 
-    await waitFor(() => {
-      expect(result.current[1].loading).toBe(false);
-    }, { interval: 1 });
-    expect(result.current[1].data).toEqual({ hello: 'world 1' });
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(false);
+      },
+      { interval: 1 }
+    );
+    expect(result.current[1].data).toEqual({ hello: "world 1" });
     expect(result.current[1].previousData).toBe(undefined);
 
     const refetch = result.current[1].refetch;
     setTimeout(() => refetch!());
 
-    await waitFor(() => {
-      expect(result.current[1].loading).toBe(true);
-    }, { interval: 1 });
-    expect(result.current[1].data).toEqual({ hello: 'world 1' });
-    expect(result.current[1].previousData).toEqual({ hello: 'world 1' });
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(true);
+      },
+      { interval: 1 }
+    );
+    expect(result.current[1].data).toEqual({ hello: "world 1" });
+    expect(result.current[1].previousData).toEqual({ hello: "world 1" });
 
-    await waitFor(() => {
-      expect(result.current[1].loading).toBe(false);
-    }, { interval: 1 });
-    expect(result.current[1].data).toEqual({ hello: 'world 2' });
-    expect(result.current[1].previousData).toEqual({ hello: 'world 1' });
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(false);
+      },
+      { interval: 1 }
+    );
+    expect(result.current[1].data).toEqual({ hello: "world 2" });
+    expect(result.current[1].previousData).toEqual({ hello: "world 1" });
   });
 
-  it('should allow for the query to start with polling', async () => {
+  it("should allow for the query to start with polling", async () => {
     const mocks = [
       {
         request: { query: helloQuery },
@@ -654,58 +745,79 @@ describe('useLazyQuery Hook', () => {
       <MockedProvider mocks={mocks}>{children}</MockedProvider>
     );
 
-    const { result } = renderHook(
-      () => useLazyQuery(helloQuery),
-      { wrapper },
+    const { result } = renderHook(() => useLazyQuery(helloQuery), { wrapper });
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(false);
+      },
+      { interval: 1 }
     );
-    await waitFor(() => {
-      expect(result.current[1].loading).toBe(false);
-    }, { interval: 1 });
 
     expect(result.current[1].data).toBe(undefined);
 
     await tick();
     result.current[1].startPolling(10);
 
-    await waitFor(() => {
-      expect(result.current[1].loading).toBe(true);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(true);
+      },
+      { interval: 1 }
+    );
 
-    await waitFor(() => {
-      expect(result.current[1].loading).toBe(false);
-    }, { interval: 1 });
-    await waitFor(() => {
-      if (IS_REACT_18) {
-        expect(result.current[1].data).toEqual({ hello: "world 1" });
-      } else {
-        expect(result.current[1].data).toEqual({ hello: "world 3" });
-      }
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(false);
+      },
+      { interval: 1 }
+    );
+    await waitFor(
+      () => {
+        if (IS_REACT_18) {
+          expect(result.current[1].data).toEqual({ hello: "world 1" });
+        } else {
+          expect(result.current[1].data).toEqual({ hello: "world 3" });
+        }
+      },
+      { interval: 1 }
+    );
 
-    await waitFor(() => {
-      expect(result.current[1].loading).toBe(false);
-    }, { interval: 1 });
-    await waitFor(() => {
-      if (IS_REACT_18) {
-        expect(result.current[1].data).toEqual({ hello: "world 2" });
-      } else {
-        expect(result.current[1].data).toEqual({ hello: "world 3" });
-      }
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(false);
+      },
+      { interval: 1 }
+    );
+    await waitFor(
+      () => {
+        if (IS_REACT_18) {
+          expect(result.current[1].data).toEqual({ hello: "world 2" });
+        } else {
+          expect(result.current[1].data).toEqual({ hello: "world 3" });
+        }
+      },
+      { interval: 1 }
+    );
 
-    await waitFor(() => {
-      expect(result.current[1].loading).toBe(false);
-    }, { interval: 1 });
-    await waitFor(() => {
-      expect(result.current[1].data).toEqual({ hello: "world 3" });
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(false);
+      },
+      { interval: 1 }
+    );
+    await waitFor(
+      () => {
+        expect(result.current[1].data).toEqual({ hello: "world 3" });
+      },
+      { interval: 1 }
+    );
 
     result.current[1].stopPolling();
   });
 
-  it('should persist previous data when a query is re-run and variable changes', async () => {
+  it("should persist previous data when a query is re-run and variable changes", async () => {
     const CAR_QUERY_BY_ID = gql`
-      query($id: Int) {
+      query ($id: Int) {
         car(id: $id) {
           make
           model
@@ -715,17 +827,17 @@ describe('useLazyQuery Hook', () => {
 
     const data1 = {
       car: {
-        make: 'Audi',
-        model: 'A4',
-        __typename: 'Car',
+        make: "Audi",
+        model: "A4",
+        __typename: "Car",
       },
     };
 
     const data2 = {
       car: {
-        make: 'Audi',
-        model: 'RS8',
-        __typename: 'Car',
+        make: "Audi",
+        model: "RS8",
+        __typename: "Car",
       },
     };
 
@@ -742,76 +854,79 @@ describe('useLazyQuery Hook', () => {
       },
     ];
 
-    const { result } = renderHook(
-      () => useLazyQuery(CAR_QUERY_BY_ID),
-      {
-        wrapper: ({ children }) => (
-          <MockedProvider mocks={mocks}>
-            {children}
-          </MockedProvider>
-        ),
-      }
-    );
+    const { result } = renderHook(() => useLazyQuery(CAR_QUERY_BY_ID), {
+      wrapper: ({ children }) => (
+        <MockedProvider mocks={mocks}>{children}</MockedProvider>
+      ),
+    });
 
     expect(result.current[1].loading).toBe(false);
     expect(result.current[1].data).toBe(undefined);
     expect(result.current[1].previousData).toBe(undefined);
     const execute = result.current[0];
-    setTimeout(() => execute({ variables: { id: 1 }}));
+    setTimeout(() => execute({ variables: { id: 1 } }));
 
-    await waitFor(() => {
-      expect(result.current[1].loading).toBe(true);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(true);
+      },
+      { interval: 1 }
+    );
     expect(result.current[1].data).toBe(undefined);
     expect(result.current[1].previousData).toBe(undefined);
 
-    await waitFor(() => {
-      expect(result.current[1].loading).toBe(false);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(false);
+      },
+      { interval: 1 }
+    );
     expect(result.current[1].data).toEqual(data1);
     expect(result.current[1].previousData).toBe(undefined);
 
-    setTimeout(() => execute({ variables: { id: 2 }}));
+    setTimeout(() => execute({ variables: { id: 2 } }));
 
-    await waitFor(() => {
-      expect(result.current[1].loading).toBe(true);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(true);
+      },
+      { interval: 1 }
+    );
     expect(result.current[1].data).toBe(undefined);
     expect(result.current[1].previousData).toEqual(data1);
 
-    await waitFor(() => {
-      expect(result.current[1].loading).toBe(false);
-    }, { interval: 1 });
-    expect(result.current[1].data).toEqual(data2);
-    expect(result.current[1].previousData).toEqual(data1);
-  });
-
-  it('should work with cache-and-network fetch policy', async () => {
-    const cache = new InMemoryCache();
-    const link = mockSingleLink(
-      {
-        request: { query: helloQuery },
-        result: { data: { hello: 'from link' } },
-        delay: 20,
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(false);
       },
+      { interval: 1 }
     );
+    expect(result.current[1].data).toEqual(data2);
+    expect(result.current[1].previousData).toEqual(data1);
+  });
+
+  it("should work with cache-and-network fetch policy", async () => {
+    const cache = new InMemoryCache();
+    const link = mockSingleLink({
+      request: { query: helloQuery },
+      result: { data: { hello: "from link" } },
+      delay: 20,
+    });
 
     const client = new ApolloClient({
       link,
       cache,
     });
 
-    cache.writeQuery({ query: helloQuery, data: { hello: 'from cache' }});
+    cache.writeQuery({ query: helloQuery, data: { hello: "from cache" } });
 
     const { result } = renderHook(
-      () => useLazyQuery(helloQuery, { fetchPolicy: 'cache-and-network' }),
+      () => useLazyQuery(helloQuery, { fetchPolicy: "cache-and-network" }),
       {
         wrapper: ({ children }) => (
-          <ApolloProvider client={client}>
-            {children}
-          </ApolloProvider>
+          <ApolloProvider client={client}>{children}</ApolloProvider>
         ),
-      },
+      }
     );
 
     expect(result.current[1].loading).toBe(false);
@@ -819,49 +934,53 @@ describe('useLazyQuery Hook', () => {
     const execute = result.current[0];
     setTimeout(() => execute());
 
-    await waitFor(() => {
-      expect(result.current[1].loading).toBe(true);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(true);
+      },
+      { interval: 1 }
+    );
 
     // TODO: FIXME
-    expect(result.current[1].data).toEqual({ hello: 'from cache' });
+    expect(result.current[1].data).toEqual({ hello: "from cache" });
 
-    await waitFor(() => {
-      expect(result.current[1].loading).toBe(false);
-    }, { interval: 1 });
-    expect(result.current[1].data).toEqual({ hello: 'from link' });
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(false);
+      },
+      { interval: 1 }
+    );
+    expect(result.current[1].data).toEqual({ hello: "from link" });
   });
 
-  it('should return a promise from the execution function which resolves with the result', async () => {
+  it("should return a promise from the execution function which resolves with the result", async () => {
     const mocks = [
       {
         request: { query: helloQuery },
-        result: { data: { hello: 'world' } },
+        result: { data: { hello: "world" } },
         delay: 20,
       },
     ];
-    const { result } = renderHook(
-      () => useLazyQuery(helloQuery),
-      {
-        wrapper: ({ children }) => (
-          <MockedProvider mocks={mocks}>
-            {children}
-          </MockedProvider>
-        ),
-      },
-    );
+    const { result } = renderHook(() => useLazyQuery(helloQuery), {
+      wrapper: ({ children }) => (
+        <MockedProvider mocks={mocks}>{children}</MockedProvider>
+      ),
+    });
 
     expect(result.current[1].loading).toBe(false);
     expect(result.current[1].data).toBe(undefined);
     const execute = result.current[0];
 
-    const executeResult = new Promise<QueryResult<any, any>>(resolve => {
+    const executeResult = new Promise<QueryResult<any, any>>((resolve) => {
       setTimeout(() => resolve(execute()));
     });
 
-    await waitFor(() => {
-      expect(result.current[1].loading).toBe(true);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(true);
+      },
+      { interval: 1 }
+    );
 
     let latestRenderResult: QueryResult;
     await waitFor(() => {
@@ -870,15 +989,15 @@ describe('useLazyQuery Hook', () => {
     });
     await waitFor(() => {
       latestRenderResult = result.current[1];
-      expect(latestRenderResult.data).toEqual({ hello: 'world' });
+      expect(latestRenderResult.data).toEqual({ hello: "world" });
     });
 
-    return executeResult.then(finalResult => {
+    return executeResult.then((finalResult) => {
       expect(finalResult).toEqual(latestRenderResult);
     });
   });
 
-  it('should have matching results from execution function and hook', async () => {
+  it("should have matching results from execution function and hook", async () => {
     const query = gql`
       query GetCountries($filter: String) {
         countries(filter: $filter) {
@@ -925,16 +1044,11 @@ describe('useLazyQuery Hook', () => {
       },
     ];
 
-    const { result } = renderHook(
-      () => useLazyQuery(query),
-      {
-        wrapper: ({ children }) => (
-          <MockedProvider mocks={mocks}>
-            {children}
-          </MockedProvider>
-        ),
-      },
-    );
+    const { result } = renderHook(() => useLazyQuery(query), {
+      wrapper: ({ children }) => (
+        <MockedProvider mocks={mocks}>{children}</MockedProvider>
+      ),
+    });
 
     expect(result.current[1].loading).toBe(false);
     expect(result.current[1].data).toBe(undefined);
@@ -944,13 +1058,19 @@ describe('useLazyQuery Hook', () => {
       executeResult = execute({ variables: { filter: "PA" } });
     });
 
-    await waitFor(() => {
-      expect(result.current[1].loading).toBe(true);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(true);
+      },
+      { interval: 1 }
+    );
 
-    await waitFor(() => {
-      expect(result.current[1].loading).toBe(false);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(false);
+      },
+      { interval: 1 }
+    );
     expect(result.current[1].data).toEqual({
       countries: {
         code: "PA",
@@ -970,17 +1090,23 @@ describe('useLazyQuery Hook', () => {
       executeResult = execute({ variables: { filter: "BA" } });
     });
 
-    await waitFor(() => {
-      expect(result.current[1].loading).toBe(false);
-    }, { interval: 1 });
-    await waitFor(() => {
-      expect(result.current[1].data).toEqual({
-        countries: {
-          code: "BA",
-          name: "Bahamas",
-        },
-      });
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(false);
+      },
+      { interval: 1 }
+    );
+    await waitFor(
+      () => {
+        expect(result.current[1].data).toEqual({
+          countries: {
+            code: "BA",
+            name: "Bahamas",
+          },
+        });
+      },
+      { interval: 1 }
+    );
 
     expect(executeResult).toBeInstanceOf(Promise);
     expect((await executeResult).data).toEqual({
@@ -991,34 +1117,29 @@ describe('useLazyQuery Hook', () => {
     });
   });
 
-  it('the promise should reject with errors the “way useMutation does”', async () => {
+  it("the promise should reject with errors the “way useMutation does”", async () => {
     const mocks = [
       {
         request: { query: helloQuery },
         result: {
-          errors: [new GraphQLError('error 1')],
+          errors: [new GraphQLError("error 1")],
         },
         delay: 20,
       },
       {
         request: { query: helloQuery },
         result: {
-          errors: [new GraphQLError('error 2')],
+          errors: [new GraphQLError("error 2")],
         },
         delay: 20,
       },
     ];
 
-    const { result } = renderHook(
-      () => useLazyQuery(helloQuery),
-      {
-        wrapper: ({ children }) => (
-          <MockedProvider mocks={mocks}>
-            {children}
-          </MockedProvider>
-        ),
-      },
-    );
+    const { result } = renderHook(() => useLazyQuery(helloQuery), {
+      wrapper: ({ children }) => (
+        <MockedProvider mocks={mocks}>{children}</MockedProvider>
+      ),
+    });
 
     const execute = result.current[0];
     expect(result.current[1].loading).toBe(false);
@@ -1026,129 +1147,140 @@ describe('useLazyQuery Hook', () => {
 
     const executePromise = Promise.resolve().then(() => execute());
 
-    await waitFor(() => {
-      expect(result.current[1].loading).toBe(true);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(true);
+      },
+      { interval: 1 }
+    );
     expect(result.current[1].data).toBeUndefined();
     expect(result.current[1].error).toBe(undefined);
 
-    await waitFor(() => {
-      expect(result.current[1].loading).toBe(false);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(false);
+      },
+      { interval: 1 }
+    );
     expect(result.current[1].data).toBeUndefined();
-    expect(result.current[1].error).toEqual(new Error('error 1'));
+    expect(result.current[1].error).toEqual(new Error("error 1"));
 
-    await executePromise.then(result => {
+    await executePromise.then((result) => {
       expect(result.loading).toBe(false);
       expect(result.data).toBeUndefined();
-      expect(result.error!.message).toBe('error 1');
+      expect(result.error!.message).toBe("error 1");
     });
 
     setTimeout(() => execute());
 
-    await waitFor(() => {
-      expect(result.current[1].loading).toBe(true);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(true);
+      },
+      { interval: 1 }
+    );
     expect(result.current[1].data).toBeUndefined();
-    expect(result.current[1].error).toEqual(new Error('error 1'));
+    expect(result.current[1].error).toEqual(new Error("error 1"));
 
-    await waitFor(() => {
-      expect(result.current[1].loading).toBe(false);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(false);
+      },
+      { interval: 1 }
+    );
     expect(result.current[1].data).toBe(undefined);
-    expect(result.current[1].error).toEqual(new Error('error 2'));
+    expect(result.current[1].error).toEqual(new Error("error 2"));
   });
 
-  it('the promise should not cause an unhandled rejection', async () => {
+  it("the promise should not cause an unhandled rejection", async () => {
     const mocks = [
       {
         request: { query: helloQuery },
         result: {
-          errors: [new GraphQLError('error 1')],
+          errors: [new GraphQLError("error 1")],
         },
       },
     ];
 
-    const { result } = renderHook(
-      () => useLazyQuery(helloQuery),
-      {
-        wrapper: ({ children }) => (
-          <MockedProvider mocks={mocks}>
-            {children}
-          </MockedProvider>
-        ),
-      },
-    );
+    const { result } = renderHook(() => useLazyQuery(helloQuery), {
+      wrapper: ({ children }) => (
+        <MockedProvider mocks={mocks}>{children}</MockedProvider>
+      ),
+    });
 
     const execute = result.current[0];
-    await waitFor(() => {
-      expect(result.current[1].loading).toBe(false);
-      execute();
-    }, { interval: 1 });
-    await waitFor(() => {
-      expect(result.current[1].data).toBe(undefined);
-      execute();
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current[1].loading).toBe(false);
+        execute();
+      },
+      { interval: 1 }
+    );
+    await waitFor(
+      () => {
+        expect(result.current[1].data).toBe(undefined);
+        execute();
+      },
+      { interval: 1 }
+    );
 
     // Making sure the rejection triggers a test failure.
     await wait(50);
   });
 
-  it('allows in-flight requests to resolve when component unmounts', async () => {
+  it("allows in-flight requests to resolve when component unmounts", async () => {
     const link = new MockSubscriptionLink();
-    const client = new ApolloClient({ link, cache: new InMemoryCache() })
+    const client = new ApolloClient({ link, cache: new InMemoryCache() });
 
     const { result, unmount } = renderHook(() => useLazyQuery(helloQuery), {
-      wrapper: ({ children }) =>
-        <ApolloProvider client={client}>
-          {children}
-        </ApolloProvider>
+      wrapper: ({ children }) => (
+        <ApolloProvider client={client}>{children}</ApolloProvider>
+      ),
     });
 
     const [execute] = result.current;
 
-    let promise: Promise<QueryResult<{ hello: string }>>
+    let promise: Promise<QueryResult<{ hello: string }>>;
     act(() => {
       promise = execute();
-    })
+    });
 
     unmount();
 
-    link.simulateResult({ result: { data: { hello: 'Greetings' }}}, true);
+    link.simulateResult({ result: { data: { hello: "Greetings" } } }, true);
 
     const queryResult = await promise!;
 
-    expect(queryResult.data).toEqual({ hello: 'Greetings' });
+    expect(queryResult.data).toEqual({ hello: "Greetings" });
     expect(queryResult.loading).toBe(false);
     expect(queryResult.networkStatus).toBe(NetworkStatus.ready);
   });
 
-  it('handles resolving multiple in-flight requests when component unmounts', async () => {
+  it("handles resolving multiple in-flight requests when component unmounts", async () => {
     const link = new MockSubscriptionLink();
-    const client = new ApolloClient({ link, cache: new InMemoryCache() })
+    const client = new ApolloClient({ link, cache: new InMemoryCache() });
 
     const { result, unmount } = renderHook(() => useLazyQuery(helloQuery), {
-      wrapper: ({ children }) =>
-        <ApolloProvider client={client}>
-          {children}
-        </ApolloProvider>
+      wrapper: ({ children }) => (
+        <ApolloProvider client={client}>{children}</ApolloProvider>
+      ),
     });
 
     const [execute] = result.current;
 
-    let promise1: Promise<QueryResult<{ hello: string }>>
-    let promise2: Promise<QueryResult<{ hello: string }>>
+    let promise1: Promise<QueryResult<{ hello: string }>>;
+    let promise2: Promise<QueryResult<{ hello: string }>>;
     act(() => {
       promise1 = execute();
       promise2 = execute();
-    })
+    });
 
     unmount();
 
-    link.simulateResult({ result: { data: { hello: 'Greetings' }}}, true);
+    link.simulateResult({ result: { data: { hello: "Greetings" } } }, true);
 
     const expectedResult = {
-      data: { hello: 'Greetings' },
+      data: { hello: "Greetings" },
       loading: false,
       networkStatus: NetworkStatus.ready,
     };
@@ -1158,13 +1290,13 @@ describe('useLazyQuery Hook', () => {
   });
 
   // https://github.com/apollographql/apollo-client/issues/9755
-  it('resolves each execution of the query with the appropriate result and renders with the result from the latest execution', async () => {
+  it("resolves each execution of the query with the appropriate result and renders with the result from the latest execution", async () => {
     interface Data {
-      user: { id: string, name: string }
+      user: { id: string; name: string };
     }
 
     interface Variables {
-      id: string
+      id: string;
     }
 
     const query: TypedDocumentNode<Data, Variables> = gql`
@@ -1178,39 +1310,38 @@ describe('useLazyQuery Hook', () => {
 
     const mocks = [
       {
-        request: { query, variables: { id: '1' } },
-        result: { data: { user: { id: '1', name: 'John Doe' }}},
-        delay: 20
+        request: { query, variables: { id: "1" } },
+        result: { data: { user: { id: "1", name: "John Doe" } } },
+        delay: 20,
       },
       {
-        request: { query, variables: { id: '2' } },
-        result: { data: { user: { id: '2', name: 'Jane Doe' }}},
-        delay: 20
+        request: { query, variables: { id: "2" } },
+        result: { data: { user: { id: "2", name: "Jane Doe" } } },
+        delay: 20,
       },
-    ]
+    ];
 
     const { result } = renderHook(() => useLazyQuery(query), {
-      wrapper: ({ children }) =>
-        <MockedProvider mocks={mocks}>
-          {children}
-        </MockedProvider>
+      wrapper: ({ children }) => (
+        <MockedProvider mocks={mocks}>{children}</MockedProvider>
+      ),
     });
 
     const [execute] = result.current;
 
     await act(async () => {
-      const promise1 = execute({ variables: { id: '1' }});
-      const promise2 = execute({ variables: { id: '2' }});
+      const promise1 = execute({ variables: { id: "1" } });
+      const promise2 = execute({ variables: { id: "2" } });
 
       await expect(promise1).resolves.toMatchObject({
         ...mocks[0].result,
-        loading: false ,
+        loading: false,
         called: true,
       });
 
       await expect(promise2).resolves.toMatchObject({
         ...mocks[1].result,
-        loading: false ,
+        loading: false,
         called: true,
       });
     });
@@ -1222,13 +1353,13 @@ describe('useLazyQuery Hook', () => {
     });
   });
 
-  it('uses the most recent options when the hook rerenders before execution', async () => {
+  it("uses the most recent options when the hook rerenders before execution", async () => {
     interface Data {
-      user: { id: string, name: string }
+      user: { id: string; name: string };
     }
 
     interface Variables {
-      id: string
+      id: string;
     }
 
     const query: TypedDocumentNode<Data, Variables> = gql`
@@ -1242,29 +1373,28 @@ describe('useLazyQuery Hook', () => {
 
     const mocks = [
       {
-        request: { query, variables: { id: '1' } },
-        result: { data: { user: { id: '1', name: 'John Doe' }}},
-        delay: 30
+        request: { query, variables: { id: "1" } },
+        result: { data: { user: { id: "1", name: "John Doe" } } },
+        delay: 30,
       },
       {
-        request: { query, variables: { id: '2' } },
-        result: { data: { user: { id: '2', name: 'Jane Doe' }}},
-        delay: 20
+        request: { query, variables: { id: "2" } },
+        result: { data: { user: { id: "2", name: "Jane Doe" } } },
+        delay: 20,
       },
-    ]
+    ];
 
     const { result, rerender } = renderHook(
-      ({ id }) => useLazyQuery(query, { variables: { id } }), 
+      ({ id }) => useLazyQuery(query, { variables: { id } }),
       {
-        initialProps: { id: '1' },
-        wrapper: ({ children }) =>
-          <MockedProvider mocks={mocks}>
-            {children}
-          </MockedProvider>
+        initialProps: { id: "1" },
+        wrapper: ({ children }) => (
+          <MockedProvider mocks={mocks}>{children}</MockedProvider>
+        ),
       }
     );
 
-    rerender({ id: '2' });
+    rerender({ id: "2" });
 
     const [execute] = result.current;
 
@@ -1275,15 +1405,15 @@ describe('useLazyQuery Hook', () => {
 
     await waitFor(() => {
       expect(result.current[1].data).toEqual(mocks[1].result.data);
-    })
+    });
 
-    await expect(promise!).resolves.toMatchObject(
-      { data: mocks[1].result.data }
-    );
+    await expect(promise!).resolves.toMatchObject({
+      data: mocks[1].result.data,
+    });
   });
 
   // https://github.com/apollographql/apollo-client/issues/10198
-  it('uses the most recent query document when the hook rerenders before execution', async () => {
+  it("uses the most recent query document when the hook rerenders before execution", async () => {
     const query = gql`
       query DummyQuery {
         shouldNotBeUsed
@@ -1293,19 +1423,18 @@ describe('useLazyQuery Hook', () => {
     const mocks = [
       {
         request: { query: helloQuery },
-        result: { data: { hello: 'Greetings' } },
-        delay: 20
+        result: { data: { hello: "Greetings" } },
+        delay: 20,
       },
-    ]
+    ];
 
     const { result, rerender } = renderHook(
-      ({ query }) => useLazyQuery(query), 
+      ({ query }) => useLazyQuery(query),
       {
         initialProps: { query },
-        wrapper: ({ children }) =>
-          <MockedProvider mocks={mocks}>
-            {children}
-          </MockedProvider>
+        wrapper: ({ children }) => (
+          <MockedProvider mocks={mocks}>{children}</MockedProvider>
+        ),
       }
     );
 
@@ -1319,21 +1448,21 @@ describe('useLazyQuery Hook', () => {
     });
 
     await waitFor(() => {
-      expect(result.current[1].data).toEqual({ hello: 'Greetings' });
-    })
+      expect(result.current[1].data).toEqual({ hello: "Greetings" });
+    });
 
-    await expect(promise!).resolves.toMatchObject(
-      { data: { hello: 'Greetings' } }
-    );
+    await expect(promise!).resolves.toMatchObject({
+      data: { hello: "Greetings" },
+    });
   });
 
-  it('does not refetch when rerendering after executing query', async () => {
+  it("does not refetch when rerendering after executing query", async () => {
     interface Data {
-      user: { id: string, name: string }
+      user: { id: string; name: string };
     }
 
     interface Variables {
-      id: string
+      id: string;
     }
 
     const query: TypedDocumentNode<Data, Variables> = gql`
@@ -1351,30 +1480,29 @@ describe('useLazyQuery Hook', () => {
       fetchCount++;
       return new Observable((observer) => {
         setTimeout(() => {
-          observer.next({ 
-            data: { user: { id: operation.variables.id, name: 'John Doe' } }
+          observer.next({
+            data: { user: { id: operation.variables.id, name: "John Doe" } },
           });
           observer.complete();
-        }, 20)
+        }, 20);
       });
     });
 
     const client = new ApolloClient({ link, cache: new InMemoryCache() });
 
     const { result, rerender } = renderHook(
-      () => useLazyQuery(query, { variables: { id: '1' }}), 
+      () => useLazyQuery(query, { variables: { id: "1" } }),
       {
-        initialProps: { id: '1' },
-        wrapper: ({ children }) =>
-          <ApolloProvider client={client}>
-            {children}
-          </ApolloProvider>
+        initialProps: { id: "1" },
+        wrapper: ({ children }) => (
+          <ApolloProvider client={client}>{children}</ApolloProvider>
+        ),
       }
     );
 
     const [execute] = result.current;
 
-    await act(() => execute({ variables: { id: '2' }}));
+    await act(() => execute({ variables: { id: "2" } }));
 
     expect(fetchCount).toBe(1);
 
@@ -1383,7 +1511,7 @@ describe('useLazyQuery Hook', () => {
     await wait(10);
 
     expect(fetchCount).toBe(1);
-  })
+  });
 
   describe("network errors", () => {
     async function check(errorPolicy: ErrorPolicy) {
@@ -1391,24 +1519,26 @@ describe('useLazyQuery Hook', () => {
 
       const client = new ApolloClient({
         cache: new InMemoryCache(),
-        link: new ApolloLink(request => new Observable(observer => {
-          setTimeout(() => {
-            observer.error(networkError);
-          }, 20);
-        })),
+        link: new ApolloLink(
+          (request) =>
+            new Observable((observer) => {
+              setTimeout(() => {
+                observer.error(networkError);
+              }, 20);
+            })
+        ),
       });
 
       const { result } = renderHook(
-        () => useLazyQuery(helloQuery, {
-          errorPolicy,
-        }),
+        () =>
+          useLazyQuery(helloQuery, {
+            errorPolicy,
+          }),
         {
           wrapper: ({ children }) => (
-            <ApolloProvider client={client}>
-              {children}
-            </ApolloProvider>
+            <ApolloProvider client={client}>{children}</ApolloProvider>
           ),
-        },
+        }
       );
 
       const execute = result.current[0];
@@ -1418,32 +1548,53 @@ describe('useLazyQuery Hook', () => {
 
       setTimeout(execute);
 
-      await waitFor(() => {
-        expect(result.current[1].loading).toBe(true);
-      }, { interval: 1 });
-      await waitFor(() => {
-        if (IS_REACT_18) {
-          expect(result.current[1].networkStatus).toBe(NetworkStatus.loading);
-        } else {
-          expect(result.current[1].networkStatus).toBe(NetworkStatus.error);
-        }
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current[1].data).toBeUndefined();
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current[1].loading).toBe(true);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          if (IS_REACT_18) {
+            expect(result.current[1].networkStatus).toBe(NetworkStatus.loading);
+          } else {
+            expect(result.current[1].networkStatus).toBe(NetworkStatus.error);
+          }
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current[1].data).toBeUndefined();
+        },
+        { interval: 1 }
+      );
 
-      await waitFor(() => {
-        expect(result.current[1].loading).toBe(false);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current[1].networkStatus).toBe(NetworkStatus.error);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current[1].data).toBeUndefined();
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current[1].error!.message).toBe("from the network");
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current[1].loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current[1].networkStatus).toBe(NetworkStatus.error);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current[1].data).toBeUndefined();
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current[1].error!.message).toBe("from the network");
+        },
+        { interval: 1 }
+      );
     }
 
     // For errorPolicy:"none", we expect result.error to be defined and
@@ -1474,22 +1625,27 @@ describe('useLazyQuery Hook', () => {
       let count = 0;
       const client = new ApolloClient({
         cache: new InMemoryCache(),
-        link: new ApolloLink(request => new Observable(observer => {
-          if (request.operationName === "GetCounter") {
-            observer.next({
-              data: {
-                counter: ++count,
-              },
-            });
-            setTimeout(() => {
-              observer.complete();
-            }, 10);
-          } else {
-            observer.error(new Error(`Unknown query: ${
-              request.operationName || request.query
-            }`));
-          }
-        })),
+        link: new ApolloLink(
+          (request) =>
+            new Observable((observer) => {
+              if (request.operationName === "GetCounter") {
+                observer.next({
+                  data: {
+                    counter: ++count,
+                  },
+                });
+                setTimeout(() => {
+                  observer.complete();
+                }, 10);
+              } else {
+                observer.error(
+                  new Error(
+                    `Unknown query: ${request.operationName || request.query}`
+                  )
+                );
+              }
+            })
+        ),
       });
 
       const defaultFetchPolicy = "network-only";
@@ -1509,47 +1665,72 @@ describe('useLazyQuery Hook', () => {
         },
         {
           wrapper: ({ children }) => (
-            <ApolloProvider client={client}>
-              {children}
-            </ApolloProvider>
+            <ApolloProvider client={client}>{children}</ApolloProvider>
           ),
-        },
+        }
       );
 
-      await waitFor(() => {
-        expect(result.current.query.loading).toBe(false);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current.query.called).toBe(false);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current.query.data).toBeUndefined();
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.query.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current.query.called).toBe(false);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current.query.data).toBeUndefined();
+        },
+        { interval: 1 }
+      );
 
       const execResult = await result.current.exec();
       expect(execResult.loading).toBe(false);
       expect(execResult.called).toBe(true);
       expect(execResult.data).toEqual({ counter: 1 });
 
-      await waitFor(() => {
-        expect(result.current.query.loading).toBe(false);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current.query.data).toMatchObject({ counter: 1 });
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current.query.called).toBe(true);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.query.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current.query.data).toMatchObject({ counter: 1 });
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current.query.called).toBe(true);
+        },
+        { interval: 1 }
+      );
 
-      await waitFor(() => {
-        expect(result.current.query.loading).toBe(false);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current.query.called).toBe(true);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current.query.data).toEqual({ counter: 1 });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.query.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current.query.called).toBe(true);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current.query.data).toEqual({ counter: 1 });
+        },
+        { interval: 1 }
+      );
 
       const { options } = result.current.query.observable;
       expect(options.fetchPolicy).toBe(defaultFetchPolicy);
@@ -1558,17 +1739,17 @@ describe('useLazyQuery Hook', () => {
 });
 
 describe.skip("Type Tests", () => {
-  test('NoInfer prevents adding arbitrary additional variables', () => {
-    const typedNode = {} as TypedDocumentNode<{ foo: string}, { bar: number }>
+  test("NoInfer prevents adding arbitrary additional variables", () => {
+    const typedNode = {} as TypedDocumentNode<{ foo: string }, { bar: number }>;
     const [_, { variables }] = useLazyQuery(typedNode, {
       variables: {
         bar: 4,
         // @ts-expect-error
-        nonExistingVariable: "string"
-      }
+        nonExistingVariable: "string",
+      },
     });
-    variables?.bar
+    variables?.bar;
     // @ts-expect-error
-    variables?.nonExistingVariable
-  })
-})
+    variables?.nonExistingVariable;
+  });
+});
diff --git a/src/react/hooks/__tests__/useMutation.test.tsx b/src/react/hooks/__tests__/useMutation.test.tsx
index 63d73194b09..7113be78caf 100644
--- a/src/react/hooks/__tests__/useMutation.test.tsx
+++ b/src/react/hooks/__tests__/useMutation.test.tsx
@@ -1,21 +1,36 @@
-import React, { useEffect } from 'react';
-import { GraphQLError } from 'graphql';
-import gql from 'graphql-tag';
-import { act } from 'react-dom/test-utils';
-import { render, waitFor, screen, renderHook } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import React, { useEffect } from "react";
+import { GraphQLError } from "graphql";
+import gql from "graphql-tag";
+import { act } from "react-dom/test-utils";
+import { render, waitFor, screen, renderHook } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import fetchMock from "fetch-mock";
 
-import { ApolloClient, ApolloLink, ApolloQueryResult, Cache, NetworkStatus, Observable, ObservableQuery, TypedDocumentNode } from '../../../core';
-import { InMemoryCache } from '../../../cache';
-import { itAsync, MockedProvider, MockSubscriptionLink, mockSingleLink, subscribeAndCount } from '../../../testing';
-import { ApolloProvider } from '../../context';
-import { useQuery } from '../useQuery';
-import { useMutation } from '../useMutation';
-import { BatchHttpLink } from '../../../link/batch-http';
-import { FetchResult } from '../../../link/core';
-
-describe('useMutation Hook', () => {
+import {
+  ApolloClient,
+  ApolloLink,
+  ApolloQueryResult,
+  Cache,
+  NetworkStatus,
+  Observable,
+  ObservableQuery,
+  TypedDocumentNode,
+} from "../../../core";
+import { InMemoryCache } from "../../../cache";
+import {
+  itAsync,
+  MockedProvider,
+  MockSubscriptionLink,
+  mockSingleLink,
+  subscribeAndCount,
+} from "../../../testing";
+import { ApolloProvider } from "../../context";
+import { useQuery } from "../useQuery";
+import { useMutation } from "../useMutation";
+import { BatchHttpLink } from "../../../link/batch-http";
+import { FetchResult } from "../../../link/core";
+
+describe("useMutation Hook", () => {
   interface Todo {
     id: number;
     description: string;
@@ -35,38 +50,35 @@ describe('useMutation Hook', () => {
   const CREATE_TODO_RESULT = {
     createTodo: {
       id: 1,
-      description: 'Get milk!',
-      priority: 'High',
-      __typename: 'Todo'
-    }
+      description: "Get milk!",
+      priority: "High",
+      __typename: "Todo",
+    },
   };
 
-  const CREATE_TODO_ERROR = 'Failed to create item';
+  const CREATE_TODO_ERROR = "Failed to create item";
 
-  describe('General use', () => {
-    it('should handle a simple mutation properly', async () => {
+  describe("General use", () => {
+    it("should handle a simple mutation properly", async () => {
       const variables = {
-        description: 'Get milk!'
+        description: "Get milk!",
       };
 
       const mocks = [
         {
           request: {
             query: CREATE_TODO_MUTATION,
-            variables
+            variables,
           },
-          result: { data: CREATE_TODO_RESULT }
-        }
+          result: { data: CREATE_TODO_RESULT },
+        },
       ];
 
-      const { result } = renderHook(
-        () => useMutation(CREATE_TODO_MUTATION),
-        { wrapper: ({ children }) => (
-          <MockedProvider mocks={mocks}>
-            {children}
-          </MockedProvider>
-        )},
-      );
+      const { result } = renderHook(() => useMutation(CREATE_TODO_MUTATION), {
+        wrapper: ({ children }) => (
+          <MockedProvider mocks={mocks}>{children}</MockedProvider>
+        ),
+      });
 
       expect(result.current[1].loading).toBe(false);
       expect(result.current[1].data).toBe(undefined);
@@ -75,31 +87,33 @@ describe('useMutation Hook', () => {
       expect(result.current[1].loading).toBe(true);
       expect(result.current[1].data).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current[1].loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current[1].loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current[1].data).toEqual(CREATE_TODO_RESULT);
     });
 
-    it('should be able to call mutations as an effect', async () => {
+    it("should be able to call mutations as an effect", async () => {
       const variables = {
-        description: 'Get milk!'
+        description: "Get milk!",
       };
 
       const mocks = [
         {
           request: {
             query: CREATE_TODO_MUTATION,
-            variables
+            variables,
           },
-          result: { data: CREATE_TODO_RESULT }
-        }
+          result: { data: CREATE_TODO_RESULT },
+        },
       ];
 
       const useCreateTodo = () => {
-        const [createTodo, { loading, data }] = useMutation(
-          CREATE_TODO_MUTATION
-        );
+        const [createTodo, { loading, data }] =
+          useMutation(CREATE_TODO_MUTATION);
         useEffect(() => {
           createTodo({ variables });
         }, [variables]);
@@ -107,48 +121,48 @@ describe('useMutation Hook', () => {
         return { loading, data };
       };
 
-      const { result } = renderHook(
-        () => useCreateTodo(),
-        { wrapper: ({ children }) => (
-          <MockedProvider mocks={mocks}>
-            {children}
-          </MockedProvider>
-        )},
-      );
+      const { result } = renderHook(() => useCreateTodo(), {
+        wrapper: ({ children }) => (
+          <MockedProvider mocks={mocks}>{children}</MockedProvider>
+        ),
+      });
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current.data).toEqual(CREATE_TODO_RESULT);
     });
 
-    it('should ensure the mutation callback function has a stable identity no matter what', async () => {
+    it("should ensure the mutation callback function has a stable identity no matter what", async () => {
       const variables1 = {
-        description: 'Get milk',
+        description: "Get milk",
       };
 
       const data1 = {
         createTodo: {
           id: 1,
-          description: 'Get milk!',
-          priority: 'High',
-          __typename: 'Todo',
-        }
+          description: "Get milk!",
+          priority: "High",
+          __typename: "Todo",
+        },
       };
 
       const variables2 = {
-        description: 'Write blog post',
+        description: "Write blog post",
       };
 
       const data2 = {
         createTodo: {
           id: 1,
-          description: 'Write blog post',
-          priority: 'High',
-          __typename: 'Todo',
+          description: "Write blog post",
+          priority: "High",
+          __typename: "Todo",
         },
       };
 
@@ -173,14 +187,12 @@ describe('useMutation Hook', () => {
         ({ variables }) => useMutation(CREATE_TODO_MUTATION, { variables }),
         {
           wrapper: ({ children }) => (
-            <MockedProvider mocks={mocks}>
-              {children}
-            </MockedProvider>
+            <MockedProvider mocks={mocks}>{children}</MockedProvider>
           ),
           initialProps: {
             variables: variables1,
           },
-        },
+        }
       );
 
       const createTodo = result.current[0];
@@ -192,88 +204,86 @@ describe('useMutation Hook', () => {
       expect(result.current[1].loading).toBe(true);
       expect(result.current[1].data).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current[1].loading).toBe(false);
-      }, { interval: 1 })
+      await waitFor(
+        () => {
+          expect(result.current[1].loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current[0]).toBe(createTodo);
       expect(result.current[1].data).toEqual(data1);
 
       rerender({ variables: variables2 });
       act(() => void createTodo());
 
-      await waitFor(() => {
-        expect(result.current[1].loading).toBe(false);
-      }, { interval: 1 })
+      await waitFor(
+        () => {
+          expect(result.current[1].loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current[0]).toBe(createTodo);
       expect(result.current[1].data).toEqual(data2);
     });
 
-    it('should not call setResult on an unmounted component', async () => {
+    it("should not call setResult on an unmounted component", async () => {
       const errorSpy = jest.spyOn(console, "error");
       const variables = {
-        description: 'Get milk!'
+        description: "Get milk!",
       };
 
       const mocks = [
         {
           request: {
             query: CREATE_TODO_MUTATION,
-            variables
+            variables,
           },
-          result: { data: CREATE_TODO_RESULT }
-        }
+          result: { data: CREATE_TODO_RESULT },
+        },
       ];
 
       const useCreateTodo = () => {
-        const [createTodo, { reset }] = useMutation(
-          CREATE_TODO_MUTATION
-        );
+        const [createTodo, { reset }] = useMutation(CREATE_TODO_MUTATION);
         return { reset, createTodo };
       };
 
-      const { result, unmount } = renderHook(
-        () => useCreateTodo(),
-        { wrapper: ({ children }) => (
-          <MockedProvider mocks={mocks}>
-            {children}
-          </MockedProvider>
-        )},
-      );
+      const { result, unmount } = renderHook(() => useCreateTodo(), {
+        wrapper: ({ children }) => (
+          <MockedProvider mocks={mocks}>{children}</MockedProvider>
+        ),
+      });
 
       unmount();
 
       await act(async () => {
         await result.current.createTodo({ variables });
         await result.current.reset();
-      })
+      });
 
       expect(errorSpy).not.toHaveBeenCalled();
       errorSpy.mockRestore();
     });
 
-    it('should resolve mutate function promise with mutation results', async () => {
+    it("should resolve mutate function promise with mutation results", async () => {
       const variables = {
-        description: 'Get milk!'
+        description: "Get milk!",
       };
 
       const mocks = [
         {
           request: {
             query: CREATE_TODO_MUTATION,
-            variables
+            variables,
           },
-          result: { data: CREATE_TODO_RESULT }
-        }
+          result: { data: CREATE_TODO_RESULT },
+        },
       ];
 
-      const { result } = renderHook(
-        () => useMutation(CREATE_TODO_MUTATION),
-        { wrapper: ({ children }) => (
-          <MockedProvider mocks={mocks}>
-            {children}
-          </MockedProvider>
-        )},
-      );
+      const { result } = renderHook(() => useMutation(CREATE_TODO_MUTATION), {
+        wrapper: ({ children }) => (
+          <MockedProvider mocks={mocks}>{children}</MockedProvider>
+        ),
+      });
 
       await act(async () => {
         await expect(result.current[0]({ variables })).resolves.toEqual({
@@ -282,10 +292,10 @@ describe('useMutation Hook', () => {
       });
     });
 
-    describe('mutate function upon error', () => {
-      it('resolves with the resulting data and errors', async () => {
+    describe("mutate function upon error", () => {
+      it("resolves with the resulting data and errors", async () => {
         const variables = {
-          description: 'Get milk!'
+          description: "Get milk!",
         };
 
         const mocks = [
@@ -298,17 +308,17 @@ describe('useMutation Hook', () => {
               data: CREATE_TODO_RESULT,
               errors: [new GraphQLError(CREATE_TODO_ERROR)],
             },
-          }
+          },
         ];
 
         const onError = jest.fn();
         const { result } = renderHook(
           () => useMutation(CREATE_TODO_MUTATION, { onError }),
-          { wrapper: ({ children }) => (
-            <MockedProvider mocks={mocks}>
-              {children}
-            </MockedProvider>
-          )},
+          {
+            wrapper: ({ children }) => (
+              <MockedProvider mocks={mocks}>{children}</MockedProvider>
+            ),
+          }
         );
 
         const createTodo = result.current[0];
@@ -323,9 +333,9 @@ describe('useMutation Hook', () => {
         expect(onError.mock.calls[0][0].message).toBe(CREATE_TODO_ERROR);
       });
 
-      it('should reject when there’s only an error and no error policy is set', async () => {
+      it("should reject when there’s only an error and no error policy is set", async () => {
         const variables = {
-          description: 'Get milk!'
+          description: "Get milk!",
         };
 
         const mocks = [
@@ -337,17 +347,14 @@ describe('useMutation Hook', () => {
             result: {
               errors: [new GraphQLError(CREATE_TODO_ERROR)],
             },
-          }
+          },
         ];
 
-        const { result } = renderHook(
-          () => useMutation(CREATE_TODO_MUTATION),
-          { wrapper: ({ children }) => (
-            <MockedProvider mocks={mocks}>
-              {children}
-            </MockedProvider>
-          )},
-        );
+        const { result } = renderHook(() => useMutation(CREATE_TODO_MUTATION), {
+          wrapper: ({ children }) => (
+            <MockedProvider mocks={mocks}>{children}</MockedProvider>
+          ),
+        });
 
         const createTodo = result.current[0];
         let fetchError: any;
@@ -368,62 +375,64 @@ describe('useMutation Hook', () => {
 
       it(`should reject when errorPolicy is 'none'`, async () => {
         const variables = {
-          description: 'Get milk!'
+          description: "Get milk!",
         };
 
         const mocks = [
           {
             request: {
               query: CREATE_TODO_MUTATION,
-              variables
+              variables,
             },
             result: {
               data: CREATE_TODO_RESULT,
               errors: [new GraphQLError(CREATE_TODO_ERROR)],
             },
-          }
+          },
         ];
 
         const { result } = renderHook(
-          () => useMutation(CREATE_TODO_MUTATION, { errorPolicy: 'none' }),
-          { wrapper: ({ children }) => (
-            <MockedProvider mocks={mocks}>
-              {children}
-            </MockedProvider>
-          )},
+          () => useMutation(CREATE_TODO_MUTATION, { errorPolicy: "none" }),
+          {
+            wrapper: ({ children }) => (
+              <MockedProvider mocks={mocks}>{children}</MockedProvider>
+            ),
+          }
         );
 
         const createTodo = result.current[0];
         await act(async () => {
-          await expect(createTodo({ variables })).rejects.toThrow(CREATE_TODO_ERROR);
+          await expect(createTodo({ variables })).rejects.toThrow(
+            CREATE_TODO_ERROR
+          );
         });
       });
 
       it(`should resolve with 'data' and 'error' properties when errorPolicy is 'all'`, async () => {
         const variables = {
-          description: 'Get milk!'
+          description: "Get milk!",
         };
 
         const mocks = [
           {
             request: {
               query: CREATE_TODO_MUTATION,
-              variables
+              variables,
             },
             result: {
               data: CREATE_TODO_RESULT,
               errors: [new GraphQLError(CREATE_TODO_ERROR)],
             },
-          }
+          },
         ];
 
         const { result } = renderHook(
-          () => useMutation(CREATE_TODO_MUTATION, { errorPolicy: 'all' }),
-          { wrapper: ({ children }) => (
-            <MockedProvider mocks={mocks}>
-              {children}
-            </MockedProvider>
-          )},
+          () => useMutation(CREATE_TODO_MUTATION, { errorPolicy: "all" }),
+          {
+            wrapper: ({ children }) => (
+              <MockedProvider mocks={mocks}>{children}</MockedProvider>
+            ),
+          }
         );
 
         const createTodo = result.current[0];
@@ -439,32 +448,37 @@ describe('useMutation Hook', () => {
 
       it(`should call onError when errorPolicy is 'all'`, async () => {
         const variables = {
-          description: 'Get milk!'
+          description: "Get milk!",
         };
 
         const mocks = [
           {
             request: {
               query: CREATE_TODO_MUTATION,
-              variables
+              variables,
             },
             result: {
               data: CREATE_TODO_RESULT,
               errors: [new GraphQLError(CREATE_TODO_ERROR)],
             },
-          }
+          },
         ];
 
         const onError = jest.fn();
         const onCompleted = jest.fn();
 
         const { result } = renderHook(
-          () => useMutation(CREATE_TODO_MUTATION, { errorPolicy: 'all', onError, onCompleted }),
-          { wrapper: ({ children }) => (
-            <MockedProvider mocks={mocks}>
-              {children}
-            </MockedProvider>
-          )},
+          () =>
+            useMutation(CREATE_TODO_MUTATION, {
+              errorPolicy: "all",
+              onError,
+              onCompleted,
+            }),
+          {
+            wrapper: ({ children }) => (
+              <MockedProvider mocks={mocks}>{children}</MockedProvider>
+            ),
+          }
         );
 
         const createTodo = result.current[0];
@@ -482,10 +496,11 @@ describe('useMutation Hook', () => {
       });
 
       it(`should ignore errors when errorPolicy is 'ignore'`, async () => {
-        const errorMock = jest.spyOn(console, "error")
+        const errorMock = jest
+          .spyOn(console, "error")
           .mockImplementation(() => {});
         const variables = {
-          description: 'Get milk!'
+          description: "Get milk!",
         };
 
         const mocks = [
@@ -497,16 +512,16 @@ describe('useMutation Hook', () => {
             result: {
               errors: [new GraphQLError(CREATE_TODO_ERROR)],
             },
-          }
+          },
         ];
 
         const { result } = renderHook(
           () => useMutation(CREATE_TODO_MUTATION, { errorPolicy: "ignore" }),
-          { wrapper: ({ children }) => (
-            <MockedProvider mocks={mocks}>
-              {children}
-            </MockedProvider>
-          )},
+          {
+            wrapper: ({ children }) => (
+              <MockedProvider mocks={mocks}>{children}</MockedProvider>
+            ),
+          }
         );
 
         const createTodo = result.current[0];
@@ -523,7 +538,7 @@ describe('useMutation Hook', () => {
 
       it(`should not call onError when errorPolicy is 'ignore'`, async () => {
         const variables = {
-          description: 'Get milk!'
+          description: "Get milk!",
         };
 
         const mocks = [
@@ -535,18 +550,22 @@ describe('useMutation Hook', () => {
             result: {
               errors: [new GraphQLError(CREATE_TODO_ERROR)],
             },
-          }
+          },
         ];
 
         const onError = jest.fn();
 
         const { result } = renderHook(
-          () => useMutation(CREATE_TODO_MUTATION, { errorPolicy: "ignore", onError }),
-          { wrapper: ({ children }) => (
-            <MockedProvider mocks={mocks}>
-              {children}
-            </MockedProvider>
-          )},
+          () =>
+            useMutation(CREATE_TODO_MUTATION, {
+              errorPolicy: "ignore",
+              onError,
+            }),
+          {
+            wrapper: ({ children }) => (
+              <MockedProvider mocks={mocks}>{children}</MockedProvider>
+            ),
+          }
         );
 
         const createTodo = result.current[0];
@@ -560,39 +579,30 @@ describe('useMutation Hook', () => {
       });
     });
 
-    it('should return the current client instance in the result object', async () => {
-      const { result } = renderHook(
-        () => useMutation(CREATE_TODO_MUTATION),
-        { wrapper: ({ children }) => (
-          <MockedProvider>
-            {children}
-          </MockedProvider>
-        )},
-      );
+    it("should return the current client instance in the result object", async () => {
+      const { result } = renderHook(() => useMutation(CREATE_TODO_MUTATION), {
+        wrapper: ({ children }) => <MockedProvider>{children}</MockedProvider>,
+      });
       expect(result.current[1].client).toBeInstanceOf(ApolloClient);
     });
 
-    it ('should call client passed to execute function', async () => {
-      const { result } = renderHook(
-        () => useMutation(CREATE_TODO_MUTATION),
-        { wrapper: ({ children }) => (
-          <MockedProvider>
-            {children}
-          </MockedProvider>
-        )},
-      );
+    it("should call client passed to execute function", async () => {
+      const { result } = renderHook(() => useMutation(CREATE_TODO_MUTATION), {
+        wrapper: ({ children }) => <MockedProvider>{children}</MockedProvider>,
+      });
 
       const link = mockSingleLink();
       const cache = new InMemoryCache();
       const client = new ApolloClient({
         cache,
-        link
+        link,
       });
 
-      const mutateSpy = jest.spyOn(client, 'mutate').mockImplementation(
-        () => new Promise((resolve) => {
-          resolve({ data: CREATE_TODO_RESULT })
-        })
+      const mutateSpy = jest.spyOn(client, "mutate").mockImplementation(
+        () =>
+          new Promise((resolve) => {
+            resolve({ data: CREATE_TODO_RESULT });
+          })
       );
 
       const createTodo = result.current[0];
@@ -603,13 +613,13 @@ describe('useMutation Hook', () => {
       expect(mutateSpy).toHaveBeenCalledTimes(1);
     });
 
-    it('should merge provided variables', async () => {
+    it("should merge provided variables", async () => {
       const CREATE_TODO_DATA = {
         createTodo: {
           id: 1,
-          description: 'Get milk!',
-          priority: 'Low',
-          __typename: 'Todo',
+          description: "Get milk!",
+          priority: "Low",
+          __typename: "Todo",
         },
       };
       const mocks = [
@@ -617,46 +627,49 @@ describe('useMutation Hook', () => {
           request: {
             query: CREATE_TODO_MUTATION,
             variables: {
-              priority: 'Low',
-              description: 'Get milk.'
-            }
+              priority: "Low",
+              description: "Get milk.",
+            },
           },
           result: {
             data: CREATE_TODO_DATA,
-          }
-        }
+          },
+        },
       ];
 
       const { result } = renderHook(
-        () => useMutation<
-          { createTodo: Todo },
-          { priority?: string, description?: string }
-        >(CREATE_TODO_MUTATION, {
-          variables: { priority: 'Low' }
-        }),
-        { wrapper: ({ children }) => (
-          <MockedProvider mocks={mocks}>
-            {children}
-          </MockedProvider>
-        )},
+        () =>
+          useMutation<
+            { createTodo: Todo },
+            { priority?: string; description?: string }
+          >(CREATE_TODO_MUTATION, {
+            variables: { priority: "Low" },
+          }),
+        {
+          wrapper: ({ children }) => (
+            <MockedProvider mocks={mocks}>{children}</MockedProvider>
+          ),
+        }
       );
 
       const createTodo = result.current[0];
       let fetchResult: any;
       await act(async () => {
-        fetchResult = await createTodo({ variables: { description: 'Get milk.' }});
+        fetchResult = await createTodo({
+          variables: { description: "Get milk." },
+        });
       });
 
       expect(fetchResult).toEqual({ data: CREATE_TODO_DATA });
     });
 
-    it('should be possible to reset the mutation', async () => {
+    it("should be possible to reset the mutation", async () => {
       const CREATE_TODO_DATA = {
         createTodo: {
           id: 1,
-          priority: 'Low',
-          description: 'Get milk!',
-          __typename: 'Todo',
+          priority: "Low",
+          description: "Get milk!",
+          __typename: "Todo",
         },
       };
 
@@ -665,33 +678,34 @@ describe('useMutation Hook', () => {
           request: {
             query: CREATE_TODO_MUTATION,
             variables: {
-              priority: 'Low',
-              description: 'Get milk.',
-            }
+              priority: "Low",
+              description: "Get milk.",
+            },
           },
           result: {
             data: CREATE_TODO_DATA,
-          }
-        }
+          },
+        },
       ];
 
       const { result } = renderHook(
-        () => useMutation<
-          { createTodo: Todo },
-          { priority: string, description: string }
-        >(CREATE_TODO_MUTATION),
-        { wrapper: ({ children }) => (
-          <MockedProvider mocks={mocks}>
-            {children}
-          </MockedProvider>
-        )},
+        () =>
+          useMutation<
+            { createTodo: Todo },
+            { priority: string; description: string }
+          >(CREATE_TODO_MUTATION),
+        {
+          wrapper: ({ children }) => (
+            <MockedProvider mocks={mocks}>{children}</MockedProvider>
+          ),
+        }
       );
 
       const createTodo = result.current[0];
       let fetchResult: any;
       await act(async () => {
         fetchResult = await createTodo({
-          variables: { priority: 'Low', description: 'Get milk.' },
+          variables: { priority: "Low", description: "Get milk." },
         });
       });
 
@@ -701,27 +715,30 @@ describe('useMutation Hook', () => {
         result.current[1].reset();
       });
 
-      await waitFor(() => {
-        expect(result.current[1].data).toBe(undefined);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current[1].data).toBe(undefined);
+        },
+        { interval: 1 }
+      );
     });
   });
 
-  describe('Callbacks', () => {
-    it('should allow passing an onCompleted handler to the execution function', async () => {
+  describe("Callbacks", () => {
+    it("should allow passing an onCompleted handler to the execution function", async () => {
       const CREATE_TODO_DATA = {
         createTodo: {
           id: 1,
-          priority: 'Low',
-          description: 'Get milk!',
-          __typename: 'Todo',
+          priority: "Low",
+          description: "Get milk!",
+          __typename: "Todo",
         },
       };
 
       const variables = {
-        priority: 'Low',
-        description: 'Get milk.',
-      }
+        priority: "Low",
+        description: "Get milk.",
+      };
 
       const mocks = [
         {
@@ -732,19 +749,20 @@ describe('useMutation Hook', () => {
           result: {
             data: CREATE_TODO_DATA,
           },
-        }
+        },
       ];
 
       const { result } = renderHook(
-        () => useMutation<
-          { createTodo: Todo },
-          { priority: string, description: string }
-        >(CREATE_TODO_MUTATION),
-        { wrapper: ({ children }) => (
-          <MockedProvider mocks={mocks}>
-            {children}
-          </MockedProvider>
-        )},
+        () =>
+          useMutation<
+            { createTodo: Todo },
+            { priority: string; description: string }
+          >(CREATE_TODO_MUTATION),
+        {
+          wrapper: ({ children }) => (
+            <MockedProvider mocks={mocks}>{children}</MockedProvider>
+          ),
+        }
       );
 
       const createTodo = result.current[0];
@@ -762,23 +780,26 @@ describe('useMutation Hook', () => {
       expect(fetchResult).toEqual({ data: CREATE_TODO_DATA });
       expect(result.current[1].data).toEqual(CREATE_TODO_DATA);
       expect(onCompleted).toHaveBeenCalledTimes(1);
-      expect(onCompleted).toHaveBeenCalledWith(CREATE_TODO_DATA, expect.objectContaining({variables}));
+      expect(onCompleted).toHaveBeenCalledWith(
+        CREATE_TODO_DATA,
+        expect.objectContaining({ variables })
+      );
       expect(onError).toHaveBeenCalledTimes(0);
     });
 
-    it('prefers the onCompleted handler passed to the execution function rather than the hook', async () => {
+    it("prefers the onCompleted handler passed to the execution function rather than the hook", async () => {
       const CREATE_TODO_DATA = {
         createTodo: {
           id: 1,
-          priority: 'Low',
-          description: 'Get milk!',
-          __typename: 'Todo',
+          priority: "Low",
+          description: "Get milk!",
+          __typename: "Todo",
         },
       };
       const variables = {
-        priority: 'Low',
-        description: 'Get milk.',
-      }
+        priority: "Low",
+        description: "Get milk.",
+      };
       const mocks = [
         {
           request: {
@@ -786,22 +807,21 @@ describe('useMutation Hook', () => {
             variables,
           },
           result: {
-            data: CREATE_TODO_DATA
+            data: CREATE_TODO_DATA,
           },
-        }
+        },
       ];
 
       const hookOnCompleted = jest.fn();
 
       const { result } = renderHook(
-        () => useMutation(CREATE_TODO_MUTATION, { onCompleted: hookOnCompleted }),
+        () =>
+          useMutation(CREATE_TODO_MUTATION, { onCompleted: hookOnCompleted }),
         {
           wrapper: ({ children }) => (
-            <MockedProvider mocks={mocks}>
-              {children}
-            </MockedProvider>
-          )
-        },
+            <MockedProvider mocks={mocks}>{children}</MockedProvider>
+          ),
+        }
       );
 
       const [createTodo] = result.current;
@@ -814,12 +834,12 @@ describe('useMutation Hook', () => {
       expect(hookOnCompleted).not.toHaveBeenCalled();
     });
 
-    it('should allow passing an onError handler to the execution function', async () => {
+    it("should allow passing an onError handler to the execution function", async () => {
       const errors = [new GraphQLError(CREATE_TODO_ERROR)];
       const variables = {
-        priority: 'Low',
-        description: 'Get milk.',
-      }
+        priority: "Low",
+        description: "Get milk.",
+      };
       const mocks = [
         {
           request: {
@@ -829,19 +849,20 @@ describe('useMutation Hook', () => {
           result: {
             errors,
           },
-        }
+        },
       ];
 
       const { result } = renderHook(
-        () => useMutation<
-          { createTodo: Todo },
-          { priority: string, description: string }
-        >(CREATE_TODO_MUTATION),
-        { wrapper: ({ children }) => (
-          <MockedProvider mocks={mocks}>
-            {children}
-          </MockedProvider>
-        )},
+        () =>
+          useMutation<
+            { createTodo: Todo },
+            { priority: string; description: string }
+          >(CREATE_TODO_MUTATION),
+        {
+          wrapper: ({ children }) => (
+            <MockedProvider mocks={mocks}>{children}</MockedProvider>
+          ),
+        }
       );
 
       const createTodo = result.current[0];
@@ -864,14 +885,17 @@ describe('useMutation Hook', () => {
 
       expect(onCompleted).toHaveBeenCalledTimes(0);
       expect(onError).toHaveBeenCalledTimes(1);
-      expect(onError).toHaveBeenCalledWith(errors[0], expect.objectContaining({variables}));
+      expect(onError).toHaveBeenCalledWith(
+        errors[0],
+        expect.objectContaining({ variables })
+      );
     });
 
-    it('prefers the onError handler passed to the execution function instead of the hook', async () => {
+    it("prefers the onError handler passed to the execution function instead of the hook", async () => {
       const variables = {
-        priority: 'Low',
-        description: 'Get milk.',
-      }
+        priority: "Low",
+        description: "Get milk.",
+      };
       const mocks = [
         {
           request: {
@@ -881,7 +905,7 @@ describe('useMutation Hook', () => {
           result: {
             errors: [new GraphQLError(CREATE_TODO_ERROR)],
           },
-        }
+        },
       ];
 
       const hookOnError = jest.fn();
@@ -890,11 +914,9 @@ describe('useMutation Hook', () => {
         () => useMutation(CREATE_TODO_MUTATION, { onError: hookOnError }),
         {
           wrapper: ({ children }) => (
-            <MockedProvider mocks={mocks}>
-              {children}
-            </MockedProvider>
-          )
-        },
+            <MockedProvider mocks={mocks}>{children}</MockedProvider>
+          ),
+        }
       );
 
       const [createTodo] = result.current;
@@ -907,12 +929,12 @@ describe('useMutation Hook', () => {
       expect(hookOnError).not.toHaveBeenCalled();
     });
 
-    it('should allow updating onError while mutation is executing', async () => {
+    it("should allow updating onError while mutation is executing", async () => {
       const errors = [new GraphQLError(CREATE_TODO_ERROR)];
       const variables = {
-        priority: 'Low',
-        description: 'Get milk.',
-      }
+        priority: "Low",
+        description: "Get milk.",
+      };
       const mocks = [
         {
           request: {
@@ -922,7 +944,7 @@ describe('useMutation Hook', () => {
           result: {
             errors,
           },
-        }
+        },
       ];
 
       const onCompleted = jest.fn();
@@ -932,17 +954,15 @@ describe('useMutation Hook', () => {
         ({ onCompleted, onError }) => {
           return useMutation<
             { createTodo: Todo },
-            { priority: string, description: string }
+            { priority: string; description: string }
           >(CREATE_TODO_MUTATION, { onCompleted, onError });
         },
         {
           wrapper: ({ children }) => (
-            <MockedProvider mocks={mocks}>
-              {children}
-            </MockedProvider>
+            <MockedProvider mocks={mocks}>{children}</MockedProvider>
           ),
           initialProps: { onCompleted, onError },
-        },
+        }
       );
 
       const createTodo = result.current[0];
@@ -965,34 +985,37 @@ describe('useMutation Hook', () => {
       expect(onCompleted).toHaveBeenCalledTimes(0);
       expect(onError).toHaveBeenCalledTimes(0);
       expect(onError1).toHaveBeenCalledTimes(1);
-      expect(onError1).toHaveBeenCalledWith(errors[0], expect.objectContaining({variables}));
+      expect(onError1).toHaveBeenCalledWith(
+        errors[0],
+        expect.objectContaining({ variables })
+      );
     });
 
-    it('should never allow onCompleted handler to be stale', async () => {
+    it("should never allow onCompleted handler to be stale", async () => {
       const CREATE_TODO_DATA = {
         createTodo: {
           id: 1,
-          priority: 'Low',
-          description: 'Get milk!',
-          __typename: 'Todo',
+          priority: "Low",
+          description: "Get milk!",
+          __typename: "Todo",
         },
       };
 
       const variables = {
-        priority: 'Low',
-        description: 'Get milk2.',
-      }
+        priority: "Low",
+        description: "Get milk2.",
+      };
 
       const mocks = [
         {
           request: {
             query: CREATE_TODO_MUTATION,
-            variables
+            variables,
           },
           result: {
             data: CREATE_TODO_DATA,
           },
-        }
+        },
       ];
 
       const onCompleted = jest.fn();
@@ -1000,17 +1023,15 @@ describe('useMutation Hook', () => {
         ({ onCompleted }) => {
           return useMutation<
             { createTodo: Todo },
-            { priority: string, description: string }
+            { priority: string; description: string }
           >(CREATE_TODO_MUTATION, { onCompleted });
         },
         {
           wrapper: ({ children }) => (
-            <MockedProvider mocks={mocks}>
-              {children}
-            </MockedProvider>
+            <MockedProvider mocks={mocks}>{children}</MockedProvider>
           ),
           initialProps: { onCompleted },
-        },
+        }
       );
 
       const onCompleted1 = jest.fn();
@@ -1027,34 +1048,37 @@ describe('useMutation Hook', () => {
       expect(result.current[1].data).toEqual(CREATE_TODO_DATA);
       expect(onCompleted).toHaveBeenCalledTimes(0);
       expect(onCompleted1).toHaveBeenCalledTimes(1);
-      expect(onCompleted1).toHaveBeenCalledWith(CREATE_TODO_DATA, expect.objectContaining({variables}));
+      expect(onCompleted1).toHaveBeenCalledWith(
+        CREATE_TODO_DATA,
+        expect.objectContaining({ variables })
+      );
     });
 
-    it('should allow updating onCompleted while mutation is executing', async () => {
+    it("should allow updating onCompleted while mutation is executing", async () => {
       const CREATE_TODO_DATA = {
         createTodo: {
           id: 1,
-          priority: 'Low',
-          description: 'Get milk!',
-          __typename: 'Todo',
+          priority: "Low",
+          description: "Get milk!",
+          __typename: "Todo",
         },
       };
 
       const variables = {
-        priority: 'Low',
-        description: 'Get milk2.',
-      }
+        priority: "Low",
+        description: "Get milk2.",
+      };
 
       const mocks = [
         {
           request: {
             query: CREATE_TODO_MUTATION,
-            variables
+            variables,
           },
           result: {
             data: CREATE_TODO_DATA,
           },
-        }
+        },
       ];
 
       const onCompleted = jest.fn();
@@ -1063,17 +1087,15 @@ describe('useMutation Hook', () => {
         ({ onCompleted }) => {
           return useMutation<
             { createTodo: Todo },
-            { priority: string, description: string }
+            { priority: string; description: string }
           >(CREATE_TODO_MUTATION, { onCompleted });
         },
         {
           wrapper: ({ children }) => (
-            <MockedProvider mocks={mocks}>
-              {children}
-            </MockedProvider>
+            <MockedProvider mocks={mocks}>{children}</MockedProvider>
           ),
           initialProps: { onCompleted },
-        },
+        }
       );
 
       const createTodo = result.current[0];
@@ -1092,24 +1114,30 @@ describe('useMutation Hook', () => {
       expect(result.current[1].data).toEqual(CREATE_TODO_DATA);
       expect(onCompleted).toHaveBeenCalledTimes(0);
       expect(onCompleted1).toHaveBeenCalledTimes(1);
-      expect(onCompleted1).toHaveBeenCalledWith(CREATE_TODO_DATA, expect.objectContaining({variables}));
+      expect(onCompleted1).toHaveBeenCalledWith(
+        CREATE_TODO_DATA,
+        expect.objectContaining({ variables })
+      );
     });
   });
 
-  describe('ROOT_MUTATION cache data', () => {
+  describe("ROOT_MUTATION cache data", () => {
     const startTime = Date.now();
-    const link = new ApolloLink(operation => new Observable(observer => {
-      observer.next({
-        data: {
-          __typename: "Mutation",
-          doSomething: {
-            __typename: "MutationPayload",
-            time: startTime,
-          },
-        },
-      });
-      observer.complete();
-    }));
+    const link = new ApolloLink(
+      (operation) =>
+        new Observable((observer) => {
+          observer.next({
+            data: {
+              __typename: "Mutation",
+              doSomething: {
+                __typename: "MutationPayload",
+                time: startTime,
+              },
+            },
+          });
+          observer.complete();
+        })
+    );
 
     const mutation = gql`
       mutation DoSomething {
@@ -1119,7 +1147,7 @@ describe('useMutation Hook', () => {
       }
     `;
 
-    it('should be removed by default after the mutation', async () => {
+    it("should be removed by default after the mutation", async () => {
       let timeReadCount = 0;
       let timeMergeCount = 0;
       const client = new ApolloClient({
@@ -1145,31 +1173,28 @@ describe('useMutation Hook', () => {
         }),
       });
 
-      const { result } = renderHook(
-        () => useMutation(mutation),
-        { wrapper: ({ children }) => (
-          <ApolloProvider client={client}>
-            {children}
-          </ApolloProvider>
-        )},
-      );
+      const { result } = renderHook(() => useMutation(mutation), {
+        wrapper: ({ children }) => (
+          <ApolloProvider client={client}>{children}</ApolloProvider>
+        ),
+      });
 
       expect(result.current[1].loading).toBe(false);
       expect(result.current[1].called).toBe(false);
       expect(result.current[1].data).toBe(undefined);
       const mutate = result.current[0];
 
-      let mutationResult: any
+      let mutationResult: any;
       act(() => {
         mutationResult = mutate({
-          update(cache, {
-            data: {
-              doSomething: {
-                __typename,
-                time,
+          update(
+            cache,
+            {
+              data: {
+                doSomething: { __typename, time },
               },
-            },
-          }) {
+            }
+          ) {
             expect(__typename).toBe("MutationPayload");
             expect(time).toBeInstanceOf(Date);
             expect(time.getTime()).toBe(startTime);
@@ -1188,28 +1213,27 @@ describe('useMutation Hook', () => {
               },
             });
           },
-        }).then(({
-          data: {
-            doSomething: {
-              __typename,
-              time,
-            },
-          },
-        }) => {
-          expect(__typename).toBe("MutationPayload");
-          expect(time).toBeInstanceOf(Date);
-          expect(time.getTime()).toBe(startTime);
-          expect(timeReadCount).toBe(1);
-          expect(timeMergeCount).toBe(1);
-          // The contents of the ROOT_MUTATION object exist only briefly,
-          // for the duration of the mutation update, and are removed after
-          // the mutation write is finished.
-          expect(client.cache.extract()).toEqual({
-            ROOT_MUTATION: {
-              __typename: "Mutation",
+        }).then(
+          ({
+            data: {
+              doSomething: { __typename, time },
             },
-          });
-        });
+          }) => {
+            expect(__typename).toBe("MutationPayload");
+            expect(time).toBeInstanceOf(Date);
+            expect(time.getTime()).toBe(startTime);
+            expect(timeReadCount).toBe(1);
+            expect(timeMergeCount).toBe(1);
+            // The contents of the ROOT_MUTATION object exist only briefly,
+            // for the duration of the mutation update, and are removed after
+            // the mutation write is finished.
+            expect(client.cache.extract()).toEqual({
+              ROOT_MUTATION: {
+                __typename: "Mutation",
+              },
+            });
+          }
+        );
         mutationResult.catch(() => {});
       });
 
@@ -1224,19 +1248,16 @@ describe('useMutation Hook', () => {
       expect(result.current[1].data).toBeDefined();
 
       const {
-        doSomething: {
-          __typename,
-          time,
-        },
+        doSomething: { __typename, time },
       } = result.current[1].data;
-      expect(__typename).toBe('MutationPayload');
+      expect(__typename).toBe("MutationPayload");
       expect(time).toBeInstanceOf(Date);
       expect(time.getTime()).toBe(startTime);
 
       await expect(mutationResult).resolves.toBe(undefined);
     });
 
-    it('can be preserved by passing keepRootFields: true', async () => {
+    it("can be preserved by passing keepRootFields: true", async () => {
       let timeReadCount = 0;
       let timeMergeCount = 0;
 
@@ -1264,14 +1285,15 @@ describe('useMutation Hook', () => {
       });
 
       const { result } = renderHook(
-        () => useMutation(mutation, {
-          keepRootFields: true,
-        }),
-        { wrapper: ({ children }) => (
-          <ApolloProvider client={client}>
-            {children}
-          </ApolloProvider>
-        )},
+        () =>
+          useMutation(mutation, {
+            keepRootFields: true,
+          }),
+        {
+          wrapper: ({ children }) => (
+            <ApolloProvider client={client}>{children}</ApolloProvider>
+          ),
+        }
       );
 
       expect(result.current[1].loading).toBe(false);
@@ -1279,17 +1301,17 @@ describe('useMutation Hook', () => {
       expect(result.current[1].data).toBe(undefined);
       const mutate = result.current[0];
 
-      let mutationResult: any
+      let mutationResult: any;
       act(() => {
         mutationResult = mutate({
-          update(cache, {
-            data: {
-              doSomething: {
-                __typename,
-                time,
+          update(
+            cache,
+            {
+              data: {
+                doSomething: { __typename, time },
               },
-            },
-          }) {
+            }
+          ) {
             expect(__typename).toBe("MutationPayload");
             expect(time).toBeInstanceOf(Date);
             expect(time.getTime()).toBe(startTime);
@@ -1305,29 +1327,28 @@ describe('useMutation Hook', () => {
               },
             });
           },
-        }).then(({
-          data: {
-            doSomething: {
-              __typename,
-              time,
+        }).then(
+          ({
+            data: {
+              doSomething: { __typename, time },
             },
-          },
-        }) => {
-          expect(__typename).toBe("MutationPayload");
-          expect(time).toBeInstanceOf(Date);
-          expect(time.getTime()).toBe(startTime);
-          expect(timeReadCount).toBe(1);
-          expect(timeMergeCount).toBe(1);
-          expect(client.cache.extract()).toEqual({
-            ROOT_MUTATION: {
-              __typename: "Mutation",
-              doSomething: {
-                __typename: "MutationPayload",
-                time: startTime,
+          }) => {
+            expect(__typename).toBe("MutationPayload");
+            expect(time).toBeInstanceOf(Date);
+            expect(time.getTime()).toBe(startTime);
+            expect(timeReadCount).toBe(1);
+            expect(timeMergeCount).toBe(1);
+            expect(client.cache.extract()).toEqual({
+              ROOT_MUTATION: {
+                __typename: "Mutation",
+                doSomething: {
+                  __typename: "MutationPayload",
+                  time: startTime,
+                },
               },
-            },
-          });
-        });
+            });
+          }
+        );
       });
 
       mutationResult.catch(() => {});
@@ -1342,12 +1363,9 @@ describe('useMutation Hook', () => {
       expect(result.current[1].data).toBeDefined();
 
       const {
-        doSomething: {
-          __typename,
-          time,
-        },
+        doSomething: { __typename, time },
       } = result.current[1].data;
-      expect(__typename).toBe('MutationPayload');
+      expect(__typename).toBe("MutationPayload");
       expect(time).toBeInstanceOf(Date);
       expect(time.getTime()).toBe(startTime);
 
@@ -1355,31 +1373,28 @@ describe('useMutation Hook', () => {
     });
   });
 
-  describe('Update function', () => {
-    it('should be called with the provided variables', async () => {
-      const variables = { description: 'Get milk!' };
+  describe("Update function", () => {
+    it("should be called with the provided variables", async () => {
+      const variables = { description: "Get milk!" };
 
       const mocks = [
         {
           request: {
             query: CREATE_TODO_MUTATION,
-            variables
+            variables,
           },
-          result: { data: CREATE_TODO_RESULT }
-        }
+          result: { data: CREATE_TODO_RESULT },
+        },
       ];
 
       let variablesMatched = false;
       const Component = () => {
-        const [createTodo] = useMutation(
-          CREATE_TODO_MUTATION,
-          {
-            update(_, __, options) {
-              expect(options.variables).toEqual(variables);
-              variablesMatched = true;
-            }
-          }
-        );
+        const [createTodo] = useMutation(CREATE_TODO_MUTATION, {
+          update(_, __, options) {
+            expect(options.variables).toEqual(variables);
+            variablesMatched = true;
+          },
+        });
 
         useEffect(() => {
           createTodo({ variables });
@@ -1397,35 +1412,36 @@ describe('useMutation Hook', () => {
       await waitFor(() => expect(variablesMatched).toBe(true));
     });
 
-    itAsync('should be called with the provided context', (resolve, reject) => {
+    itAsync("should be called with the provided context", (resolve, reject) => {
       const context = { id: 3 };
 
       const variables = {
-        description: 'Get milk!'
+        description: "Get milk!",
       };
 
       const mocks = [
         {
           request: {
             query: CREATE_TODO_MUTATION,
-            variables
+            variables,
           },
-          result: { data: CREATE_TODO_RESULT }
-        }
+          result: { data: CREATE_TODO_RESULT },
+        },
       ];
 
       let foundContext = false;
       const Component = () => {
-        const [createTodo] = useMutation<Todo, { description: string }, { id: number }>(
-          CREATE_TODO_MUTATION,
-          {
-            context,
-            update(_, __, options) {
-              expect(options.context).toEqual(context);
-              foundContext = true;
-            }
-          }
-        );
+        const [createTodo] = useMutation<
+          Todo,
+          { description: string },
+          { id: number }
+        >(CREATE_TODO_MUTATION, {
+          context,
+          update(_, __, options) {
+            expect(options.context).toEqual(context);
+            foundContext = true;
+          },
+        });
 
         useEffect(() => {
           createTodo({ variables });
@@ -1445,33 +1461,30 @@ describe('useMutation Hook', () => {
       }).then(resolve, reject);
     });
 
-    describe('If context is not provided', () => {
-      itAsync('should be undefined', (resolve, reject) => {
+    describe("If context is not provided", () => {
+      itAsync("should be undefined", (resolve, reject) => {
         const variables = {
-          description: 'Get milk!'
+          description: "Get milk!",
         };
 
         const mocks = [
           {
             request: {
               query: CREATE_TODO_MUTATION,
-              variables
+              variables,
             },
-            result: { data: CREATE_TODO_RESULT }
-          }
+            result: { data: CREATE_TODO_RESULT },
+          },
         ];
 
         let checkedContext = false;
         const Component = () => {
-          const [createTodo] = useMutation(
-            CREATE_TODO_MUTATION,
-            {
-              update(_, __, options) {
-                expect(options.context).toBeUndefined();
-                checkedContext = true;
-              }
-            }
-          );
+          const [createTodo] = useMutation(CREATE_TODO_MUTATION, {
+            update(_, __, options) {
+              expect(options.context).toBeUndefined();
+              checkedContext = true;
+            },
+          });
 
           useEffect(() => {
             createTodo({ variables });
@@ -1493,123 +1506,123 @@ describe('useMutation Hook', () => {
     });
   });
 
-  describe('Optimistic response', () => {
-    itAsync('should support optimistic response handling', async (resolve, reject) => {
-      const optimisticResponse = {
-        __typename: 'Mutation',
-        createTodo: {
-          id: 1,
-          description: 'TEMPORARY',
-          priority: 'High',
-          __typename: 'Todo'
-        }
-      };
+  describe("Optimistic response", () => {
+    itAsync(
+      "should support optimistic response handling",
+      async (resolve, reject) => {
+        const optimisticResponse = {
+          __typename: "Mutation",
+          createTodo: {
+            id: 1,
+            description: "TEMPORARY",
+            priority: "High",
+            __typename: "Todo",
+          },
+        };
 
-      const variables = {
-        description: 'Get milk!'
-      };
+        const variables = {
+          description: "Get milk!",
+        };
 
-      const mocks = [
-        {
-          request: {
-            query: CREATE_TODO_MUTATION,
-            variables
+        const mocks = [
+          {
+            request: {
+              query: CREATE_TODO_MUTATION,
+              variables,
+            },
+            result: { data: CREATE_TODO_RESULT },
           },
-          result: { data: CREATE_TODO_RESULT }
-        }
-      ];
-
-      const link = mockSingleLink(...mocks).setOnError(reject);
-      const cache = new InMemoryCache();
-      const client = new ApolloClient({
-        cache,
-        link
-      });
+        ];
 
-      let renderCount = 0;
-      const Component = () => {
-        const [createTodo, { loading, data }] = useMutation(
-          CREATE_TODO_MUTATION,
-          { optimisticResponse }
-        );
+        const link = mockSingleLink(...mocks).setOnError(reject);
+        const cache = new InMemoryCache();
+        const client = new ApolloClient({
+          cache,
+          link,
+        });
 
-        switch (renderCount) {
-          case 0:
-            expect(loading).toBeFalsy();
-            expect(data).toBeUndefined();
-            createTodo({ variables });
+        let renderCount = 0;
+        const Component = () => {
+          const [createTodo, { loading, data }] = useMutation(
+            CREATE_TODO_MUTATION,
+            { optimisticResponse }
+          );
 
-            const dataInStore = client.cache.extract(true);
-            expect(dataInStore['Todo:1']).toEqual(
-              optimisticResponse.createTodo
-            );
-
-            break;
-          case 1:
-            expect(loading).toBeTruthy();
-            expect(data).toBeUndefined();
-            break;
-          case 2:
-            expect(loading).toBeFalsy();
-            expect(data).toEqual(CREATE_TODO_RESULT);
-            break;
-          default:
-        }
-        renderCount += 1;
-        return null;
-      };
+          switch (renderCount) {
+            case 0:
+              expect(loading).toBeFalsy();
+              expect(data).toBeUndefined();
+              createTodo({ variables });
+
+              const dataInStore = client.cache.extract(true);
+              expect(dataInStore["Todo:1"]).toEqual(
+                optimisticResponse.createTodo
+              );
+
+              break;
+            case 1:
+              expect(loading).toBeTruthy();
+              expect(data).toBeUndefined();
+              break;
+            case 2:
+              expect(loading).toBeFalsy();
+              expect(data).toEqual(CREATE_TODO_RESULT);
+              break;
+            default:
+          }
+          renderCount += 1;
+          return null;
+        };
 
-      render(
-        <ApolloProvider client={client}>
-          <Component />
-        </ApolloProvider>
-      );
+        render(
+          <ApolloProvider client={client}>
+            <Component />
+          </ApolloProvider>
+        );
 
-      return waitFor(() => {
-        expect(renderCount).toBe(3);
-      }).then(resolve, reject);
-    });
+        return waitFor(() => {
+          expect(renderCount).toBe(3);
+        }).then(resolve, reject);
+      }
+    );
 
-    it('should be called with the provided context', async () => {
+    it("should be called with the provided context", async () => {
       const optimisticResponse = {
-        __typename: 'Mutation',
+        __typename: "Mutation",
         createTodo: {
           id: 1,
-          description: 'TEMPORARY',
-          priority: 'High',
-          __typename: 'Todo'
-        }
+          description: "TEMPORARY",
+          priority: "High",
+          __typename: "Todo",
+        },
       };
 
       const context = { id: 3 };
 
       const variables = {
-        description: 'Get milk!'
+        description: "Get milk!",
       };
 
       const mocks = [
         {
           request: {
             query: CREATE_TODO_MUTATION,
-            variables
+            variables,
           },
-          result: { data: CREATE_TODO_RESULT }
-        }
+          result: { data: CREATE_TODO_RESULT },
+        },
       ];
 
       const contextFn = jest.fn();
 
       const Component = () => {
-        const [createTodo] = useMutation(
-          CREATE_TODO_MUTATION,
-          {
-            optimisticResponse,
-            context,
-            update(_, __, options) {
-              contextFn(options.context);
-            }
-          }
-        );
+        const [createTodo] = useMutation(CREATE_TODO_MUTATION, {
+          optimisticResponse,
+          context,
+          update(_, __, options) {
+            contextFn(options.context);
+          },
+        });
 
         useEffect(() => {
           createTodo({ variables });
@@ -1631,7 +1644,7 @@ describe('useMutation Hook', () => {
     });
   });
 
-  describe('refetching queries', () => {
+  describe("refetching queries", () => {
     const GET_TODOS_QUERY = gql`
       query getTodos {
         todos {
@@ -1646,15 +1659,15 @@ describe('useMutation Hook', () => {
       todos: [
         {
           id: 2,
-          description: 'Walk the dog',
-          priority: 'Medium',
-          __typename: 'Todo'
+          description: "Walk the dog",
+          priority: "Medium",
+          __typename: "Todo",
         },
         {
           id: 3,
-          description: 'Call mom',
-          priority: 'Low',
-          __typename: 'Todo'
+          description: "Call mom",
+          priority: "Low",
+          __typename: "Todo",
         },
       ],
     };
@@ -1663,45 +1676,47 @@ describe('useMutation Hook', () => {
       todos: [
         {
           id: 1,
-          description: 'Get milk!',
-          priority: 'High',
-          __typename: 'Todo'
+          description: "Get milk!",
+          priority: "High",
+          __typename: "Todo",
         },
         {
           id: 2,
-          description: 'Walk the dog',
-          priority: 'Medium',
-          __typename: 'Todo'
+          description: "Walk the dog",
+          priority: "Medium",
+          __typename: "Todo",
         },
         {
           id: 3,
-          description: 'Call mom',
-          priority: 'Low',
-          __typename: 'Todo'
+          description: "Call mom",
+          priority: "Low",
+          __typename: "Todo",
         },
       ],
     };
 
-    it('can pass onQueryUpdated to useMutation', async () => {
+    it("can pass onQueryUpdated to useMutation", async () => {
       interface TData {
         todoCount: number;
       }
       const countQuery: TypedDocumentNode<TData> = gql`
-        query Count { todoCount @client }
+        query Count {
+          todoCount @client
+        }
       `;
 
       const optimisticResponse = {
-        __typename: 'Mutation',
+        __typename: "Mutation",
         createTodo: {
           id: 1,
-          description: 'TEMPORARY',
-          priority: 'High',
-          __typename: 'Todo'
-        }
+          description: "TEMPORARY",
+          priority: "High",
+          __typename: "Todo",
+        },
       };
 
       const variables = {
-        description: 'Get milk!'
+        description: "Get milk!",
       };
 
       const client = new ApolloClient({
@@ -1736,7 +1751,7 @@ describe('useMutation Hook', () => {
         result: ApolloQueryResult<TData>;
       }
       let resolveOnUpdate: (results: OnQueryUpdatedResults) => any;
-      const onUpdatePromise = new Promise<OnQueryUpdatedResults>(resolve => {
+      const onUpdatePromise = new Promise<OnQueryUpdatedResults>((resolve) => {
         resolveOnUpdate = resolve;
       }).then((onUpdateResult) => {
         expect(finishedReobserving).toBe(true);
@@ -1758,28 +1773,29 @@ describe('useMutation Hook', () => {
       onUpdatePromise.catch(() => {});
 
       let finishedReobserving = false;
-      const { result } = renderHook(() => ({
-        query: useQuery(countQuery),
-        mutation: useMutation(CREATE_TODO_MUTATION, {
-          optimisticResponse,
-          update(cache) {
-            const result = cache.readQuery({ query: countQuery });
+      const { result } = renderHook(
+        () => ({
+          query: useQuery(countQuery),
+          mutation: useMutation(CREATE_TODO_MUTATION, {
+            optimisticResponse,
+            update(cache) {
+              const result = cache.readQuery({ query: countQuery });
 
-            cache.writeQuery({
-              query: countQuery,
-              data: {
-                todoCount: (result ? result.todoCount : 0) + 1,
-              },
-            });
-          },
+              cache.writeQuery({
+                query: countQuery,
+                data: {
+                  todoCount: (result ? result.todoCount : 0) + 1,
+                },
+              });
+            },
+          }),
         }),
-      }), {
-        wrapper: ({ children }) => (
-          <ApolloProvider client={client}>
-            {children}
-          </ApolloProvider>
-        ),
-      });
+        {
+          wrapper: ({ children }) => (
+            <ApolloProvider client={client}>{children}</ApolloProvider>
+          ),
+        }
+      );
 
       expect(result.current.query.loading).toBe(false);
       expect(result.current.query.data).toEqual({ todoCount: 0 });
@@ -1804,16 +1820,22 @@ describe('useMutation Hook', () => {
       expect(result.current.mutation[1].data).toBe(undefined);
       expect(finishedReobserving).toBe(false);
 
-      await waitFor(() => {
-        expect(result.current.query.data).toEqual({ todoCount: 1 });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.query.data).toEqual({ todoCount: 1 });
+        },
+        { interval: 1 }
+      );
       expect(result.current.query.loading).toBe(false);
       expect(result.current.mutation[1].loading).toBe(true);
       expect(result.current.mutation[1].data).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.mutation[1].loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.mutation[1].loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current.query.loading).toBe(false);
       expect(result.current.query.data).toEqual({ todoCount: 1 });
       expect(result.current.mutation[1].data).toEqual(CREATE_TODO_RESULT);
@@ -1822,8 +1844,8 @@ describe('useMutation Hook', () => {
       await expect(onUpdatePromise).resolves.toBe(undefined);
     });
 
-    it('refetchQueries with operation names should update cache', async () => {
-      const variables = { description: 'Get milk!' };
+    it("refetchQueries with operation names should update cache", async () => {
+      const variables = { description: "Get milk!" };
       const mocks = [
         {
           request: {
@@ -1861,39 +1883,44 @@ describe('useMutation Hook', () => {
         }),
         {
           wrapper: ({ children }) => (
-            <ApolloProvider client={client}>
-              {children}
-            </ApolloProvider>
+            <ApolloProvider client={client}>{children}</ApolloProvider>
           ),
-        },
+        }
       );
 
       expect(result.current.query.loading).toBe(true);
       expect(result.current.query.data).toBe(undefined);
-      await waitFor(() => {
-        expect(result.current.query.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.query.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
 
       expect(result.current.query.data).toEqual(mocks[0].result.data);
       const mutate = result.current.mutation[0];
       act(() => {
         mutate({
           variables,
-          refetchQueries: ['getTodos'],
+          refetchQueries: ["getTodos"],
         });
       });
 
-      await waitFor(() => {
-        expect(result.current.query.data).toEqual(mocks[2].result.data);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.query.data).toEqual(mocks[2].result.data);
+        },
+        { interval: 1 }
+      );
       expect(result.current.query.loading).toBe(false);
 
-      expect(client.readQuery({ query: GET_TODOS_QUERY}))
-        .toEqual(mocks[2].result.data);
+      expect(client.readQuery({ query: GET_TODOS_QUERY })).toEqual(
+        mocks[2].result.data
+      );
     });
 
-    it('refetchQueries with document nodes should update cache', async () => {
-      const variables = { description: 'Get milk!' };
+    it("refetchQueries with document nodes should update cache", async () => {
+      const variables = { description: "Get milk!" };
       const mocks = [
         {
           request: {
@@ -1933,18 +1960,19 @@ describe('useMutation Hook', () => {
         }),
         {
           wrapper: ({ children }) => (
-            <ApolloProvider client={client}>
-              {children}
-            </ApolloProvider>
+            <ApolloProvider client={client}>{children}</ApolloProvider>
           ),
-        },
+        }
       );
 
       expect(result.current.query.loading).toBe(true);
       expect(result.current.query.data).toBe(undefined);
-      await waitFor(() => {
-        expect(result.current.query.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.query.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
 
       expect(result.current.query.data).toEqual(mocks[0].result.data);
       const mutate = result.current.mutation[0];
@@ -1964,16 +1992,20 @@ describe('useMutation Hook', () => {
       expect(result.current.query.loading).toBe(false);
       expect(result.current.query.data).toEqual(mocks[0].result.data);
 
-      await waitFor(() => {
-        expect(result.current.query.data).toEqual(mocks[2].result.data);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.query.data).toEqual(mocks[2].result.data);
+        },
+        { interval: 1 }
+      );
       expect(result.current.query.loading).toBe(false);
-      expect(client.readQuery({ query: GET_TODOS_QUERY }))
-        .toEqual(mocks[2].result.data);
+      expect(client.readQuery({ query: GET_TODOS_QUERY })).toEqual(
+        mocks[2].result.data
+      );
     });
 
-    it('refetchQueries should update cache after unmount', async () => {
-      const variables = { description: 'Get milk!' };
+    it("refetchQueries should update cache after unmount", async () => {
+      const variables = { description: "Get milk!" };
       const mocks = [
         {
           request: {
@@ -2011,33 +2043,36 @@ describe('useMutation Hook', () => {
         }),
         {
           wrapper: ({ children }) => (
-            <ApolloProvider client={client}>
-              {children}
-            </ApolloProvider>
+            <ApolloProvider client={client}>{children}</ApolloProvider>
           ),
-        },
+        }
       );
 
       expect(result.current.query.loading).toBe(true);
       expect(result.current.query.data).toBe(undefined);
-      await waitFor(() => {
-        expect(result.current.query.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.query.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
 
       expect(result.current.query.data).toEqual(mocks[0].result.data);
       const mutate = result.current.mutation[0];
       let onMutationDone: Function;
-      const mutatePromise = new Promise((resolve) => (onMutationDone = resolve));
+      const mutatePromise = new Promise(
+        (resolve) => (onMutationDone = resolve)
+      );
 
       setTimeout(() => {
         act(() => {
           mutate({
             variables,
-            refetchQueries: ['getTodos'],
+            refetchQueries: ["getTodos"],
             update() {
               unmount();
             },
-          }).then(result => {
+          }).then((result) => {
             expect(result.data).toEqual(CREATE_TODO_RESULT);
             onMutationDone();
           });
@@ -2050,304 +2085,322 @@ describe('useMutation Hook', () => {
       await mutatePromise;
 
       await waitFor(() => {
-        expect(
-          client.readQuery({ query: GET_TODOS_QUERY })
-        ).toEqual(mocks[2].result.data);
+        expect(client.readQuery({ query: GET_TODOS_QUERY })).toEqual(
+          mocks[2].result.data
+        );
       });
     });
 
-    itAsync("using onQueryUpdated callback should not prevent cache broadcast", async (resolve, reject) => {
-      // Mutating this array makes the tests below much more difficult to reason
-      // about, so instead we reassign the numbersArray variable to remove
-      // elements, without mutating the previous array object.
-      let numbersArray: ReadonlyArray<{ id: string; value: number }> = [
-        { id: '1', value: 324 },
-        { id: '2', value: 729 },
-        { id: '3', value: 987 },
-        { id: '4', value: 344 },
-        { id: '5', value: 72 },
-        { id: '6', value: 899 },
-        { id: '7', value: 222 },
-      ];
+    itAsync(
+      "using onQueryUpdated callback should not prevent cache broadcast",
+      async (resolve, reject) => {
+        // Mutating this array makes the tests below much more difficult to reason
+        // about, so instead we reassign the numbersArray variable to remove
+        // elements, without mutating the previous array object.
+        let numbersArray: ReadonlyArray<{ id: string; value: number }> = [
+          { id: "1", value: 324 },
+          { id: "2", value: 729 },
+          { id: "3", value: 987 },
+          { id: "4", value: 344 },
+          { id: "5", value: 72 },
+          { id: "6", value: 899 },
+          { id: "7", value: 222 },
+        ];
 
-      type TNumbersQuery = {
-        numbers: {
-          __typename: "NumbersResult";
-          id: string;
-          sum: number;
-          numbersArray: ReadonlyArray<{
+        type TNumbersQuery = {
+          numbers: {
+            __typename: "NumbersResult";
             id: string;
-            value: number;
-          }>;
+            sum: number;
+            numbersArray: ReadonlyArray<{
+              id: string;
+              value: number;
+            }>;
+          };
         };
-      };
 
-      function getNumbersData(): TNumbersQuery {
-        return {
-          numbers: {
-            __typename: "NumbersResult",
-            id: "numbersId",
-            numbersArray,
-            sum: numbersArray.reduce((sum, b) => sum + b.value, 0),
-          },
-        };
-      }
+        function getNumbersData(): TNumbersQuery {
+          return {
+            numbers: {
+              __typename: "NumbersResult",
+              id: "numbersId",
+              numbersArray,
+              sum: numbersArray.reduce((sum, b) => sum + b.value, 0),
+            },
+          };
+        }
 
-      const link = new ApolloLink((operation) => {
-        return new Observable(observer => {
-          const { operationName } = operation;
-          if (operationName === "NumbersQuery") {
-            observer.next({
-              data: getNumbersData(),
-            });
-          } else if (operationName === "RemoveNumberMutation") {
-            const last = numbersArray[numbersArray.length - 1];
-            numbersArray = numbersArray.slice(0, -1);
-            observer.next({
-              data: {
-                removeLastNumber: last,
-              },
-            });
-          }
-          setTimeout(() => {
-            observer.complete();
-          }, 50);
+        const link = new ApolloLink((operation) => {
+          return new Observable((observer) => {
+            const { operationName } = operation;
+            if (operationName === "NumbersQuery") {
+              observer.next({
+                data: getNumbersData(),
+              });
+            } else if (operationName === "RemoveNumberMutation") {
+              const last = numbersArray[numbersArray.length - 1];
+              numbersArray = numbersArray.slice(0, -1);
+              observer.next({
+                data: {
+                  removeLastNumber: last,
+                },
+              });
+            }
+            setTimeout(() => {
+              observer.complete();
+            }, 50);
+          });
         });
-      });
 
-      const client = new ApolloClient({
-        link,
-        cache: new InMemoryCache({
-          typePolicies: {
-            NumbersResult: {
-              fields: {
-                numbersArray: { merge: false },
-                sum(_, { readField }) {
-                  const numbersArray =
-                    readField<TNumbersQuery["numbers"]["numbersArray"]>("numbersArray");
-                  return (numbersArray || []).reduce(
-                    (sum, item) => sum + item.value,
-                    0,
-                  );
+        const client = new ApolloClient({
+          link,
+          cache: new InMemoryCache({
+            typePolicies: {
+              NumbersResult: {
+                fields: {
+                  numbersArray: { merge: false },
+                  sum(_, { readField }) {
+                    const numbersArray =
+                      readField<TNumbersQuery["numbers"]["numbersArray"]>(
+                        "numbersArray"
+                      );
+                    return (numbersArray || []).reduce(
+                      (sum, item) => sum + item.value,
+                      0
+                    );
+                  },
                 },
               },
             },
-          },
-        }),
-      });
+          }),
+        });
 
-      const NumbersQuery: TypedDocumentNode<TNumbersQuery> = gql`
-        query NumbersQuery {
-          numbers {
-            id
-            sum
-            numbersArray {
+        const NumbersQuery: TypedDocumentNode<TNumbersQuery> = gql`
+          query NumbersQuery {
+            numbers {
               id
-              value
+              sum
+              numbersArray {
+                id
+                value
+              }
             }
           }
-        }
-      `;
+        `;
 
-      const RemoveNumberMutation = gql`
-        mutation RemoveNumberMutation {
-          removeLastNumber {
-            id
+        const RemoveNumberMutation = gql`
+          mutation RemoveNumberMutation {
+            removeLastNumber {
+              id
+            }
           }
-        }
-      `;
+        `;
 
-      const { result } = renderHook(() => ({
-        query: useQuery(NumbersQuery, {
-          notifyOnNetworkStatusChange: true,
-        }),
-
-        mutation: useMutation(RemoveNumberMutation, {
-          update(cache) {
-            const oldData = cache.readQuery({ query: NumbersQuery });
-            cache.writeQuery({
-              query: NumbersQuery,
-              data: oldData ? {
-                ...oldData,
-                numbers: {
-                  ...oldData.numbers,
-                  numbersArray: oldData.numbers.numbersArray.slice(0, -1),
-                },
-              } : {
-                numbers: {
-                  __typename: "NumbersResult",
-                  id: "numbersId",
-                  sum: 0,
-                  numbersArray: [],
-                },
+        const { result } = renderHook(
+          () => ({
+            query: useQuery(NumbersQuery, {
+              notifyOnNetworkStatusChange: true,
+            }),
+
+            mutation: useMutation(RemoveNumberMutation, {
+              update(cache) {
+                const oldData = cache.readQuery({ query: NumbersQuery });
+                cache.writeQuery({
+                  query: NumbersQuery,
+                  data: oldData
+                    ? {
+                        ...oldData,
+                        numbers: {
+                          ...oldData.numbers,
+                          numbersArray: oldData.numbers.numbersArray.slice(
+                            0,
+                            -1
+                          ),
+                        },
+                      }
+                    : {
+                        numbers: {
+                          __typename: "NumbersResult",
+                          id: "numbersId",
+                          sum: 0,
+                          numbersArray: [],
+                        },
+                      },
+                });
               },
-            });
-          },
-        }),
-      }), {
-        wrapper: ({ children }) => (
-          <ApolloProvider client={client}>
-            {children}
-          </ApolloProvider>
-        ),
-      });
-
-      const obsQueryMap = client.getObservableQueries();
-      expect(obsQueryMap.size).toBe(1);
-      const observedResults: Array<{ data: TNumbersQuery }> = [];
-      subscribeAndCount(reject, obsQueryMap.values().next().value, (
-        count,
-        result: { data: TNumbersQuery },
-      ) => {
-        observedResults.push(result);
-        expect(observedResults.length).toBe(count);
-        const data = getNumbersData();
-
-        if (count === 1) {
-          expect(result).toEqual({
-            loading: true,
-            networkStatus: NetworkStatus.loading,
-            partial: true,
-          });
-
-        } else if (count === 2) {
-          expect(data.numbers.numbersArray.length).toBe(7);
-          expect(result).toEqual({
-            loading: false,
-            networkStatus: NetworkStatus.ready,
-            data,
-          });
-
-        } else if (count === 3) {
-          expect(data.numbers.numbersArray.length).toBe(6);
-          expect(result).toEqual({
-            loading: false,
-            networkStatus: NetworkStatus.ready,
-            data,
-          });
-
-        } else if (count === 4) {
-          expect(data.numbers.numbersArray.length).toBe(5);
-          expect(result).toEqual({
-            loading: false,
-            networkStatus: NetworkStatus.ready,
-            data,
-          });
-
-          // This line is the only way to finish this test successfully.
-          setTimeout(resolve, 50);
+            }),
+          }),
+          {
+            wrapper: ({ children }) => (
+              <ApolloProvider client={client}>{children}</ApolloProvider>
+            ),
+          }
+        );
 
-        } else {
-          // If we did not return false from the final onQueryUpdated function,
-          // we would receive an additional result here.
-          reject(`too many renders (${count}); final result: ${
-            JSON.stringify(result)
-          }`);
-        }
-      });
+        const obsQueryMap = client.getObservableQueries();
+        expect(obsQueryMap.size).toBe(1);
+        const observedResults: Array<{ data: TNumbersQuery }> = [];
+        subscribeAndCount(
+          reject,
+          obsQueryMap.values().next().value,
+          (count, result: { data: TNumbersQuery }) => {
+            observedResults.push(result);
+            expect(observedResults.length).toBe(count);
+            const data = getNumbersData();
+
+            if (count === 1) {
+              expect(result).toEqual({
+                loading: true,
+                networkStatus: NetworkStatus.loading,
+                partial: true,
+              });
+            } else if (count === 2) {
+              expect(data.numbers.numbersArray.length).toBe(7);
+              expect(result).toEqual({
+                loading: false,
+                networkStatus: NetworkStatus.ready,
+                data,
+              });
+            } else if (count === 3) {
+              expect(data.numbers.numbersArray.length).toBe(6);
+              expect(result).toEqual({
+                loading: false,
+                networkStatus: NetworkStatus.ready,
+                data,
+              });
+            } else if (count === 4) {
+              expect(data.numbers.numbersArray.length).toBe(5);
+              expect(result).toEqual({
+                loading: false,
+                networkStatus: NetworkStatus.ready,
+                data,
+              });
+
+              // This line is the only way to finish this test successfully.
+              setTimeout(resolve, 50);
+            } else {
+              // If we did not return false from the final onQueryUpdated function,
+              // we would receive an additional result here.
+              reject(
+                `too many renders (${count}); final result: ${JSON.stringify(
+                  result
+                )}`
+              );
+            }
+          }
+        );
 
-      expect(observedResults).toEqual([]);
+        expect(observedResults).toEqual([]);
 
-      expect(result.current.query.loading).toBe(true);
-      expect(result.current.query.networkStatus).toBe(NetworkStatus.loading);
-      expect(result.current.mutation[1].loading).toBe(false);
-      expect(result.current.mutation[1].called).toBe(false);
-      await waitFor(() => {
-        expect(result.current.query.loading).toBe(false);
-      }, { interval: 1 });
+        expect(result.current.query.loading).toBe(true);
+        expect(result.current.query.networkStatus).toBe(NetworkStatus.loading);
+        expect(result.current.mutation[1].loading).toBe(false);
+        expect(result.current.mutation[1].called).toBe(false);
+        await waitFor(
+          () => {
+            expect(result.current.query.loading).toBe(false);
+          },
+          { interval: 1 }
+        );
 
-      expect(result.current.query.networkStatus).toBe(NetworkStatus.ready);
-      expect(result.current.mutation[1].loading).toBe(false);
-      expect(result.current.mutation[1].called).toBe(false);
+        expect(result.current.query.networkStatus).toBe(NetworkStatus.ready);
+        expect(result.current.mutation[1].loading).toBe(false);
+        expect(result.current.mutation[1].called).toBe(false);
 
-      expect(numbersArray[numbersArray.length - 1]).toEqual({
-        id: '7',
-        value: 222,
-      });
+        expect(numbersArray[numbersArray.length - 1]).toEqual({
+          id: "7",
+          value: 222,
+        });
 
-      const [mutate] = result.current.mutation;
-      await act(async () => {
-        expect(await mutate(
-          // Not passing an onQueryUpdated callback should allow cache
-          // broadcasts to propagate as normal. The point of this test is to
-          // demonstrate that *adding* onQueryUpdated should not prevent cache
-          // broadcasts (see below for where we test that).
-        )).toEqual({
-          data: {
-            removeLastNumber: {
-              id: '7',
+        const [mutate] = result.current.mutation;
+        await act(async () => {
+          expect(
+            await mutate()
+            // Not passing an onQueryUpdated callback should allow cache
+            // broadcasts to propagate as normal. The point of this test is to
+            // demonstrate that *adding* onQueryUpdated should not prevent cache
+            // broadcasts (see below for where we test that).
+          ).toEqual({
+            data: {
+              removeLastNumber: {
+                id: "7",
+              },
             },
-          },
+          });
         });
-      });
 
-      expect(numbersArray[numbersArray.length - 1]).toEqual({
-        id: '6',
-        value: 899,
-      });
+        expect(numbersArray[numbersArray.length - 1]).toEqual({
+          id: "6",
+          value: 899,
+        });
 
-      expect(result.current.query.loading).toBe(false);
-      expect(result.current.query.networkStatus).toBe(NetworkStatus.ready);
-      expect(result.current.mutation[1].loading).toBe(false);
-      expect(result.current.mutation[1].called).toBe(true);
+        expect(result.current.query.loading).toBe(false);
+        expect(result.current.query.networkStatus).toBe(NetworkStatus.ready);
+        expect(result.current.mutation[1].loading).toBe(false);
+        expect(result.current.mutation[1].called).toBe(true);
 
-      await act(async () => {
-        expect(await mutate({
-          // Adding this onQueryUpdated callback, which merely examines the
-          // updated query and its DiffResult, should not change the broadcast
-          // behavior of the ObservableQuery.
-          onQueryUpdated(oq, diff) {
-            expect(oq.queryName).toBe("NumbersQuery");
-            expect(diff.result.numbers.numbersArray.length).toBe(5);
-            expect(diff.result.numbers.sum).toBe(2456);
-          },
-        })).toEqual({
-          data: {
-            removeLastNumber: {
-              id: '6',
+        await act(async () => {
+          expect(
+            await mutate({
+              // Adding this onQueryUpdated callback, which merely examines the
+              // updated query and its DiffResult, should not change the broadcast
+              // behavior of the ObservableQuery.
+              onQueryUpdated(oq, diff) {
+                expect(oq.queryName).toBe("NumbersQuery");
+                expect(diff.result.numbers.numbersArray.length).toBe(5);
+                expect(diff.result.numbers.sum).toBe(2456);
+              },
+            })
+          ).toEqual({
+            data: {
+              removeLastNumber: {
+                id: "6",
+              },
             },
-          },
+          });
         });
-      });
 
-      expect(numbersArray[numbersArray.length - 1]).toEqual({
-        id: '5',
-        value: 72,
-      });
+        expect(numbersArray[numbersArray.length - 1]).toEqual({
+          id: "5",
+          value: 72,
+        });
 
-      expect(result.current.query.loading).toBe(false);
-      expect(result.current.query.networkStatus).toBe(NetworkStatus.ready);
-      expect(result.current.mutation[1].loading).toBe(false);
-      expect(result.current.mutation[1].called).toBe(true);
+        expect(result.current.query.loading).toBe(false);
+        expect(result.current.query.networkStatus).toBe(NetworkStatus.ready);
+        expect(result.current.mutation[1].loading).toBe(false);
+        expect(result.current.mutation[1].called).toBe(true);
 
-      await act(async () => {
-        expect(await mutate({
-          onQueryUpdated(oq, diff) {
-            expect(oq.queryName).toBe("NumbersQuery");
-            expect(diff.result.numbers.numbersArray.length).toBe(4);
-            expect(diff.result.numbers.sum).toBe(2384);
-            // Returning false from onQueryUpdated prevents the cache broadcast.
-            return false;
-          },
-        })).toEqual({
-          data: {
-            removeLastNumber: {
-              id: '5',
+        await act(async () => {
+          expect(
+            await mutate({
+              onQueryUpdated(oq, diff) {
+                expect(oq.queryName).toBe("NumbersQuery");
+                expect(diff.result.numbers.numbersArray.length).toBe(4);
+                expect(diff.result.numbers.sum).toBe(2384);
+                // Returning false from onQueryUpdated prevents the cache broadcast.
+                return false;
+              },
+            })
+          ).toEqual({
+            data: {
+              removeLastNumber: {
+                id: "5",
+              },
             },
-          },
+          });
         });
-      });
 
-      expect(numbersArray[numbersArray.length - 1]).toEqual({
-        id: '4',
-        value: 344,
-      });
+        expect(numbersArray[numbersArray.length - 1]).toEqual({
+          id: "4",
+          value: 344,
+        });
 
-      expect(result.current.query.loading).toBe(false);
-      expect(result.current.query.networkStatus).toBe(NetworkStatus.ready);
-      expect(result.current.mutation[1].loading).toBe(false);
-      expect(result.current.mutation[1].called).toBe(true);
-    });
+        expect(result.current.query.loading).toBe(false);
+        expect(result.current.query.networkStatus).toBe(NetworkStatus.ready);
+        expect(result.current.mutation[1].loading).toBe(false);
+        expect(result.current.mutation[1].called).toBe(true);
+      }
+    );
 
     it("refetchQueries should work with BatchHttpLink", async () => {
       const MUTATION_1 = gql`
@@ -2369,16 +2422,20 @@ describe('useMutation Hook', () => {
       fetchMock.restore();
 
       const responseBodies = [
-        { data: { items: [{ id: 1 }, { id: 2 }] }},
-        { data: { doSomething: { message: 'success' }}},
-        { data: { items: [{ id: 1 }, { id: 2 }, { id: 3 }] }},
+        { data: { items: [{ id: 1 }, { id: 2 }] } },
+        { data: { doSomething: { message: "success" } } },
+        { data: { items: [{ id: 1 }, { id: 2 }, { id: 3 }] } },
       ];
 
-      fetchMock.post("/graphql", (url, opts) => new Promise(resolve => {
-        resolve({
-          body: responseBodies.shift(),
-        });
-      }));
+      fetchMock.post(
+        "/graphql",
+        (url, opts) =>
+          new Promise((resolve) => {
+            resolve({
+              body: responseBodies.shift(),
+            });
+          })
+      );
 
       const Test = () => {
         const { data } = useQuery(QUERY_1);
@@ -2389,34 +2446,43 @@ describe('useMutation Hook', () => {
 
         const { items = [] } = data || {};
 
-        return <>
-          <button onClick={() => {
-            return mutate();
-          }} type="button">
-            mutate
-          </button>
-          {items.map((c: any) => (
-            <div key={c.id}>item {c.id}</div>
-          ))}
-        </>;
+        return (
+          <>
+            <button
+              onClick={() => {
+                return mutate();
+              }}
+              type="button"
+            >
+              mutate
+            </button>
+            {items.map((c: any) => (
+              <div key={c.id}>item {c.id}</div>
+            ))}
+          </>
+        );
       };
 
       const client = new ApolloClient({
         link: new BatchHttpLink({
-          uri: '/graphql',
+          uri: "/graphql",
           batchMax: 10,
         }),
         cache: new InMemoryCache(),
       });
 
-      render(<ApolloProvider client={client}><Test /></ApolloProvider>);
+      render(
+        <ApolloProvider client={client}>
+          <Test />
+        </ApolloProvider>
+      );
 
-      await waitFor(() => screen.findByText('item 1'));
-      await userEvent.click(screen.getByRole('button', { name: /mutate/i }));
-      await waitFor(() => screen.findByText('item 3'));
+      await waitFor(() => screen.findByText("item 1"));
+      await userEvent.click(screen.getByRole("button", { name: /mutate/i }));
+      await waitFor(() => screen.findByText("item 3"));
     });
   });
-  describe('defer', () => {
+  describe("defer", () => {
     const CREATE_TODO_MUTATION_DEFER = gql`
       mutation createTodo($description: String!, $priority: String) {
         createTodo(description: $description, priority: $priority) {
@@ -2429,9 +2495,9 @@ describe('useMutation Hook', () => {
       }
     `;
     const variables = {
-      description: 'Get milk!'
+      description: "Get milk!",
     };
-    it('resolves a deferred mutation with the full result', async () => {
+    it("resolves a deferred mutation with the full result", async () => {
       const errorSpy = jest.spyOn(console, "error");
       const link = new MockSubscriptionLink();
 
@@ -2452,16 +2518,11 @@ describe('useMutation Hook', () => {
         return { loading, data };
       };
 
-      const { result } = renderHook(
-        () => useCreateTodo(),
-        {
-          wrapper: ({ children }) => (
-            <ApolloProvider client={client}>
-              {children}
-            </ApolloProvider>
-          ),
-        },
-      );
+      const { result } = renderHook(() => useCreateTodo(), {
+        wrapper: ({ children }) => (
+          <ApolloProvider client={client}>{children}</ApolloProvider>
+        ),
+      });
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
@@ -2472,49 +2533,56 @@ describe('useMutation Hook', () => {
             data: {
               createTodo: {
                 id: 1,
-                __typename: 'Todo',
+                __typename: "Todo",
               },
             },
-            hasNext: true
+            hasNext: true,
           },
         });
       });
 
       setTimeout(() => {
-        link.simulateResult({
-          result: {
-            incremental: [{
-              data: {
-                description: 'Get milk!',
-                priority: 'High',
-                __typename: 'Todo',
-              },
-              path: ['createTodo'],
-            }],
-            hasNext: false
+        link.simulateResult(
+          {
+            result: {
+              incremental: [
+                {
+                  data: {
+                    description: "Get milk!",
+                    priority: "High",
+                    __typename: "Todo",
+                  },
+                  path: ["createTodo"],
+                },
+              ],
+              hasNext: false,
+            },
           },
-        }, true);
+          true
+        );
       });
 
-
       // When defer is used in a mutation, the final value resolves
       // in a single result
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
 
       expect(result.current.data).toEqual({
         createTodo: {
           id: 1,
           description: "Get milk!",
           priority: "High",
-          __typename: 'Todo',
+          __typename: "Todo",
         },
       });
       expect(errorSpy).not.toHaveBeenCalled();
       errorSpy.mockRestore();
     });
-    it('resolves with resulting errors and calls onError callback', async () => {
+    it("resolves with resulting errors and calls onError callback", async () => {
       const errorSpy = jest.spyOn(console, "error");
       const link = new MockSubscriptionLink();
 
@@ -2528,11 +2596,9 @@ describe('useMutation Hook', () => {
         () => useMutation(CREATE_TODO_MUTATION_DEFER, { onError }),
         {
           wrapper: ({ children }) => (
-            <ApolloProvider client={client}>
-              {children}
-            </ApolloProvider>
+            <ApolloProvider client={client}>{children}</ApolloProvider>
           ),
-        },
+        }
       );
 
       const createTodo = result.current[0];
@@ -2545,27 +2611,30 @@ describe('useMutation Hook', () => {
             data: {
               createTodo: {
                 id: 1,
-                __typename: 'Todo',
+                __typename: "Todo",
               },
             },
-            hasNext: true
+            hasNext: true,
           },
         });
       });
 
       setTimeout(() => {
-        link.simulateResult({
-          result: {
-            incremental: [{
-              data: null,
-              errors: [
-                new GraphQLError(CREATE_TODO_ERROR)
+        link.simulateResult(
+          {
+            result: {
+              incremental: [
+                {
+                  data: null,
+                  errors: [new GraphQLError(CREATE_TODO_ERROR)],
+                  path: ["createTodo"],
+                },
               ],
-              path: ['createTodo'],
-            }],
-            hasNext: false
+              hasNext: false,
+            },
           },
-        }, true);
+          true
+        );
       });
       await act(async () => {
         fetchResult = await createTodo({ variables });
@@ -2588,7 +2657,7 @@ describe('useMutation Hook', () => {
       });
       errorSpy.mockRestore();
     });
-    it('calls the update function with the final merged result data', async () => {
+    it("calls the update function with the final merged result data", async () => {
       const errorSpy = jest.spyOn(console, "error");
       const link = new MockSubscriptionLink();
       const update = jest.fn();
@@ -2598,15 +2667,12 @@ describe('useMutation Hook', () => {
       });
 
       const { result } = renderHook(
-        () => useMutation(CREATE_TODO_MUTATION_DEFER,
-          { update }),
+        () => useMutation(CREATE_TODO_MUTATION_DEFER, { update }),
         {
           wrapper: ({ children }) => (
-            <ApolloProvider client={client}>
-              {children}
-            </ApolloProvider>
+            <ApolloProvider client={client}>{children}</ApolloProvider>
           ),
-        },
+        }
       );
       const [createTodo] = result.current;
 
@@ -2621,26 +2687,31 @@ describe('useMutation Hook', () => {
           data: {
             createTodo: {
               id: 1,
-              __typename: 'Todo',
+              __typename: "Todo",
             },
           },
-          hasNext: true
+          hasNext: true,
         },
       });
 
-      link.simulateResult({
-        result: {
-          incremental: [{
-            data: {
-              description: 'Get milk!',
-              priority: 'High',
-              __typename: 'Todo',
-            },
-            path: ['createTodo'],
-          }],
-          hasNext: false
+      link.simulateResult(
+        {
+          result: {
+            incremental: [
+              {
+                data: {
+                  description: "Get milk!",
+                  priority: "High",
+                  __typename: "Todo",
+                },
+                path: ["createTodo"],
+              },
+            ],
+            hasNext: false,
+          },
         },
-      }, true);
+        true
+      );
 
       await act(async () => {
         await promiseReturnedByMutate;
@@ -2658,9 +2729,9 @@ describe('useMutation Hook', () => {
               id: 1,
               description: "Get milk!",
               priority: "High",
-              __typename: 'Todo',
+              __typename: "Todo",
             },
-          }
+          },
         }),
         // third argument is an object containing context and variables
         // but we only care about variables here
@@ -2676,14 +2747,14 @@ describe('useMutation Hook', () => {
 });
 
 describe.skip("Type Tests", () => {
-  test('NoInfer prevents adding arbitrary additional variables', () => {
-    const typedNode = {} as TypedDocumentNode<{ foo: string}, { bar: number }>
+  test("NoInfer prevents adding arbitrary additional variables", () => {
+    const typedNode = {} as TypedDocumentNode<{ foo: string }, { bar: number }>;
     useMutation(typedNode, {
       variables: {
         bar: 4,
         // @ts-expect-error
-        nonExistingVariable: "string"
-      }
+        nonExistingVariable: "string",
+      },
     });
-  })
-})
+  });
+});
diff --git a/src/react/hooks/__tests__/useQuery.test.tsx b/src/react/hooks/__tests__/useQuery.test.tsx
index 2a6e700d56b..962a0a7656b 100644
--- a/src/react/hooks/__tests__/useQuery.test.tsx
+++ b/src/react/hooks/__tests__/useQuery.test.tsx
@@ -1,9 +1,9 @@
-import React, { Fragment, ReactNode, useEffect, useState } from 'react';
-import { DocumentNode, GraphQLError } from 'graphql';
-import gql from 'graphql-tag';
-import { act } from 'react-dom/test-utils';
-import userEvent from '@testing-library/user-event';
-import { render, screen, waitFor, renderHook } from '@testing-library/react';
+import React, { Fragment, ReactNode, useEffect, useState } from "react";
+import { DocumentNode, GraphQLError } from "graphql";
+import gql from "graphql-tag";
+import { act } from "react-dom/test-utils";
+import userEvent from "@testing-library/user-event";
+import { render, screen, waitFor, renderHook } from "@testing-library/react";
 import {
   ApolloClient,
   ApolloError,
@@ -11,26 +11,30 @@ import {
   OperationVariables,
   TypedDocumentNode,
   WatchQueryFetchPolicy,
-} from '../../../core';
-import { InMemoryCache } from '../../../cache';
-import { ApolloProvider } from '../../context';
-import { Observable, Reference, concatPagination } from '../../../utilities';
-import { ApolloLink } from '../../../link/core';
+} from "../../../core";
+import { InMemoryCache } from "../../../cache";
+import { ApolloProvider } from "../../context";
+import { Observable, Reference, concatPagination } from "../../../utilities";
+import { ApolloLink } from "../../../link/core";
 import {
   MockLink,
   MockedProvider,
   MockSubscriptionLink,
   mockSingleLink,
   tick,
-} from '../../../testing';
+} from "../../../testing";
 import { QueryResult } from "../../types/types";
-import { useQuery } from '../useQuery';
-import { useMutation } from '../useMutation';
+import { useQuery } from "../useQuery";
+import { useMutation } from "../useMutation";
 
-describe('useQuery Hook', () => {
-  describe('General use', () => {
-    it('should handle a simple query', async () => {
-      const query = gql`{ hello }`;
+describe("useQuery Hook", () => {
+  describe("General use", () => {
+    it("should handle a simple query", async () => {
+      const query = gql`
+        {
+          hello
+        }
+      `;
       const mocks = [
         {
           request: { query },
@@ -42,31 +46,41 @@ describe('useQuery Hook', () => {
         <MockedProvider mocks={mocks}>{children}</MockedProvider>
       );
 
-      const { result } = renderHook(
-        () => useQuery(query),
-        { wrapper },
-      );
+      const { result } = renderHook(() => useQuery(query), { wrapper });
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current.data).toEqual({ hello: "world" });
     });
 
     it("useQuery result is referentially stable", async () => {
-      const query = gql`{ hello }`;
-      const mocks = [ {
+      const query = gql`
+        {
+          hello
+        }
+      `;
+      const mocks = [
+        {
           request: { query },
           result: { data: { hello: "world" } },
-      } ];
-      const wrapper = ({ children }: any) => <MockedProvider mocks={mocks}>{children}</MockedProvider>;
-      const { result, rerender } = renderHook(() => useQuery(query), { wrapper });
+        },
+      ];
+      const wrapper = ({ children }: any) => (
+        <MockedProvider mocks={mocks}>{children}</MockedProvider>
+      );
+      const { result, rerender } = renderHook(() => useQuery(query), {
+        wrapper,
+      });
       let oldResult: QueryResult<any, OperationVariables>;
 
       await waitFor(() => {
-        result.current.loading === false
+        result.current.loading === false;
       });
 
       rerender({ children: null });
@@ -82,13 +96,23 @@ describe('useQuery Hook', () => {
     });
 
     it("useQuery produces the expected renders initially", async () => {
-      const query = gql`{ hello }`;
-      const mocks = [ {
-        request: { query },
-        result: { data: { hello: "world" } },
-      } ];
-      const wrapper = ({ children }: any) => <MockedProvider mocks={mocks}>{children}</MockedProvider>;
-      const { result, rerender } = renderHook(() => useQuery(query), { wrapper });
+      const query = gql`
+        {
+          hello
+        }
+      `;
+      const mocks = [
+        {
+          request: { query },
+          result: { data: { hello: "world" } },
+        },
+      ];
+      const wrapper = ({ children }: any) => (
+        <MockedProvider mocks={mocks}>{children}</MockedProvider>
+      );
+      const { result, rerender } = renderHook(() => useQuery(query), {
+        wrapper,
+      });
 
       await waitFor(() => result.current.loading === false);
 
@@ -97,7 +121,7 @@ describe('useQuery Hook', () => {
       await waitFor(() => {
         expect(result.current.loading).toBe(false);
       });
-      expect(result.current.data).toEqual({ hello: "world"});
+      expect(result.current.data).toEqual({ hello: "world" });
       expect(result.current.loading).toBe(false);
       expect(result.current.data).toEqual({ hello: "world" });
 
@@ -111,20 +135,25 @@ describe('useQuery Hook', () => {
     it("useQuery produces the expected frames when variables change", async () => {
       const query = gql`
         query ($id: Int) {
-        hello(id: $id)
-      }
+          hello(id: $id)
+        }
       `;
-      const mocks = [ {
-        request: { query, variables: { id: 1 } },
-        result: { data: { hello: "world 1" } },
-      }, {
-        request: { query, variables: { id: 2 } },
-        result: { data: { hello: "world 2" } },
-      } ];
-      const wrapper = ({ children }: any) => <MockedProvider mocks={mocks}>{children}</MockedProvider>;
+      const mocks = [
+        {
+          request: { query, variables: { id: 1 } },
+          result: { data: { hello: "world 1" } },
+        },
+        {
+          request: { query, variables: { id: 2 } },
+          result: { data: { hello: "world 2" } },
+        },
+      ];
+      const wrapper = ({ children }: any) => (
+        <MockedProvider mocks={mocks}>{children}</MockedProvider>
+      );
       const { result, rerender } = renderHook(
         (options) => useQuery(query, options),
-        { wrapper, initialProps: { variables: { id: 1 } } },
+        { wrapper, initialProps: { variables: { id: 1 } } }
       );
       await waitFor(() => result.current.loading === false);
       await waitFor(() => {
@@ -167,8 +196,12 @@ describe('useQuery Hook', () => {
       });
     });
 
-    it('should read and write results from the cache', async () => {
-      const query = gql`{ hello }`;
+    it("should read and write results from the cache", async () => {
+      const query = gql`
+        {
+          hello
+        }
+      `;
       const mocks = [
         {
           request: { query },
@@ -178,19 +211,23 @@ describe('useQuery Hook', () => {
 
       const cache = new InMemoryCache();
       const wrapper = ({ children }: any) => (
-        <MockedProvider mocks={mocks} cache={cache}>{children}</MockedProvider>
+        <MockedProvider mocks={mocks} cache={cache}>
+          {children}
+        </MockedProvider>
       );
 
-      const { result, rerender } = renderHook(
-        () => useQuery(query),
-        { wrapper }
-      );
+      const { result, rerender } = renderHook(() => useQuery(query), {
+        wrapper,
+      });
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current.data).toEqual({ hello: "world" });
 
       rerender();
@@ -198,8 +235,12 @@ describe('useQuery Hook', () => {
       expect(result.current.data).toEqual({ hello: "world" });
     });
 
-    it('should preserve functions between renders', async () => {
-      const query = gql`{ hello }`;
+    it("should preserve functions between renders", async () => {
+      const query = gql`
+        {
+          hello
+        }
+      `;
       const mocks = [
         {
           request: { query },
@@ -209,24 +250,21 @@ describe('useQuery Hook', () => {
 
       const cache = new InMemoryCache();
       const wrapper = ({ children }: any) => (
-        <MockedProvider mocks={mocks} cache={cache}>{children}</MockedProvider>
+        <MockedProvider mocks={mocks} cache={cache}>
+          {children}
+        </MockedProvider>
       );
 
-      const { result } = renderHook(
-        () => useQuery(query),
-        { wrapper },
-      );
+      const { result } = renderHook(() => useQuery(query), { wrapper });
       expect(result.current.loading).toBe(true);
-      const {
-        refetch,
-        fetchMore,
-        startPolling,
-        stopPolling,
-        subscribeToMore,
-      } = result.current;
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      const { refetch, fetchMore, startPolling, stopPolling, subscribeToMore } =
+        result.current;
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(refetch).toBe(result.current.refetch);
       expect(fetchMore).toBe(result.current.fetchMore);
       expect(startPolling).toBe(result.current.startPolling);
@@ -234,8 +272,12 @@ describe('useQuery Hook', () => {
       expect(subscribeToMore).toBe(result.current.subscribeToMore);
     });
 
-    it('should set called to true by default', async () => {
-      const query = gql`{ hello }`;
+    it("should set called to true by default", async () => {
+      const query = gql`
+        {
+          hello
+        }
+      `;
       const mocks = [
         {
           request: { query },
@@ -245,20 +287,25 @@ describe('useQuery Hook', () => {
 
       const cache = new InMemoryCache();
       const wrapper = ({ children }: any) => (
-        <MockedProvider mocks={mocks} cache={cache}>{children}</MockedProvider>
+        <MockedProvider mocks={mocks} cache={cache}>
+          {children}
+        </MockedProvider>
       );
 
-      const { result, unmount } = renderHook(
-        () => useQuery(query),
-        { wrapper },
-      );
+      const { result, unmount } = renderHook(() => useQuery(query), {
+        wrapper,
+      });
 
       expect(result.current.called).toBe(true);
       unmount();
     });
 
-    it('should set called to false when skip option is true', async () => {
-      const query = gql`{ hello }`;
+    it("should set called to false when skip option is true", async () => {
+      const query = gql`
+        {
+          hello
+        }
+      `;
       const mocks = [
         {
           request: { query },
@@ -268,19 +315,21 @@ describe('useQuery Hook', () => {
 
       const cache = new InMemoryCache();
       const wrapper = ({ children }: any) => (
-          <MockedProvider mocks={mocks} cache={cache}>{children}</MockedProvider>
+        <MockedProvider mocks={mocks} cache={cache}>
+          {children}
+        </MockedProvider>
       );
 
       const { result, unmount } = renderHook(
-          () => useQuery(query, { skip: true }),
-          { wrapper },
+        () => useQuery(query, { skip: true }),
+        { wrapper }
       );
 
       expect(result.current.called).toBe(false);
       unmount();
     });
 
-    it('should work with variables', async () => {
+    it("should work with variables", async () => {
       const query = gql`
         query ($id: Int) {
           hello(id: $id)
@@ -300,32 +349,40 @@ describe('useQuery Hook', () => {
 
       const cache = new InMemoryCache();
       const wrapper = ({ children }: any) => (
-        <MockedProvider mocks={mocks} cache={cache}>{children}</MockedProvider>
+        <MockedProvider mocks={mocks} cache={cache}>
+          {children}
+        </MockedProvider>
       );
 
       const { result, rerender } = renderHook(
-        ({ id }) => useQuery(query, { variables: { id }}),
-        { wrapper, initialProps: { id: 1 } },
+        ({ id }) => useQuery(query, { variables: { id } }),
+        { wrapper, initialProps: { id: 1 } }
       );
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current.data).toEqual({ hello: "world 1" });
 
       rerender({ id: 2 });
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current.data).toEqual({ hello: "world 2" });
     });
 
-    it('should return the same results for the same variables', async () => {
+    it("should return the same results for the same variables", async () => {
       const query = gql`
         query ($id: Int) {
           hello(id: $id)
@@ -345,28 +402,35 @@ describe('useQuery Hook', () => {
 
       const cache = new InMemoryCache();
       const wrapper = ({ children }: any) => (
-        <MockedProvider mocks={mocks} cache={cache}>{children}</MockedProvider>
+        <MockedProvider mocks={mocks} cache={cache}>
+          {children}
+        </MockedProvider>
       );
 
       const { result, rerender } = renderHook(
         ({ id }) => useQuery(query, { variables: { id } }),
-        { wrapper, initialProps: { id: 1 } },
+        { wrapper, initialProps: { id: 1 } }
       );
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current.data).toEqual({ hello: "world 1" });
 
-
       rerender({ id: 2 });
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current.data).toEqual({ hello: "world 2" });
 
       rerender({ id: 2 });
@@ -374,7 +438,7 @@ describe('useQuery Hook', () => {
       expect(result.current.data).toEqual({ hello: "world 2" });
     });
 
-    it('should work with variables 2', async () => {
+    it("should work with variables 2", async () => {
       const query = gql`
         query ($name: String) {
           names(name: $name)
@@ -398,42 +462,53 @@ describe('useQuery Hook', () => {
 
       const cache = new InMemoryCache();
       const wrapper = ({ children }: any) => (
-        <MockedProvider mocks={mocks} cache={cache}>{children}</MockedProvider>
+        <MockedProvider mocks={mocks} cache={cache}>
+          {children}
+        </MockedProvider>
       );
 
       const { result, rerender } = renderHook(
         ({ name }) => useQuery(query, { variables: { name } }),
-        { wrapper, initialProps: { name: "" } },
+        { wrapper, initialProps: { name: "" } }
       );
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current.data).toEqual({ names: ["Alice", "Bob", "Eve"] });
 
-      rerender({ name: 'z' });
+      rerender({ name: "z" });
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current.data).toEqual({ names: [] });
 
-      rerender({ name: 'zz' });
+      rerender({ name: "zz" });
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current.data).toEqual({ names: [] });
     });
 
     // An unsuccessful attempt to reproduce https://github.com/apollographql/apollo-client/issues/9135.
-    it('should not return stale variables when stored in state', async () => {
+    it("should not return stale variables when stored in state", async () => {
       const query = gql`
         query myQuery($name: String) {
           hello(name: $name)
@@ -468,7 +543,7 @@ describe('useQuery Hook', () => {
           const [name, setName1] = React.useState("world 1");
           setName = setName1;
           return [
-            useQuery(query, { variables: { name }}),
+            useQuery(query, { variables: { name } }),
             useMutation(mutation, {
               update(cache, { data }) {
                 cache.writeQuery({
@@ -485,15 +560,18 @@ describe('useQuery Hook', () => {
               {children}
             </MockedProvider>
           ),
-        },
+        }
       );
 
       expect(result.current[0].loading).toBe(true);
       expect(result.current[0].data).toBe(undefined);
       expect(result.current[0].variables).toEqual({ name: "world 1" });
-      await waitFor(() => {
-        expect(result.current[0].loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current[0].loading).toBe(false);
+        },
+        { interval: 1 }
+      );
 
       expect(result.current[0].data).toEqual({ hello: "world 1" });
       expect(result.current[0].variables).toEqual({ name: "world 1" });
@@ -520,7 +598,7 @@ describe('useQuery Hook', () => {
     });
 
     // TODO: Rewrite this test
-    it('should not error when forcing an update with React >= 16.13.0', async () => {
+    it("should not error when forcing an update with React >= 16.13.0", async () => {
       const CAR_QUERY: DocumentNode = gql`
         query {
           cars {
@@ -534,24 +612,24 @@ describe('useQuery Hook', () => {
       const CAR_RESULT_DATA = {
         cars: [
           {
-            make: 'Audi',
-            model: 'RS8',
-            vin: 'DOLLADOLLABILL',
-            __typename: 'Car'
-          }
-        ]
+            make: "Audi",
+            model: "RS8",
+            vin: "DOLLADOLLABILL",
+            __typename: "Car",
+          },
+        ],
       };
       let wasUpdateErrorLogged = false;
       const consoleError = console.error;
       console.error = (msg: string) => {
         console.log(msg);
-        wasUpdateErrorLogged = msg.indexOf('Cannot update a component') > -1;
+        wasUpdateErrorLogged = msg.indexOf("Cannot update a component") > -1;
       };
 
-      const CAR_MOCKS = [1, 2, 3, 4, 5, 6].map(something => ({
+      const CAR_MOCKS = [1, 2, 3, 4, 5, 6].map((something) => ({
         request: {
           query: CAR_QUERY,
-          variables: { something }
+          variables: { something },
         },
         result: { data: CAR_RESULT_DATA },
       }));
@@ -560,8 +638,8 @@ describe('useQuery Hook', () => {
 
       const InnerComponent = ({ something }: any) => {
         const { loading, data } = useQuery(CAR_QUERY, {
-          fetchPolicy: 'network-only',
-          variables: { something }
+          fetchPolicy: "network-only",
+          variables: { something },
         });
         renderCount += 1;
         if (loading) return null;
@@ -572,7 +650,7 @@ describe('useQuery Hook', () => {
 
       function WrapperComponent({ something }: any) {
         const { loading } = useQuery(CAR_QUERY, {
-          variables: { something }
+          variables: { something },
         });
         return loading ? null : <InnerComponent something={something + 1} />;
       }
@@ -589,36 +667,39 @@ describe('useQuery Hook', () => {
 
       await waitFor(() => {
         expect(renderCount).toBe(6);
-      })
+      });
       console.error = consoleError;
     });
 
-    it('should tear down the query on unmount', async () => {
-      const query = gql`{ hello }`;
+    it("should tear down the query on unmount", async () => {
+      const query = gql`
+        {
+          hello
+        }
+      `;
       const client = new ApolloClient({
-        link: new ApolloLink(() => Observable.of({ data: { hello: 'world' } })),
+        link: new ApolloLink(() => Observable.of({ data: { hello: "world" } })),
         cache: new InMemoryCache(),
       });
 
       const wrapper = ({ children }: any) => (
-        <ApolloProvider client={client}>
-          {children}
-        </ApolloProvider>
+        <ApolloProvider client={client}>{children}</ApolloProvider>
       );
 
-      const { unmount } = renderHook(
-        () => useQuery(query),
-        { wrapper },
-      );
+      const { unmount } = renderHook(() => useQuery(query), { wrapper });
 
       expect(client.getObservableQueries().size).toBe(1);
       unmount();
-      await new Promise(resolve => setTimeout(resolve));
+      await new Promise((resolve) => setTimeout(resolve));
       expect(client.getObservableQueries().size).toBe(0);
     });
 
-    it('should work with ssr: false', async () => {
-      const query = gql`{ hello }`;
+    it("should work with ssr: false", async () => {
+      const query = gql`
+        {
+          hello
+        }
+      `;
       const mocks = [
         {
           request: { query },
@@ -626,24 +707,24 @@ describe('useQuery Hook', () => {
         },
       ];
 
-      const { result } = renderHook(
-        () => useQuery(query, { ssr: false }),
-        {
-          wrapper: ({ children }) => (
-            <MockedProvider mocks={mocks}>{children}</MockedProvider>
-          ),
-        },
-      );
+      const { result } = renderHook(() => useQuery(query, { ssr: false }), {
+        wrapper: ({ children }) => (
+          <MockedProvider mocks={mocks}>{children}</MockedProvider>
+        ),
+      });
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current.data).toEqual({ hello: "world" });
     });
 
-    it('should keep `no-cache` results when the tree is re-rendered', async () => {
+    it("should keep `no-cache` results when the tree is re-rendered", async () => {
       const query1 = gql`
         query people {
           allPeople(first: 1) {
@@ -665,12 +746,12 @@ describe('useQuery Hook', () => {
       `;
 
       const allPeopleData = {
-        allPeople: { people: [{ name: 'Luke Skywalker' }] },
+        allPeople: { people: [{ name: "Luke Skywalker" }] },
       };
 
       const allThingsData = {
         allThings: {
-          thing: [{ description: 'Thing 1' }, { description: 'Thing 2' }],
+          thing: [{ description: "Thing 1" }, { description: "Thing 2" }],
         },
       };
 
@@ -683,7 +764,7 @@ describe('useQuery Hook', () => {
           request: { query: query2 },
           result: { data: allThingsData },
           delay: 50,
-        },
+        }
       );
 
       const client = new ApolloClient({
@@ -692,17 +773,12 @@ describe('useQuery Hook', () => {
       });
 
       const { result, rerender } = renderHook(
-        () => [
-          useQuery(query1, { fetchPolicy: "no-cache" }),
-          useQuery(query2),
-        ],
+        () => [useQuery(query1, { fetchPolicy: "no-cache" }), useQuery(query2)],
         {
           wrapper: ({ children }) => (
-            <ApolloProvider client={client}>
-              {children}
-            </ApolloProvider>
+            <ApolloProvider client={client}>{children}</ApolloProvider>
           ),
-        },
+        }
       );
 
       expect(result.current[0].loading).toBe(true);
@@ -710,31 +786,55 @@ describe('useQuery Hook', () => {
       expect(result.current[1].loading).toBe(true);
       expect(result.current[1].data).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current[0].loading).toBe(false);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current[0].data).toEqual(allPeopleData);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current[1].loading).toBe(true);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current[1].data).toBe(undefined);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current[0].loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current[0].data).toEqual(allPeopleData);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current[1].loading).toBe(true);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current[1].data).toBe(undefined);
+        },
+        { interval: 1 }
+      );
 
-      await waitFor(() => {
-        expect(result.current[0].loading).toBe(false);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current[0].data).toEqual(allPeopleData);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current[1].loading).toBe(false);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current[1].data).toEqual(allThingsData);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current[0].loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current[0].data).toEqual(allPeopleData);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current[1].loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current[1].data).toEqual(allThingsData);
+        },
+        { interval: 1 }
+      );
 
       rerender();
       expect(result.current[0].loading).toBe(false);
@@ -743,16 +843,25 @@ describe('useQuery Hook', () => {
       expect(result.current[1].data).toEqual(allThingsData);
     });
 
-    it('changing queries', async () => {
-      const query1 = gql`query { hello }`;
-      const query2 = gql`query { hello, name }`;
-      const mocks = [
-        {
-          request: { query: query1 },
-          result: { data: { hello: "world" } },
-        },
-        {
-          request: { query: query2 },
+    it("changing queries", async () => {
+      const query1 = gql`
+        query {
+          hello
+        }
+      `;
+      const query2 = gql`
+        query {
+          hello
+          name
+        }
+      `;
+      const mocks = [
+        {
+          request: { query: query1 },
+          result: { data: { hello: "world" } },
+        },
+        {
+          request: { query: query2 },
           result: { data: { hello: "world", name: "world" } },
         },
       ];
@@ -767,137 +876,157 @@ describe('useQuery Hook', () => {
             </MockedProvider>
           ),
           initialProps: { query: query1 },
-        },
+        }
       );
 
       expect(result.current.loading).toBe(true);
       rerender({ query: query2 });
       expect(result.current.loading).toBe(true);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current.data).toEqual(mocks[1].result.data);
     });
 
-    it('`cache-and-network` fetch policy', async () => {
-      const query = gql`{ hello }`;
+    it("`cache-and-network` fetch policy", async () => {
+      const query = gql`
+        {
+          hello
+        }
+      `;
 
       const cache = new InMemoryCache();
-      const link = mockSingleLink(
-        {
-          request: { query },
-          result: { data: { hello: 'from link' } },
-          delay: 20,
-        },
-      );
+      const link = mockSingleLink({
+        request: { query },
+        result: { data: { hello: "from link" } },
+        delay: 20,
+      });
 
       const client = new ApolloClient({
         link,
         cache,
       });
 
-      cache.writeQuery({ query, data: { hello: 'from cache' }});
+      cache.writeQuery({ query, data: { hello: "from cache" } });
 
       const { result } = renderHook(
-        () => useQuery(query, { fetchPolicy: 'cache-and-network' }),
+        () => useQuery(query, { fetchPolicy: "cache-and-network" }),
         {
           wrapper: ({ children }) => (
-            <ApolloProvider client={client}>
-              {children}
-            </ApolloProvider>
+            <ApolloProvider client={client}>{children}</ApolloProvider>
           ),
-        },
+        }
       );
 
       // TODO: FIXME
       expect(result.current.loading).toBe(true);
-      expect(result.current.data).toEqual({ hello: 'from cache' });
+      expect(result.current.data).toEqual({ hello: "from cache" });
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
-      expect(result.current.data).toEqual({ hello: 'from link' });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      expect(result.current.data).toEqual({ hello: "from link" });
     });
 
-    it('should not use the cache when using `network-only`', async () => {
-      const query = gql`{ hello }`;
+    it("should not use the cache when using `network-only`", async () => {
+      const query = gql`
+        {
+          hello
+        }
+      `;
       const mocks = [
         {
           request: { query },
-          result: { data: { hello: 'from link' } },
+          result: { data: { hello: "from link" } },
         },
       ];
 
       const cache = new InMemoryCache();
       cache.writeQuery({
         query,
-        data: { hello: 'from cache' },
+        data: { hello: "from cache" },
       });
 
       const { result } = renderHook(
-        () => useQuery(query, { fetchPolicy: 'network-only' }),
+        () => useQuery(query, { fetchPolicy: "network-only" }),
         {
           wrapper: ({ children }) => (
             <MockedProvider mocks={mocks} cache={cache}>
               {children}
             </MockedProvider>
           ),
-        },
+        }
       );
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBeUndefined();
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
-      expect(result.current.data).toEqual({ hello: 'from link' });
-    });
-
-    it('should use the cache when in ssrMode and fetchPolicy is `network-only`', async () => {
-      const query = gql`query { hello }`;
-      const link = mockSingleLink(
-        {
-          request: { query },
-          result: { data: { hello: 'from link' } },
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
         },
+        { interval: 1 }
       );
+      expect(result.current.data).toEqual({ hello: "from link" });
+    });
+
+    it("should use the cache when in ssrMode and fetchPolicy is `network-only`", async () => {
+      const query = gql`
+        query {
+          hello
+        }
+      `;
+      const link = mockSingleLink({
+        request: { query },
+        result: { data: { hello: "from link" } },
+      });
 
       const cache = new InMemoryCache();
       cache.writeQuery({
         query,
-        data: { hello: 'from cache' },
+        data: { hello: "from cache" },
       });
 
-      const client = new ApolloClient({ link, cache, ssrMode: true, });
+      const client = new ApolloClient({ link, cache, ssrMode: true });
       const { result } = renderHook(
-        () => useQuery(query, { fetchPolicy: 'network-only' }),
+        () => useQuery(query, { fetchPolicy: "network-only" }),
         {
           wrapper: ({ children }) => (
-            <ApolloProvider client={client}>
-              {children}
-            </ApolloProvider>
+            <ApolloProvider client={client}>{children}</ApolloProvider>
           ),
-        },
+        }
       );
 
       expect(result.current.loading).toBe(false);
-      expect(result.current.data).toEqual({ hello: 'from cache' });
+      expect(result.current.data).toEqual({ hello: "from cache" });
 
-      await expect(waitFor(() => {
-        expect(result.current.data).toEqual({ hello: 'from link' });
-      }, { interval: 1, timeout: 20 })).rejects.toThrow();
+      await expect(
+        waitFor(
+          () => {
+            expect(result.current.data).toEqual({ hello: "from link" });
+          },
+          { interval: 1, timeout: 20 }
+        )
+      ).rejects.toThrow();
     });
 
-    it('should not hang when ssrMode is true but the cache is not populated for some reason', async () => {
-      const query = gql`query { hello }`;
-      const link = mockSingleLink(
-        {
-          request: { query },
-          result: { data: { hello: 'from link' } },
-        },
-      );
+    it("should not hang when ssrMode is true but the cache is not populated for some reason", async () => {
+      const query = gql`
+        query {
+          hello
+        }
+      `;
+      const link = mockSingleLink({
+        request: { query },
+        result: { data: { hello: "from link" } },
+      });
 
       const client = new ApolloClient({
         link,
@@ -905,36 +1034,36 @@ describe('useQuery Hook', () => {
         ssrMode: true,
       });
 
-      const { result } = renderHook(
-        () => useQuery(query),
-        {
-          wrapper: ({ children }) => (
-            <ApolloProvider client={client}>
-              {children}
-            </ApolloProvider>
-          ),
-        },
-      );
+      const { result } = renderHook(() => useQuery(query), {
+        wrapper: ({ children }) => (
+          <ApolloProvider client={client}>{children}</ApolloProvider>
+        ),
+      });
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBeUndefined();
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
-      expect(result.current.data).toEqual({ hello: 'from link' });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      expect(result.current.data).toEqual({ hello: "from link" });
     });
   });
 
   describe("options.defaultOptions", () => {
     it("can provide a default fetchPolicy", async () => {
-      const query = gql`query { hello }`;
-      const link = mockSingleLink(
-        {
-          request: { query },
-          result: { data: { hello: 'from link' } },
-        },
-      );
+      const query = gql`
+        query {
+          hello
+        }
+      `;
+      const link = mockSingleLink({
+        request: { query },
+        result: { data: { hello: "from link" } },
+      });
 
       const client = new ApolloClient({
         link,
@@ -957,28 +1086,27 @@ describe('useQuery Hook', () => {
         },
         {
           wrapper: ({ children }) => (
-            <ApolloProvider client={client}>
-              {children}
-            </ApolloProvider>
+            <ApolloProvider client={client}>{children}</ApolloProvider>
           ),
         }
       );
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBeUndefined();
-      expect(fetchPolicyLog).toEqual([
-        "cache-and-network",
-      ]);
+      expect(fetchPolicyLog).toEqual(["cache-and-network"]);
 
       // Change the default fetchPolicy to verify that it is not used the second
       // time useQuery is called.
       defaultFetchPolicy = "network-only";
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
 
-      expect(result.current.data).toEqual({ hello: 'from link' });
+      expect(result.current.data).toEqual({ hello: "from link" });
       expect(fetchPolicyLog).toEqual([
         "cache-and-network",
         "cache-and-network",
@@ -986,23 +1114,29 @@ describe('useQuery Hook', () => {
     });
 
     it("can provide individual default variables", async () => {
-      const query: TypedDocumentNode<{
-        vars: OperationVariables,
-      }, OperationVariables> = gql`
+      const query: TypedDocumentNode<
+        {
+          vars: OperationVariables;
+        },
+        OperationVariables
+      > = gql`
         query VarsQuery {
           vars
         }
       `;
 
       const client = new ApolloClient({
-        link: new ApolloLink(request => new Observable(observer => {
-          observer.next({
-            data: {
-              vars: request.variables,
-            },
-          });
-          observer.complete();
-        })),
+        link: new ApolloLink(
+          (request) =>
+            new Observable((observer) => {
+              observer.next({
+                data: {
+                  vars: request.variables,
+                },
+              });
+              observer.complete();
+            })
+        ),
 
         cache: new InMemoryCache(),
 
@@ -1037,9 +1171,7 @@ describe('useQuery Hook', () => {
         },
         {
           wrapper: ({ children }) => (
-            <ApolloProvider client={client}>
-              {children}
-            </ApolloProvider>
+            <ApolloProvider client={client}>{children}</ApolloProvider>
           ),
         }
       );
@@ -1052,9 +1184,9 @@ describe('useQuery Hook', () => {
         mandatory: true,
       });
 
-      expect(
-        result.current.observable.options.fetchPolicy
-      ).toBe("cache-and-network");
+      expect(result.current.observable.options.fetchPolicy).toBe(
+        "cache-and-network"
+      );
 
       expect(
         // The defaultOptions field is for useQuery options (QueryHookOptions),
@@ -1062,13 +1194,14 @@ describe('useQuery Hook', () => {
         "defaultOptions" in result.current.observable.options
       ).toBe(false);
 
-      expect(fetchPolicyLog).toEqual([
-        "cache-and-network",
-      ]);
+      expect(fetchPolicyLog).toEqual(["cache-and-network"]);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
 
       expect(result.current.data).toEqual({
         vars: {
@@ -1083,30 +1216,32 @@ describe('useQuery Hook', () => {
         "cache-and-network",
       ]);
 
-      const reobservePromise = act(() => result.current.observable.reobserve({
-        fetchPolicy: "network-only",
-        nextFetchPolicy: "cache-first",
-        variables: {
-          // Since reobserve replaces the variables object rather than merging
-          // the individual variables together, we need to include the current
-          // variables manually if we want them to show up in the output below.
-          ...result.current.observable.variables,
-          sourceOfVar: "reobserve",
-        },
-      }).then(finalResult => {
-        expect(finalResult.loading).toBe(false);
-        expect(finalResult.data).toEqual({
-          vars: {
-            sourceOfVar: "reobserve",
-            isGlobal: false,
-            mandatory: true,
-          },
-        });
-      }));
+      const reobservePromise = act(() =>
+        result.current.observable
+          .reobserve({
+            fetchPolicy: "network-only",
+            nextFetchPolicy: "cache-first",
+            variables: {
+              // Since reobserve replaces the variables object rather than merging
+              // the individual variables together, we need to include the current
+              // variables manually if we want them to show up in the output below.
+              ...result.current.observable.variables,
+              sourceOfVar: "reobserve",
+            },
+          })
+          .then((finalResult) => {
+            expect(finalResult.loading).toBe(false);
+            expect(finalResult.data).toEqual({
+              vars: {
+                sourceOfVar: "reobserve",
+                isGlobal: false,
+                mandatory: true,
+              },
+            });
+          })
+      );
 
-      expect(
-        result.current.observable.options.fetchPolicy
-      ).toBe("cache-first");
+      expect(result.current.observable.options.fetchPolicy).toBe("cache-first");
 
       expect(result.current.observable.variables).toEqual({
         sourceOfVar: "reobserve",
@@ -1116,9 +1251,7 @@ describe('useQuery Hook', () => {
 
       await reobservePromise;
 
-      expect(
-        result.current.observable.options.fetchPolicy
-      ).toBe("cache-first");
+      expect(result.current.observable.options.fetchPolicy).toBe("cache-first");
 
       expect(result.current.loading).toBe(false);
       expect(result.current.data).toEqual({
@@ -1128,9 +1261,7 @@ describe('useQuery Hook', () => {
           mandatory: true,
         },
       });
-      expect(
-        result.current.observable.variables
-      ).toEqual(
+      expect(result.current.observable.variables).toEqual(
         result.current.data!.vars
       );
 
@@ -1140,30 +1271,32 @@ describe('useQuery Hook', () => {
         "cache-first",
       ]);
 
-      const reobserveNoVarMergePromise = act(() => result.current.observable.reobserve({
-        fetchPolicy: "network-only",
-        nextFetchPolicy: "cache-first",
-        variables: {
-          // This reobservation is like the one above, with no variable merging.
-          // ...result.current.observable.variables,
-          sourceOfVar: "reobserve without variable merge",
-        },
-      }).then(finalResult => {
-        expect(finalResult.loading).toBe(false);
-        expect(finalResult.data).toEqual({
-          vars: {
-            sourceOfVar: "reobserve without variable merge",
-            // Since we didn't merge in result.current.observable.variables, we
-            // don't see these variables anymore:
-            // isGlobal: false,
-            // mandatory: true,
-          },
-        });
-      }));
+      const reobserveNoVarMergePromise = act(() =>
+        result.current.observable
+          .reobserve({
+            fetchPolicy: "network-only",
+            nextFetchPolicy: "cache-first",
+            variables: {
+              // This reobservation is like the one above, with no variable merging.
+              // ...result.current.observable.variables,
+              sourceOfVar: "reobserve without variable merge",
+            },
+          })
+          .then((finalResult) => {
+            expect(finalResult.loading).toBe(false);
+            expect(finalResult.data).toEqual({
+              vars: {
+                sourceOfVar: "reobserve without variable merge",
+                // Since we didn't merge in result.current.observable.variables, we
+                // don't see these variables anymore:
+                // isGlobal: false,
+                // mandatory: true,
+              },
+            });
+          })
+      );
 
-      expect(
-        result.current.observable.options.fetchPolicy
-      ).toBe("cache-first");
+      expect(result.current.observable.options.fetchPolicy).toBe("cache-first");
 
       expect(result.current.observable.variables).toEqual({
         sourceOfVar: "reobserve without variable merge",
@@ -1171,9 +1304,7 @@ describe('useQuery Hook', () => {
 
       await reobserveNoVarMergePromise;
 
-      expect(
-        result.current.observable.options.fetchPolicy
-      ).toBe("cache-first");
+      expect(result.current.observable.options.fetchPolicy).toBe("cache-first");
 
       expect(result.current.loading).toBe(false);
       expect(result.current.data).toEqual({
@@ -1181,9 +1312,7 @@ describe('useQuery Hook', () => {
           sourceOfVar: "reobserve without variable merge",
         },
       });
-      expect(
-        result.current.observable.variables
-      ).toEqual(
+      expect(result.current.observable.variables).toEqual(
         result.current.data!.vars
       );
 
@@ -1207,22 +1336,27 @@ describe('useQuery Hook', () => {
       let count = 0;
       const client = new ApolloClient({
         cache: new InMemoryCache(),
-        link: new ApolloLink(request => new Observable(observer => {
-          if (request.operationName === "GetCounter") {
-            observer.next({
-              data: {
-                counter: ++count,
-              },
-            });
-            setTimeout(() => {
-              observer.complete();
-            }, 10);
-          } else {
-            observer.error(new Error(`Unknown query: ${
-              request.operationName || request.query
-            }`));
-          }
-        })),
+        link: new ApolloLink(
+          (request) =>
+            new Observable((observer) => {
+              if (request.operationName === "GetCounter") {
+                observer.next({
+                  data: {
+                    counter: ++count,
+                  },
+                });
+                setTimeout(() => {
+                  observer.complete();
+                }, 10);
+              } else {
+                observer.error(
+                  new Error(
+                    `Unknown query: ${request.operationName || request.query}`
+                  )
+                );
+              }
+            })
+        ),
       });
 
       const defaultFetchPolicy = "network-only";
@@ -1242,20 +1376,23 @@ describe('useQuery Hook', () => {
         },
         {
           wrapper: ({ children }) => (
-            <ApolloProvider client={client}>
-              {children}
-            </ApolloProvider>
+            <ApolloProvider client={client}>{children}</ApolloProvider>
           ),
-        },
+        }
       );
 
       expect(result.current.query.loading).toBe(false);
       expect(result.current.query.networkStatus).toBe(NetworkStatus.ready);
       expect(result.current.query.data).toBeUndefined();
 
-      await expect(waitFor(() => {
-        expect(result.current.query.data).toEqual({ counter: 1 });
-      }, { interval: 1, timeout: 20 })).rejects.toThrow();
+      await expect(
+        waitFor(
+          () => {
+            expect(result.current.query.data).toEqual({ counter: 1 });
+          },
+          { interval: 1, timeout: 20 }
+        )
+      ).rejects.toThrow();
 
       act(() => {
         result.current.setSkip(false);
@@ -1263,9 +1400,12 @@ describe('useQuery Hook', () => {
       expect(result.current.query.loading).toBe(true);
       expect(result.current.query.networkStatus).toBe(NetworkStatus.loading);
       expect(result.current.query.data).toBeUndefined();
-      await waitFor(() => {
-        expect(result.current.query.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.query.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current.query.networkStatus).toBe(NetworkStatus.ready);
       expect(result.current.query.data).toEqual({ counter: 1 });
 
@@ -1279,9 +1419,14 @@ describe('useQuery Hook', () => {
       expect(result.current.query.networkStatus).toBe(NetworkStatus.ready);
       expect(result.current.query.data).toBeUndefined();
 
-      await expect(waitFor(() => {
-        expect(result.current.query.data).toEqual({ counter: 1 });
-      }, { interval: 1, timeout: 20 })).rejects.toThrow();
+      await expect(
+        waitFor(
+          () => {
+            expect(result.current.query.data).toEqual({ counter: 1 });
+          },
+          { interval: 1, timeout: 20 }
+        )
+      ).rejects.toThrow();
 
       act(() => {
         result.current.setSkip(false);
@@ -1289,9 +1434,12 @@ describe('useQuery Hook', () => {
       expect(result.current.query.loading).toBe(true);
       expect(result.current.query.networkStatus).toBe(NetworkStatus.loading);
       expect(result.current.query.data).toEqual({ counter: 1 });
-      await waitFor(() => {
-        expect(result.current.query.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.query.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current.query.networkStatus).toBe(NetworkStatus.ready);
       expect(result.current.query.data).toEqual({ counter: 2 });
 
@@ -1300,13 +1448,15 @@ describe('useQuery Hook', () => {
   });
 
   it("can provide options.client without ApolloProvider", async () => {
-    const query = gql`query { hello }`;
-    const link = mockSingleLink(
-      {
-        request: { query },
-        result: { data: { hello: 'from link' } },
-      },
-    );
+    const query = gql`
+      query {
+        hello
+      }
+    `;
+    const link = mockSingleLink({
+      request: { query },
+      result: { data: { hello: "from link" } },
+    });
 
     const client = new ApolloClient({
       link,
@@ -1315,7 +1465,7 @@ describe('useQuery Hook', () => {
     });
 
     const { result } = renderHook(
-      () => useQuery(query, { client }),
+      () => useQuery(query, { client })
       // We deliberately do not provide the usual ApolloProvider wrapper for
       // this test, since we are providing the client directly to useQuery.
       // {
@@ -1330,54 +1480,68 @@ describe('useQuery Hook', () => {
     expect(result.current.loading).toBe(true);
     expect(result.current.data).toBeUndefined();
 
-    await waitFor(() => {
-      expect(result.current.loading).toBe(false);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current.loading).toBe(false);
+      },
+      { interval: 1 }
+    );
 
-    expect(result.current.data).toEqual({ hello: 'from link' });
+    expect(result.current.data).toEqual({ hello: "from link" });
   });
 
-  describe('<React.StrictMode>', () => {
+  describe("<React.StrictMode>", () => {
     it("double-rendering should not trigger duplicate network requests", async () => {
       const query: TypedDocumentNode<{
         linkCount: number;
-      }> = gql`query Counter { linkCount }`;
+      }> = gql`
+        query Counter {
+          linkCount
+        }
+      `;
 
       let linkCount = 0;
       const client = new ApolloClient({
         cache: new InMemoryCache(),
-        link: new ApolloLink(request => new Observable(observer => {
-          if (request.operationName === "Counter") {
-            observer.next({
-              data: {
-                linkCount: ++linkCount,
-              },
-            });
-            observer.complete();
-          }
-        })),
+        link: new ApolloLink(
+          (request) =>
+            new Observable((observer) => {
+              if (request.operationName === "Counter") {
+                observer.next({
+                  data: {
+                    linkCount: ++linkCount,
+                  },
+                });
+                observer.complete();
+              }
+            })
+        ),
       });
 
       const { result } = renderHook(
-        () => useQuery(query, {
-          fetchPolicy: "cache-and-network",
-        }),
+        () =>
+          useQuery(query, {
+            fetchPolicy: "cache-and-network",
+          }),
         {
           wrapper: ({ children }) => (
             <React.StrictMode>
               <ApolloProvider client={client}>{children}</ApolloProvider>
             </React.StrictMode>
           ),
-        },
+        }
       );
 
       expect(result.current.loading).toBe(true);
       expect(result.current.networkStatus).toBe(NetworkStatus.loading);
       expect(result.current.data).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current.networkStatus).toBe(NetworkStatus.ready);
       expect(result.current.data).toEqual({
         linkCount: 1,
@@ -1389,7 +1553,7 @@ describe('useQuery Hook', () => {
 
         const activeSet = new Set<typeof result.current.observable>();
         const inactiveSet = new Set<typeof result.current.observable>();
-        obsQueries.forEach(obsQuery => {
+        obsQueries.forEach((obsQuery) => {
           if (obsQuery.hasObservers()) {
             expect(inactiveSet.has(obsQuery)).toBe(false);
             activeSet.add(obsQuery);
@@ -1411,7 +1575,7 @@ describe('useQuery Hook', () => {
 
       checkObservableQueries(1);
 
-      await result.current.reobserve().then(result => {
+      await result.current.reobserve().then((result) => {
         expect(result.loading).toBe(false);
         expect(result.loading).toBe(false);
         expect(result.networkStatus).toBe(NetworkStatus.ready);
@@ -1423,22 +1587,32 @@ describe('useQuery Hook', () => {
       await waitFor(() => {
         expect(result.current.loading).toBe(false);
       });
-      await waitFor(() => {
-        expect(result.current.data).toEqual({
-          linkCount: 2,
-        });
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current.networkStatus).toBe(NetworkStatus.ready);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.data).toEqual({
+            linkCount: 2,
+          });
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current.networkStatus).toBe(NetworkStatus.ready);
+        },
+        { interval: 1 }
+      );
 
       checkObservableQueries(2);
     });
   });
 
-  describe('polling', () => {
-    it('should support polling', async () => {
-      const query = gql`{ hello }`;
+  describe("polling", () => {
+    it("should support polling", async () => {
+      const query = gql`
+        {
+          hello
+        }
+      `;
       const mocks = [
         {
           request: { query },
@@ -1456,44 +1630,64 @@ describe('useQuery Hook', () => {
 
       const cache = new InMemoryCache();
       const wrapper = ({ children }: any) => (
-        <MockedProvider mocks={mocks} cache={cache}>{children}</MockedProvider>
+        <MockedProvider mocks={mocks} cache={cache}>
+          {children}
+        </MockedProvider>
       );
 
       const { result } = renderHook(
         () => useQuery(query, { pollInterval: 10 }),
-        { wrapper },
+        { wrapper }
       );
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.data).toEqual({ hello: "world 1" });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.data).toEqual({ hello: "world 1" });
+        },
+        { interval: 1 }
+      );
 
       expect(result.current.loading).toBe(false);
 
-      await waitFor(() => {
-        expect(result.current.data).toEqual({ hello: "world 2" });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.data).toEqual({ hello: "world 2" });
+        },
+        { interval: 1 }
+      );
 
       expect(result.current.loading).toBe(false);
 
-      await waitFor(() => {
-        expect(result.current.data).toEqual({ hello: "world 3" });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.data).toEqual({ hello: "world 3" });
+        },
+        { interval: 1 }
+      );
 
       expect(result.current.loading).toBe(false);
 
       const { data: previousData } = result.current;
       result.current.stopPolling();
-      await expect(waitFor(() => {
-        expect(result.current.data).not.toEqual(previousData);
-      }, { interval: 1, timeout: 20 })).rejects.toThrow();
+      await expect(
+        waitFor(
+          () => {
+            expect(result.current.data).not.toEqual(previousData);
+          },
+          { interval: 1, timeout: 20 }
+        )
+      ).rejects.toThrow();
     });
 
-    it('should start polling when skip goes from true to false', async () => {
-      const query = gql`{ hello }`;
+    it("should start polling when skip goes from true to false", async () => {
+      const query = gql`
+        {
+          hello
+        }
+      `;
       const mocks = [
         {
           request: { query },
@@ -1521,16 +1715,19 @@ describe('useQuery Hook', () => {
               {children}
             </MockedProvider>
           ),
-          initialProps: { skip: undefined } as any
-        },
+          initialProps: { skip: undefined } as any,
+        }
       );
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
 
       expect(result.current.loading).toBe(false);
       expect(result.current.data).toEqual({ hello: "world 1" });
@@ -1539,27 +1736,42 @@ describe('useQuery Hook', () => {
       expect(result.current.loading).toBe(false);
       expect(result.current.data).toBe(undefined);
 
-      await expect(waitFor(() => {
-        expect(result.current.data).toEqual({ hello: "world 1" });
-      }, { interval: 1, timeout: 20 })).rejects.toThrow()
+      await expect(
+        waitFor(
+          () => {
+            expect(result.current.data).toEqual({ hello: "world 1" });
+          },
+          { interval: 1, timeout: 20 }
+        )
+      ).rejects.toThrow();
 
       rerender({ skip: false });
       expect(result.current.loading).toBe(false);
       expect(result.current.data).toEqual({ hello: "world 1" });
 
-      await waitFor(() => {
-        expect(result.current.data).toEqual({ hello: "world 2" });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.data).toEqual({ hello: "world 2" });
+        },
+        { interval: 1 }
+      );
       expect(result.current.loading).toBe(false);
 
-      await waitFor(() => {
-        expect(result.current.data).toEqual({ hello: "world 3" });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.data).toEqual({ hello: "world 3" });
+        },
+        { interval: 1 }
+      );
       expect(result.current.loading).toBe(false);
     });
 
     it("should return data from network when clients default fetch policy set to network-only", async () => {
-      const query = gql`{ hello }`;
+      const query = gql`
+        {
+          hello
+        }
+      `;
       const data = { hello: "world" };
       const mocks = [
         {
@@ -1584,22 +1796,26 @@ describe('useQuery Hook', () => {
         </MockedProvider>
       );
 
-      const { result } = renderHook(
-        () => useQuery(query),
-        { wrapper },
-      );
+      const { result } = renderHook(() => useQuery(query), { wrapper });
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current.data).toEqual(data);
     });
 
-    it('should stop polling when component unmounts', async () => {
-      const query = gql`{ hello }`;
+    it("should stop polling when component unmounts", async () => {
+      const query = gql`
+        {
+          hello
+        }
+      `;
       const mocks = [
         {
           request: { query },
@@ -1618,27 +1834,35 @@ describe('useQuery Hook', () => {
       const cache = new InMemoryCache();
 
       const link = new MockLink(mocks);
-      const requestSpy = jest.spyOn(link, 'request');
+      const requestSpy = jest.spyOn(link, "request");
       const onErrorFn = jest.fn();
       link.setOnError(onErrorFn);
       const wrapper = ({ children }: any) => (
-        <MockedProvider link={link} cache={cache}>{children}</MockedProvider>
+        <MockedProvider link={link} cache={cache}>
+          {children}
+        </MockedProvider>
       );
 
       const { result, unmount } = renderHook(
         () => useQuery(query, { pollInterval: 10 }),
-        { wrapper },
+        { wrapper }
       );
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current.data).toEqual({ hello: "world 1" });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current.data).toEqual({ hello: "world 1" });
+        },
+        { interval: 1 }
+      );
 
       await waitFor(() => {
         expect(requestSpy).toHaveBeenCalled();
@@ -1651,10 +1875,15 @@ describe('useQuery Hook', () => {
 
       expect(requestSpy).toHaveBeenCalledTimes(requestCount);
 
-      await expect(waitFor(() => {
-        const newRequestCount = requestSpy.mock.calls.length;
-        expect(newRequestCount).toBeGreaterThan(requestCount);
-      }, { interval: 1, timeout: 20 })).rejects.toThrow();
+      await expect(
+        waitFor(
+          () => {
+            const newRequestCount = requestSpy.mock.calls.length;
+            expect(newRequestCount).toBeGreaterThan(requestCount);
+          },
+          { interval: 1, timeout: 20 }
+        )
+      ).rejects.toThrow();
 
       await waitFor(() => {
         expect(onErrorFn).toHaveBeenCalledTimes(0);
@@ -1663,8 +1892,12 @@ describe('useQuery Hook', () => {
       requestSpy.mockRestore();
     });
 
-    it('should stop polling when component is unmounted in Strict Mode', async () => {
-      const query = gql`{ hello }`;
+    it("should stop polling when component is unmounted in Strict Mode", async () => {
+      const query = gql`
+        {
+          hello
+        }
+      `;
       const mocks = [
         {
           request: { query },
@@ -1685,26 +1918,31 @@ describe('useQuery Hook', () => {
 
       const cache = new InMemoryCache();
       const link = new MockLink(mocks);
-      const requestSpy = jest.spyOn(link, 'request');
+      const requestSpy = jest.spyOn(link, "request");
       const onErrorFn = jest.fn();
       link.setOnError(onErrorFn);
       const wrapper = ({ children }: any) => (
         <React.StrictMode>
-<MockedProvider link={link} cache={cache}>{children}</MockedProvider>
+          <MockedProvider link={link} cache={cache}>
+            {children}
+          </MockedProvider>
         </React.StrictMode>
       );
 
       const { result, unmount } = renderHook(
         () => useQuery(query, { pollInterval: 10 }),
-        { wrapper },
+        { wrapper }
       );
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current.data).toEqual({ hello: "world 1" });
 
       const requestSpyCallCount = requestSpy.mock.calls.length;
@@ -1713,17 +1951,26 @@ describe('useQuery Hook', () => {
       unmount();
 
       expect(requestSpy).toHaveBeenCalledTimes(requestSpyCallCount);
-      await expect(waitFor(() => {
-        expect(requestSpy).toHaveBeenCalledTimes(requestSpyCallCount + 1);
-      }, { interval: 1, timeout: 20 })).rejects.toThrow();
+      await expect(
+        waitFor(
+          () => {
+            expect(requestSpy).toHaveBeenCalledTimes(requestSpyCallCount + 1);
+          },
+          { interval: 1, timeout: 20 }
+        )
+      ).rejects.toThrow();
       expect(requestSpy).toHaveBeenCalledTimes(requestSpyCallCount);
       expect(onErrorFn).toHaveBeenCalledTimes(0);
 
       requestSpy.mockRestore();
     });
 
-    it('should start and stop polling in Strict Mode', async () => {
-      const query = gql`{ hello }`;
+    it("should start and stop polling in Strict Mode", async () => {
+      const query = gql`
+        {
+          hello
+        }
+      `;
       const mocks = [
         {
           request: { query },
@@ -1745,97 +1992,121 @@ describe('useQuery Hook', () => {
 
       const cache = new InMemoryCache();
       const link = new MockLink(mocks);
-      const requestSpy = jest.spyOn(link, 'request');
+      const requestSpy = jest.spyOn(link, "request");
       const onErrorFn = jest.fn();
       link.setOnError(onErrorFn);
       const wrapper = ({ children }: any) => (
         <React.StrictMode>
-          <MockedProvider link={link} cache={cache}>{children}</MockedProvider>
+          <MockedProvider link={link} cache={cache}>
+            {children}
+          </MockedProvider>
         </React.StrictMode>
       );
 
       const { result } = renderHook(
         () => useQuery(query, { pollInterval: 20 }),
-        { wrapper },
+        { wrapper }
       );
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.data).toEqual({ hello: "world 1" });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.data).toEqual({ hello: "world 1" });
+        },
+        { interval: 1 }
+      );
       expect(result.current.loading).toBe(false);
 
-
-      await waitFor(() => {
-        expect(result.current.data).toEqual({ hello: "world 2" });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.data).toEqual({ hello: "world 2" });
+        },
+        { interval: 1 }
+      );
       expect(result.current.loading).toBe(false);
 
-
       result.current.stopPolling();
 
-      await expect(waitFor(() => {
-        expect(result.current.data).toEqual({ hello: "world 3" });
-      }, { interval: 1, timeout: 20 })).rejects.toThrow();
+      await expect(
+        waitFor(
+          () => {
+            expect(result.current.data).toEqual({ hello: "world 3" });
+          },
+          { interval: 1, timeout: 20 }
+        )
+      ).rejects.toThrow();
       result.current.startPolling(20);
 
       expect(requestSpy).toHaveBeenCalledTimes(2);
       expect(onErrorFn).toHaveBeenCalledTimes(0);
 
-      await waitFor(() => {
-        expect(result.current.data).toEqual({ hello: "world 3" });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.data).toEqual({ hello: "world 3" });
+        },
+        { interval: 1 }
+      );
       expect(result.current.loading).toBe(false);
 
-      await waitFor(() => {
-        expect(result.current.data).toEqual({ hello: "world 4" });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.data).toEqual({ hello: "world 4" });
+        },
+        { interval: 1 }
+      );
       expect(result.current.loading).toBe(false);
       expect(requestSpy).toHaveBeenCalledTimes(4);
       expect(onErrorFn).toHaveBeenCalledTimes(0);
       requestSpy.mockRestore();
     });
 
-    it('should not throw an error if stopPolling is called manually', async () => {
-      const query = gql`{ hello }`;
+    it("should not throw an error if stopPolling is called manually", async () => {
+      const query = gql`
+        {
+          hello
+        }
+      `;
       const mocks = [
         {
           request: { query },
           result: {
-            data: { hello: 'world' },
-          }
-        }
+            data: { hello: "world" },
+          },
+        },
       ];
 
       const cache = new InMemoryCache();
       const wrapper = ({ children }: any) => (
-        <MockedProvider mocks={mocks} cache={cache}>{children}</MockedProvider>
+        <MockedProvider mocks={mocks} cache={cache}>
+          {children}
+        </MockedProvider>
       );
 
-      const { result, unmount } = renderHook(
-        () => useQuery(query),
-        { wrapper },
-      );
+      const { result, unmount } = renderHook(() => useQuery(query), {
+        wrapper,
+      });
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
 
-      expect(result.current.data).toEqual({ hello: 'world' });
+      expect(result.current.data).toEqual({ hello: "world" });
 
       unmount();
       result.current.stopPolling();
     });
   });
 
-  describe('Error handling', () => {
-
-    it('should pass along GraphQL errors', async () => {
+  describe("Error handling", () => {
+    it("should pass along GraphQL errors", async () => {
       const query = gql`
         query TestQuery {
           rates(currency: "USD") {
@@ -1848,106 +2119,124 @@ describe('useQuery Hook', () => {
         {
           request: { query },
           result: {
-            errors: [new GraphQLError('error')]
-          }
-        }
+            errors: [new GraphQLError("error")],
+          },
+        },
       ];
 
       const cache = new InMemoryCache();
       const wrapper = ({ children }: any) => (
-        <MockedProvider mocks={mocks} cache={cache}>{children}</MockedProvider>
+        <MockedProvider mocks={mocks} cache={cache}>
+          {children}
+        </MockedProvider>
       );
 
-      const { result } = renderHook(
-        () => useQuery(query),
-        { wrapper },
-      );
+      const { result } = renderHook(() => useQuery(query), { wrapper });
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current.error).toBeInstanceOf(ApolloError);
-      expect(result.current.error!.message).toBe('error');
+      expect(result.current.error!.message).toBe("error");
     });
 
-    it('calls `onError` when a GraphQL error is returned', async () => {
-      const query = gql`{ hello }`;
+    it("calls `onError` when a GraphQL error is returned", async () => {
+      const query = gql`
+        {
+          hello
+        }
+      `;
       const mocks = [
         {
           request: { query },
           result: {
-            errors: [new GraphQLError('error')],
+            errors: [new GraphQLError("error")],
           },
         },
       ];
 
       const cache = new InMemoryCache();
       const wrapper = ({ children }: any) => (
-        <MockedProvider mocks={mocks} cache={cache}>{children}</MockedProvider>
+        <MockedProvider mocks={mocks} cache={cache}>
+          {children}
+        </MockedProvider>
       );
 
       const onError = jest.fn();
-      const { result } = renderHook(
-        () => useQuery(query, { onError }),
-        { wrapper },
-      );
+      const { result } = renderHook(() => useQuery(query, { onError }), {
+        wrapper,
+      });
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
 
       expect(result.current.data).toBeUndefined();
       expect(result.current.error).toBeInstanceOf(ApolloError);
-      expect(result.current.error!.message).toBe('error');
+      expect(result.current.error!.message).toBe("error");
 
       await waitFor(() => {
         expect(onError).toHaveBeenCalledTimes(1);
       });
       await waitFor(() => {
         expect(onError).toHaveBeenCalledWith(
-          new ApolloError({ graphQLErrors: [new GraphQLError('error')] })
+          new ApolloError({ graphQLErrors: [new GraphQLError("error")] })
         );
       });
     });
 
-    it('calls `onError` when a network error has occured', async () => {
-      const query = gql`{ hello }`;
+    it("calls `onError` when a network error has occured", async () => {
+      const query = gql`
+        {
+          hello
+        }
+      `;
       const mocks = [
         {
           request: { query },
-          error: new Error('Could not fetch')
+          error: new Error("Could not fetch"),
         },
       ];
 
       const cache = new InMemoryCache();
       const wrapper = ({ children }: any) => (
-        <MockedProvider mocks={mocks} cache={cache}>{children}</MockedProvider>
+        <MockedProvider mocks={mocks} cache={cache}>
+          {children}
+        </MockedProvider>
       );
 
       const onError = jest.fn();
-      const { result } = renderHook(
-        () => useQuery(query, { onError }),
-        { wrapper },
-      );
+      const { result } = renderHook(() => useQuery(query, { onError }), {
+        wrapper,
+      });
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
       expect(result.current.error).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
 
       expect(result.current.data).toBeUndefined();
       expect(result.current.error).toBeInstanceOf(ApolloError);
-      expect(result.current.error!.message).toBe('Could not fetch');
+      expect(result.current.error!.message).toBe("Could not fetch");
       expect(result.current.error!.networkError).toEqual(
-        new Error('Could not fetch')
+        new Error("Could not fetch")
       );
 
       await waitFor(() => {
@@ -1955,79 +2244,96 @@ describe('useQuery Hook', () => {
       });
       await waitFor(() => {
         expect(onError).toHaveBeenCalledWith(
-          new ApolloError({ networkError: new Error('Could not fetch') })
+          new ApolloError({ networkError: new Error("Could not fetch") })
         );
       });
     });
 
-    it('removes partial data from result when response has errors', async () => {
-      const query = gql`{ hello }`;
+    it("removes partial data from result when response has errors", async () => {
+      const query = gql`
+        {
+          hello
+        }
+      `;
       const mocks = [
         {
           request: { query },
           result: {
             data: { hello: null },
-            errors: [new GraphQLError('Could not fetch "hello"')]
-          }
+            errors: [new GraphQLError('Could not fetch "hello"')],
+          },
         },
       ];
 
       const cache = new InMemoryCache();
       const wrapper = ({ children }: any) => (
-        <MockedProvider mocks={mocks} cache={cache}>{children}</MockedProvider>
+        <MockedProvider mocks={mocks} cache={cache}>
+          {children}
+        </MockedProvider>
       );
 
       const onError = jest.fn();
-      const { result } = renderHook(
-        () => useQuery(query, { onError }),
-        { wrapper },
-      );
+      const { result } = renderHook(() => useQuery(query, { onError }), {
+        wrapper,
+      });
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
       expect(result.current.error).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
 
       expect(result.current.data).toBeUndefined();
       expect(result.current.error).toBeInstanceOf(ApolloError);
       expect(result.current.error!.message).toBe('Could not fetch "hello"');
       expect(result.current.error!.graphQLErrors).toEqual([
-        new GraphQLError('Could not fetch "hello"')
+        new GraphQLError('Could not fetch "hello"'),
       ]);
     });
 
     it('does not call `onError` when returning GraphQL errors while using an `errorPolicy` set to "ignore"', async () => {
-      const query = gql`{ hello }`;
+      const query = gql`
+        {
+          hello
+        }
+      `;
       const mocks = [
         {
           request: { query },
           result: {
-            errors: [new GraphQLError('error')]
-          }
+            errors: [new GraphQLError("error")],
+          },
         },
       ];
 
       const cache = new InMemoryCache();
       const wrapper = ({ children }: any) => (
-        <MockedProvider mocks={mocks} cache={cache}>{children}</MockedProvider>
+        <MockedProvider mocks={mocks} cache={cache}>
+          {children}
+        </MockedProvider>
       );
 
       const onError = jest.fn();
       const { result } = renderHook(
-        () => useQuery(query, { onError, errorPolicy: 'ignore' }),
-        { wrapper },
+        () => useQuery(query, { onError, errorPolicy: "ignore" }),
+        { wrapper }
       );
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
       expect(result.current.error).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
 
       expect(result.current.data).toBeUndefined();
       expect(result.current.error).toBeUndefined();
@@ -2038,38 +2344,47 @@ describe('useQuery Hook', () => {
     });
 
     it('calls `onError` when a network error has occurred while using an `errorPolicy` set to "ignore"', async () => {
-      const query = gql`{ hello }`;
-      const mocks = [
+      const query = gql`
         {
-          request: { query },
-          error: new Error('Could not fetch')
-        },
+          hello
+        }
+      `;
+      const mocks = [
+        {
+          request: { query },
+          error: new Error("Could not fetch"),
+        },
       ];
 
       const cache = new InMemoryCache();
       const wrapper = ({ children }: any) => (
-        <MockedProvider mocks={mocks} cache={cache}>{children}</MockedProvider>
+        <MockedProvider mocks={mocks} cache={cache}>
+          {children}
+        </MockedProvider>
       );
 
       const onError = jest.fn();
       const { result } = renderHook(
-        () => useQuery(query, { onError, errorPolicy: 'ignore' }),
-        { wrapper },
+        () => useQuery(query, { onError, errorPolicy: "ignore" }),
+        { wrapper }
       );
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
       expect(result.current.error).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
 
       expect(result.current.data).toBeUndefined();
       expect(result.current.error).toBeInstanceOf(ApolloError);
-      expect(result.current.error!.message).toBe('Could not fetch');
+      expect(result.current.error!.message).toBe("Could not fetch");
       expect(result.current.error!.networkError).toEqual(
-        new Error('Could not fetch')
+        new Error("Could not fetch")
       );
 
       await waitFor(() => {
@@ -2077,76 +2392,94 @@ describe('useQuery Hook', () => {
       });
       await waitFor(() => {
         expect(onError).toHaveBeenCalledWith(
-          new ApolloError({ networkError: new Error('Could not fetch') })
+          new ApolloError({ networkError: new Error("Could not fetch") })
         );
       });
     });
 
     it('returns partial data and discards GraphQL errors when using an `errorPolicy` set to "ignore"', async () => {
-      const query = gql`{ hello }`;
+      const query = gql`
+        {
+          hello
+        }
+      `;
       const mocks = [
         {
           request: { query },
           result: {
             data: { hello: null },
-            errors: [new GraphQLError('Could not fetch "hello"')]
-          }
+            errors: [new GraphQLError('Could not fetch "hello"')],
+          },
         },
       ];
 
       const cache = new InMemoryCache();
       const wrapper = ({ children }: any) => (
-        <MockedProvider mocks={mocks} cache={cache}>{children}</MockedProvider>
+        <MockedProvider mocks={mocks} cache={cache}>
+          {children}
+        </MockedProvider>
       );
 
       const { result } = renderHook(
-        () => useQuery(query, { errorPolicy: 'ignore' }),
-        { wrapper },
+        () => useQuery(query, { errorPolicy: "ignore" }),
+        { wrapper }
       );
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
 
-      expect(result.current.data).toEqual({ hello: null })
+      expect(result.current.data).toEqual({ hello: null });
       expect(result.current.error).toBeUndefined();
     });
 
     it('calls `onCompleted` with partial data but avoids calling `onError` when using an `errorPolicy` set to "ignore"', async () => {
-      const query = gql`{ hello }`;
+      const query = gql`
+        {
+          hello
+        }
+      `;
       const mocks = [
         {
           request: { query },
           result: {
             data: { hello: null },
-            errors: [new GraphQLError('Could not fetch "hello"')]
-          }
+            errors: [new GraphQLError('Could not fetch "hello"')],
+          },
         },
       ];
 
       const cache = new InMemoryCache();
       const wrapper = ({ children }: any) => (
-        <MockedProvider mocks={mocks} cache={cache}>{children}</MockedProvider>
+        <MockedProvider mocks={mocks} cache={cache}>
+          {children}
+        </MockedProvider>
       );
 
       const onError = jest.fn();
       const onCompleted = jest.fn();
       const { result } = renderHook(
-        () => useQuery(query, { onError, onCompleted, errorPolicy: 'ignore' }),
-        { wrapper },
+        () => useQuery(query, { onError, onCompleted, errorPolicy: "ignore" }),
+        { wrapper }
       );
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
 
-      expect(result.current.data).toEqual({ hello: null })
+      expect(result.current.data).toEqual({ hello: null });
       expect(result.current.error).toBeUndefined();
 
       await waitFor(() => {
@@ -2161,39 +2494,48 @@ describe('useQuery Hook', () => {
     });
 
     it('calls `onError` when returning GraphQL errors while using an `errorPolicy` set to "all"', async () => {
-      const query = gql`{ hello }`;
+      const query = gql`
+        {
+          hello
+        }
+      `;
       const mocks = [
         {
           request: { query },
           result: {
-            errors: [new GraphQLError('error')]
-          }
+            errors: [new GraphQLError("error")],
+          },
         },
       ];
 
       const cache = new InMemoryCache();
       const wrapper = ({ children }: any) => (
-        <MockedProvider mocks={mocks} cache={cache}>{children}</MockedProvider>
+        <MockedProvider mocks={mocks} cache={cache}>
+          {children}
+        </MockedProvider>
       );
 
       const onError = jest.fn();
       const { result } = renderHook(
-        () => useQuery(query, { onError, errorPolicy: 'all' }),
-        { wrapper },
+        () => useQuery(query, { onError, errorPolicy: "all" }),
+        { wrapper }
       );
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
 
       expect(result.current.data).toBeUndefined();
       expect(result.current.error).toBeInstanceOf(ApolloError);
-      expect(result.current.error!.message).toBe('error');
+      expect(result.current.error!.message).toBe("error");
       expect(result.current.error!.graphQLErrors).toEqual([
-        new GraphQLError('error')
+        new GraphQLError("error"),
       ]);
 
       await waitFor(() => {
@@ -2201,85 +2543,103 @@ describe('useQuery Hook', () => {
       });
       await waitFor(() => {
         expect(onError).toHaveBeenCalledWith(
-          new ApolloError({ graphQLErrors: [new GraphQLError('error')] })
+          new ApolloError({ graphQLErrors: [new GraphQLError("error")] })
         );
       });
     });
 
     it('returns partial data when returning GraphQL errors while using an `errorPolicy` set to "all"', async () => {
-      const query = gql`{ hello }`;
+      const query = gql`
+        {
+          hello
+        }
+      `;
       const mocks = [
         {
           request: { query },
           result: {
             data: { hello: null },
-            errors: [new GraphQLError('Could not fetch "hello"')]
-          }
+            errors: [new GraphQLError('Could not fetch "hello"')],
+          },
         },
       ];
 
       const cache = new InMemoryCache();
       const wrapper = ({ children }: any) => (
-        <MockedProvider mocks={mocks} cache={cache}>{children}</MockedProvider>
+        <MockedProvider mocks={mocks} cache={cache}>
+          {children}
+        </MockedProvider>
       );
 
       const onError = jest.fn();
       const { result } = renderHook(
-        () => useQuery(query, { onError, errorPolicy: 'all' }),
-        { wrapper },
+        () => useQuery(query, { onError, errorPolicy: "all" }),
+        { wrapper }
       );
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
 
       expect(result.current.data).toEqual({ hello: null });
       expect(result.current.error).toBeInstanceOf(ApolloError);
       expect(result.current.error!.message).toBe('Could not fetch "hello"');
       expect(result.current.error!.graphQLErrors).toEqual([
-        new GraphQLError('Could not fetch "hello"')
+        new GraphQLError('Could not fetch "hello"'),
       ]);
     });
 
     it('calls `onError` but not `onCompleted` when returning partial data with GraphQL errors while using an `errorPolicy` set to "all"', async () => {
-      const query = gql`{ hello }`;
+      const query = gql`
+        {
+          hello
+        }
+      `;
       const mocks = [
         {
           request: { query },
           result: {
             data: { hello: null },
-            errors: [new GraphQLError('Could not fetch "hello"')]
-          }
+            errors: [new GraphQLError('Could not fetch "hello"')],
+          },
         },
       ];
 
       const cache = new InMemoryCache();
       const wrapper = ({ children }: any) => (
-        <MockedProvider mocks={mocks} cache={cache}>{children}</MockedProvider>
+        <MockedProvider mocks={mocks} cache={cache}>
+          {children}
+        </MockedProvider>
       );
 
       const onError = jest.fn();
       const onCompleted = jest.fn();
       const { result } = renderHook(
-        () => useQuery(query, { onError, onCompleted, errorPolicy: 'all' }),
-        { wrapper },
+        () => useQuery(query, { onError, onCompleted, errorPolicy: "all" }),
+        { wrapper }
       );
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
 
       expect(result.current.data).toEqual({ hello: null });
       expect(result.current.error).toBeInstanceOf(ApolloError);
       expect(result.current.error!.message).toBe('Could not fetch "hello"');
       expect(result.current.error!.graphQLErrors).toEqual([
-        new GraphQLError('Could not fetch "hello"')
+        new GraphQLError('Could not fetch "hello"'),
       ]);
 
       await waitFor(() => {
@@ -2288,7 +2648,7 @@ describe('useQuery Hook', () => {
       await waitFor(() => {
         expect(onError).toHaveBeenCalledWith(
           new ApolloError({
-            graphQLErrors: [new GraphQLError('Could not fetch "hello"')]
+            graphQLErrors: [new GraphQLError('Could not fetch "hello"')],
           })
         );
       });
@@ -2297,19 +2657,23 @@ describe('useQuery Hook', () => {
       });
     });
 
-    it('calls `onError` a single time when refetching returns a successful result', async () => {
-      const query = gql`{ hello }`;
+    it("calls `onError` a single time when refetching returns a successful result", async () => {
+      const query = gql`
+        {
+          hello
+        }
+      `;
       const mocks = [
         {
           request: { query },
           result: {
-            errors: [new GraphQLError('error')],
+            errors: [new GraphQLError("error")],
           },
         },
         {
           request: { query },
           result: {
-            data: { hello: 'world' },
+            data: { hello: "world" },
           },
           delay: 10,
         },
@@ -2317,94 +2681,120 @@ describe('useQuery Hook', () => {
 
       const cache = new InMemoryCache();
       const wrapper = ({ children }: any) => (
-        <MockedProvider mocks={mocks} cache={cache}>{children}</MockedProvider>
+        <MockedProvider mocks={mocks} cache={cache}>
+          {children}
+        </MockedProvider>
       );
 
       const onError = jest.fn();
       const { result } = renderHook(
-        () => useQuery(query, {
-          onError,
-          notifyOnNetworkStatusChange: true,
-        }),
-        { wrapper },
+        () =>
+          useQuery(query, {
+            onError,
+            notifyOnNetworkStatusChange: true,
+          }),
+        { wrapper }
       );
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
 
       expect(result.current.error).toBeInstanceOf(ApolloError);
-      expect(result.current.error!.message).toBe('error');
+      expect(result.current.error!.message).toBe("error");
 
       await new Promise((resolve) => setTimeout(resolve));
       expect(onError).toHaveBeenCalledTimes(1);
 
       result.current.refetch();
-      await waitFor(() => {
-        expect(result.current.loading).toBe(true);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(true);
+        },
+        { interval: 1 }
+      );
       expect(result.current.error).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
-      expect(result.current.data).toEqual({ hello: 'world' });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      expect(result.current.data).toEqual({ hello: "world" });
       expect(onError).toHaveBeenCalledTimes(1);
     });
 
-    it('should persist errors on re-render if they are still valid', async () => {
-      const query = gql`{ hello }`;
+    it("should persist errors on re-render if they are still valid", async () => {
+      const query = gql`
+        {
+          hello
+        }
+      `;
 
       const mocks = [
         {
           request: { query },
           result: {
-            errors: [new GraphQLError('error')]
-          }
-        }
+            errors: [new GraphQLError("error")],
+          },
+        },
       ];
 
       const cache = new InMemoryCache();
       const wrapper = ({ children }: any) => (
-        <MockedProvider mocks={mocks} cache={cache}>{children}</MockedProvider>
+        <MockedProvider mocks={mocks} cache={cache}>
+          {children}
+        </MockedProvider>
       );
 
       let updates = 0;
       const { result, rerender } = renderHook(
         () => (updates++, useQuery(query)),
-        { wrapper },
+        { wrapper }
       );
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
       expect(result.current.error).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
 
       expect(result.current.loading).toBe(false);
       expect(result.current.data).toBe(undefined);
       expect(result.current.error).toBeInstanceOf(ApolloError);
-      expect(result.current.error!.message).toBe('error');
+      expect(result.current.error!.message).toBe("error");
 
       rerender();
 
       expect(result.current.loading).toBe(false);
       expect(result.current.data).toBe(undefined);
       expect(result.current.error).toBeInstanceOf(ApolloError);
-      expect(result.current.error!.message).toBe('error');
+      expect(result.current.error!.message).toBe("error");
 
       let previousUpdates = updates;
-      await expect(waitFor(() => {
-        expect(updates).not.toEqual(previousUpdates)
-      }, { interval: 1, timeout: 20 })).rejects.toThrow()
+      await expect(
+        waitFor(
+          () => {
+            expect(updates).not.toEqual(previousUpdates);
+          },
+          { interval: 1, timeout: 20 }
+        )
+      ).rejects.toThrow();
     });
 
-    it('should not return partial data from cache on refetch with errorPolicy: none (default) and notifyOnNetworkStatusChange: true', async () => {
+    it("should not return partial data from cache on refetch with errorPolicy: none (default) and notifyOnNetworkStatusChange: true", async () => {
       const query = gql`
         {
           dogs {
@@ -2429,21 +2819,23 @@ describe('useQuery Hook', () => {
 
       const dogData = [
         {
-          "id": "Z1fdFgU",
-          "breed": "affenpinscher",
-          "__typename": "Dog"
+          id: "Z1fdFgU",
+          breed: "affenpinscher",
+          __typename: "Dog",
         },
         {
-          "id": "ZNDtCU",
-          "breed": "airedale",
-          "__typename": "Dog"
+          id: "ZNDtCU",
+          breed: "airedale",
+          __typename: "Dog",
         },
       ];
 
       const detailsMock = (breed: string) => ({
         request: { query: GET_DOG_DETAILS, variables: { breed } },
         result: {
-          errors: [new GraphQLError(`Cannot query field "unexisting" on type "Dog".`)],
+          errors: [
+            new GraphQLError(`Cannot query field "unexisting" on type "Dog".`),
+          ],
         },
       });
 
@@ -2454,15 +2846,15 @@ describe('useQuery Hook', () => {
         },
         // use the same mock for the initial query on select change
         // and subsequent refetch() call
-        detailsMock('airedale'),
-        detailsMock('airedale'),
+        detailsMock("airedale"),
+        detailsMock("airedale"),
       ];
       const Dogs: React.FC<{
         onDogSelected: (event: React.ChangeEvent<HTMLSelectElement>) => void;
       }> = ({ onDogSelected }) => {
-        const { loading, error, data } = useQuery<
-          { dogs: { id: string; breed: string; }[] }
-        >(query);
+        const { loading, error, data } = useQuery<{
+          dogs: { id: string; breed: string }[];
+        }>(query);
 
         if (loading) return <>Loading...</>;
         if (error) return <>{`Error! ${error.message}`}</>;
@@ -2485,24 +2877,16 @@ describe('useQuery Hook', () => {
           GET_DOG_DETAILS,
           {
             variables: { breed },
-            notifyOnNetworkStatusChange: true
+            notifyOnNetworkStatusChange: true,
           }
         );
         if (networkStatus === 4) return <p>Refetching!</p>;
         if (loading) return <p>Loading!</p>;
         return (
           <div>
-            <div>
-              {data ? 'Partial data rendered' : null}
-            </div>
+            <div>{data ? "Partial data rendered" : null}</div>
 
-            <div>
-              {error ? (
-                `Error!: ${error}`
-                ) : (
-                'Rendering!'
-              )}
-            </div>
+            <div>{error ? `Error!: ${error}` : "Rendering!"}</div>
             <button onClick={() => refetch()}>Refetch!</button>
           </div>
         );
@@ -2526,30 +2910,34 @@ describe('useQuery Hook', () => {
       render(<ParentComponent />);
 
       // on initial load, the list of dogs populates the dropdown
-      await screen.findByText('affenpinscher');
+      await screen.findByText("affenpinscher");
 
       // the user selects a different dog from the dropdown which
       // fires the GET_DOG_DETAILS query, retuning an error
       const user = userEvent.setup();
       await user.selectOptions(
-        screen.getByRole('combobox'),
-        screen.getByRole('option', { name: 'airedale' })
+        screen.getByRole("combobox"),
+        screen.getByRole("option", { name: "airedale" })
       );
 
       // With the default errorPolicy of 'none', the error is rendered
       // and partial data is not
-      await screen.findByText('Error!: ApolloError: Cannot query field "unexisting" on type "Dog".')
+      await screen.findByText(
+        'Error!: ApolloError: Cannot query field "unexisting" on type "Dog".'
+      );
       expect(screen.queryByText(/partial data rendered/i)).toBeNull();
 
       // When we call refetch...
-      await user.click(screen.getByRole('button', { name: /Refetch!/i }))
+      await user.click(screen.getByRole("button", { name: /Refetch!/i }));
 
       // The error is still present, and partial data still not rendered
-      await screen.findByText('Error!: ApolloError: Cannot query field "unexisting" on type "Dog".')
+      await screen.findByText(
+        'Error!: ApolloError: Cannot query field "unexisting" on type "Dog".'
+      );
       expect(screen.queryByText(/partial data rendered/i)).toBeNull();
     });
 
-    it('should return partial data from cache on refetch', async () => {
+    it("should return partial data from cache on refetch", async () => {
       const GET_DOG_DETAILS = gql`
         query dog($breed: String!) {
           dog(breed: $breed) {
@@ -2562,38 +2950,33 @@ describe('useQuery Hook', () => {
         result: {
           data: {
             dog: {
-              "id": "ZNDtCU",
-              "__typename": "Dog"
-            }
-          }
+              id: "ZNDtCU",
+              __typename: "Dog",
+            },
+          },
         },
       });
 
       const mocks = [
         // use the same mock for the initial query on select change
         // and subsequent refetch() call
-        detailsMock('airedale'),
-        detailsMock('airedale'),
+        detailsMock("airedale"),
+        detailsMock("airedale"),
       ];
 
       const DogDetails: React.FC<{
         breed?: string;
       }> = ({ breed = "airedale" }) => {
-        const { data, refetch, networkStatus } = useQuery(
-          GET_DOG_DETAILS,
-          {
-            variables: { breed },
-            notifyOnNetworkStatusChange: true
-          }
-        );
+        const { data, refetch, networkStatus } = useQuery(GET_DOG_DETAILS, {
+          variables: { breed },
+          notifyOnNetworkStatusChange: true,
+        });
         if (networkStatus === 1) return <p>Loading!</p>;
         return (
           // Render existing results, but dim the UI until the results
           // have finished loading...
           <div style={{ opacity: networkStatus === 4 ? 0.5 : 1 }}>
-            <div>
-              {data ? 'Data rendered' : null}
-            </div>
+            <div>{data ? "Data rendered" : null}</div>
             <button onClick={() => refetch()}>Refetch!</button>
           </div>
         );
@@ -2611,31 +2994,41 @@ describe('useQuery Hook', () => {
 
       const user = userEvent.setup();
 
-      await waitFor(() => {
-        expect(screen.getByText('Loading!')).toBeTruthy();
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(screen.getByText("Loading!")).toBeTruthy();
+        },
+        { interval: 1 }
+      );
 
-      await waitFor(() => {
-        expect(screen.getByText('Data rendered')).toBeTruthy();
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(screen.getByText("Data rendered")).toBeTruthy();
+        },
+        { interval: 1 }
+      );
 
       // When we call refetch...
-      await user.click(screen.getByRole('button', { name: /Refetch!/i }))
+      await user.click(screen.getByRole("button", { name: /Refetch!/i }));
 
       // Data from the cache remains onscreen while network request
       // is made
-      expect(screen.getByText('Data rendered')).toBeTruthy();
+      expect(screen.getByText("Data rendered")).toBeTruthy();
     });
 
-    it('should persist errors on re-render with inline onError/onCompleted callbacks',  async () => {
-      const query = gql`{ hello }`;
+    it("should persist errors on re-render with inline onError/onCompleted callbacks", async () => {
+      const query = gql`
+        {
+          hello
+        }
+      `;
       const mocks = [
         {
           request: { query },
           result: {
-            errors: [new GraphQLError('error')]
-          }
-        }
+            errors: [new GraphQLError("error")],
+          },
+        },
       ];
 
       const cache = new InMemoryCache();
@@ -2650,38 +3043,49 @@ describe('useQuery Hook', () => {
 
       let updates = 0;
       const { result, rerender } = renderHook(
-        () => (updates++, useQuery(query, { onError: () => {}, onCompleted: () => {} })),
-        { wrapper },
+        () => (
+          updates++,
+          useQuery(query, { onError: () => {}, onCompleted: () => {} })
+        ),
+        { wrapper }
       );
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
       expect(result.current.error).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
 
       expect(result.current.loading).toBe(false);
       expect(result.current.data).toBe(undefined);
       expect(result.current.error).toBeInstanceOf(ApolloError);
-      expect(result.current.error!.message).toBe('error');
+      expect(result.current.error!.message).toBe("error");
 
       rerender();
 
       expect(result.current.loading).toBe(false);
       expect(result.current.data).toBe(undefined);
       expect(result.current.error).toBeInstanceOf(ApolloError);
-      expect(result.current.error!.message).toBe('error');
+      expect(result.current.error!.message).toBe("error");
 
       expect(onErrorFn).toHaveBeenCalledTimes(0);
       let previousUpdates = updates;
-      await expect(waitFor(() => {
-        expect(updates).not.toEqual(previousUpdates)
-      }, { interval: 1, timeout: 20 })).rejects.toThrow()
+      await expect(
+        waitFor(
+          () => {
+            expect(updates).not.toEqual(previousUpdates);
+          },
+          { interval: 1, timeout: 20 }
+        )
+      ).rejects.toThrow();
     });
 
-    it('should not persist errors when variables change', async () => {
+    it("should not persist errors when variables change", async () => {
       const query = gql`
         query hello($id: ID) {
           hello(id: $id)
@@ -2695,7 +3099,7 @@ describe('useQuery Hook', () => {
             variables: { id: 1 },
           },
           result: {
-            errors: [new GraphQLError('error')]
+            errors: [new GraphQLError("error")],
           },
         },
         {
@@ -2704,7 +3108,7 @@ describe('useQuery Hook', () => {
             variables: { id: 2 },
           },
           result: {
-            data: { hello: 'world 2' },
+            data: { hello: "world 2" },
           },
         },
         {
@@ -2713,7 +3117,7 @@ describe('useQuery Hook', () => {
             variables: { id: 1 },
           },
           result: {
-            data: { hello: 'world 1' },
+            data: { hello: "world 1" },
           },
         },
       ];
@@ -2722,35 +3126,39 @@ describe('useQuery Hook', () => {
         ({ id }) => useQuery(query, { variables: { id } }),
         {
           wrapper: ({ children }) => (
-            <MockedProvider mocks={mocks}>
-              {children}
-            </MockedProvider>
+            <MockedProvider mocks={mocks}>{children}</MockedProvider>
           ),
           initialProps: { id: 1 },
-        },
+        }
       );
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
       expect(result.current.error).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
 
       expect(result.current.data).toBe(undefined);
       expect(result.current.error).toBeInstanceOf(ApolloError);
-      expect(result.current.error!.message).toBe('error');
+      expect(result.current.error!.message).toBe("error");
 
       rerender({ id: 2 });
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
       expect(result.current.error).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
-      expect(result.current.data).toEqual({ hello: 'world 2' });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      expect(result.current.data).toEqual({ hello: "world 2" });
       expect(result.current.error).toBe(undefined);
 
       rerender({ id: 1 });
@@ -2758,29 +3166,36 @@ describe('useQuery Hook', () => {
       expect(result.current.data).toBe(undefined);
       expect(result.current.error).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
-      expect(result.current.data).toEqual({ hello: 'world 1' });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      expect(result.current.data).toEqual({ hello: "world 1" });
       expect(result.current.error).toBe(undefined);
     });
 
-    it('should render multiple errors when refetching', async () => {
-      const query = gql`{ hello }`;
+    it("should render multiple errors when refetching", async () => {
+      const query = gql`
+        {
+          hello
+        }
+      `;
       const mocks = [
         {
           request: { query },
           result: {
-            errors: [new GraphQLError('error 1')]
-          }
+            errors: [new GraphQLError("error 1")],
+          },
         },
         {
           request: { query },
           result: {
-            errors: [new GraphQLError('error 2')]
+            errors: [new GraphQLError("error 2")],
           },
           delay: 10,
-        }
+        },
       ];
 
       const cache = new InMemoryCache();
@@ -2792,58 +3207,71 @@ describe('useQuery Hook', () => {
 
       const { result } = renderHook(
         () => useQuery(query, { notifyOnNetworkStatusChange: true }),
-        { wrapper },
+        { wrapper }
       );
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
       expect(result.current.error).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current.data).toBe(undefined);
       expect(result.current.error).toBeInstanceOf(ApolloError);
-      expect(result.current.error!.message).toBe('error 1');
+      expect(result.current.error!.message).toBe("error 1");
 
       const catchFn = jest.fn();
 
       result.current.refetch().catch(catchFn);
-      await waitFor(() => {
-        expect(result.current.loading).toBe(true);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(true);
+        },
+        { interval: 1 }
+      );
       expect(result.current.data).toBe(undefined);
       expect(result.current.error).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
-      expect(result.current.data).toBe(undefined);
-      expect(result.current.error).toBeInstanceOf(ApolloError);
-      expect(result.current.error!.message).toBe('error 2');
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      expect(result.current.data).toBe(undefined);
+      expect(result.current.error).toBeInstanceOf(ApolloError);
+      expect(result.current.error!.message).toBe("error 2");
 
       expect(catchFn.mock.calls.length).toBe(1);
       expect(catchFn.mock.calls[0].length).toBe(1);
       expect(catchFn.mock.calls[0][0]).toBeInstanceOf(ApolloError);
-      expect(catchFn.mock.calls[0][0].message).toBe('error 2');
+      expect(catchFn.mock.calls[0][0].message).toBe("error 2");
     });
 
-    it('should render the same error on refetch', async () => {
-      const query = gql`{ hello }`;
+    it("should render the same error on refetch", async () => {
+      const query = gql`
+        {
+          hello
+        }
+      `;
 
       const mocks = [
         {
           request: { query },
           result: {
-            errors: [new GraphQLError('same error')]
-          }
+            errors: [new GraphQLError("same error")],
+          },
         },
         {
           request: { query },
           result: {
-            errors: [new GraphQLError('same error')]
-          }
-        }
+            errors: [new GraphQLError("same error")],
+          },
+        },
       ];
 
       const cache = new InMemoryCache();
@@ -2855,21 +3283,23 @@ describe('useQuery Hook', () => {
 
       const { result } = renderHook(
         () => useQuery(query, { notifyOnNetworkStatusChange: true }),
-        { wrapper },
+        { wrapper }
       );
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
       expect(result.current.error).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
 
       expect(result.current.data).toBe(undefined);
       expect(result.current.error).toBeInstanceOf(ApolloError);
-      expect(result.current.error!.message).toBe('same error');
-
+      expect(result.current.error!.message).toBe("same error");
 
       const catchFn = jest.fn();
       await act(async () => {
@@ -2879,37 +3309,41 @@ describe('useQuery Hook', () => {
       expect(result.current.loading).toBe(false);
       expect(result.current.data).toBe(undefined);
       expect(result.current.error).toBeInstanceOf(ApolloError);
-      expect(result.current.error!.message).toBe('same error');
+      expect(result.current.error!.message).toBe("same error");
 
       expect(catchFn.mock.calls.length).toBe(1);
       expect(catchFn.mock.calls[0].length).toBe(1);
       expect(catchFn.mock.calls[0][0]).toBeInstanceOf(ApolloError);
-      expect(catchFn.mock.calls[0][0].message).toBe('same error');
+      expect(catchFn.mock.calls[0][0].message).toBe("same error");
     });
 
-    it('should render data and errors with refetch', async () => {
-      const query = gql`{ hello }`;
+    it("should render data and errors with refetch", async () => {
+      const query = gql`
+        {
+          hello
+        }
+      `;
       const mocks = [
         {
           request: { query },
           result: {
-            errors: [new GraphQLError('same error')],
+            errors: [new GraphQLError("same error")],
           },
         },
         {
           request: { query },
           result: {
-            data: { hello: 'world' },
+            data: { hello: "world" },
           },
           delay: 10,
         },
         {
           request: { query },
           result: {
-            errors: [new GraphQLError('same error')],
+            errors: [new GraphQLError("same error")],
           },
           delay: 10,
-        }
+        },
       ];
 
       const cache = new InMemoryCache();
@@ -2921,59 +3355,74 @@ describe('useQuery Hook', () => {
 
       const { result } = renderHook(
         () => useQuery(query, { notifyOnNetworkStatusChange: true }),
-        { wrapper },
+        { wrapper }
       );
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
       expect(result.current.error).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
 
       expect(result.current.data).toBe(undefined);
       expect(result.current.error).toBeInstanceOf(ApolloError);
-      expect(result.current.error!.message).toBe('same error');
+      expect(result.current.error!.message).toBe("same error");
 
       result.current.refetch();
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(true);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(true);
+        },
+        { interval: 1 }
+      );
       expect(result.current.data).toBe(undefined);
       expect(result.current.error).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
-      expect(result.current.data).toEqual({ hello: 'world' });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      expect(result.current.data).toEqual({ hello: "world" });
       expect(result.current.error).toBe(undefined);
 
       const catchFn = jest.fn();
       result.current.refetch().catch(catchFn);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(true);
-      }, { interval: 1 });
-      expect(result.current.data).toEqual({ hello: 'world' });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(true);
+        },
+        { interval: 1 }
+      );
+      expect(result.current.data).toEqual({ hello: "world" });
       expect(result.current.error).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       // TODO: Is this correct behavior here?
-      expect(result.current.data).toEqual({ hello: 'world' });
+      expect(result.current.data).toEqual({ hello: "world" });
       expect(result.current.error).toBeInstanceOf(ApolloError);
-      expect(result.current.error!.message).toBe('same error');
+      expect(result.current.error!.message).toBe("same error");
 
       expect(catchFn.mock.calls.length).toBe(1);
       expect(catchFn.mock.calls[0].length).toBe(1);
       expect(catchFn.mock.calls[0][0]).toBeInstanceOf(ApolloError);
-      expect(catchFn.mock.calls[0][0].message).toBe('same error');
+      expect(catchFn.mock.calls[0][0].message).toBe("same error");
     });
 
-    it('should call onCompleted when variables change', async () => {
+    it("should call onCompleted when variables change", async () => {
       const query = gql`
         query people($first: Int) {
           allPeople(first: $first) {
@@ -2984,8 +3433,8 @@ describe('useQuery Hook', () => {
         }
       `;
 
-      const data1 = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
-      const data2 = { allPeople: { people: [{ name: 'Han Solo' }] } };
+      const data1 = { allPeople: { people: [{ name: "Luke Skywalker" }] } };
+      const data2 = { allPeople: { people: [{ name: "Han Solo" }] } };
       const mocks = [
         {
           request: { query, variables: { first: 1 } },
@@ -3003,45 +3452,52 @@ describe('useQuery Hook', () => {
         ({ variables }) => useQuery(query, { variables, onCompleted }),
         {
           wrapper: ({ children }) => (
-            <MockedProvider mocks={mocks}>
-              {children}
-            </MockedProvider>
+            <MockedProvider mocks={mocks}>{children}</MockedProvider>
           ),
           initialProps: {
             variables: { first: 1 },
           },
-        },
+        }
       );
 
       expect(result.current.loading).toBe(true);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current.data).toEqual(data1);
       expect(onCompleted).toHaveBeenLastCalledWith(data1);
 
       rerender({ variables: { first: 2 } });
       expect(result.current.loading).toBe(true);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current.data).toEqual(data2);
       expect(onCompleted).toHaveBeenLastCalledWith(data2);
 
       rerender({ variables: { first: 1 } });
       expect(result.current.loading).toBe(false);
       expect(result.current.data).toEqual(data1);
-      await waitFor(() => {
-        expect(onCompleted).toHaveBeenLastCalledWith(data1);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(onCompleted).toHaveBeenLastCalledWith(data1);
+        },
+        { interval: 1 }
+      );
 
       expect(onCompleted).toHaveBeenCalledTimes(3);
     });
   });
 
-  describe('Pagination', () => {
+  describe("Pagination", () => {
     const query = gql`
       query letters($limit: Int) {
         letters(limit: $limit) {
@@ -3052,13 +3508,13 @@ describe('useQuery Hook', () => {
     `;
 
     const ab = [
-      { name: 'A', position: 1 },
-      { name: 'B', position: 2 },
+      { name: "A", position: 1 },
+      { name: "B", position: 2 },
     ];
 
     const cd = [
-      { name: 'C', position: 3 },
-      { name: 'D', position: 4 },
+      { name: "C", position: 3 },
+      { name: "D", position: 4 },
     ];
 
     const mocks = [
@@ -3081,7 +3537,7 @@ describe('useQuery Hook', () => {
       },
     ];
 
-    it('should fetchMore with updateQuery', async () => {
+    it("should fetchMore with updateQuery", async () => {
       // TODO: Calling fetchMore with an updateQuery callback is deprecated
       const warnSpy = jest.spyOn(console, "warn").mockImplementation(() => {});
 
@@ -3091,7 +3547,7 @@ describe('useQuery Hook', () => {
 
       const { result } = renderHook(
         () => useQuery(query, { variables: { limit: 2 } }),
-        { wrapper },
+        { wrapper }
       );
 
       expect(result.current.loading).toBe(true);
@@ -3104,23 +3560,29 @@ describe('useQuery Hook', () => {
       expect(result.current.networkStatus).toBe(NetworkStatus.ready);
       expect(result.current.data).toEqual({ letters: ab });
 
-      await waitFor(() => void result.current.fetchMore({
-        variables: { limit: 2 },
-        updateQuery: (prev, { fetchMoreResult }) => ({
-          letters: prev.letters.concat(fetchMoreResult.letters),
-        }),
-      }));
+      await waitFor(
+        () =>
+          void result.current.fetchMore({
+            variables: { limit: 2 },
+            updateQuery: (prev, { fetchMoreResult }) => ({
+              letters: prev.letters.concat(fetchMoreResult.letters),
+            }),
+          })
+      );
 
-      await waitFor(() => {
-        expect(result.current.data).toEqual({ letters: ab.concat(cd) });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.data).toEqual({ letters: ab.concat(cd) });
+        },
+        { interval: 1 }
+      );
       expect(result.current.loading).toBe(false);
       expect(result.current.networkStatus).toBe(NetworkStatus.ready);
 
       warnSpy.mockRestore();
     });
 
-    it('should fetchMore with updateQuery and notifyOnNetworkStatusChange', async () => {
+    it("should fetchMore with updateQuery and notifyOnNetworkStatusChange", async () => {
       // TODO: Calling fetchMore with an updateQuery callback is deprecated
       const warnSpy = jest.spyOn(console, "warn").mockImplementation(() => {});
 
@@ -3129,45 +3591,55 @@ describe('useQuery Hook', () => {
       );
 
       const { result } = renderHook(
-        () => useQuery(query, {
-          variables: { limit: 2 },
-          notifyOnNetworkStatusChange: true,
-        }),
-        { wrapper },
+        () =>
+          useQuery(query, {
+            variables: { limit: 2 },
+            notifyOnNetworkStatusChange: true,
+          }),
+        { wrapper }
       );
 
       expect(result.current.loading).toBe(true);
       expect(result.current.networkStatus).toBe(NetworkStatus.loading);
       expect(result.current.data).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
 
       expect(result.current.networkStatus).toBe(NetworkStatus.ready);
       expect(result.current.data).toEqual({ letters: ab });
 
-      act(() => void result.current.fetchMore({
-        variables: { limit: 2 },
-        updateQuery: (prev, { fetchMoreResult }) => ({
-          letters: prev.letters.concat(fetchMoreResult.letters),
-        }),
-      }));
+      act(
+        () =>
+          void result.current.fetchMore({
+            variables: { limit: 2 },
+            updateQuery: (prev, { fetchMoreResult }) => ({
+              letters: prev.letters.concat(fetchMoreResult.letters),
+            }),
+          })
+      );
 
       expect(result.current.loading).toBe(true);
       expect(result.current.networkStatus).toBe(NetworkStatus.fetchMore);
       expect(result.current.data).toEqual({ letters: ab });
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current.networkStatus).toBe(NetworkStatus.ready);
       expect(result.current.data).toEqual({ letters: ab.concat(cd) });
 
       warnSpy.mockRestore();
     });
 
-    it('fetchMore with concatPagination', async () => {
+    it("fetchMore with concatPagination", async () => {
       const cache = new InMemoryCache({
         typePolicies: {
           Query: {
@@ -3179,33 +3651,41 @@ describe('useQuery Hook', () => {
       });
 
       const wrapper = ({ children }: any) => (
-        <MockedProvider mocks={mocks} cache={cache}>{children}</MockedProvider>
+        <MockedProvider mocks={mocks} cache={cache}>
+          {children}
+        </MockedProvider>
       );
 
       const { result } = renderHook(
         () => useQuery(query, { variables: { limit: 2 } }),
-        { wrapper },
+        { wrapper }
       );
 
       expect(result.current.loading).toBe(true);
       expect(result.current.networkStatus).toBe(NetworkStatus.loading);
       expect(result.current.data).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current.networkStatus).toBe(NetworkStatus.ready);
       expect(result.current.data).toEqual({ letters: ab });
       result.current.fetchMore({ variables: { limit: 2 } });
 
       expect(result.current.loading).toBe(false);
-      await waitFor(() => {
-        expect(result.current.data).toEqual({ letters: ab.concat(cd) });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.data).toEqual({ letters: ab.concat(cd) });
+        },
+        { interval: 1 }
+      );
       expect(result.current.networkStatus).toBe(NetworkStatus.ready);
     });
 
-    it('fetchMore with concatPagination and notifyOnNetworkStatusChange', async () => {
+    it("fetchMore with concatPagination and notifyOnNetworkStatusChange", async () => {
       const cache = new InMemoryCache({
         typePolicies: {
           Query: {
@@ -3217,24 +3697,30 @@ describe('useQuery Hook', () => {
       });
 
       const wrapper = ({ children }: any) => (
-        <MockedProvider mocks={mocks} cache={cache}>{children}</MockedProvider>
+        <MockedProvider mocks={mocks} cache={cache}>
+          {children}
+        </MockedProvider>
       );
 
       const { result } = renderHook(
-        () => useQuery(query, {
-          variables: { limit: 2 },
-          notifyOnNetworkStatusChange: true,
-        }),
-        { wrapper },
+        () =>
+          useQuery(query, {
+            variables: { limit: 2 },
+            notifyOnNetworkStatusChange: true,
+          }),
+        { wrapper }
       );
 
       expect(result.current.loading).toBe(true);
       expect(result.current.networkStatus).toBe(NetworkStatus.loading);
       expect(result.current.data).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current.networkStatus).toBe(NetworkStatus.ready);
       expect(result.current.data).toEqual({ letters: ab });
 
@@ -3243,9 +3729,12 @@ describe('useQuery Hook', () => {
       expect(result.current.networkStatus).toBe(NetworkStatus.fetchMore);
       expect(result.current.data).toEqual({ letters: ab });
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current.networkStatus).toBe(NetworkStatus.ready);
       expect(result.current.data).toEqual({ letters: ab.concat(cd) });
     });
@@ -3256,18 +3745,18 @@ describe('useQuery Hook', () => {
           Country: {
             fields: {
               cities: {
-                keyArgs: ['size'],
+                keyArgs: ["size"],
                 merge(existing, incoming, { args }) {
-                  if (!args) return incoming
+                  if (!args) return incoming;
 
-                  const items = existing ? existing.slice(0) : []
+                  const items = existing ? existing.slice(0) : [];
 
-                  const offset = args.offset ?? 0
+                  const offset = args.offset ?? 0;
                   for (let i = 0; i < incoming.length; ++i) {
-                    items[offset + i] = incoming[i]
+                    items[offset + i] = incoming[i];
                   }
 
-                  return items
+                  return items;
                 },
               },
             },
@@ -3306,49 +3795,51 @@ describe('useQuery Hook', () => {
 
       const countries = [
         {
-          __typename: 'Country',
+          __typename: "Country",
           id: 123,
           biggestCity: {
-            __typename: 'City',
+            __typename: "City",
             id: 234,
             info: {
-              __typename: 'CityInfo',
+              __typename: "CityInfo",
               airQuality: 0,
             },
           },
-          smallCities: [
-            { __typename: 'City', id: 345 },
-          ],
+          smallCities: [{ __typename: "City", id: 345 }],
         },
       ];
 
       const wrapper = ({ children }: any) => (
-        <MockedProvider mocks={[
-          {
-            request: { query: GET_COUNTRIES },
-            result: { data: { countries } },
-          },
-        ]} cache={cache}>{children}</MockedProvider>
+        <MockedProvider
+          mocks={[
+            {
+              request: { query: GET_COUNTRIES },
+              result: { data: { countries } },
+            },
+          ]}
+          cache={cache}
+        >
+          {children}
+        </MockedProvider>
       );
 
-      const { result } = renderHook(
-        () => useQuery(GET_COUNTRIES),
-        { wrapper },
-      );
+      const { result } = renderHook(() => useQuery(GET_COUNTRIES), { wrapper });
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBeUndefined();
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current.data).toEqual({ countries });
     });
   });
 
-
-  describe('Refetching', () => {
-    it('refetching with different variables', async () => {
+  describe("Refetching", () => {
+    it("refetching with different variables", async () => {
       const query = gql`
         query ($id: Int) {
           hello(id: $id)
@@ -3358,63 +3849,79 @@ describe('useQuery Hook', () => {
       const mocks = [
         {
           request: { query, variables: { id: 1 } },
-          result: { data: { hello: 'world 1' } },
+          result: { data: { hello: "world 1" } },
         },
         {
           request: { query, variables: { id: 2 } },
-          result: { data: { hello: 'world 2' } },
+          result: { data: { hello: "world 2" } },
           delay: 10,
         },
       ];
 
       const cache = new InMemoryCache();
       const wrapper = ({ children }: any) => (
-        <MockedProvider mocks={mocks} cache={cache}>{children}</MockedProvider>
+        <MockedProvider mocks={mocks} cache={cache}>
+          {children}
+        </MockedProvider>
       );
 
       const { result } = renderHook(
-        () => useQuery(query, {
-          variables: { id: 1 },
-          notifyOnNetworkStatusChange: true,
-        }),
-        { wrapper },
+        () =>
+          useQuery(query, {
+            variables: { id: 1 },
+            notifyOnNetworkStatusChange: true,
+          }),
+        { wrapper }
       );
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
-      expect(result.current.data).toEqual({ hello: 'world 1' });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      expect(result.current.data).toEqual({ hello: "world 1" });
 
       result.current.refetch({ id: 2 });
-      await waitFor(() => {
-        expect(result.current.loading).toBe(true);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(true);
+        },
+        { interval: 1 }
+      );
       expect(result.current.data).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
-      expect(result.current.data).toEqual({ hello: 'world 2' });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      expect(result.current.data).toEqual({ hello: "world 2" });
     });
 
-    it('refetching after an error', async () => {
-      const query = gql`{ hello }`;
+    it("refetching after an error", async () => {
+      const query = gql`
+        {
+          hello
+        }
+      `;
       const mocks = [
         {
           request: { query },
-          result: { data: { hello: 'world 1' } },
+          result: { data: { hello: "world 1" } },
         },
         {
           request: { query },
-          error: new Error('This is an error!'),
+          error: new Error("This is an error!"),
           delay: 10,
         },
         {
           request: { query },
-          result: { data: { hello: 'world 2' } },
+          result: { data: { hello: "world 2" } },
           delay: 10,
         },
       ];
@@ -3422,57 +3929,73 @@ describe('useQuery Hook', () => {
       const cache = new InMemoryCache();
 
       const { result } = renderHook(
-        () => useQuery(query, {
-          notifyOnNetworkStatusChange: true,
-        }),
+        () =>
+          useQuery(query, {
+            notifyOnNetworkStatusChange: true,
+          }),
         {
           wrapper: ({ children }) => (
             <MockedProvider mocks={mocks} cache={cache}>
               {children}
             </MockedProvider>
           ),
-        },
+        }
       );
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current.error).toBe(undefined);
-      expect(result.current.data).toEqual({ hello: 'world 1' });
+      expect(result.current.data).toEqual({ hello: "world 1" });
 
       result.current.refetch();
-      await waitFor(() => {
-        expect(result.current.loading).toBe(true);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(true);
+        },
+        { interval: 1 }
+      );
       expect(result.current.error).toBe(undefined);
-      expect(result.current.data).toEqual({ hello: 'world 1' });
+      expect(result.current.data).toEqual({ hello: "world 1" });
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current.error).toBeInstanceOf(ApolloError);
-      expect(result.current.data).toEqual({ hello: 'world 1' });
+      expect(result.current.data).toEqual({ hello: "world 1" });
 
       result.current.refetch();
-      await waitFor(() => {
-        expect(result.current.loading).toBe(true);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(true);
+        },
+        { interval: 1 }
+      );
       expect(result.current.error).toBe(undefined);
-      expect(result.current.data).toEqual({ hello: 'world 1' });
+      expect(result.current.data).toEqual({ hello: "world 1" });
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current.error).toBe(undefined);
-      expect(result.current.data).toEqual({ hello: 'world 2' });
+      expect(result.current.data).toEqual({ hello: "world 2" });
     });
 
-    describe('refetchWritePolicy', () => {
+    describe("refetchWritePolicy", () => {
       const query = gql`
-        query GetPrimes ($min: number, $max: number) {
+        query GetPrimes($min: number, $max: number) {
           primes(min: $min, max: $max)
         }
       `;
@@ -3486,8 +4009,8 @@ describe('useQuery Hook', () => {
           result: {
             data: {
               primes: [2, 3, 5, 7, 11],
-            }
-          }
+            },
+          },
         },
         {
           request: {
@@ -3497,7 +4020,7 @@ describe('useQuery Hook', () => {
           result: {
             data: {
               primes: [13, 17, 19, 23, 29],
-            }
+            },
           },
           delay: 10,
         },
@@ -3522,40 +4045,46 @@ describe('useQuery Hook', () => {
         });
 
         const wrapper = ({ children }: any) => (
-          <MockedProvider mocks={mocks} cache={cache}>{children}</MockedProvider>
+          <MockedProvider mocks={mocks} cache={cache}>
+            {children}
+          </MockedProvider>
         );
 
         const { result } = renderHook(
-          () => useQuery(query, {
-            variables: { min: 0, max: 12 },
-            notifyOnNetworkStatusChange: true,
-            // This is the key line in this test.
-            refetchWritePolicy: 'overwrite',
-          }),
-          { wrapper },
+          () =>
+            useQuery(query, {
+              variables: { min: 0, max: 12 },
+              notifyOnNetworkStatusChange: true,
+              // This is the key line in this test.
+              refetchWritePolicy: "overwrite",
+            }),
+          { wrapper }
         );
 
         expect(result.current.loading).toBe(true);
         expect(result.current.error).toBe(undefined);
         expect(result.current.data).toBe(undefined);
-        expect(typeof result.current.refetch).toBe('function');
+        expect(typeof result.current.refetch).toBe("function");
 
-        await waitFor(() => {
-          expect(result.current.loading).toBe(false);
-        }, { interval: 1 });
+        await waitFor(
+          () => {
+            expect(result.current.loading).toBe(false);
+          },
+          { interval: 1 }
+        );
         expect(result.current.error).toBeUndefined();
         expect(result.current.data).toEqual({ primes: [2, 3, 5, 7, 11] });
-        expect(mergeParams).toEqual([
-          [void 0, [2, 3, 5, 7, 11]],
-        ]);
-
+        expect(mergeParams).toEqual([[void 0, [2, 3, 5, 7, 11]]]);
 
         const thenFn = jest.fn();
         result.current.refetch({ min: 12, max: 30 }).then(thenFn);
 
-        await waitFor(() => {
-          expect(result.current.loading).toBe(true);
-        }, { interval: 1 });
+        await waitFor(
+          () => {
+            expect(result.current.loading).toBe(true);
+          },
+          { interval: 1 }
+        );
         expect(result.current.error).toBe(undefined);
         expect(result.current.data).toEqual({
           // We get the stale data because we configured keyArgs: false.
@@ -3566,9 +4095,12 @@ describe('useQuery Hook', () => {
         // called refetch with new variables.
         expect(result.current.networkStatus).toBe(NetworkStatus.setVariables);
 
-        await waitFor(() => {
-          expect(result.current.loading).toBe(false);
-        }, { interval: 1 });
+        await waitFor(
+          () => {
+            expect(result.current.loading).toBe(false);
+          },
+          { interval: 1 }
+        );
 
         expect(result.current.error).toBe(undefined);
         expect(result.current.data).toEqual({ primes: [13, 17, 19, 23, 29] });
@@ -3606,40 +4138,46 @@ describe('useQuery Hook', () => {
         });
 
         const wrapper = ({ children }: any) => (
-          <MockedProvider mocks={mocks} cache={cache}>{children}</MockedProvider>
+          <MockedProvider mocks={mocks} cache={cache}>
+            {children}
+          </MockedProvider>
         );
 
         const { result } = renderHook(
-          () => useQuery(query, {
-            variables: { min: 0, max: 12 },
-            notifyOnNetworkStatusChange: true,
-            // This is the key line in this test.
-            refetchWritePolicy: 'merge',
-          }),
-          { wrapper },
+          () =>
+            useQuery(query, {
+              variables: { min: 0, max: 12 },
+              notifyOnNetworkStatusChange: true,
+              // This is the key line in this test.
+              refetchWritePolicy: "merge",
+            }),
+          { wrapper }
         );
 
         expect(result.current.loading).toBe(true);
         expect(result.current.error).toBe(undefined);
         expect(result.current.data).toBe(undefined);
-        expect(typeof result.current.refetch).toBe('function');
+        expect(typeof result.current.refetch).toBe("function");
 
-        await waitFor(() => {
-          expect(result.current.loading).toBe(false);
-        }, { interval: 1 });
+        await waitFor(
+          () => {
+            expect(result.current.loading).toBe(false);
+          },
+          { interval: 1 }
+        );
         expect(result.current.error).toBeUndefined();
         expect(result.current.data).toEqual({ primes: [2, 3, 5, 7, 11] });
-        expect(mergeParams).toEqual([
-          [undefined, [2, 3, 5, 7, 11]],
-        ]);
-
+        expect(mergeParams).toEqual([[undefined, [2, 3, 5, 7, 11]]]);
 
         const thenFn = jest.fn();
         result.current.refetch({ min: 12, max: 30 }).then(thenFn);
 
-        await waitFor(() => {
-          expect(result.current.loading).toBe(true);
-        }, { interval: 1 });
+        await waitFor(
+          () => {
+            expect(result.current.loading).toBe(true);
+          },
+          { interval: 1 }
+        );
         expect(result.current.error).toBe(undefined);
         expect(result.current.data).toEqual({
           // We get the stale data because we configured keyArgs: false.
@@ -3648,9 +4186,12 @@ describe('useQuery Hook', () => {
         // This networkStatus is setVariables instead of refetch because we
         // called refetch with new variables.
         expect(result.current.networkStatus).toBe(NetworkStatus.setVariables);
-        await waitFor(() => {
-          expect(result.current.loading).toBe(false);
-        }, { interval: 1 });
+        await waitFor(
+          () => {
+            expect(result.current.loading).toBe(false);
+          },
+          { interval: 1 }
+        );
 
         expect(result.current.error).toBe(undefined);
         expect(result.current.data).toEqual({
@@ -3659,13 +4200,19 @@ describe('useQuery Hook', () => {
         expect(mergeParams).toEqual([
           [void 0, [2, 3, 5, 7, 11]],
           // This indicates concatenation happened.
-          [[2, 3, 5, 7, 11], [13, 17, 19, 23, 29]],
+          [
+            [2, 3, 5, 7, 11],
+            [13, 17, 19, 23, 29],
+          ],
         ]);
         expect(mergeParams).toEqual([
           [undefined, [2, 3, 5, 7, 11]],
           // Without refetchWritePolicy: "overwrite", this array will be
           // all 10 primes (2 through 29) together.
-          [[2, 3, 5, 7, 11], [13, 17, 19, 23, 29]],
+          [
+            [2, 3, 5, 7, 11],
+            [13, 17, 19, 23, 29],
+          ],
         ]);
 
         expect(thenFn).toHaveBeenCalledTimes(1);
@@ -3695,39 +4242,45 @@ describe('useQuery Hook', () => {
         });
 
         const wrapper = ({ children }: any) => (
-          <MockedProvider mocks={mocks} cache={cache}>{children}</MockedProvider>
+          <MockedProvider mocks={mocks} cache={cache}>
+            {children}
+          </MockedProvider>
         );
 
         const { result } = renderHook(
-          () => useQuery(query, {
-            variables: { min: 0, max: 12 },
-            notifyOnNetworkStatusChange: true,
-            // Intentionally not passing refetchWritePolicy.
-          }),
-          { wrapper },
+          () =>
+            useQuery(query, {
+              variables: { min: 0, max: 12 },
+              notifyOnNetworkStatusChange: true,
+              // Intentionally not passing refetchWritePolicy.
+            }),
+          { wrapper }
         );
 
         expect(result.current.loading).toBe(true);
         expect(result.current.error).toBe(undefined);
         expect(result.current.data).toBe(undefined);
-        expect(typeof result.current.refetch).toBe('function');
+        expect(typeof result.current.refetch).toBe("function");
 
-        await waitFor(() => {
-          expect(result.current.loading).toBe(false);
-        }, { interval: 1 });
+        await waitFor(
+          () => {
+            expect(result.current.loading).toBe(false);
+          },
+          { interval: 1 }
+        );
         expect(result.current.error).toBeUndefined();
         expect(result.current.data).toEqual({ primes: [2, 3, 5, 7, 11] });
-        expect(mergeParams).toEqual([
-          [void 0, [2, 3, 5, 7, 11]],
-        ]);
-
+        expect(mergeParams).toEqual([[void 0, [2, 3, 5, 7, 11]]]);
 
         const thenFn = jest.fn();
         result.current.refetch({ min: 12, max: 30 }).then(thenFn);
 
-        await waitFor(() => {
-          expect(result.current.loading).toBe(true);
-        }, { interval: 1 });
+        await waitFor(
+          () => {
+            expect(result.current.loading).toBe(true);
+          },
+          { interval: 1 }
+        );
         expect(result.current.error).toBe(undefined);
         expect(result.current.data).toEqual({
           // We get the stale data because we configured keyArgs: false.
@@ -3738,9 +4291,12 @@ describe('useQuery Hook', () => {
         // called refetch with new variables.
         expect(result.current.networkStatus).toBe(NetworkStatus.setVariables);
 
-        await waitFor(() => {
-          expect(result.current.loading).toBe(false);
-        }, { interval: 1 });
+        await waitFor(
+          () => {
+            expect(result.current.loading).toBe(false);
+          },
+          { interval: 1 }
+        );
 
         expect(result.current.error).toBe(undefined);
         expect(result.current.data).toEqual({ primes: [13, 17, 19, 23, 29] });
@@ -3761,14 +4317,18 @@ describe('useQuery Hook', () => {
     });
   });
 
-  describe('Callbacks', () => {
-    it('onCompleted is called once with cached data', async () => {
-      const query = gql`{ hello }`;
+  describe("Callbacks", () => {
+    it("onCompleted is called once with cached data", async () => {
+      const query = gql`
+        {
+          hello
+        }
+      `;
 
       const cache = new InMemoryCache();
       cache.writeQuery({
         query,
-        data: { hello: 'world' },
+        data: { hello: "world" },
       });
 
       const wrapper = ({ children }: any) => (
@@ -3779,34 +4339,51 @@ describe('useQuery Hook', () => {
 
       const onCompleted = jest.fn();
       const { result } = renderHook(
-        () => (useQuery(query, {
-          fetchPolicy: 'cache-only',
-          onCompleted,
-        })),
-        { wrapper },
+        () =>
+          useQuery(query, {
+            fetchPolicy: "cache-only",
+            onCompleted,
+          }),
+        { wrapper }
       );
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current.data).toEqual({ hello: 'world' });
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(onCompleted).toHaveBeenCalledTimes(1);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(onCompleted).toHaveBeenCalledWith({ hello: 'world' });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current.data).toEqual({ hello: "world" });
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(onCompleted).toHaveBeenCalledTimes(1);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(onCompleted).toHaveBeenCalledWith({ hello: "world" });
+        },
+        { interval: 1 }
+      );
       expect(onCompleted).toHaveBeenCalledTimes(1);
     });
 
-    it('onCompleted is called once despite state changes', async () => {
-      const query = gql`{ hello }`;
+    it("onCompleted is called once despite state changes", async () => {
+      const query = gql`
+        {
+          hello
+        }
+      `;
       const mocks = [
         {
           request: { query },
-          result: { data: { hello: 'world' } },
+          result: { data: { hello: "world" } },
         },
       ];
 
@@ -3819,37 +4396,45 @@ describe('useQuery Hook', () => {
 
       const onCompleted = jest.fn();
       const { result, rerender } = renderHook(
-        () => useQuery(query, {
-          onCompleted,
-        }),
-        { wrapper },
+        () =>
+          useQuery(query, {
+            onCompleted,
+          }),
+        { wrapper }
       );
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
 
-      expect(result.current.data).toEqual({ hello: 'world' });
+      expect(result.current.data).toEqual({ hello: "world" });
       expect(onCompleted).toHaveBeenCalledTimes(1);
-      expect(onCompleted).toHaveBeenCalledWith({ hello: 'world' });
+      expect(onCompleted).toHaveBeenCalledWith({ hello: "world" });
 
       rerender();
       expect(result.current.loading).toBe(false);
-      expect(result.current.data).toEqual({ hello: 'world' });
+      expect(result.current.data).toEqual({ hello: "world" });
       expect(onCompleted).toHaveBeenCalledTimes(1);
-      expect(onCompleted).toHaveBeenCalledWith({ hello: 'world' });
+      expect(onCompleted).toHaveBeenCalledWith({ hello: "world" });
       expect(onCompleted).toHaveBeenCalledTimes(1);
     });
 
-    it('should not call onCompleted if skip is true', async () => {
-      const query = gql`{ hello }`;
+    it("should not call onCompleted if skip is true", async () => {
+      const query = gql`
+        {
+          hello
+        }
+      `;
       const mocks = [
         {
           request: { query },
-          result: { data: { hello: 'world' } },
+          result: { data: { hello: "world" } },
         },
       ];
 
@@ -3862,31 +4447,41 @@ describe('useQuery Hook', () => {
 
       const onCompleted = jest.fn();
       const { result } = renderHook(
-        () => useQuery(query, {
-          skip: true,
-          onCompleted,
-        }),
-        { wrapper },
+        () =>
+          useQuery(query, {
+            skip: true,
+            onCompleted,
+          }),
+        { wrapper }
       );
 
       expect(result.current.loading).toBe(false);
       expect(result.current.data).toBe(undefined);
 
-      expect(onCompleted).toHaveBeenCalledTimes(0)
+      expect(onCompleted).toHaveBeenCalledTimes(0);
 
-      await expect(waitFor(() => {
-        expect(onCompleted).toHaveBeenCalledTimes(1);
-      }, { interval: 1, timeout: 20 })).rejects.toThrow();
+      await expect(
+        waitFor(
+          () => {
+            expect(onCompleted).toHaveBeenCalledTimes(1);
+          },
+          { interval: 1, timeout: 20 }
+        )
+      ).rejects.toThrow();
 
       expect(onCompleted).toHaveBeenCalledTimes(0);
     });
 
-    it('should not make extra network requests when `onCompleted` is defined with a `network-only` fetch policy', async () => {
-      const query = gql`{ hello }`;
+    it("should not make extra network requests when `onCompleted` is defined with a `network-only` fetch policy", async () => {
+      const query = gql`
+        {
+          hello
+        }
+      `;
       const mocks = [
         {
           request: { query },
-          result: { data: { hello: 'world' } },
+          result: { data: { hello: "world" } },
         },
       ];
 
@@ -3902,134 +4497,170 @@ describe('useQuery Hook', () => {
       const { result } = renderHook(
         () => {
           const pendingResult = useQuery(query, {
-            fetchPolicy: 'network-only',
+            fetchPolicy: "network-only",
             onCompleted,
           });
           updates++;
 
           return pendingResult;
         },
-        { wrapper },
+        { wrapper }
       );
 
       expect(result.current.loading).toBe(true);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
-      expect(result.current.data).toEqual({ hello: 'world' });
-      const previousUpdates = updates
-      await expect(waitFor(() => {
-        expect(updates).not.toEqual(previousUpdates)
-      }, { interval: 1, timeout: 20 })).rejects.toThrow();
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      expect(result.current.data).toEqual({ hello: "world" });
+      const previousUpdates = updates;
+      await expect(
+        waitFor(
+          () => {
+            expect(updates).not.toEqual(previousUpdates);
+          },
+          { interval: 1, timeout: 20 }
+        )
+      ).rejects.toThrow();
       expect(onCompleted).toHaveBeenCalledTimes(1);
     });
 
-    it('onCompleted should not fire for polling queries without notifyOnNetworkStatusChange: true', async () => {
-      const query = gql`{ hello }`;
+    it("onCompleted should not fire for polling queries without notifyOnNetworkStatusChange: true", async () => {
+      const query = gql`
+        {
+          hello
+        }
+      `;
       const mocks = [
         {
           request: { query },
-          result: { data: { hello: 'world 1' } },
+          result: { data: { hello: "world 1" } },
         },
         {
           request: { query },
-          result: { data: { hello: 'world 2' } },
+          result: { data: { hello: "world 2" } },
         },
         {
           request: { query },
-          result: { data: { hello: 'world 3' } },
+          result: { data: { hello: "world 3" } },
         },
       ];
 
       const cache = new InMemoryCache();
       const onCompleted = jest.fn();
       const { result } = renderHook(
-        () => useQuery(query, {
-          onCompleted,
-          pollInterval: 10,
-        }),
+        () =>
+          useQuery(query, {
+            onCompleted,
+            pollInterval: 10,
+          }),
         {
           wrapper: ({ children }) => (
             <MockedProvider mocks={mocks} cache={cache}>
               {children}
             </MockedProvider>
           ),
-        },
+        }
       );
 
       expect(result.current.loading).toBe(true);
 
-      await waitFor(() => {
-        expect(result.current.data).toEqual({ hello: 'world 1' });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.data).toEqual({ hello: "world 1" });
+        },
+        { interval: 1 }
+      );
       expect(result.current.loading).toBe(false);
       expect(onCompleted).toHaveBeenCalledTimes(1);
 
-      await waitFor(() => {
-        expect(result.current.data).toEqual({ hello: 'world 2' });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.data).toEqual({ hello: "world 2" });
+        },
+        { interval: 1 }
+      );
       expect(result.current.loading).toBe(false);
       expect(onCompleted).toHaveBeenCalledTimes(1);
 
-      await waitFor(() => {
-        expect(result.current.data).toEqual({ hello: 'world 3' });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.data).toEqual({ hello: "world 3" });
+        },
+        { interval: 1 }
+      );
       expect(result.current.loading).toBe(false);
       expect(onCompleted).toHaveBeenCalledTimes(1);
     });
 
-    it('onCompleted should fire when polling with notifyOnNetworkStatusChange: true', async () => {
-      const query = gql`{ hello }`;
+    it("onCompleted should fire when polling with notifyOnNetworkStatusChange: true", async () => {
+      const query = gql`
+        {
+          hello
+        }
+      `;
       const mocks = [
         {
           request: { query },
-          result: { data: { hello: 'world 1' } },
+          result: { data: { hello: "world 1" } },
         },
         {
           request: { query },
-          result: { data: { hello: 'world 2' } },
+          result: { data: { hello: "world 2" } },
         },
         {
           request: { query },
-          result: { data: { hello: 'world 3' } },
+          result: { data: { hello: "world 3" } },
         },
       ];
 
       const cache = new InMemoryCache();
       const onCompleted = jest.fn();
       const { result } = renderHook(
-        () => useQuery(query, {
-          onCompleted,
-          notifyOnNetworkStatusChange: true,
-          pollInterval: 10,
-        }),
+        () =>
+          useQuery(query, {
+            onCompleted,
+            notifyOnNetworkStatusChange: true,
+            pollInterval: 10,
+          }),
         {
           wrapper: ({ children }) => (
             <MockedProvider mocks={mocks} cache={cache}>
               {children}
             </MockedProvider>
           ),
-        },
+        }
       );
 
       expect(result.current.loading).toBe(true);
 
-      await waitFor(() => {
-        expect(result.current.data).toEqual({ hello: 'world 1' });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.data).toEqual({ hello: "world 1" });
+        },
+        { interval: 1 }
+      );
       expect(result.current.loading).toBe(false);
       expect(onCompleted).toHaveBeenCalledTimes(1);
 
-      await waitFor(() => {
-        expect(result.current.data).toEqual({ hello: 'world 2' });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.data).toEqual({ hello: "world 2" });
+        },
+        { interval: 1 }
+      );
       expect(result.current.loading).toBe(false);
       expect(onCompleted).toHaveBeenCalledTimes(2);
 
-      await waitFor(() => {
-        expect(result.current.data).toEqual({ hello: 'world 3' });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.data).toEqual({ hello: "world 3" });
+        },
+        { interval: 1 }
+      );
       expect(result.current.loading).toBe(false);
       expect(onCompleted).toHaveBeenCalledTimes(3);
     });
@@ -4103,10 +4734,10 @@ describe('useQuery Hook', () => {
       const ChildComponent: React.FC = () => {
         const { data, client } = useQuery(query, { onCompleted });
         function refetchQueries() {
-          client.refetchQueries({ include: 'active' })
+          client.refetchQueries({ include: "active" });
         }
         function writeQuery() {
-          client.writeQuery({ query, data: { hello: 'baz'}})
+          client.writeQuery({ query, data: { hello: "baz" } });
         }
         return (
           <div>
@@ -4130,10 +4761,14 @@ describe('useQuery Hook', () => {
       render(<ParentComponent />);
 
       await screen.findByText("Data: foo");
-      await userEvent.click(screen.getByRole('button', { name: /refetch queries/i }));
+      await userEvent.click(
+        screen.getByRole("button", { name: /refetch queries/i })
+      );
       expect(onCompleted).toBeCalledTimes(1);
       await screen.findByText("Data: bar");
-      await userEvent.click(screen.getByRole('button', { name: /update word/i }));
+      await userEvent.click(
+        screen.getByRole("button", { name: /update word/i })
+      );
       expect(onCompleted).toBeCalledTimes(1);
       await screen.findByText("Data: baz");
       expect(onCompleted).toBeCalledTimes(1);
@@ -4160,18 +4795,15 @@ describe('useQuery Hook', () => {
       const onCompleted = jest.fn();
 
       const ChildComponent: React.FC = () => {
-        const { data, client } = useQuery(
-          query,
-          {
-            onCompleted,
-            notifyOnNetworkStatusChange: true
-          }
-        );
+        const { data, client } = useQuery(query, {
+          onCompleted,
+          notifyOnNetworkStatusChange: true,
+        });
         function refetchQueries() {
-          client.refetchQueries({ include: 'active' })
+          client.refetchQueries({ include: "active" });
         }
         function writeQuery() {
-          client.writeQuery({ query, data: { hello: 'baz'}})
+          client.writeQuery({ query, data: { hello: "baz" } });
         }
         return (
           <div>
@@ -4196,11 +4828,15 @@ describe('useQuery Hook', () => {
 
       await screen.findByText("Data: foo");
       expect(onCompleted).toBeCalledTimes(1);
-      await userEvent.click(screen.getByRole('button', { name: /refetch queries/i }));
+      await userEvent.click(
+        screen.getByRole("button", { name: /refetch queries/i })
+      );
       // onCompleted increments when refetch occurs since we're hitting the network...
       expect(onCompleted).toBeCalledTimes(2);
       await screen.findByText("Data: bar");
-      await userEvent.click(screen.getByRole('button', { name: /update word/i }));
+      await userEvent.click(
+        screen.getByRole("button", { name: /update word/i })
+      );
       // but not on direct cache write, since there's no network request to complete
       expect(onCompleted).toBeCalledTimes(2);
       await screen.findByText("Data: baz");
@@ -4208,8 +4844,8 @@ describe('useQuery Hook', () => {
     });
   });
 
-  describe('Optimistic data', () => {
-    it('should display rolled back optimistic data when an error occurs', async () => {
+  describe("Optimistic data", () => {
+    it("should display rolled back optimistic data when an error occurs", async () => {
       const query = gql`
         query AllCars {
           cars {
@@ -4224,11 +4860,11 @@ describe('useQuery Hook', () => {
         cars: [
           {
             id: 1,
-            make: 'Audi',
-            model: 'RS8',
-            __typename: 'Car'
-          }
-        ]
+            make: "Audi",
+            model: "RS8",
+            __typename: "Car",
+          },
+        ],
       };
 
       const mutation = gql`
@@ -4243,16 +4879,13 @@ describe('useQuery Hook', () => {
 
       const carData = {
         id: 2,
-        make: 'Ford',
-        model: 'Pinto',
-        __typename: 'Car'
+        make: "Ford",
+        model: "Pinto",
+        __typename: "Car",
       };
 
       const allCarsData = {
-        cars: [
-          carsData.cars[0],
-          carData
-        ]
+        cars: [carsData.cars[0], carData],
       };
 
       const mocks = [
@@ -4262,9 +4895,9 @@ describe('useQuery Hook', () => {
         },
         {
           request: { query: mutation },
-          error: new Error('Oh no!'),
+          error: new Error("Oh no!"),
           delay: 500,
-        }
+        },
       ];
 
       const cache = new InMemoryCache();
@@ -4285,16 +4918,21 @@ describe('useQuery Hook', () => {
                   cars(existing, { readField }) {
                     const newCarRef = cache.writeFragment({
                       data: data!.addCar,
-                      fragment: gql`fragment NewCar on Car {
-                        id
-                        make
-                        model
-                      }`,
+                      fragment: gql`
+                        fragment NewCar on Car {
+                          id
+                          make
+                          model
+                        }
+                      `,
                     });
 
-                    if (existing.some(
-                      (ref: Reference) => readField('id', ref) === data!.addCar.id
-                    )) {
+                    if (
+                      existing.some(
+                        (ref: Reference) =>
+                          readField("id", ref) === data!.addCar.id
+                      )
+                    ) {
                       return existing;
                     }
 
@@ -4307,15 +4945,18 @@ describe('useQuery Hook', () => {
           }),
           query: useQuery(query),
         }),
-        { wrapper },
+        { wrapper }
       );
 
       expect(result.current.query.loading).toBe(true);
       const mutate = result.current.mutation[0];
 
-      await waitFor(() => {
-        expect(result.current.query.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.query.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current.query.loading).toBe(false);
       expect(result.current.query.data).toEqual(carsData);
 
@@ -4337,7 +4978,7 @@ describe('useQuery Hook', () => {
 
       await waitFor(() => {
         expect(result.current.mutation[1].loading).toBe(false);
-      })
+      });
 
       // The mutation has completely finished, leaving the query with access to
       // the original cache data.
@@ -4346,15 +4987,20 @@ describe('useQuery Hook', () => {
       expect(result.current.query.data).toEqual(carsData);
 
       expect(onError).toHaveBeenCalledTimes(1);
-      expect(onError.mock.calls[0][0].message).toBe('Oh no!');
+      expect(onError.mock.calls[0][0].message).toBe("Oh no!");
     });
   });
 
-  describe('Partial refetch', () => {
-    it('should attempt a refetch when data is missing and partialRefetch is true', async () => {
-      const errorSpy = jest.spyOn(console, 'error')
+  describe("Partial refetch", () => {
+    it("should attempt a refetch when data is missing and partialRefetch is true", async () => {
+      const errorSpy = jest
+        .spyOn(console, "error")
         .mockImplementation(() => {});
-      const query = gql`{ hello }`;
+      const query = gql`
+        {
+          hello
+        }
+      `;
 
       const link = mockSingleLink(
         {
@@ -4375,17 +5021,16 @@ describe('useQuery Hook', () => {
       });
 
       const { result } = renderHook(
-        () => useQuery(query, {
-          partialRefetch: true,
-          notifyOnNetworkStatusChange: true,
-        }),
+        () =>
+          useQuery(query, {
+            partialRefetch: true,
+            notifyOnNetworkStatusChange: true,
+          }),
         {
           wrapper: ({ children }) => (
-            <ApolloProvider client={client}>
-              {children}
-            </ApolloProvider>
+            <ApolloProvider client={client}>{children}</ApolloProvider>
           ),
-        },
+        }
       );
 
       expect(result.current.loading).toBe(true);
@@ -4393,27 +5038,33 @@ describe('useQuery Hook', () => {
       expect(result.current.error).toBe(undefined);
       expect(result.current.networkStatus).toBe(NetworkStatus.loading);
 
-      await waitFor(() => {
-        expect(result.current.networkStatus).toBe(NetworkStatus.refetch);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.networkStatus).toBe(NetworkStatus.refetch);
+        },
+        { interval: 1 }
+      );
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
       expect(result.current.error).toBe(undefined);
 
       expect(errorSpy).toHaveBeenCalledTimes(1);
-      expect(errorSpy.mock.calls[0][0]).toMatch('Missing field');
+      expect(errorSpy.mock.calls[0][0]).toMatch("Missing field");
       errorSpy.mockRestore();
 
-      await waitFor(() => {
-        expect(result.current.networkStatus).toBe(NetworkStatus.ready);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.networkStatus).toBe(NetworkStatus.ready);
+        },
+        { interval: 1 }
+      );
 
       expect(result.current.loading).toBe(false);
-      expect(result.current.data).toEqual({ hello: 'world' });
+      expect(result.current.data).toEqual({ hello: "world" });
       expect(result.current.error).toBe(undefined);
     });
 
-    it('should attempt a refetch when data is missing and partialRefetch is true 2', async () => {
+    it("should attempt a refetch when data is missing and partialRefetch is true 2", async () => {
       const query = gql`
         query people {
           allPeople(first: 1) {
@@ -4425,10 +5076,11 @@ describe('useQuery Hook', () => {
       `;
 
       const data = {
-        allPeople: { people: [{ name: 'Luke Skywalker' }] },
+        allPeople: { people: [{ name: "Luke Skywalker" }] },
       };
 
-      const errorSpy = jest.spyOn(console, 'error')
+      const errorSpy = jest
+        .spyOn(console, "error")
         .mockImplementation(() => {});
       const link = mockSingleLink(
         { request: { query }, result: { data: {} }, delay: 20 },
@@ -4441,17 +5093,16 @@ describe('useQuery Hook', () => {
       });
 
       const { result } = renderHook(
-        () => useQuery(query, {
-          partialRefetch: true,
-          notifyOnNetworkStatusChange: true,
-        }),
+        () =>
+          useQuery(query, {
+            partialRefetch: true,
+            notifyOnNetworkStatusChange: true,
+          }),
         {
           wrapper: ({ children }) => (
-            <ApolloProvider client={client}>
-              {children}
-            </ApolloProvider>
+            <ApolloProvider client={client}>{children}</ApolloProvider>
           ),
-        },
+        }
       );
 
       expect(result.current.loading).toBe(true);
@@ -4459,29 +5110,40 @@ describe('useQuery Hook', () => {
       expect(result.current.error).toBe(undefined);
       expect(result.current.networkStatus).toBe(NetworkStatus.loading);
 
-      await waitFor(() => {
-        expect(result.current.networkStatus).toBe(NetworkStatus.refetch);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.networkStatus).toBe(NetworkStatus.refetch);
+        },
+        { interval: 1 }
+      );
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
       expect(result.current.error).toBe(undefined);
 
       expect(errorSpy).toHaveBeenCalledTimes(1);
-      expect(errorSpy.mock.calls[0][0]).toMatch('Missing field');
+      expect(errorSpy.mock.calls[0][0]).toMatch("Missing field");
       errorSpy.mockRestore();
 
-      await waitFor(() => {
-        expect(result.current.networkStatus).toBe(NetworkStatus.ready);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.networkStatus).toBe(NetworkStatus.ready);
+        },
+        { interval: 1 }
+      );
       expect(result.current.loading).toBe(false);
       expect(result.current.data).toEqual(data);
       expect(result.current.error).toBe(undefined);
     });
 
-    it('should attempt a refetch when data is missing, partialRefetch is true and addTypename is false for the cache', async () => {
-      const errorSpy = jest.spyOn(console, 'error')
+    it("should attempt a refetch when data is missing, partialRefetch is true and addTypename is false for the cache", async () => {
+      const errorSpy = jest
+        .spyOn(console, "error")
         .mockImplementation(() => {});
-      const query = gql`{ hello }`;
+      const query = gql`
+        {
+          hello
+        }
+      `;
 
       const link = mockSingleLink(
         {
@@ -4503,17 +5165,16 @@ describe('useQuery Hook', () => {
       });
 
       const wrapper = ({ children }: any) => (
-        <ApolloProvider client={client}>
-          {children}
-        </ApolloProvider>
+        <ApolloProvider client={client}>{children}</ApolloProvider>
       );
 
       const { result } = renderHook(
-        () => useQuery(query, {
-          partialRefetch: true,
-          notifyOnNetworkStatusChange: true,
-        }),
-        { wrapper },
+        () =>
+          useQuery(query, {
+            partialRefetch: true,
+            notifyOnNetworkStatusChange: true,
+          }),
+        { wrapper }
       );
 
       expect(result.current.loading).toBe(true);
@@ -4521,29 +5182,35 @@ describe('useQuery Hook', () => {
       expect(result.current.error).toBe(undefined);
       expect(result.current.networkStatus).toBe(NetworkStatus.loading);
 
-      await waitFor(() => {
-        expect(result.current.networkStatus).toBe(NetworkStatus.refetch);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.networkStatus).toBe(NetworkStatus.refetch);
+        },
+        { interval: 1 }
+      );
       expect(result.current.loading).toBe(true);
       expect(result.current.error).toBe(undefined);
       expect(result.current.data).toBe(undefined);
 
       expect(errorSpy).toHaveBeenCalledTimes(1);
-      expect(errorSpy.mock.calls[0][0]).toMatch('Missing field');
+      expect(errorSpy.mock.calls[0][0]).toMatch("Missing field");
       errorSpy.mockRestore();
 
-      await waitFor(() => {
-        expect(result.current.networkStatus).toBe(NetworkStatus.ready);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.networkStatus).toBe(NetworkStatus.ready);
+        },
+        { interval: 1 }
+      );
 
       expect(result.current.loading).toBe(false);
-      expect(result.current.data).toEqual({ hello: 'world' });
+      expect(result.current.data).toEqual({ hello: "world" });
       expect(result.current.error).toBe(undefined);
     });
   });
 
-  describe('Client Resolvers', () => {
-    it('should receive up to date @client(always: true) fields on entity update', async () => {
+  describe("Client Resolvers", () => {
+    it("should receive up to date @client(always: true) fields on entity update", async () => {
       const query = gql`
         query GetClientData($id: ID) {
           clientEntity(id: $id) @client(always: true) {
@@ -4573,23 +5240,23 @@ describe('useQuery Hook', () => {
         resolvers: {
           ClientData: {
             titleLength(data) {
-              return data.title.length
-            }
+              return data.title.length;
+            },
           },
           Query: {
-            clientEntity(_root, {id}, {cache}) {
+            clientEntity(_root, { id }, { cache }) {
               return cache.readFragment({
-                id: cache.identify({id, __typename: "ClientData"}),
+                id: cache.identify({ id, __typename: "ClientData" }),
                 fragment,
               });
             },
           },
           Mutation: {
-            addOrUpdate(_root, {id, title}, {cache}) {
+            addOrUpdate(_root, { id, title }, { cache }) {
               return cache.writeFragment({
-                id: cache.identify({id, __typename: "ClientData"}),
+                id: cache.identify({ id, __typename: "ClientData" }),
                 fragment,
-                data: {id, title, __typename: "ClientData"},
+                data: { id, title, __typename: "ClientData" },
               });
             },
           },
@@ -4597,8 +5264,8 @@ describe('useQuery Hook', () => {
       });
 
       const entityId = 1;
-      const shortTitle = 'Short';
-      const longerTitle = 'A little longer';
+      const shortTitle = "Short";
+      const longerTitle = "A little longer";
       client.mutate({
         mutation,
         variables: {
@@ -4608,28 +5275,29 @@ describe('useQuery Hook', () => {
       });
 
       const wrapper = ({ children }: any) => (
-        <ApolloProvider client={client}>
-          {children}
-        </ApolloProvider>
+        <ApolloProvider client={client}>{children}</ApolloProvider>
       );
 
       const { result } = renderHook(
         () => useQuery(query, { variables: { id: entityId } }),
-        { wrapper },
+        { wrapper }
       );
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
 
       expect(result.current.data).toEqual({
         clientEntity: {
           id: entityId,
           title: shortTitle,
           titleLength: shortTitle.length,
-          __typename: 'ClientData',
+          __typename: "ClientData",
         },
       });
 
@@ -4639,45 +5307,56 @@ describe('useQuery Hook', () => {
           variables: {
             id: entityId,
             title: longerTitle,
-          }
+          },
         });
       });
 
-      await waitFor(() => {
-        expect(result.current.data).toEqual({
-          clientEntity: {
-            id: entityId,
-            title: longerTitle,
-            titleLength: longerTitle.length,
-            __typename: "ClientData",
-          },
-        });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.data).toEqual({
+            clientEntity: {
+              id: entityId,
+              title: longerTitle,
+              titleLength: longerTitle.length,
+              __typename: "ClientData",
+            },
+          });
+        },
+        { interval: 1 }
+      );
     });
   });
 
-  describe('Skipping', () => {
-    const query = gql`query greeting($someVar: Boolean) { hello }`;
+  describe("Skipping", () => {
+    const query = gql`
+      query greeting($someVar: Boolean) {
+        hello
+      }
+    `;
     const mocks = [
       {
         request: { query },
-        result: { data: { hello: 'world' } },
+        result: { data: { hello: "world" } },
       },
       {
         request: {
           query,
           variables: { someVar: true },
         },
-        result: { data: { hello: 'world' } },
+        result: { data: { hello: "world" } },
       },
     ];
 
-    it('should skip running a query when `skip` is `true`', async () => {
-      const query = gql`{ hello }`;
+    it("should skip running a query when `skip` is `true`", async () => {
+      const query = gql`
+        {
+          hello
+        }
+      `;
       const mocks = [
         {
           request: { query },
-          result: { data: { hello: 'world' } },
+          result: { data: { hello: "world" } },
         },
       ];
 
@@ -4690,7 +5369,7 @@ describe('useQuery Hook', () => {
 
       const { result, rerender } = renderHook(
         ({ skip }) => useQuery(query, { skip }),
-        { wrapper, initialProps: { skip: true }  },
+        { wrapper, initialProps: { skip: true } }
       );
 
       expect(result.current.loading).toBe(false);
@@ -4700,13 +5379,16 @@ describe('useQuery Hook', () => {
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBeFalsy();
-      }, { interval: 1 });
-      expect(result.current.data).toEqual({ hello: 'world' });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBeFalsy();
+        },
+        { interval: 1 }
+      );
+      expect(result.current.data).toEqual({ hello: "world" });
     });
 
-    it('should not make network requests when `skip` is `true`', async () => {
+    it("should not make network requests when `skip` is `true`", async () => {
       const linkFn = jest.fn();
       const link = new ApolloLink((o, f) => {
         linkFn();
@@ -4718,23 +5400,24 @@ describe('useQuery Hook', () => {
       });
 
       const wrapper = ({ children }: any) => (
-        <ApolloProvider client={client}>
-          {children}
-        </ApolloProvider>
+        <ApolloProvider client={client}>{children}</ApolloProvider>
       );
 
       const { result, rerender } = renderHook(
         ({ skip, variables }) => useQuery(query, { skip, variables }),
-        { wrapper, initialProps: { skip: false, variables: undefined as any } },
+        { wrapper, initialProps: { skip: false, variables: undefined as any } }
       );
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
-      expect(result.current.data).toEqual({ hello: 'world' });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      expect(result.current.data).toEqual({ hello: "world" });
 
       rerender({ skip: true, variables: { someVar: true } });
       expect(result.current.loading).toBe(false);
@@ -4742,88 +5425,96 @@ describe('useQuery Hook', () => {
       expect(linkFn).toHaveBeenCalledTimes(1);
     });
 
-    it('should tear down the query if `skip` is `true`', async () => {
+    it("should tear down the query if `skip` is `true`", async () => {
       const client = new ApolloClient({
-        link: new ApolloLink(() => Observable.of({ data: { hello: 'world' } })),
+        link: new ApolloLink(() => Observable.of({ data: { hello: "world" } })),
         cache: new InMemoryCache(),
       });
 
       const wrapper = ({ children }: any) => (
-        <ApolloProvider client={client}>
-          {children}
-        </ApolloProvider>
+        <ApolloProvider client={client}>{children}</ApolloProvider>
       );
 
-      const { unmount } = renderHook(
-        () => useQuery(query, { skip: true }),
-        { wrapper },
-      );
+      const { unmount } = renderHook(() => useQuery(query, { skip: true }), {
+        wrapper,
+      });
 
-      expect(client.getObservableQueries('all').size).toBe(1);
+      expect(client.getObservableQueries("all").size).toBe(1);
       unmount();
-      await new Promise(resolve => setTimeout(resolve));
-      expect(client.getObservableQueries('all').size).toBe(0);
+      await new Promise((resolve) => setTimeout(resolve));
+      expect(client.getObservableQueries("all").size).toBe(0);
     });
 
-    it('should treat fetchPolicy standby like skip', async () => {
-      const query = gql`{ hello }`;
+    it("should treat fetchPolicy standby like skip", async () => {
+      const query = gql`
+        {
+          hello
+        }
+      `;
       const mocks = [
         {
           request: { query },
-          result: { data: { hello: 'world' } },
+          result: { data: { hello: "world" } },
         },
       ];
       const { result, rerender } = renderHook(
         ({ fetchPolicy }) => useQuery(query, { fetchPolicy }),
         {
           wrapper: ({ children }) => (
-            <MockedProvider mocks={mocks}>
-              {children}
-            </MockedProvider>
+            <MockedProvider mocks={mocks}>{children}</MockedProvider>
           ),
-          initialProps: { fetchPolicy: 'standby' as any },
-        },
+          initialProps: { fetchPolicy: "standby" as any },
+        }
       );
 
       expect(result.current.loading).toBe(false);
       expect(result.current.data).toBe(undefined);
 
-      await expect(waitFor(() => {
-        expect(result.current.loading).toBe(true);
-      }, { interval: 1, timeout: 20 })).rejects.toThrow();
+      await expect(
+        waitFor(
+          () => {
+            expect(result.current.loading).toBe(true);
+          },
+          { interval: 1, timeout: 20 }
+        )
+      ).rejects.toThrow();
 
-      rerender({ fetchPolicy: 'cache-first' });
+      rerender({ fetchPolicy: "cache-first" });
       expect(result.current.data).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBeFalsy();
-      }, { interval: 1 });
-      expect(result.current.data).toEqual({ hello: 'world' });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBeFalsy();
+        },
+        { interval: 1 }
+      );
+      expect(result.current.data).toEqual({ hello: "world" });
     });
 
     // Amusingly, #8270 thinks this is a bug, but #9101 thinks this is not.
-    it('should refetch when skip is true', async () => {
-      const query = gql`{ hello }`;
-      const link = new ApolloLink(() => Observable.of({
-        data: { hello: 'world' },
-      }));
+    it("should refetch when skip is true", async () => {
+      const query = gql`
+        {
+          hello
+        }
+      `;
+      const link = new ApolloLink(() =>
+        Observable.of({
+          data: { hello: "world" },
+        })
+      );
 
-      const requestSpy = jest.spyOn(link, 'request');
+      const requestSpy = jest.spyOn(link, "request");
       const client = new ApolloClient({
         cache: new InMemoryCache(),
         link,
       });
 
-      const { result } = renderHook(
-        () => useQuery(query, { skip: true }),
-        {
-          wrapper: ({ children }) => (
-            <ApolloProvider client={client}>
-              {children}
-            </ApolloProvider>
-          ),
-        },
-      );
+      const { result } = renderHook(() => useQuery(query, { skip: true }), {
+        wrapper: ({ children }) => (
+          <ApolloProvider client={client}>{children}</ApolloProvider>
+        ),
+      });
 
       let promise;
       await waitFor(async () => {
@@ -4831,29 +5522,41 @@ describe('useQuery Hook', () => {
       });
 
       expect(result.current.loading).toBe(false);
-      await waitFor(() => {
-        expect(result.current.data).toBe(undefined);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.data).toBe(undefined);
+        },
+        { interval: 1 }
+      );
 
       expect(result.current.loading).toBe(false);
-      await waitFor(() => {
-        expect(result.current.data).toBe(undefined);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.data).toBe(undefined);
+        },
+        { interval: 1 }
+      );
       expect(requestSpy).toHaveBeenCalledTimes(1);
       requestSpy.mockRestore();
       expect(promise).resolves.toEqual({
-        data: {hello: "world"},
+        data: { hello: "world" },
         loading: false,
         networkStatus: 7,
       });
     });
 
-    it('should set correct initialFetchPolicy even if skip:true', async () => {
-      const query = gql`{ hello }`;
+    it("should set correct initialFetchPolicy even if skip:true", async () => {
+      const query = gql`
+        {
+          hello
+        }
+      `;
       let linkCount = 0;
-      const link = new ApolloLink(() => Observable.of({
-        data: { hello: ++linkCount },
-      }));
+      const link = new ApolloLink(() =>
+        Observable.of({
+          data: { hello: ++linkCount },
+        })
+      );
 
       const client = new ApolloClient({
         cache: new InMemoryCache(),
@@ -4863,26 +5566,28 @@ describe('useQuery Hook', () => {
       const correctInitialFetchPolicy: WatchQueryFetchPolicy =
         "cache-and-network";
 
-      const { result, rerender } = renderHook<QueryResult, {
-        skip: boolean;
-      }>(
-        ({ skip = true }) => useQuery(query, {
-          // Skipping equates to using a fetchPolicy of "standby", but that
-          // should not mean we revert to standby whenever we want to go back to
-          // the initial fetchPolicy (e.g. when variables change).
-          skip,
-          fetchPolicy: correctInitialFetchPolicy,
-        }),
+      const { result, rerender } = renderHook<
+        QueryResult,
+        {
+          skip: boolean;
+        }
+      >(
+        ({ skip = true }) =>
+          useQuery(query, {
+            // Skipping equates to using a fetchPolicy of "standby", but that
+            // should not mean we revert to standby whenever we want to go back to
+            // the initial fetchPolicy (e.g. when variables change).
+            skip,
+            fetchPolicy: correctInitialFetchPolicy,
+          }),
         {
           initialProps: {
             skip: true,
           },
           wrapper: ({ children }) => (
-            <ApolloProvider client={client}>
-              {children}
-            </ApolloProvider>
+            <ApolloProvider client={client}>{children}</ApolloProvider>
           ),
-        },
+        }
       );
 
       expect(result.current.loading).toBe(false);
@@ -4890,77 +5595,75 @@ describe('useQuery Hook', () => {
 
       function check(
         expectedFetchPolicy: WatchQueryFetchPolicy,
-        expectedInitialFetchPolicy: WatchQueryFetchPolicy,
+        expectedInitialFetchPolicy: WatchQueryFetchPolicy
       ) {
         const { observable } = result.current;
-        const {
-          fetchPolicy,
-          initialFetchPolicy,
-        } = observable.options;
+        const { fetchPolicy, initialFetchPolicy } = observable.options;
 
         expect(fetchPolicy).toBe(expectedFetchPolicy);
         expect(initialFetchPolicy).toBe(expectedInitialFetchPolicy);
       }
 
-      check(
-        "standby",
-        correctInitialFetchPolicy,
-      );
+      check("standby", correctInitialFetchPolicy);
 
       rerender({
         skip: false,
       });
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
 
       expect(result.current.data).toEqual({
         hello: 1,
       });
 
-      check(
-        correctInitialFetchPolicy,
-        correctInitialFetchPolicy,
-      );
+      check(correctInitialFetchPolicy, correctInitialFetchPolicy);
 
       const reasons: string[] = [];
 
-      const reobservePromise = result.current.observable.reobserve({
-        variables: {
-          newVar: true,
-        },
-        nextFetchPolicy(currentFetchPolicy, context) {
-          expect(currentFetchPolicy).toBe("cache-and-network");
-          expect(context.initialFetchPolicy).toBe("cache-and-network");
-          reasons.push(context.reason);
-          return currentFetchPolicy;
-        },
-      }).then(result => {
-        expect(result.loading).toBe(false);
-        expect(result.data).toEqual({ hello: 2 });
-      });
+      const reobservePromise = result.current.observable
+        .reobserve({
+          variables: {
+            newVar: true,
+          },
+          nextFetchPolicy(currentFetchPolicy, context) {
+            expect(currentFetchPolicy).toBe("cache-and-network");
+            expect(context.initialFetchPolicy).toBe("cache-and-network");
+            reasons.push(context.reason);
+            return currentFetchPolicy;
+          },
+        })
+        .then((result) => {
+          expect(result.loading).toBe(false);
+          expect(result.data).toEqual({ hello: 2 });
+        });
 
       expect(result.current.loading).toBe(false);
 
-      await waitFor(() => {
-        expect(result.current.data).toEqual({
-          hello: 2,
-        });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.data).toEqual({
+            hello: 2,
+          });
+        },
+        { interval: 1 }
+      );
 
       await reobservePromise;
 
-      expect(reasons).toEqual([
-        "variables-changed",
-        "after-fetch",
-      ]);
+      expect(reasons).toEqual(["variables-changed", "after-fetch"]);
     });
   });
 
-  describe('Missing Fields', () => {
-    it('should log debug messages about MissingFieldErrors from the cache', async () => {
-      const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+  describe("Missing Fields", () => {
+    it("should log debug messages about MissingFieldErrors from the cache", async () => {
+      const errorSpy = jest
+        .spyOn(console, "error")
+        .mockImplementation(() => {});
 
       const carQuery: DocumentNode = gql`
         query cars($id: Int) {
@@ -4978,18 +5681,18 @@ describe('useQuery Hook', () => {
         cars: [
           {
             id: 1,
-            make: 'Audi',
-            model: 'RS8',
-            vine: 'DOLLADOLLABILL',
-            __typename: 'Car'
-          }
-        ]
+            make: "Audi",
+            model: "RS8",
+            vine: "DOLLADOLLABILL",
+            __typename: "Car",
+          },
+        ],
       };
 
       const mocks = [
         {
           request: { query: carQuery, variables: { id: 1 } },
-          result: { data: carData }
+          result: { data: carData },
         },
       ];
 
@@ -5002,32 +5705,37 @@ describe('useQuery Hook', () => {
 
       const { result } = renderHook(
         () => useQuery(carQuery, { variables: { id: 1 } }),
-        { wrapper },
+        { wrapper }
       );
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
       expect(result.current.error).toBe(undefined);
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current.data).toEqual(carData);
       expect(result.current.error).toBeUndefined();
 
       expect(errorSpy).toHaveBeenCalled();
       expect(errorSpy).toHaveBeenLastCalledWith(
-        `Missing field '%s' while writing result %o`, 'vin', {
+        `Missing field '%s' while writing result %o`,
+        "vin",
+        {
           id: 1,
           make: "Audi",
           model: "RS8",
           vine: "DOLLADOLLABILL",
-          __typename: "Car"
+          __typename: "Car",
         }
       );
       errorSpy.mockRestore();
     });
 
-    it('should return partial cache data when `returnPartialData` is true', async () => {
+    it("should return partial cache data when `returnPartialData` is true", async () => {
       const cache = new InMemoryCache();
       const client = new ApolloClient({
         cache,
@@ -5052,15 +5760,15 @@ describe('useQuery Hook', () => {
         data: {
           cars: [
             {
-              __typename: 'Car',
-              make: 'Ford',
-              model: 'Mustang',
-              vin: 'PONY123',
+              __typename: "Car",
+              make: "Ford",
+              model: "Mustang",
+              vin: "PONY123",
               repairs: [
                 {
-                  __typename: 'Repair',
-                  date: '2019-05-08',
-                  description: 'Could not get after it.',
+                  __typename: "Repair",
+                  date: "2019-05-08",
+                  description: "Could not get after it.",
                 },
               ],
             },
@@ -5083,22 +5791,20 @@ describe('useQuery Hook', () => {
         () => useQuery(partialQuery, { returnPartialData: true }),
         {
           wrapper: ({ children }) => (
-            <ApolloProvider client={client}>
-              {children}
-            </ApolloProvider>
+            <ApolloProvider client={client}>{children}</ApolloProvider>
           ),
-        },
+        }
       );
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toEqual({
         cars: [
           {
-            __typename: 'Car',
+            __typename: "Car",
             repairs: [
               {
-                __typename: 'Repair',
-                date: '2019-05-08',
+                __typename: "Repair",
+                date: "2019-05-08",
               },
             ],
           },
@@ -5106,7 +5812,7 @@ describe('useQuery Hook', () => {
       });
     });
 
-    it('should not return partial cache data when `returnPartialData` is false', () => {
+    it("should not return partial cache data when `returnPartialData` is false", () => {
       const cache = new InMemoryCache();
       const client = new ApolloClient({
         cache,
@@ -5131,15 +5837,15 @@ describe('useQuery Hook', () => {
         data: {
           cars: [
             {
-              __typename: 'Car',
-              make: 'Ford',
-              model: 'Mustang',
-              vin: 'PONY123',
+              __typename: "Car",
+              make: "Ford",
+              model: "Mustang",
+              vin: "PONY123",
               repairs: [
                 {
-                  __typename: 'Repair',
-                  date: '2019-05-08',
-                  description: 'Could not get after it.',
+                  __typename: "Repair",
+                  date: "2019-05-08",
+                  description: "Could not get after it.",
                 },
               ],
             },
@@ -5162,18 +5868,16 @@ describe('useQuery Hook', () => {
         () => useQuery(partialQuery, { returnPartialData: false }),
         {
           wrapper: ({ children }) => (
-            <ApolloProvider client={client}>
-              {children}
-            </ApolloProvider>
+            <ApolloProvider client={client}>{children}</ApolloProvider>
           ),
-        },
+        }
       );
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
     });
 
-    it('should not return partial cache data when `returnPartialData` is false and new variables are passed in', async () => {
+    it("should not return partial cache data when `returnPartialData` is false and new variables are passed in", async () => {
       const cache = new InMemoryCache();
       const client = new ApolloClient({
         cache,
@@ -5182,7 +5886,7 @@ describe('useQuery Hook', () => {
 
       const query = gql`
         query MyCar($id: ID) {
-          car (id: $id) {
+          car(id: $id) {
             id
             make
           }
@@ -5191,7 +5895,7 @@ describe('useQuery Hook', () => {
 
       const partialQuery = gql`
         query MyCar($id: ID) {
-          car (id: $id) {
+          car(id: $id) {
             id
             make
             model
@@ -5204,10 +5908,10 @@ describe('useQuery Hook', () => {
         variables: { id: 1 },
         data: {
           car: {
-            __typename: 'Car',
+            __typename: "Car",
             id: 1,
-            make: 'Ford',
-            model: 'Pinto',
+            make: "Ford",
+            model: "Pinto",
           },
         },
       });
@@ -5217,15 +5921,14 @@ describe('useQuery Hook', () => {
         variables: { id: 2 },
         data: {
           car: {
-            __typename: 'Car',
+            __typename: "Car",
             id: 2,
-            make: 'Ford',
-            model: 'Pinto',
+            make: "Ford",
+            model: "Pinto",
           },
         },
       });
 
-
       let setId: any;
       const { result } = renderHook(
         () => {
@@ -5239,20 +5942,18 @@ describe('useQuery Hook', () => {
         },
         {
           wrapper: ({ children }) => (
-            <ApolloProvider client={client}>
-              {children}
-            </ApolloProvider>
+            <ApolloProvider client={client}>{children}</ApolloProvider>
           ),
-        },
+        }
       );
 
       expect(result.current.loading).toBe(false);
       expect(result.current.data).toEqual({
         car: {
-          __typename: 'Car',
+          __typename: "Car",
           id: 2,
-          make: 'Ford',
-          model: 'Pinto',
+          make: "Ford",
+          model: "Pinto",
         },
       });
 
@@ -5260,16 +5961,19 @@ describe('useQuery Hook', () => {
         setId(1);
       });
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(true);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(true);
+        },
+        { interval: 1 }
+      );
 
       expect(result.current.data).toBe(undefined);
     });
   });
 
-  describe('Previous data', () => {
-    it('should persist previous data when a query is re-run', async () => {
+  describe("Previous data", () => {
+    it("should persist previous data when a query is re-run", async () => {
       const query = gql`
         query car {
           car {
@@ -5282,17 +5986,17 @@ describe('useQuery Hook', () => {
       const data1 = {
         car: {
           id: 1,
-          make: 'Venturi',
-          __typename: 'Car',
-        }
+          make: "Venturi",
+          __typename: "Car",
+        },
       };
 
       const data2 = {
         car: {
           id: 2,
-          make: 'Wiesmann',
-          __typename: 'Car',
-        }
+          make: "Wiesmann",
+          __typename: "Car",
+        },
       };
 
       const mocks = [
@@ -5309,42 +6013,54 @@ describe('useQuery Hook', () => {
 
       const { result } = renderHook(
         () => useQuery(query, { notifyOnNetworkStatusChange: true }),
-        { wrapper },
+        { wrapper }
       );
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
       expect(result.current.previousData).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current.data).toEqual(data1);
       expect(result.current.previousData).toBe(undefined);
 
       setTimeout(() => result.current.refetch());
-      await waitFor(() => {
-        expect(result.current.loading).toBe(true);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(true);
+        },
+        { interval: 1 }
+      );
       expect(result.current.data).toEqual(data1);
       expect(result.current.previousData).toEqual(data1);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
-      expect(result.current.data).toEqual(data2);
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      expect(result.current.data).toEqual(data2);
       expect(result.current.previousData).toEqual(data1);
     });
 
-    it('should persist result.previousData across multiple results', async () => {
-      const query: TypedDocumentNode<{
-        car: {
-          id: string;
-          make: string;
-        };
-      }, {
-        vin?: string;
-      }> = gql`
+    it("should persist result.previousData across multiple results", async () => {
+      const query: TypedDocumentNode<
+        {
+          car: {
+            id: string;
+            make: string;
+          };
+        },
+        {
+          vin?: string;
+        }
+      > = gql`
         query car($vin: String) {
           car(vin: $vin) {
             id
@@ -5356,24 +6072,24 @@ describe('useQuery Hook', () => {
       const data1 = {
         car: {
           id: 1,
-          make: 'Venturi',
-          __typename: 'Car',
+          make: "Venturi",
+          __typename: "Car",
         },
       };
 
       const data2 = {
         car: {
           id: 2,
-          make: 'Wiesmann',
-          __typename: 'Car',
+          make: "Wiesmann",
+          __typename: "Car",
         },
       };
 
       const data3 = {
         car: {
           id: 3,
-          make: 'Beetle',
-          __typename: 'Car',
+          make: "Beetle",
+          __typename: "Car",
         },
       };
 
@@ -5398,23 +6114,29 @@ describe('useQuery Hook', () => {
 
       const { result } = renderHook(
         () => useQuery(query, { notifyOnNetworkStatusChange: true }),
-        { wrapper },
+        { wrapper }
       );
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
       expect(result.current.previousData).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current.data).toEqual(data1);
       expect(result.current.previousData).toBe(undefined);
 
       setTimeout(() => result.current.refetch());
-      await waitFor(() => {
-        expect(result.current.loading).toBe(true);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(true);
+        },
+        { interval: 1 }
+      );
       expect(result.current.data).toEqual(data1);
       expect(result.current.previousData).toEqual(data1);
 
@@ -5423,63 +6145,82 @@ describe('useQuery Hook', () => {
       expect(result.current.data).toEqual(data1);
       expect(result.current.previousData).toEqual(data1);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current.data).toEqual(data3);
       expect(result.current.previousData).toEqual(data1);
     });
 
-    it('should persist result.previousData even if query changes', async () => {
+    it("should persist result.previousData even if query changes", async () => {
       const aQuery: TypedDocumentNode<{
         a: string;
-      }> = gql`query A { a }`;
+      }> = gql`
+        query A {
+          a
+        }
+      `;
 
       const abQuery: TypedDocumentNode<{
         a: string;
         b: number;
-      }> = gql`query AB { a b }`;
+      }> = gql`
+        query AB {
+          a
+          b
+        }
+      `;
 
       const bQuery: TypedDocumentNode<{
         b: number;
-      }> = gql`query B { b }`;
+      }> = gql`
+        query B {
+          b
+        }
+      `;
 
       let stringOfAs = "";
       let countOfBs = 0;
       const client = new ApolloClient({
         cache: new InMemoryCache(),
-        link: new ApolloLink(request => new Observable(observer => {
-          switch (request.operationName) {
-            case "A": {
-              observer.next({
-                data: {
-                  a: stringOfAs += 'a',
-                },
-              });
-              break;
-            }
-            case "AB": {
-              observer.next({
-                data: {
-                  a: stringOfAs += 'a',
-                  b: countOfBs += 1,
-                },
-              });
-              break;
-            }
-            case "B": {
-              observer.next({
-                data: {
-                  b: countOfBs += 1,
-                },
-              });
-              break;
-            }
-          }
-          setTimeout(() => {
-            observer.complete();
-          }, 10);
-        })),
+        link: new ApolloLink(
+          (request) =>
+            new Observable((observer) => {
+              switch (request.operationName) {
+                case "A": {
+                  observer.next({
+                    data: {
+                      a: (stringOfAs += "a"),
+                    },
+                  });
+                  break;
+                }
+                case "AB": {
+                  observer.next({
+                    data: {
+                      a: (stringOfAs += "a"),
+                      b: (countOfBs += 1),
+                    },
+                  });
+                  break;
+                }
+                case "B": {
+                  observer.next({
+                    data: {
+                      b: (countOfBs += 1),
+                    },
+                  });
+                  break;
+                }
+              }
+              setTimeout(() => {
+                observer.complete();
+              }, 10);
+            })
+        ),
       });
 
       const { result } = renderHook(
@@ -5496,141 +6237,213 @@ describe('useQuery Hook', () => {
         },
         {
           wrapper: ({ children }: any) => (
-            <ApolloProvider client={client}>
-              {children}
-            </ApolloProvider>
+            <ApolloProvider client={client}>{children}</ApolloProvider>
           ),
-        },
+        }
       );
 
+      await waitFor(
+        () => {
+          const { loading } = result.current.useQueryResult;
+          expect(loading).toBe(true);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          const { data } = result.current.useQueryResult;
+          expect(data).toEqual({ a: "a" });
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          const { previousData } = result.current.useQueryResult;
+          expect(previousData).toBeUndefined();
+        },
+        { interval: 1 }
+      );
 
-      await waitFor(() => {
-        const { loading } = result.current.useQueryResult;
-        expect(loading).toBe(true);
-      }, { interval: 1 });
-      await waitFor(() => {
-        const { data } = result.current.useQueryResult;
-        expect(data).toEqual({ a: "a" });
-      }, { interval: 1 });
-      await waitFor(() => {
-        const { previousData } = result.current.useQueryResult;
-        expect(previousData).toBeUndefined();
-      }, { interval: 1 });
-
-
-      await waitFor(() => {
-        const { loading } = result.current.useQueryResult;
-        expect(loading).toBe(false);
-      }, { interval: 1 });
-      await waitFor(() => {
-        const { data } = result.current.useQueryResult;
-        expect(data).toEqual({ a: "a" });
-      }, { interval: 1 });
-      await waitFor(() => {
-        const { previousData } = result.current.useQueryResult;
-        expect(previousData).toBe(undefined);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          const { loading } = result.current.useQueryResult;
+          expect(loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          const { data } = result.current.useQueryResult;
+          expect(data).toEqual({ a: "a" });
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          const { previousData } = result.current.useQueryResult;
+          expect(previousData).toBe(undefined);
+        },
+        { interval: 1 }
+      );
 
-      await expect(await waitFor(() => {
-        result.current.setQuery(abQuery);
-      }, { interval: 1 }));
+      await expect(
+        await waitFor(
+          () => {
+            result.current.setQuery(abQuery);
+          },
+          { interval: 1 }
+        )
+      );
 
-      await waitFor(() => {
-        const { loading } = result.current.useQueryResult;
-        expect(loading).toBe(false);
-      }, { interval: 1 });
-      await waitFor(() => {
-        const { data } = result.current.useQueryResult;
-        expect(data).toEqual({ a: "aa", b: 1 });
-      }, { interval: 1 });
-      await waitFor(() => {
-        const { previousData } = result.current.useQueryResult;
-        expect(previousData).toEqual({ a: "a" });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          const { loading } = result.current.useQueryResult;
+          expect(loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          const { data } = result.current.useQueryResult;
+          expect(data).toEqual({ a: "aa", b: 1 });
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          const { previousData } = result.current.useQueryResult;
+          expect(previousData).toEqual({ a: "a" });
+        },
+        { interval: 1 }
+      );
 
-      await waitFor(() => {
-        const { loading } = result.current.useQueryResult;
-        expect(loading).toBe(false);
-      }, { interval: 1 });
-      await waitFor(() => {
-        const { data } = result.current.useQueryResult;
-        expect(data).toEqual({ a: "aa", b: 1 });
-      }, { interval: 1 });
-      await waitFor(() => {
-        const { previousData } = result.current.useQueryResult;
-        expect(previousData).toEqual({ a: "a" });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          const { loading } = result.current.useQueryResult;
+          expect(loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          const { data } = result.current.useQueryResult;
+          expect(data).toEqual({ a: "aa", b: 1 });
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          const { previousData } = result.current.useQueryResult;
+          expect(previousData).toEqual({ a: "a" });
+        },
+        { interval: 1 }
+      );
 
-      await waitFor(() => {
-        result.current.useQueryResult.reobserve().then(result => {
-          expect(result.loading).toBe(false);
-          expect(result.data).toEqual({ a: "aaa", b: 2 });
-        });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          result.current.useQueryResult.reobserve().then((result) => {
+            expect(result.loading).toBe(false);
+            expect(result.data).toEqual({ a: "aaa", b: 2 });
+          });
+        },
+        { interval: 1 }
+      );
 
-      await waitFor(() => {
-        const { loading } = result.current.useQueryResult;
-        expect(loading).toBe(false);
-      }, { interval: 1 });
-      await waitFor(() => {
-        const { data } = result.current.useQueryResult;
-        expect(data).toEqual({ a: "aaa", b: 2 });
-      }, { interval: 1 });
-      await waitFor(() => {
-        const { previousData } = result.current.useQueryResult;
-        expect(previousData).toEqual({ a: "aa", b: 1 });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          const { loading } = result.current.useQueryResult;
+          expect(loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          const { data } = result.current.useQueryResult;
+          expect(data).toEqual({ a: "aaa", b: 2 });
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          const { previousData } = result.current.useQueryResult;
+          expect(previousData).toEqual({ a: "aa", b: 1 });
+        },
+        { interval: 1 }
+      );
 
-      await waitFor(() => {
-        result.current.setQuery(bQuery);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          result.current.setQuery(bQuery);
+        },
+        { interval: 1 }
+      );
 
-      await waitFor(() => {
-        const { loading } = result.current.useQueryResult;
-        expect(loading).toBe(false);
-      }, { interval: 1 });
-      await waitFor(() => {
-        const { data } = result.current.useQueryResult;
-        expect(data).toEqual({ b: 3 });
-      }, { interval: 1 });
-      await waitFor(() => {
-        const { previousData } = result.current.useQueryResult;
-        expect(previousData).toEqual({ b: 2 });
-      }, { interval: 1 });
-      await waitFor(() => {
-        const { loading } = result.current.useQueryResult;
-        expect(loading).toBe(false);
-      }, { interval: 1 });
-      await waitFor(() => {
-        const { data } = result.current.useQueryResult;
-        expect(data).toEqual({ b: 3 });
-      }, { interval: 1 });
-      await waitFor(() => {
-        const { previousData } = result.current.useQueryResult;
-        expect(previousData).toEqual({ b: 2 });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          const { loading } = result.current.useQueryResult;
+          expect(loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          const { data } = result.current.useQueryResult;
+          expect(data).toEqual({ b: 3 });
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          const { previousData } = result.current.useQueryResult;
+          expect(previousData).toEqual({ b: 2 });
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          const { loading } = result.current.useQueryResult;
+          expect(loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          const { data } = result.current.useQueryResult;
+          expect(data).toEqual({ b: 3 });
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          const { previousData } = result.current.useQueryResult;
+          expect(previousData).toEqual({ b: 2 });
+        },
+        { interval: 1 }
+      );
     });
 
     it("should be cleared when variables change causes cache miss", async () => {
       const peopleData = [
-        { id: 1, name: 'John Smith', gender: 'male' },
-        { id: 2, name: 'Sara Smith', gender: 'female' },
-        { id: 3, name: 'Budd Deey', gender: 'nonbinary' },
-        { id: 4, name: 'Johnny Appleseed', gender: 'male' },
-        { id: 5, name: 'Ada Lovelace', gender: 'female' },
+        { id: 1, name: "John Smith", gender: "male" },
+        { id: 2, name: "Sara Smith", gender: "female" },
+        { id: 3, name: "Budd Deey", gender: "nonbinary" },
+        { id: 4, name: "Johnny Appleseed", gender: "male" },
+        { id: 5, name: "Ada Lovelace", gender: "female" },
       ];
 
-      const link = new ApolloLink(operation => {
-        return new Observable(observer => {
+      const link = new ApolloLink((operation) => {
+        return new Observable((observer) => {
           const { gender } = operation.variables;
-          new Promise(resolve => setTimeout(resolve, 300)).then(() => {
+          new Promise((resolve) => setTimeout(resolve, 300)).then(() => {
             observer.next({
               data: {
-                people: gender === "all" ? peopleData :
-                  gender ? peopleData.filter(
-                    person => person.gender === gender
-                  ) : peopleData,
-              }
+                people:
+                  gender === "all"
+                    ? peopleData
+                    : gender
+                    ? peopleData.filter((person) => person.gender === gender)
+                    : peopleData,
+              },
             });
             observer.complete();
           });
@@ -5662,61 +6475,75 @@ describe('useQuery Hook', () => {
       );
 
       const { result, rerender } = renderHook(
-        ({ gender }) => useQuery(query, {
-          variables: { gender },
-          fetchPolicy: 'network-only',
-        }),
-        { wrapper, initialProps: { gender: 'all' } },
+        ({ gender }) =>
+          useQuery(query, {
+            variables: { gender },
+            fetchPolicy: "network-only",
+          }),
+        { wrapper, initialProps: { gender: "all" } }
       );
 
       expect(result.current.loading).toBe(true);
       expect(result.current.networkStatus).toBe(NetworkStatus.loading);
       expect(result.current.data).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
 
       expect(result.current.networkStatus).toBe(NetworkStatus.ready);
       expect(result.current.data).toEqual({
         people: peopleData.map(({ gender, ...person }) => person),
       });
 
-      rerender({ gender: 'female' });
+      rerender({ gender: "female" });
       expect(result.current.loading).toBe(true);
       expect(result.current.networkStatus).toBe(NetworkStatus.setVariables);
       expect(result.current.data).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current.networkStatus).toBe(NetworkStatus.ready);
       expect(result.current.data).toEqual({
         people: peopleData
-          .filter((person) => person.gender === 'female')
+          .filter((person) => person.gender === "female")
           .map(({ gender, ...person }) => person),
       });
 
-      rerender({ gender: 'nonbinary' });
+      rerender({ gender: "nonbinary" });
       expect(result.current.loading).toBe(true);
       expect(result.current.networkStatus).toBe(NetworkStatus.setVariables);
       expect(result.current.data).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current.networkStatus).toBe(NetworkStatus.ready);
       expect(result.current.data).toEqual({
         people: peopleData
-          .filter((person) => person.gender === 'nonbinary')
+          .filter((person) => person.gender === "nonbinary")
           .map(({ gender, ...person }) => person),
       });
     });
   });
 
-  describe('defaultOptions', () => {
-    it('should allow polling options to be passed to the client', async () => {
-      const query = gql`{ hello }`;
+  describe("defaultOptions", () => {
+    it("should allow polling options to be passed to the client", async () => {
+      const query = gql`
+        {
+          hello
+        }
+      `;
       const cache = new InMemoryCache();
       const link = mockSingleLink(
         {
@@ -5730,7 +6557,7 @@ describe('useQuery Hook', () => {
         {
           request: { query },
           result: { data: { hello: "world 3" } },
-        },
+        }
       );
 
       const client = new ApolloClient({
@@ -5743,45 +6570,58 @@ describe('useQuery Hook', () => {
         link,
       });
 
-      const { result } = renderHook(
-        () => useQuery(query),
-        {
-          wrapper: ({ children }) => (
-            <ApolloProvider client={client}>
-              {children}
-            </ApolloProvider>
-          ),
-        },
-      );
+      const { result } = renderHook(() => useQuery(query), {
+        wrapper: ({ children }) => (
+          <ApolloProvider client={client}>{children}</ApolloProvider>
+        ),
+      });
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current.data).toEqual({ hello: 'world 1' });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current.data).toEqual({ hello: "world 1" });
+        },
+        { interval: 1 }
+      );
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current.data).toEqual({ hello: 'world 2' });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current.data).toEqual({ hello: "world 2" });
+        },
+        { interval: 1 }
+      );
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current.data).toEqual({ hello: 'world 3' });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current.data).toEqual({ hello: "world 3" });
+        },
+        { interval: 1 }
+      );
     });
   });
 
-  describe('canonical cache results', () => {
-    it('can be disabled via useQuery options', async () => {
+  describe("canonical cache results", () => {
+    it("can be disabled via useQuery options", async () => {
       const cache = new InMemoryCache({
         canonizeResults: true,
         typePolicies: {
@@ -5811,20 +6651,19 @@ describe('useQuery Hook', () => {
       cache.writeQuery({
         query,
         data: { results },
-      })
+      });
 
       const wrapper = ({ children }: any) => (
-        <MockedProvider cache={cache}>
-          {children}
-        </MockedProvider>
+        <MockedProvider cache={cache}>{children}</MockedProvider>
       );
 
       const { result, rerender } = renderHook(
-        ({ canonizeResults }) => useQuery(query, {
-          fetchPolicy: 'cache-only',
-          canonizeResults,
-        }),
-        { wrapper, initialProps: { canonizeResults: false } },
+        ({ canonizeResults }) =>
+          useQuery(query, {
+            fetchPolicy: "cache-only",
+            canonizeResults,
+          }),
+        { wrapper, initialProps: { canonizeResults: false } }
       );
 
       expect(result.current.loading).toBe(false);
@@ -5852,12 +6691,18 @@ describe('useQuery Hook', () => {
         });
       });
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current.data).toEqual({ results });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current.data).toEqual({ results });
+        },
+        { interval: 1 }
+      );
       expect(result.current.data.results.length).toBe(7);
       resultSet = new Set(result.current.data.results);
       // Since canonization is happening now, the duplicate 1 results are
@@ -5869,8 +6714,8 @@ describe('useQuery Hook', () => {
     });
   });
 
-  describe('canonical cache results', () => {
-    it('can be disabled via useQuery options', async () => {
+  describe("canonical cache results", () => {
+    it("can be disabled via useQuery options", async () => {
       const cache = new InMemoryCache({
         canonizeResults: true,
         typePolicies: {
@@ -5900,20 +6745,19 @@ describe('useQuery Hook', () => {
       cache.writeQuery({
         query,
         data: { results },
-      })
+      });
 
       const wrapper = ({ children }: any) => (
-        <MockedProvider cache={cache}>
-          {children}
-        </MockedProvider>
+        <MockedProvider cache={cache}>{children}</MockedProvider>
       );
 
       const { result, rerender } = renderHook(
-        ({ canonizeResults }) => useQuery(query, {
-          fetchPolicy: 'cache-only',
-          canonizeResults,
-        }),
-        { wrapper, initialProps: { canonizeResults: false } },
+        ({ canonizeResults }) =>
+          useQuery(query, {
+            fetchPolicy: "cache-only",
+            canonizeResults,
+          }),
+        { wrapper, initialProps: { canonizeResults: false } }
       );
 
       expect(result.current.loading).toBe(false);
@@ -5941,12 +6785,18 @@ describe('useQuery Hook', () => {
         });
       });
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current.data).toEqual({ results });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current.data).toEqual({ results });
+        },
+        { interval: 1 }
+      );
       expect(result.current.data.results.length).toBe(7);
       resultSet = new Set(result.current.data.results);
       // Since canonization is happening now, the duplicate 1 results are
@@ -5966,11 +6816,25 @@ describe('useQuery Hook', () => {
 
     const aQuery: TypedDocumentNode<{
       a: ABFields;
-    }> = gql`query A { a { id name }}`;
+    }> = gql`
+      query A {
+        a {
+          id
+          name
+        }
+      }
+    `;
 
     const bQuery: TypedDocumentNode<{
       b: ABFields;
-    }> = gql`query B { b { id name }}`;
+    }> = gql`
+      query B {
+        b {
+          id
+          name
+        }
+      }
+    `;
 
     const aData = {
       a: {
@@ -5990,29 +6854,32 @@ describe('useQuery Hook', () => {
 
     function makeClient() {
       return new ApolloClient({
-        cache: new InMemoryCache,
-        link: new ApolloLink(operation => new Observable(observer => {
-            switch (operation.operationName) {
-              case "A":
-                setTimeout(() => {
-                  observer.next({ data: aData });
-                  observer.complete();
-                });
-                break;
-              case "B":
-                setTimeout(() => {
-                  observer.next({ data: bData });
-                  observer.complete();
-                }, 10);
-                break;
-            }
-        })),
+        cache: new InMemoryCache(),
+        link: new ApolloLink(
+          (operation) =>
+            new Observable((observer) => {
+              switch (operation.operationName) {
+                case "A":
+                  setTimeout(() => {
+                    observer.next({ data: aData });
+                    observer.complete();
+                  });
+                  break;
+                case "B":
+                  setTimeout(() => {
+                    observer.next({ data: bData });
+                    observer.complete();
+                  }, 10);
+                  break;
+              }
+            })
+        ),
       });
     }
 
     async function check(
       aFetchPolicy: WatchQueryFetchPolicy,
-      bFetchPolicy: WatchQueryFetchPolicy,
+      bFetchPolicy: WatchQueryFetchPolicy
     ) {
       const client = makeClient();
       const { result } = renderHook(
@@ -6024,7 +6891,7 @@ describe('useQuery Hook', () => {
           wrapper: ({ children }) => (
             <ApolloProvider client={client}>{children}</ApolloProvider>
           ),
-        },
+        }
       );
 
       expect(result.current.a.loading).toBe(true);
@@ -6042,55 +6909,39 @@ describe('useQuery Hook', () => {
       expect(result.current.b.data).toEqual(bData);
     }
 
-    it("cache-first for both", () => check(
-      "cache-first",
-      "cache-first",
-    ));
-
-    it("cache-first first, cache-and-network second", () => check(
-      "cache-first",
-      "cache-and-network",
-    ));
-
-    it("cache-first first, network-only second", () => check(
-      "cache-first",
-      "network-only",
-    ));
-
-    it("cache-and-network for both", () => check(
-      "cache-and-network",
-      "cache-and-network",
-    ));
-
-    it("cache-and-network first, cache-first second", () => check(
-      "cache-and-network",
-      "cache-first",
-    ));
-
-    it("cache-and-network first, network-only second", () => check(
-      "cache-and-network",
-      "network-only",
-    ));
-
-    it("network-only for both", () => check(
-      "network-only",
-      "network-only",
-    ));
-
-    it("network-only first, cache-first second", () => check(
-      "network-only",
-      "cache-first",
-    ));
-
-    it("network-only first, cache-and-network second", () => check(
-      "network-only",
-      "cache-and-network",
-    ));
+    it("cache-first for both", () => check("cache-first", "cache-first"));
+
+    it("cache-first first, cache-and-network second", () =>
+      check("cache-first", "cache-and-network"));
+
+    it("cache-first first, network-only second", () =>
+      check("cache-first", "network-only"));
+
+    it("cache-and-network for both", () =>
+      check("cache-and-network", "cache-and-network"));
+
+    it("cache-and-network first, cache-first second", () =>
+      check("cache-and-network", "cache-first"));
+
+    it("cache-and-network first, network-only second", () =>
+      check("cache-and-network", "network-only"));
+
+    it("network-only for both", () => check("network-only", "network-only"));
+
+    it("network-only first, cache-first second", () =>
+      check("network-only", "cache-first"));
+
+    it("network-only first, cache-and-network second", () =>
+      check("network-only", "cache-and-network"));
   });
 
-  describe('regression test issue #9204', () => {
-    it('should handle a simple query', async () => {
-      const query = gql`{ hello }`;
+  describe("regression test issue #9204", () => {
+    it("should handle a simple query", async () => {
+      const query = gql`
+        {
+          hello
+        }
+      `;
       const mocks = [
         {
           request: { query },
@@ -6099,8 +6950,8 @@ describe('useQuery Hook', () => {
       ];
 
       const Component = ({ query }: any) => {
-        const [counter, setCounter] = useState(0)
-        const result = useQuery(query)
+        const [counter, setCounter] = useState(0);
+        const result = useQuery(query);
 
         useEffect(() => {
           /**
@@ -6110,17 +6961,19 @@ describe('useQuery Hook', () => {
           if (counter > 10) {
             console.error(`Too many results (${counter})`);
           } else {
-            setCounter(c => c + 1);
+            setCounter((c) => c + 1);
           }
-        }, [
-          result,
-          result.data,
-        ]);
+        }, [result, result.data]);
 
         if (result.loading) return null;
 
-        return <div>{result.data.hello}{counter}</div>;
-      }
+        return (
+          <div>
+            {result.data.hello}
+            {counter}
+          </div>
+        );
+      };
 
       render(
         <MockedProvider mocks={mocks}>
@@ -6129,18 +6982,22 @@ describe('useQuery Hook', () => {
       );
 
       await waitFor(() => {
-        expect(screen.getByText('world2')).toBeTruthy();
+        expect(screen.getByText("world2")).toBeTruthy();
       });
     });
   });
 
   // https://github.com/apollographql/apollo-client/issues/10222
-  describe('regression test issue #10222', () => {
-    it('maintains initial fetch policy when component unmounts and remounts', async () => {
+  describe("regression test issue #10222", () => {
+    it("maintains initial fetch policy when component unmounts and remounts", async () => {
       let helloCount = 1;
-      const query = gql`{ hello }`;
+      const query = gql`
+        {
+          hello
+        }
+      `;
       const link = new ApolloLink(() => {
-        return new Observable(observer => {
+        return new Observable((observer) => {
           const timer = setTimeout(() => {
             observer.next({ data: { hello: `hello ${helloCount++}` } });
             observer.complete();
@@ -6148,29 +7005,30 @@ describe('useQuery Hook', () => {
 
           return () => {
             clearTimeout(timer);
-          }
-        })
-      })
+          };
+        });
+      });
 
       const cache = new InMemoryCache();
 
       const client = new ApolloClient({
         link,
-        cache
+        cache,
       });
 
-      let setShow: Function
+      let setShow: Function;
       const Toggler = ({ children }: { children: ReactNode }) => {
         const [show, _setShow] = useState(true);
         setShow = _setShow;
 
         return show ? <>{children}</> : null;
-      }
+      };
 
       const { result } = renderHook(
-        () => useQuery(query, {
-            fetchPolicy: 'network-only',
-            nextFetchPolicy: 'cache-first'
+        () =>
+          useQuery(query, {
+            fetchPolicy: "network-only",
+            nextFetchPolicy: "cache-first",
           }),
         {
           wrapper: ({ children }) => (
@@ -6178,7 +7036,7 @@ describe('useQuery Hook', () => {
               <Toggler>{children}</Toggler>
             </ApolloProvider>
           ),
-        },
+        }
       );
 
       expect(result.current.loading).toBe(true);
@@ -6188,8 +7046,8 @@ describe('useQuery Hook', () => {
         expect(result.current.loading).toBe(false);
       });
 
-      expect(result.current.data).toEqual({ hello: 'hello 1' });
-      expect(cache.readQuery({ query })).toEqual({ hello: 'hello 1' })
+      expect(result.current.data).toEqual({ hello: "hello 1" });
+      expect(cache.readQuery({ query })).toEqual({ hello: "hello 1" });
 
       act(() => {
         setShow(false);
@@ -6204,16 +7062,15 @@ describe('useQuery Hook', () => {
 
       await waitFor(() => {
         expect(result.current.loading).toBe(false);
-      })
+      });
 
-      expect(result.current.data).toEqual({ hello: 'hello 2' });
-      expect(cache.readQuery({ query })).toEqual({ hello: 'hello 2' })
+      expect(result.current.data).toEqual({ hello: "hello 2" });
+      expect(cache.readQuery({ query })).toEqual({ hello: "hello 2" });
     });
   });
 
-
-  describe('defer', () => {
-    it('should handle deferred queries', async () => {
+  describe("defer", () => {
+    it("should handle deferred queries", async () => {
       const query = gql`
         {
           greeting {
@@ -6234,16 +7091,11 @@ describe('useQuery Hook', () => {
         cache: new InMemoryCache(),
       });
 
-      const { result } = renderHook(
-        () => useQuery(query),
-        {
-          wrapper: ({ children }) => (
-            <ApolloProvider client={client}>
-              {children}
-            </ApolloProvider>
-          ),
-        },
-      );
+      const { result } = renderHook(() => useQuery(query), {
+        wrapper: ({ children }) => (
+          <ApolloProvider client={client}>{children}</ApolloProvider>
+        ),
+      });
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
@@ -6252,22 +7104,25 @@ describe('useQuery Hook', () => {
           result: {
             data: {
               greeting: {
-                message: 'Hello world',
-                __typename: 'Greeting',
+                message: "Hello world",
+                __typename: "Greeting",
               },
             },
-            hasNext: true
+            hasNext: true,
           },
         });
       });
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current.data).toEqual({
         greeting: {
-          message: 'Hello world',
-          __typename: 'Greeting',
+          message: "Hello world",
+          __typename: "Greeting",
         },
       });
       expect(result.current).not.toContain({ hasNext: true });
@@ -6275,39 +7130,47 @@ describe('useQuery Hook', () => {
       setTimeout(() => {
         link.simulateResult({
           result: {
-            incremental: [{
-              data: {
-                recipient: {
-                  name: 'Alice',
-                  __typename: 'Person',
+            incremental: [
+              {
+                data: {
+                  recipient: {
+                    name: "Alice",
+                    __typename: "Person",
+                  },
+                  __typename: "Greeting",
                 },
-                __typename: 'Greeting',
+                path: ["greeting"],
               },
-              path: ['greeting'],
-            }],
-            hasNext: false
+            ],
+            hasNext: false,
           },
         });
       });
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current.data).toEqual({
-          greeting: {
-            message: 'Hello world',
-            __typename: 'Greeting',
-            recipient: {
-              name: 'Alice',
-              __typename: 'Person',
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current.data).toEqual({
+            greeting: {
+              message: "Hello world",
+              __typename: "Greeting",
+              recipient: {
+                name: "Alice",
+                __typename: "Person",
+              },
             },
-          },
-        });
-      }, { interval: 1 });
+          });
+        },
+        { interval: 1 }
+      );
     });
 
-    it('should handle deferred queries in lists', async () => {
+    it("should handle deferred queries in lists", async () => {
       const query = gql`
         {
           greetings {
@@ -6328,16 +7191,11 @@ describe('useQuery Hook', () => {
         cache: new InMemoryCache(),
       });
 
-      const { result } = renderHook(
-        () => useQuery(query),
-        {
-          wrapper: ({ children }) => (
-            <ApolloProvider client={client}>
-              {children}
-            </ApolloProvider>
-          ),
-        },
-      );
+      const { result } = renderHook(() => useQuery(query), {
+        wrapper: ({ children }) => (
+          <ApolloProvider client={client}>{children}</ApolloProvider>
+        ),
+      });
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
@@ -6346,106 +7204,125 @@ describe('useQuery Hook', () => {
           result: {
             data: {
               greetings: [
-                { message: 'Hello world', __typename: 'Greeting' },
-                { message: 'Hello again', __typename: 'Greeting' },
+                { message: "Hello world", __typename: "Greeting" },
+                { message: "Hello again", __typename: "Greeting" },
               ],
             },
-            hasNext: true
+            hasNext: true,
           },
         });
       });
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
       expect(result.current.data).toEqual({
         greetings: [
-          { message: 'Hello world', __typename: 'Greeting' },
-          { message: 'Hello again', __typename: 'Greeting' },
+          { message: "Hello world", __typename: "Greeting" },
+          { message: "Hello again", __typename: "Greeting" },
         ],
       });
 
       setTimeout(() => {
         link.simulateResult({
           result: {
-            incremental: [{
-              data: {
-                recipient: {
-                  name: 'Alice',
-                  __typename: 'Person',
+            incremental: [
+              {
+                data: {
+                  recipient: {
+                    name: "Alice",
+                    __typename: "Person",
+                  },
+                  __typename: "Greeting",
                 },
-                __typename: 'Greeting',
+                path: ["greetings", 0],
               },
-              path: ['greetings', 0],
-            }],
+            ],
             hasNext: true,
           },
         });
       });
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current.data).toEqual({
-          greetings: [
-            {
-              message: 'Hello world',
-              __typename: 'Greeting',
-              recipient: { name: 'Alice', __typename: 'Person' },
-            },
-            { message: 'Hello again', __typename: 'Greeting' },
-          ],
-        });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current.data).toEqual({
+            greetings: [
+              {
+                message: "Hello world",
+                __typename: "Greeting",
+                recipient: { name: "Alice", __typename: "Person" },
+              },
+              { message: "Hello again", __typename: "Greeting" },
+            ],
+          });
+        },
+        { interval: 1 }
+      );
 
       setTimeout(() => {
         link.simulateResult({
           result: {
-            incremental: [{
-              data: {
-                recipient: {
-                  name: 'Bob',
-                  __typename: 'Person',
+            incremental: [
+              {
+                data: {
+                  recipient: {
+                    name: "Bob",
+                    __typename: "Person",
+                  },
+                  __typename: "Greeting",
                 },
-                __typename: 'Greeting',
+                path: ["greetings", 1],
               },
-              path: ['greetings', 1],
-            }],
-            hasNext: false
+            ],
+            hasNext: false,
           },
         });
       });
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current.data).toEqual({
-          greetings: [
-            {
-              message: 'Hello world',
-              __typename: 'Greeting',
-              recipient: { name: 'Alice', __typename: 'Person' },
-            },
-            {
-              message: 'Hello again',
-              __typename: 'Greeting',
-              recipient: { name: 'Bob', __typename: 'Person' },
-            },
-          ],
-        });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current.data).toEqual({
+            greetings: [
+              {
+                message: "Hello world",
+                __typename: "Greeting",
+                recipient: { name: "Alice", __typename: "Person" },
+              },
+              {
+                message: "Hello again",
+                __typename: "Greeting",
+                recipient: { name: "Bob", __typename: "Person" },
+              },
+            ],
+          });
+        },
+        { interval: 1 }
+      );
     });
 
-    it('should handle deferred queries in lists, merging arrays', async () => {
+    it("should handle deferred queries in lists, merging arrays", async () => {
       const query = gql`
         query DeferVariation {
           allProducts {
             delivery {
               ...MyFragment @defer
             }
-            sku,
+            sku
             id
           }
         }
@@ -6462,16 +7339,11 @@ describe('useQuery Hook', () => {
         cache: new InMemoryCache(),
       });
 
-      const { result } = renderHook(
-        () => useQuery(query),
-        {
-          wrapper: ({ children }) => (
-            <ApolloProvider client={client}>
-              {children}
-            </ApolloProvider>
-          ),
-        },
-      );
+      const { result } = renderHook(() => useQuery(query), {
+        wrapper: ({ children }) => (
+          <ApolloProvider client={client}>{children}</ApolloProvider>
+        ),
+      });
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
@@ -6483,51 +7355,57 @@ describe('useQuery Hook', () => {
                 {
                   __typename: "Product",
                   delivery: {
-                    __typename: "DeliveryEstimates"
+                    __typename: "DeliveryEstimates",
                   },
                   id: "apollo-federation",
-                  sku: "federation"
+                  sku: "federation",
                 },
                 {
                   __typename: "Product",
                   delivery: {
-                    __typename: "DeliveryEstimates"
+                    __typename: "DeliveryEstimates",
                   },
                   id: "apollo-studio",
-                  sku: "studio"
-                }
-              ]
+                  sku: "studio",
+                },
+              ],
             },
-            hasNext: true
+            hasNext: true,
           },
         });
       });
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current.data).toEqual({
-          allProducts: [
-            {
-              __typename: "Product",
-              delivery: {
-                __typename: "DeliveryEstimates"
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current.data).toEqual({
+            allProducts: [
+              {
+                __typename: "Product",
+                delivery: {
+                  __typename: "DeliveryEstimates",
+                },
+                id: "apollo-federation",
+                sku: "federation",
               },
-              id: "apollo-federation",
-              sku: "federation"
-            },
-            {
-              __typename: "Product",
-              delivery: {
-                __typename: "DeliveryEstimates"
+              {
+                __typename: "Product",
+                delivery: {
+                  __typename: "DeliveryEstimates",
+                },
+                id: "apollo-studio",
+                sku: "studio",
               },
-              id: "apollo-studio",
-              sku: "studio"
-            }
-          ]
-        });
-      }, { interval: 1 });
+            ],
+          });
+        },
+        { interval: 1 }
+      );
 
       setTimeout(() => {
         link.simulateResult({
@@ -6540,11 +7418,7 @@ describe('useQuery Hook', () => {
                   estimatedDelivery: "6/25/2021",
                   fastestDelivery: "6/24/2021",
                 },
-                path: [
-                  "allProducts",
-                  0,
-                  "delivery"
-                ]
+                path: ["allProducts", 0, "delivery"],
               },
               {
                 data: {
@@ -6552,49 +7426,51 @@ describe('useQuery Hook', () => {
                   estimatedDelivery: "6/25/2021",
                   fastestDelivery: "6/24/2021",
                 },
-                path: [
-                  "allProducts",
-                  1,
-                  "delivery"
-                ]
+                path: ["allProducts", 1, "delivery"],
               },
-            ]
+            ],
           },
         });
       });
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current.data).toEqual({
-          allProducts: [
-            {
-              __typename: "Product",
-              delivery: {
-                __typename: "DeliveryEstimates",
-                estimatedDelivery: "6/25/2021",
-                fastestDelivery: "6/24/2021"
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current.data).toEqual({
+            allProducts: [
+              {
+                __typename: "Product",
+                delivery: {
+                  __typename: "DeliveryEstimates",
+                  estimatedDelivery: "6/25/2021",
+                  fastestDelivery: "6/24/2021",
+                },
+                id: "apollo-federation",
+                sku: "federation",
               },
-              id: "apollo-federation",
-              sku: "federation"
-            },
-            {
-              __typename: "Product",
-              delivery: {
-                __typename: "DeliveryEstimates",
-                estimatedDelivery: "6/25/2021",
-                fastestDelivery: "6/24/2021"
+              {
+                __typename: "Product",
+                delivery: {
+                  __typename: "DeliveryEstimates",
+                  estimatedDelivery: "6/25/2021",
+                  fastestDelivery: "6/24/2021",
+                },
+                id: "apollo-studio",
+                sku: "studio",
               },
-              id: "apollo-studio",
-              sku: "studio"
-            }
-          ]
-        });
-      }, { interval: 1 });
+            ],
+          });
+        },
+        { interval: 1 }
+      );
     });
 
-    it('should handle deferred queries with fetch policy no-cache', async () => {
+    it("should handle deferred queries with fetch policy no-cache", async () => {
       const query = gql`
         {
           greeting {
@@ -6616,14 +7492,12 @@ describe('useQuery Hook', () => {
       });
 
       const { result } = renderHook(
-        () => useQuery(query, {fetchPolicy: 'no-cache'}),
+        () => useQuery(query, { fetchPolicy: "no-cache" }),
         {
           wrapper: ({ children }) => (
-            <ApolloProvider client={client}>
-              {children}
-            </ApolloProvider>
+            <ApolloProvider client={client}>{children}</ApolloProvider>
           ),
-        },
+        }
       );
 
       expect(result.current.loading).toBe(true);
@@ -6633,63 +7507,77 @@ describe('useQuery Hook', () => {
           result: {
             data: {
               greeting: {
-                message: 'Hello world',
-                __typename: 'Greeting',
+                message: "Hello world",
+                __typename: "Greeting",
               },
             },
-            hasNext: true
+            hasNext: true,
           },
         });
       });
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current.data).toEqual({
-          greeting: {
-            message: 'Hello world',
-            __typename: 'Greeting',
-          },
-        });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current.data).toEqual({
+            greeting: {
+              message: "Hello world",
+              __typename: "Greeting",
+            },
+          });
+        },
+        { interval: 1 }
+      );
 
       setTimeout(() => {
         link.simulateResult({
           result: {
-            incremental: [{
-              data: {
-                recipient: {
-                  name: 'Alice',
-                  __typename: 'Person',
+            incremental: [
+              {
+                data: {
+                  recipient: {
+                    name: "Alice",
+                    __typename: "Person",
+                  },
+                  __typename: "Greeting",
                 },
-                __typename: 'Greeting',
+                path: ["greeting"],
               },
-              path: ['greeting'],
-            }],
-            hasNext: false
+            ],
+            hasNext: false,
           },
         });
       });
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current.data).toEqual({
-          greeting: {
-            message: 'Hello world',
-            __typename: 'Greeting',
-            recipient: {
-              name: 'Alice',
-              __typename: 'Person',
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current.data).toEqual({
+            greeting: {
+              message: "Hello world",
+              __typename: "Greeting",
+              recipient: {
+                name: "Alice",
+                __typename: "Person",
+              },
             },
-          },
-        });
-      }, { interval: 1 });
+          });
+        },
+        { interval: 1 }
+      );
     });
 
-    it('should handle deferred queries with errors returned on the incremental batched result', async () => {
+    it("should handle deferred queries with errors returned on the incremental batched result", async () => {
       const query = gql`
         query {
           hero {
@@ -6712,16 +7600,11 @@ describe('useQuery Hook', () => {
         cache: new InMemoryCache(),
       });
 
-      const { result } = renderHook(
-        () => useQuery(query),
-        {
-          wrapper: ({ children }) => (
-            <ApolloProvider client={client}>
-              {children}
-            </ApolloProvider>
-          ),
-        },
-      );
+      const { result } = renderHook(() => useQuery(query), {
+        wrapper: ({ children }) => (
+          <ApolloProvider client={client}>{children}</ApolloProvider>
+        ),
+      });
 
       expect(result.current.loading).toBe(true);
       expect(result.current.data).toBe(undefined);
@@ -6734,40 +7617,46 @@ describe('useQuery Hook', () => {
                 heroFriends: [
                   {
                     id: "1000",
-                    name: "Luke Skywalker"
+                    name: "Luke Skywalker",
                   },
                   {
                     id: "1003",
-                    name: "Leia Organa"
-                  }
-                ]
-              }
+                    name: "Leia Organa",
+                  },
+                ],
+              },
             },
-            hasNext: true
+            hasNext: true,
           },
         });
       });
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current.data).toEqual({
-          hero: {
-            heroFriends: [
-              {
-                id: '1000',
-                name: 'Luke Skywalker'
-              },
-              {
-                id: '1003',
-                name: 'Leia Organa'
-              },
-            ],
-            name: "R2-D2"
-          }
-        });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current.data).toEqual({
+            hero: {
+              heroFriends: [
+                {
+                  id: "1000",
+                  name: "Luke Skywalker",
+                },
+                {
+                  id: "1003",
+                  name: "Leia Organa",
+                },
+              ],
+              name: "R2-D2",
+            },
+          });
+        },
+        { interval: 1 }
+      );
 
       setTimeout(() => {
         link.simulateResult({
@@ -6779,51 +7668,65 @@ describe('useQuery Hook', () => {
                   new GraphQLError(
                     "homeWorld for character with ID 1000 could not be fetched.",
                     { path: ["hero", "heroFriends", 0, "homeWorld"] }
-                  )
+                  ),
                 ],
                 data: {
-                  "homeWorld": null,
-                }
+                  homeWorld: null,
+                },
               },
               {
                 path: ["hero", "heroFriends", 1],
                 data: {
-                  "homeWorld": "Alderaan",
-                }
+                  homeWorld: "Alderaan",
+                },
               },
             ],
-            "hasNext": false
-          }
+            hasNext: false,
+          },
         });
       });
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current.error).toBeInstanceOf(ApolloError);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current.error!.message).toBe('homeWorld for character with ID 1000 could not be fetched.');
-      }, { interval: 1 });
-      await waitFor(() => {
-        // since default error policy is "none", we do *not* return partial results
-        expect(result.current.data).toEqual({
-          hero: {
-            heroFriends: [
-              {
-                id: '1000',
-                name: 'Luke Skywalker'
-              },
-              {
-                id: '1003',
-                name: 'Leia Organa'
-              },
-            ],
-            name: "R2-D2"
-          }
-        });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current.error).toBeInstanceOf(ApolloError);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current.error!.message).toBe(
+            "homeWorld for character with ID 1000 could not be fetched."
+          );
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          // since default error policy is "none", we do *not* return partial results
+          expect(result.current.data).toEqual({
+            hero: {
+              heroFriends: [
+                {
+                  id: "1000",
+                  name: "Luke Skywalker",
+                },
+                {
+                  id: "1003",
+                  name: "Leia Organa",
+                },
+              ],
+              name: "R2-D2",
+            },
+          });
+        },
+        { interval: 1 }
+      );
     });
 
     it('should handle deferred queries with errors returned on the incremental batched result and errorPolicy "all"', async () => {
@@ -6853,11 +7756,9 @@ describe('useQuery Hook', () => {
         () => useQuery(query, { errorPolicy: "all" }),
         {
           wrapper: ({ children }) => (
-            <ApolloProvider client={client}>
-              {children}
-            </ApolloProvider>
+            <ApolloProvider client={client}>{children}</ApolloProvider>
           ),
-        },
+        }
       );
 
       expect(result.current.loading).toBe(true);
@@ -6871,40 +7772,46 @@ describe('useQuery Hook', () => {
                 heroFriends: [
                   {
                     id: "1000",
-                    name: "Luke Skywalker"
+                    name: "Luke Skywalker",
                   },
                   {
                     id: "1003",
-                    name: "Leia Organa"
-                  }
-                ]
-              }
+                    name: "Leia Organa",
+                  },
+                ],
+              },
             },
-            hasNext: true
+            hasNext: true,
           },
         });
       });
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current.data).toEqual({
-          hero: {
-            heroFriends: [
-              {
-                id: '1000',
-                name: 'Luke Skywalker'
-              },
-              {
-                id: '1003',
-                name: 'Leia Organa'
-              },
-            ],
-            name: "R2-D2"
-          }
-        });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current.data).toEqual({
+            hero: {
+              heroFriends: [
+                {
+                  id: "1000",
+                  name: "Luke Skywalker",
+                },
+                {
+                  id: "1003",
+                  name: "Leia Organa",
+                },
+              ],
+              name: "R2-D2",
+            },
+          });
+        },
+        { interval: 1 }
+      );
 
       setTimeout(() => {
         link.simulateResult({
@@ -6916,73 +7823,93 @@ describe('useQuery Hook', () => {
                   new GraphQLError(
                     "homeWorld for character with ID 1000 could not be fetched.",
                     { path: ["hero", "heroFriends", 0, "homeWorld"] }
-                  )
+                  ),
                 ],
                 data: {
-                  "homeWorld": null,
+                  homeWorld: null,
                 },
                 extensions: {
-                  thing1: 'foo',
-                  thing2: 'bar',
+                  thing1: "foo",
+                  thing2: "bar",
                 },
               },
               {
                 path: ["hero", "heroFriends", 1],
                 data: {
-                  "homeWorld": "Alderaan",
+                  homeWorld: "Alderaan",
                 },
                 extensions: {
-                  thing1: 'foo',
-                  thing2: 'bar',
+                  thing1: "foo",
+                  thing2: "bar",
                 },
               },
             ],
-            "hasNext": false
-          }
+            hasNext: false,
+          },
         });
       });
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
-      await waitFor(() => {
-        // @ts-ignore
-        expect(result.current.label).toBe(undefined);
-      }, { interval: 1 });
-      await waitFor(() => {
-        // @ts-ignore
-        expect(result.current.extensions).toBe(undefined);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current.error).toBeInstanceOf(ApolloError);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current.error!.message).toBe('homeWorld for character with ID 1000 could not be fetched.');
-      }, { interval: 1 });
-      await waitFor(() => {
-        // since default error policy is "all", we *do* return partial results
-        expect(result.current.data).toEqual({
-          hero: {
-            heroFriends: [
-              {
-                // the only difference with the previous test
-                // is that homeWorld is populated since errorPolicy: all
-                // populates both partial data and error.graphQLErrors
-                homeWorld: null,
-                id: '1000',
-                name: 'Luke Skywalker'
-              },
-              {
-                // homeWorld is populated due to errorPolicy: all
-                homeWorld: "Alderaan",
-                id: '1003',
-                name: 'Leia Organa'
-              },
-            ],
-            name: "R2-D2"
-          }
-        });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          // @ts-ignore
+          expect(result.current.label).toBe(undefined);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          // @ts-ignore
+          expect(result.current.extensions).toBe(undefined);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current.error).toBeInstanceOf(ApolloError);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current.error!.message).toBe(
+            "homeWorld for character with ID 1000 could not be fetched."
+          );
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          // since default error policy is "all", we *do* return partial results
+          expect(result.current.data).toEqual({
+            hero: {
+              heroFriends: [
+                {
+                  // the only difference with the previous test
+                  // is that homeWorld is populated since errorPolicy: all
+                  // populates both partial data and error.graphQLErrors
+                  homeWorld: null,
+                  id: "1000",
+                  name: "Luke Skywalker",
+                },
+                {
+                  // homeWorld is populated due to errorPolicy: all
+                  homeWorld: "Alderaan",
+                  id: "1003",
+                  name: "Leia Organa",
+                },
+              ],
+              name: "R2-D2",
+            },
+          });
+        },
+        { interval: 1 }
+      );
     });
 
     it('returns eventually consistent data from deferred queries with data in the cache while using a "cache-and-network" fetch policy', async () => {
@@ -7007,20 +7934,18 @@ describe('useQuery Hook', () => {
         query,
         data: {
           greeting: {
-            __typename: 'Greeting',
-            message: 'Hello cached',
-            recipient: { __typename: 'Person', name: 'Cached Alice' },
+            __typename: "Greeting",
+            message: "Hello cached",
+            recipient: { __typename: "Person", name: "Cached Alice" },
           },
         },
       });
 
       const { result } = renderHook(
-        () => useQuery(query, { fetchPolicy: 'cache-and-network' }),
+        () => useQuery(query, { fetchPolicy: "cache-and-network" }),
         {
           wrapper: ({ children }) => (
-            <ApolloProvider client={client}>
-              {children}
-            </ApolloProvider>
+            <ApolloProvider client={client}>{children}</ApolloProvider>
           ),
         }
       );
@@ -7029,65 +7954,85 @@ describe('useQuery Hook', () => {
       expect(result.current.networkStatus).toBe(NetworkStatus.loading);
       expect(result.current.data).toEqual({
         greeting: {
-          message: 'Hello cached',
-          __typename: 'Greeting',
-          recipient: { __typename: 'Person', name: 'Cached Alice' },
+          message: "Hello cached",
+          __typename: "Greeting",
+          recipient: { __typename: "Person", name: "Cached Alice" },
         },
       });
 
       link.simulateResult({
         result: {
-          data: { greeting: { __typename: 'Greeting', message: 'Hello world' } },
+          data: {
+            greeting: { __typename: "Greeting", message: "Hello world" },
+          },
           hasNext: true,
         },
       });
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current.networkStatus).toBe(NetworkStatus.ready);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current.data).toEqual({
-          greeting: {
-            __typename: 'Greeting',
-            message: 'Hello world',
-            recipient: { __typename: 'Person', name: 'Cached Alice' },
-          },
-        });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current.networkStatus).toBe(NetworkStatus.ready);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current.data).toEqual({
+            greeting: {
+              __typename: "Greeting",
+              message: "Hello world",
+              recipient: { __typename: "Person", name: "Cached Alice" },
+            },
+          });
+        },
+        { interval: 1 }
+      );
 
       link.simulateResult({
         result: {
           incremental: [
             {
               data: {
-                recipient: { name: 'Alice', __typename: 'Person' },
-                __typename: 'Greeting',
+                recipient: { name: "Alice", __typename: "Person" },
+                __typename: "Greeting",
               },
-              path: ['greeting'],
+              path: ["greeting"],
             },
           ],
           hasNext: false,
         },
       });
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current.networkStatus).toBe(NetworkStatus.ready);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current.data).toEqual({
-          greeting: {
-            __typename: 'Greeting',
-            message: 'Hello world',
-            recipient: { __typename: 'Person', name: 'Alice' },
-          },
-        });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current.networkStatus).toBe(NetworkStatus.ready);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current.data).toEqual({
+            greeting: {
+              __typename: "Greeting",
+              message: "Hello world",
+              recipient: { __typename: "Person", name: "Alice" },
+            },
+          });
+        },
+        { interval: 1 }
+      );
     });
 
     it('returns eventually consistent data from deferred queries with partial data in the cache and using a "cache-first" fetch policy with `returnPartialData`', async () => {
@@ -7110,13 +8055,13 @@ describe('useQuery Hook', () => {
 
       // We know we are writing partial data to the cache so suppress the console
       // warning.
-      const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
+      const consoleSpy = jest.spyOn(console, "error").mockImplementation();
       cache.writeQuery({
         query,
         data: {
           greeting: {
-            __typename: 'Greeting',
-            recipient: { __typename: 'Person', name: 'Cached Alice' },
+            __typename: "Greeting",
+            recipient: { __typename: "Person", name: "Cached Alice" },
           },
         },
       });
@@ -7125,14 +8070,12 @@ describe('useQuery Hook', () => {
       const { result } = renderHook(
         () =>
           useQuery(query, {
-            fetchPolicy: 'cache-first',
-            returnPartialData: true
+            fetchPolicy: "cache-first",
+            returnPartialData: true,
           }),
         {
           wrapper: ({ children }) => (
-            <ApolloProvider client={client}>
-              {children}
-            </ApolloProvider>
+            <ApolloProvider client={client}>{children}</ApolloProvider>
           ),
         }
       );
@@ -7141,64 +8084,84 @@ describe('useQuery Hook', () => {
       expect(result.current.networkStatus).toBe(NetworkStatus.loading);
       expect(result.current.data).toEqual({
         greeting: {
-          __typename: 'Greeting',
-          recipient: { __typename: 'Person', name: 'Cached Alice' },
+          __typename: "Greeting",
+          recipient: { __typename: "Person", name: "Cached Alice" },
         },
       });
 
       link.simulateResult({
         result: {
-          data: { greeting: { message: 'Hello world', __typename: 'Greeting' } },
+          data: {
+            greeting: { message: "Hello world", __typename: "Greeting" },
+          },
           hasNext: true,
         },
       });
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current.networkStatus).toBe(NetworkStatus.ready);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current.data).toEqual({
-          greeting: {
-            __typename: 'Greeting',
-            message: 'Hello world',
-            recipient: { __typename: 'Person', name: 'Cached Alice' },
-          },
-        });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current.networkStatus).toBe(NetworkStatus.ready);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current.data).toEqual({
+            greeting: {
+              __typename: "Greeting",
+              message: "Hello world",
+              recipient: { __typename: "Person", name: "Cached Alice" },
+            },
+          });
+        },
+        { interval: 1 }
+      );
 
       link.simulateResult({
         result: {
           incremental: [
             {
               data: {
-                __typename: 'Greeting',
-                recipient: { name: 'Alice', __typename: 'Person' },
+                __typename: "Greeting",
+                recipient: { name: "Alice", __typename: "Person" },
               },
-              path: ['greeting'],
+              path: ["greeting"],
             },
           ],
           hasNext: false,
         },
       });
 
-      await waitFor(() => {
-        expect(result.current.loading).toBe(false);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current.networkStatus).toBe(NetworkStatus.ready);
-      }, { interval: 1 });
-      await waitFor(() => {
-        expect(result.current.data).toEqual({
-          greeting: {
-            __typename: 'Greeting',
-            message: 'Hello world',
-            recipient: { __typename: 'Person', name: 'Alice' },
-          },
-        });
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.loading).toBe(false);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current.networkStatus).toBe(NetworkStatus.ready);
+        },
+        { interval: 1 }
+      );
+      await waitFor(
+        () => {
+          expect(result.current.data).toEqual({
+            greeting: {
+              __typename: "Greeting",
+              message: "Hello world",
+              recipient: { __typename: "Person", name: "Alice" },
+            },
+          });
+        },
+        { interval: 1 }
+      );
     });
   });
 
@@ -7212,7 +8175,7 @@ describe('useQuery Hook', () => {
         fetchPolicy: WatchQueryFetchPolicy,
         initialQueryValue: TestQueryValue | undefined,
         shouldFetchOnFirstRender: boolean,
-        shouldFetchOnSecondRender: boolean
+        shouldFetchOnSecondRender: boolean,
       ]
     >([
       [`cache-first`, emptyData, true, false],
@@ -7229,7 +8192,12 @@ describe('useQuery Hook', () => {
       [`standby`, cacheData, false, false],
     ])(
       "fetchPolicy %s, cache: %p should fetch during `disableNetworkFetches`: %p and after `disableNetworkFetches` has been disabled: %p",
-      async (policy, initialQueryValue, shouldFetchOnFirstRender, shouldFetchOnSecondRender) => {
+      async (
+        policy,
+        initialQueryValue,
+        shouldFetchOnFirstRender,
+        shouldFetchOnSecondRender
+      ) => {
         const query: TypedDocumentNode<TestQueryValue> = gql`
           query CallMe {
             something
@@ -7237,10 +8205,10 @@ describe('useQuery Hook', () => {
         `;
 
         const link = new MockLink([
-          {request: {query}, result: {data: { something: "bar" }}},
-          {request: {query}, result: {data: { something: "baz" }}},
+          { request: { query }, result: { data: { something: "bar" } } },
+          { request: { query }, result: { data: { something: "baz" } } },
         ]);
-        const requestSpy = jest.spyOn(link, 'request');
+        const requestSpy = jest.spyOn(link, "request");
 
         const client = new ApolloClient({
           cache: new InMemoryCache(),
@@ -7252,13 +8220,18 @@ describe('useQuery Hook', () => {
         client.disableNetworkFetches = true;
 
         const { rerender } = renderHook(
-          () => useQuery(query, { fetchPolicy: policy, nextFetchPolicy: policy }),
+          () =>
+            useQuery(query, { fetchPolicy: policy, nextFetchPolicy: policy }),
           {
-            wrapper: ({ children }) => <ApolloProvider client={client}>{children}</ApolloProvider>,
+            wrapper: ({ children }) => (
+              <ApolloProvider client={client}>{children}</ApolloProvider>
+            ),
           }
         );
 
-        expect(requestSpy).toHaveBeenCalledTimes(shouldFetchOnFirstRender ? 1 : 0);
+        expect(requestSpy).toHaveBeenCalledTimes(
+          shouldFetchOnFirstRender ? 1 : 0
+        );
 
         // We need to wait a moment before the rerender for everything to settle down.
         // This part is unfortunately bound to be flaky - but in some cases there is
@@ -7269,24 +8242,26 @@ describe('useQuery Hook', () => {
         client.disableNetworkFetches = false;
 
         rerender();
-        expect(requestSpy).toHaveBeenCalledTimes(shouldFetchOnSecondRender ? 1 : 0);
+        expect(requestSpy).toHaveBeenCalledTimes(
+          shouldFetchOnSecondRender ? 1 : 0
+        );
       }
     );
   });
 });
 
 describe.skip("Type Tests", () => {
-  test('NoInfer prevents adding arbitrary additional variables', () => {
-    const typedNode = {} as TypedDocumentNode<{ foo: string}, { bar: number }>
+  test("NoInfer prevents adding arbitrary additional variables", () => {
+    const typedNode = {} as TypedDocumentNode<{ foo: string }, { bar: number }>;
     const { variables } = useQuery(typedNode, {
       variables: {
         bar: 4,
         // @ts-expect-error
-        nonExistingVariable: "string"
-      }
+        nonExistingVariable: "string",
+      },
     });
-    variables?.bar
+    variables?.bar;
     // @ts-expect-error
-    variables?.nonExistingVariable
-  })
-})
+    variables?.nonExistingVariable;
+  });
+});
diff --git a/src/react/hooks/__tests__/useReactiveVar.test.tsx b/src/react/hooks/__tests__/useReactiveVar.test.tsx
index 1de2f010ac5..08cbf3ad41e 100644
--- a/src/react/hooks/__tests__/useReactiveVar.test.tsx
+++ b/src/react/hooks/__tests__/useReactiveVar.test.tsx
@@ -5,7 +5,7 @@ import { itAsync } from "../../../testing";
 import { makeVar } from "../../../core";
 import { useReactiveVar } from "../useReactiveVar";
 
-const IS_REACT_18 = React.version.startsWith('18');
+const IS_REACT_18 = React.version.startsWith("18");
 
 describe("useReactiveVar Hook", () => {
   it("works with one component", async () => {
@@ -36,7 +36,7 @@ describe("useReactiveVar Hook", () => {
       return null;
     }
 
-    render(<Component/>);
+    render(<Component />);
 
     await waitFor(() => {
       expect(renderCount).toBe(3);
@@ -46,89 +46,92 @@ describe("useReactiveVar Hook", () => {
     });
   });
 
-  itAsync("works when two components share a variable", async (resolve, reject) => {
-    const counterVar = makeVar(0);
+  itAsync(
+    "works when two components share a variable",
+    async (resolve, reject) => {
+      const counterVar = makeVar(0);
 
-    let parentRenderCount = 0;
-    function Parent() {
-      const count = useReactiveVar(counterVar);
+      let parentRenderCount = 0;
+      function Parent() {
+        const count = useReactiveVar(counterVar);
 
-      switch (++parentRenderCount) {
-        case 1:
-          expect(count).toBe(0);
-          break;
-        case 2:
-          expect(count).toBe(1);
-          break;
-        case 3:
-          expect(count).toBe(11);
-          break;
-        default:
-          reject(`too many (${parentRenderCount}) parent renders`);
+        switch (++parentRenderCount) {
+          case 1:
+            expect(count).toBe(0);
+            break;
+          case 2:
+            expect(count).toBe(1);
+            break;
+          case 3:
+            expect(count).toBe(11);
+            break;
+          default:
+            reject(`too many (${parentRenderCount}) parent renders`);
+        }
+
+        return <Child />;
       }
 
-      return <Child/>;
-    }
+      let childRenderCount = 0;
+      function Child() {
+        const count = useReactiveVar(counterVar);
 
-    let childRenderCount = 0;
-    function Child() {
-      const count = useReactiveVar(counterVar);
+        switch (++childRenderCount) {
+          case 1:
+            expect(count).toBe(0);
+            break;
+          case 2:
+            expect(count).toBe(1);
+            break;
+          case 3:
+            expect(count).toBe(11);
+            break;
+          default:
+            reject(`too many (${childRenderCount}) child renders`);
+        }
 
-      switch (++childRenderCount) {
-        case 1:
-          expect(count).toBe(0);
-          break;
-        case 2:
-          expect(count).toBe(1);
-          break;
-        case 3:
-          expect(count).toBe(11);
-          break;
-        default:
-          reject(`too many (${childRenderCount}) child renders`);
+        return null;
       }
 
-      return null;
-    }
-
-    render(<Parent/>);
+      render(<Parent />);
 
-    await waitFor(() => {
-      expect(parentRenderCount).toBe(1);
-    });
+      await waitFor(() => {
+        expect(parentRenderCount).toBe(1);
+      });
 
-    await waitFor(() => {
-      expect(childRenderCount).toBe(1);
-    });
+      await waitFor(() => {
+        expect(childRenderCount).toBe(1);
+      });
 
-    expect(counterVar()).toBe(0);
-    act(() => {
-      counterVar(1);
-    });
+      expect(counterVar()).toBe(0);
+      act(() => {
+        counterVar(1);
+      });
 
-    await waitFor(() => {
-      expect(parentRenderCount).toBe(2);
-    });
-    await waitFor(() => {
-      expect(childRenderCount).toBe(2);
-    });
+      await waitFor(() => {
+        expect(parentRenderCount).toBe(2);
+      });
+      await waitFor(() => {
+        expect(childRenderCount).toBe(2);
+      });
 
-    expect(counterVar()).toBe(1);
-    act(() => {
-      counterVar(counterVar() + 10);
-    });
+      expect(counterVar()).toBe(1);
+      act(() => {
+        counterVar(counterVar() + 10);
+      });
 
-    await waitFor(() => {
-      expect(parentRenderCount).toBe(3);
-    });
-    await waitFor(() => {
-      expect(childRenderCount).toBe(3);
-    });
+      await waitFor(() => {
+        expect(parentRenderCount).toBe(3);
+      });
+      await waitFor(() => {
+        expect(childRenderCount).toBe(3);
+      });
 
-    expect(counterVar()).toBe(11);
+      expect(counterVar()).toBe(11);
 
-    resolve();
-  });
+      resolve();
+    }
+  );
 
   it("does not update if component has been unmounted", async () => {
     const counterVar = makeVar(0);
@@ -168,20 +171,20 @@ describe("useReactiveVar Hook", () => {
       return error.apply(this, args);
     };
 
-    const { unmount } = render(<Component/>);
+    const { unmount } = render(<Component />);
 
     await waitFor(() => {
       expect(attemptedUpdateAfterUnmount).toBe(true);
     });
     await waitFor(() => {
       expect(renderCount).toBe(3);
-    })
+    });
     await waitFor(() => {
       expect(counterVar()).toBe(6);
-    })
+    });
     await waitFor(() => {
       expect(consoleErrorArgs).toEqual([]);
-    })
+    });
     console.error = error;
   });
 
@@ -196,13 +199,13 @@ describe("useReactiveVar Hook", () => {
           counterVar(1);
         }, []);
 
-        return (<div>{count}</div>);
+        return <div>{count}</div>;
       }
 
       function ComponentTwo() {
         const count = useReactiveVar(counterVar);
 
-        return (<div>{count}</div>);
+        return <div>{count}</div>;
       }
 
       render(
@@ -223,7 +226,7 @@ describe("useReactiveVar Hook", () => {
       function ComponentOne() {
         const count = useReactiveVar(counterVar);
 
-        return (<div>{count}</div>);
+        return <div>{count}</div>;
       }
 
       function ComponentTwo() {
@@ -233,7 +236,7 @@ describe("useReactiveVar Hook", () => {
           counterVar(1);
         }, []);
 
-        return (<div>{count}</div>);
+        return <div>{count}</div>;
       }
 
       render(
@@ -264,9 +267,7 @@ describe("useReactiveVar Hook", () => {
           });
         }, []);
 
-        return (
-          <div />
-        );
+        return <div />;
       }
 
       render(
@@ -291,33 +292,36 @@ describe("useReactiveVar Hook", () => {
       resolve();
     });
 
-    itAsync("works with multiple synchronous calls", async (resolve, reject) => {
-      const counterVar = makeVar(0);
-      function Component() {
-        const count = useReactiveVar(counterVar);
-
-        return (<div>{count}</div>);
-      }
-
-      render(<Component />);
-      Promise.resolve().then(() => {
-        counterVar(1);
-        counterVar(2);
-        counterVar(3);
-        counterVar(4);
-        counterVar(5);
-        counterVar(6);
-        counterVar(7);
-        counterVar(8);
-        counterVar(9);
-        counterVar(10);
-      });
+    itAsync(
+      "works with multiple synchronous calls",
+      async (resolve, reject) => {
+        const counterVar = makeVar(0);
+        function Component() {
+          const count = useReactiveVar(counterVar);
 
-      await waitFor(() => {
-        expect(screen.getAllByText("10")).toHaveLength(1);
-      });
+          return <div>{count}</div>;
+        }
 
-      resolve();
-    });
+        render(<Component />);
+        Promise.resolve().then(() => {
+          counterVar(1);
+          counterVar(2);
+          counterVar(3);
+          counterVar(4);
+          counterVar(5);
+          counterVar(6);
+          counterVar(7);
+          counterVar(8);
+          counterVar(9);
+          counterVar(10);
+        });
+
+        await waitFor(() => {
+          expect(screen.getAllByText("10")).toHaveLength(1);
+        });
+
+        resolve();
+      }
+    );
   });
 });
diff --git a/src/react/hooks/__tests__/useSubscription.test.tsx b/src/react/hooks/__tests__/useSubscription.test.tsx
index 31ef93cb4eb..2ef09995500 100644
--- a/src/react/hooks/__tests__/useSubscription.test.tsx
+++ b/src/react/hooks/__tests__/useSubscription.test.tsx
@@ -1,22 +1,22 @@
-import React from 'react';
-import { renderHook, waitFor } from '@testing-library/react';
-import gql from 'graphql-tag';
+import React from "react";
+import { renderHook, waitFor } from "@testing-library/react";
+import gql from "graphql-tag";
 
 import {
   ApolloClient,
   ApolloError,
   ApolloLink,
   concat,
-  TypedDocumentNode
-} from '../../../core';
-import { PROTOCOL_ERRORS_SYMBOL } from '../../../errors';
-import { InMemoryCache as Cache } from '../../../cache';
-import { ApolloProvider } from '../../context';
-import { MockSubscriptionLink } from '../../../testing';
-import { useSubscription } from '../useSubscription';
-
-describe('useSubscription Hook', () => {
-  it('should handle a simple subscription properly', async () => {
+  TypedDocumentNode,
+} from "../../../core";
+import { PROTOCOL_ERRORS_SYMBOL } from "../../../errors";
+import { InMemoryCache as Cache } from "../../../cache";
+import { ApolloProvider } from "../../context";
+import { MockSubscriptionLink } from "../../../testing";
+import { useSubscription } from "../useSubscription";
+
+describe("useSubscription Hook", () => {
+  it("should handle a simple subscription properly", async () => {
     const subscription = gql`
       subscription {
         car {
@@ -25,54 +25,60 @@ describe('useSubscription Hook', () => {
       }
     `;
 
-    const results = ['Audi', 'BMW', 'Mercedes', 'Hyundai'].map(make => ({
-      result: { data: { car: { make } } }
+    const results = ["Audi", "BMW", "Mercedes", "Hyundai"].map((make) => ({
+      result: { data: { car: { make } } },
     }));
 
     const link = new MockSubscriptionLink();
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
-
-    const { result } = renderHook(
-      () => useSubscription(subscription),
-      {
-        wrapper: ({ children }) => (
-          <ApolloProvider client={client}>
-            {children}
-          </ApolloProvider>
-        ),
-      },
-    );
+    const { result } = renderHook(() => useSubscription(subscription), {
+      wrapper: ({ children }) => (
+        <ApolloProvider client={client}>{children}</ApolloProvider>
+      ),
+    });
 
     expect(result.current.loading).toBe(true);
     expect(result.current.error).toBe(undefined);
     expect(result.current.data).toBe(undefined);
     setTimeout(() => link.simulateResult(results[0]));
-    await waitFor(() => {
-      expect(result.current.data).toEqual(results[0].result.data);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current.data).toEqual(results[0].result.data);
+      },
+      { interval: 1 }
+    );
     expect(result.current.loading).toBe(false);
     setTimeout(() => link.simulateResult(results[1]));
-    await waitFor(() => {
-      expect(result.current.data).toEqual(results[1].result.data);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current.data).toEqual(results[1].result.data);
+      },
+      { interval: 1 }
+    );
     expect(result.current.loading).toBe(false);
     setTimeout(() => link.simulateResult(results[2]));
-    await waitFor(() => {
-      expect(result.current.data).toEqual(results[2].result.data);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current.data).toEqual(results[2].result.data);
+      },
+      { interval: 1 }
+    );
     expect(result.current.loading).toBe(false);
     setTimeout(() => link.simulateResult(results[3]));
-    await waitFor(() => {
-      expect(result.current.data).toEqual(results[3].result.data);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current.data).toEqual(results[3].result.data);
+      },
+      { interval: 1 }
+    );
     expect(result.current.loading).toBe(false);
   });
 
-  it('should call onError after error results', async () => {
+  it("should call onError after error results", async () => {
     const subscription = gql`
       subscription {
         car {
@@ -81,8 +87,8 @@ describe('useSubscription Hook', () => {
       }
     `;
 
-    const results = ['Audi', 'BMW', 'Mercedes', 'Hyundai'].map(make => ({
-      result: { data: { car: { make } } }
+    const results = ["Audi", "BMW", "Mercedes", "Hyundai"].map((make) => ({
+      result: { data: { car: { make } } },
     }));
 
     const errorResult = {
@@ -93,38 +99,41 @@ describe('useSubscription Hook', () => {
     const link = new MockSubscriptionLink();
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
-
     const onError = jest.fn();
     const { result } = renderHook(
       () => useSubscription(subscription, { onError }),
       {
         wrapper: ({ children }) => (
-          <ApolloProvider client={client}>
-            {children}
-          </ApolloProvider>
+          <ApolloProvider client={client}>{children}</ApolloProvider>
         ),
-      },
+      }
     );
 
     expect(result.current.loading).toBe(true);
     expect(result.current.error).toBe(undefined);
     expect(result.current.data).toBe(undefined);
     setTimeout(() => link.simulateResult(results[0]));
-    await waitFor(() => {
-      expect(result.current.loading).toBe(false);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current.loading).toBe(false);
+      },
+      { interval: 1 }
+    );
     expect(result.current.loading).toBe(false);
     expect(result.current.data).toEqual(results[0].result.data);
     setTimeout(() => link.simulateResult(errorResult));
-    await waitFor(() => {
-      expect(onError).toHaveBeenCalledTimes(1);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(onError).toHaveBeenCalledTimes(1);
+      },
+      { interval: 1 }
+    );
   });
 
-  it('should call onComplete after subscription is complete', async () => {
+  it("should call onComplete after subscription is complete", async () => {
     const subscription = gql`
       subscription {
         car {
@@ -133,37 +142,37 @@ describe('useSubscription Hook', () => {
       }
     `;
 
-    const results = [{
-      result: { data: { car: { make: 'Audi' } } }
-    }];
+    const results = [
+      {
+        result: { data: { car: { make: "Audi" } } },
+      },
+    ];
 
     const link = new MockSubscriptionLink();
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     const onComplete = jest.fn();
-    renderHook(
-      () => useSubscription(subscription, { onComplete }),
-      {
-        wrapper: ({ children }) => (
-          <ApolloProvider client={client}>
-            {children}
-          </ApolloProvider>
-        ),
-      },
-    );
+    renderHook(() => useSubscription(subscription, { onComplete }), {
+      wrapper: ({ children }) => (
+        <ApolloProvider client={client}>{children}</ApolloProvider>
+      ),
+    });
 
     link.simulateResult(results[0]);
 
     setTimeout(() => link.simulateComplete());
-    await waitFor(() => {
-      expect(onComplete).toHaveBeenCalledTimes(1);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(onComplete).toHaveBeenCalledTimes(1);
+      },
+      { interval: 1 }
+    );
   });
 
-  it('should cleanup after the subscription component has been unmounted', async () => {
+  it("should cleanup after the subscription component has been unmounted", async () => {
     const subscription = gql`
       subscription {
         car {
@@ -174,37 +183,39 @@ describe('useSubscription Hook', () => {
 
     const results = [
       {
-        result: { data: { car: { make: 'Pagani' } } }
-      }
+        result: { data: { car: { make: "Pagani" } } },
+      },
     ];
 
     const link = new MockSubscriptionLink();
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     const onData = jest.fn();
     const { result, unmount } = renderHook(
-      () => useSubscription(subscription, {
-        onData,
-      }),
+      () =>
+        useSubscription(subscription, {
+          onData,
+        }),
       {
         wrapper: ({ children }) => (
-          <ApolloProvider client={client}>
-            {children}
-          </ApolloProvider>
+          <ApolloProvider client={client}>{children}</ApolloProvider>
         ),
-      },
+      }
     );
 
     expect(result.current.loading).toBe(true);
     expect(result.current.error).toBe(undefined);
     expect(result.current.data).toBe(undefined);
     setTimeout(() => link.simulateResult(results[0]));
-    await waitFor(() => {
-      expect(result.current.loading).toBe(false);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current.loading).toBe(false);
+      },
+      { interval: 1 }
+    );
     expect(result.current.error).toBe(undefined);
     expect(result.current.data).toBe(results[0].result.data);
     setTimeout(() => {
@@ -221,7 +232,7 @@ describe('useSubscription Hook', () => {
     expect(onData).toHaveBeenCalledTimes(1);
   });
 
-  it('should never execute a subscription with the skip option', async () => {
+  it("should never execute a subscription with the skip option", async () => {
     const subscription = gql`
       subscription {
         car {
@@ -235,46 +246,50 @@ describe('useSubscription Hook', () => {
     link.onSetup(onSetup);
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     const onData = jest.fn();
 
     const { result, unmount, rerender } = renderHook(
-      ({ variables }) => useSubscription(subscription, {
-        variables,
-        skip: true,
-        onData,
-      }),
+      ({ variables }) =>
+        useSubscription(subscription, {
+          variables,
+          skip: true,
+          onData,
+        }),
       {
         initialProps: {
           variables: {
-            foo: 'bar'
-          }
+            foo: "bar",
+          },
         },
         wrapper: ({ children }) => (
-          <ApolloProvider client={client}>
-            {children}
-          </ApolloProvider>
-        )
-      },
+          <ApolloProvider client={client}>{children}</ApolloProvider>
+        ),
+      }
     );
 
     expect(result.current.loading).toBe(false);
     expect(result.current.error).toBe(undefined);
     expect(result.current.data).toBe(undefined);
 
-    rerender({ variables: { foo: 'bar2' }});
-    await expect(waitFor(() => {
-      expect(result.current.data).not.toBe(undefined);
-    }, { interval: 1, timeout: 20 })).rejects.toThrow();
+    rerender({ variables: { foo: "bar2" } });
+    await expect(
+      waitFor(
+        () => {
+          expect(result.current.data).not.toBe(undefined);
+        },
+        { interval: 1, timeout: 20 }
+      )
+    ).rejects.toThrow();
 
     expect(onSetup).toHaveBeenCalledTimes(0);
     expect(onData).toHaveBeenCalledTimes(0);
     unmount();
   });
 
-  it('should create a subscription after skip has changed from true to a falsy value', async () => {
+  it("should create a subscription after skip has changed from true to a falsy value", async () => {
     const subscription = gql`
       subscription {
         car {
@@ -285,28 +300,26 @@ describe('useSubscription Hook', () => {
 
     const results = [
       {
-        result: { data: { car: { make: 'Pagani' } } }
+        result: { data: { car: { make: "Pagani" } } },
       },
       {
-        result: { data: { car: { make: 'Scoop' } } }
-      }
+        result: { data: { car: { make: "Scoop" } } },
+      },
     ];
 
     const link = new MockSubscriptionLink();
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
     const { result, rerender } = renderHook(
       ({ skip }) => useSubscription(subscription, { skip }),
       {
         wrapper: ({ children }) => (
-          <ApolloProvider client={client}>
-            {children}
-          </ApolloProvider>
+          <ApolloProvider client={client}>{children}</ApolloProvider>
         ),
         initialProps: { skip: true },
-      },
+      }
     );
 
     expect(result.current.loading).toBe(false);
@@ -322,9 +335,12 @@ describe('useSubscription Hook', () => {
       link.simulateResult(results[0]);
     });
 
-    await waitFor(() => {
-      expect(result.current.loading).toBe(false);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current.loading).toBe(false);
+      },
+      { interval: 1 }
+    );
     expect(result.current.data).toEqual(results[0].result.data);
     expect(result.current.error).toBe(undefined);
 
@@ -340,9 +356,14 @@ describe('useSubscription Hook', () => {
     expect(result.current.data).toBe(undefined);
     expect(result.current.error).toBe(undefined);
 
-    await expect(waitFor(() => {
-      expect(result.current.data).not.toBe(undefined);
-    }, { interval: 1, timeout: 20 })).rejects.toThrow();
+    await expect(
+      waitFor(
+        () => {
+          expect(result.current.data).not.toBe(undefined);
+        },
+        { interval: 1, timeout: 20 }
+      )
+    ).rejects.toThrow();
 
     // ensure state persists across rerenders
     rerender({ skip: false });
@@ -354,14 +375,17 @@ describe('useSubscription Hook', () => {
       link.simulateResult(results[1]);
     });
 
-    await waitFor(() => {
-      expect(result.current.loading).toBe(false);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current.loading).toBe(false);
+      },
+      { interval: 1 }
+    );
     expect(result.current.data).toEqual(results[1].result.data);
     expect(result.current.error).toBe(undefined);
   });
 
-  it('should share context set in options', async () => {
+  it("should share context set in options", async () => {
     const subscription = gql`
       subscription {
         car {
@@ -370,32 +394,31 @@ describe('useSubscription Hook', () => {
       }
     `;
 
-    const results = ['Audi', 'BMW'].map(make => ({
-      result: { data: { car: { make } } }
+    const results = ["Audi", "BMW"].map((make) => ({
+      result: { data: { car: { make } } },
     }));
 
     let context: string;
     const link = new MockSubscriptionLink();
     const contextLink = new ApolloLink((operation, forward) => {
-      context = operation.getContext()?.make
+      context = operation.getContext()?.make;
       return forward(operation);
     });
     const client = new ApolloClient({
       link: concat(contextLink, link),
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     const { result } = renderHook(
-      () => useSubscription(subscription, {
-        context: { make: 'Audi' },
-      }),
+      () =>
+        useSubscription(subscription, {
+          context: { make: "Audi" },
+        }),
       {
         wrapper: ({ children }) => (
-          <ApolloProvider client={client}>
-            {children}
-          </ApolloProvider>
+          <ApolloProvider client={client}>{children}</ApolloProvider>
         ),
-      },
+      }
     );
 
     expect(result.current.loading).toBe(true);
@@ -405,9 +428,12 @@ describe('useSubscription Hook', () => {
       link.simulateResult(results[0]);
     }, 100);
 
-    await waitFor(() => {
-      expect(result.current.data).toEqual(results[0].result.data);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current.data).toEqual(results[0].result.data);
+      },
+      { interval: 1 }
+    );
     expect(result.current.loading).toBe(false);
     expect(result.current.error).toBe(undefined);
 
@@ -415,16 +441,19 @@ describe('useSubscription Hook', () => {
       link.simulateResult(results[1]);
     });
 
-    await waitFor(() => {
-      expect(result.current.data).toEqual(results[1].result.data);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current.data).toEqual(results[1].result.data);
+      },
+      { interval: 1 }
+    );
     expect(result.current.loading).toBe(false);
     expect(result.current.error).toBe(undefined);
 
-    expect(context!).toBe('Audi');
+    expect(context!).toBe("Audi");
   });
 
-  it('should handle multiple subscriptions properly', async () => {
+  it("should handle multiple subscriptions properly", async () => {
     const subscription = gql`
       subscription {
         car {
@@ -433,14 +462,14 @@ describe('useSubscription Hook', () => {
       }
     `;
 
-    const results = ['Audi', 'BMW'].map(make => ({
-      result: { data: { car: { make } } }
+    const results = ["Audi", "BMW"].map((make) => ({
+      result: { data: { car: { make } } },
     }));
 
     const link = new MockSubscriptionLink();
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     const { result } = renderHook(
@@ -450,11 +479,9 @@ describe('useSubscription Hook', () => {
       }),
       {
         wrapper: ({ children }) => (
-          <ApolloProvider client={client}>
-            {children}
-          </ApolloProvider>
+          <ApolloProvider client={client}>{children}</ApolloProvider>
         ),
-      },
+      }
     );
 
     expect(result.current.sub1.loading).toBe(true);
@@ -468,9 +495,12 @@ describe('useSubscription Hook', () => {
       link.simulateResult(results[0]);
     });
 
-    await waitFor(() => {
-      expect(result.current.sub1.data).toEqual(results[0].result.data);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current.sub1.data).toEqual(results[0].result.data);
+      },
+      { interval: 1 }
+    );
     expect(result.current.sub1.loading).toBe(false);
     expect(result.current.sub1.error).toBe(undefined);
     expect(result.current.sub2.loading).toBe(false);
@@ -481,9 +511,12 @@ describe('useSubscription Hook', () => {
       link.simulateResult(results[1]);
     });
 
-    await waitFor(() => {
-      expect(result.current.sub1.data).toEqual(results[1].result.data);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current.sub1.data).toEqual(results[1].result.data);
+      },
+      { interval: 1 }
+    );
     expect(result.current.sub1.loading).toBe(false);
     expect(result.current.sub1.error).toBe(undefined);
     expect(result.current.sub2.loading).toBe(false);
@@ -491,8 +524,8 @@ describe('useSubscription Hook', () => {
     expect(result.current.sub2.data).toEqual(results[1].result.data);
   });
 
-  it('should handle immediate completions gracefully', async () => {
-    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+  it("should handle immediate completions gracefully", async () => {
+    const errorSpy = jest.spyOn(console, "error").mockImplementation(() => {});
 
     const subscription = gql`
       subscription {
@@ -505,19 +538,14 @@ describe('useSubscription Hook', () => {
     const link = new MockSubscriptionLink();
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
-    const { result } = renderHook(
-      () => useSubscription(subscription),
-      {
-        wrapper: ({ children }) => (
-          <ApolloProvider client={client}>
-            {children}
-          </ApolloProvider>
-        ),
-      },
-    );
+    const { result } = renderHook(() => useSubscription(subscription), {
+      wrapper: ({ children }) => (
+        <ApolloProvider client={client}>{children}</ApolloProvider>
+      ),
+    });
 
     setTimeout(() => {
       // Simulating the behavior of HttpLink, which calls next and complete in sequence.
@@ -527,21 +555,26 @@ describe('useSubscription Hook', () => {
     expect(result.current.loading).toBe(true);
     expect(result.current.error).toBe(undefined);
     expect(result.current.data).toBe(undefined);
-    await waitFor(() => {
-      expect(result.current.loading).toBe(false);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current.loading).toBe(false);
+      },
+      { interval: 1 }
+    );
     expect(result.current.error).toBe(undefined);
     expect(result.current.data).toBe(null);
 
     expect(errorSpy).toHaveBeenCalledTimes(1);
-    expect(errorSpy.mock.calls[0]).toStrictEqual(
-      ["Missing field '%s' while writing result %o", "car", Object.create(null)]
-    );
+    expect(errorSpy.mock.calls[0]).toStrictEqual([
+      "Missing field '%s' while writing result %o",
+      "car",
+      Object.create(null),
+    ]);
     errorSpy.mockRestore();
   });
 
-  it('should handle immediate completions with multiple subscriptions gracefully', async () => {
-    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+  it("should handle immediate completions with multiple subscriptions gracefully", async () => {
+    const errorSpy = jest.spyOn(console, "error").mockImplementation(() => {});
     const subscription = gql`
       subscription {
         car {
@@ -564,11 +597,9 @@ describe('useSubscription Hook', () => {
       }),
       {
         wrapper: ({ children }) => (
-          <ApolloProvider client={client}>
-            {children}
-          </ApolloProvider>
+          <ApolloProvider client={client}>{children}</ApolloProvider>
         ),
-      },
+      }
     );
 
     expect(result.current.sub1.loading).toBe(true);
@@ -586,9 +617,12 @@ describe('useSubscription Hook', () => {
       link.simulateResult({ result: { data: null } }, /* complete */ true);
     });
 
-    await waitFor(() => {
-      expect(result.current.sub1.loading).toBe(false);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current.sub1.loading).toBe(false);
+      },
+      { interval: 1 }
+    );
 
     expect(result.current.sub1.error).toBe(undefined);
     expect(result.current.sub1.data).toBe(null);
@@ -600,20 +634,26 @@ describe('useSubscription Hook', () => {
     expect(result.current.sub3.data).toBe(null);
 
     expect(errorSpy).toHaveBeenCalledTimes(3);
-    expect(errorSpy.mock.calls[0]).toStrictEqual(
-      ["Missing field '%s' while writing result %o", "car", Object.create(null)]
-    );
-    expect(errorSpy.mock.calls[1]).toStrictEqual(
-      ["Missing field '%s' while writing result %o", "car", Object.create(null)]
-    );
-    expect(errorSpy.mock.calls[2]).toStrictEqual(
-      ["Missing field '%s' while writing result %o", "car", Object.create(null)]
-    );
+    expect(errorSpy.mock.calls[0]).toStrictEqual([
+      "Missing field '%s' while writing result %o",
+      "car",
+      Object.create(null),
+    ]);
+    expect(errorSpy.mock.calls[1]).toStrictEqual([
+      "Missing field '%s' while writing result %o",
+      "car",
+      Object.create(null),
+    ]);
+    expect(errorSpy.mock.calls[2]).toStrictEqual([
+      "Missing field '%s' while writing result %o",
+      "car",
+      Object.create(null),
+    ]);
     errorSpy.mockRestore();
   });
 
   test("should warn when using 'onSubscriptionData' and 'onData' together", () => {
-    const warningSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    const warningSpy = jest.spyOn(console, "warn").mockImplementation(() => {});
     const subscription = gql`
       subscription {
         car {
@@ -629,26 +669,29 @@ describe('useSubscription Hook', () => {
     });
 
     renderHook(
-      () => useSubscription(subscription, {
-        onData: jest.fn(),
-        onSubscriptionData: jest.fn(),
-      }),
+      () =>
+        useSubscription(subscription, {
+          onData: jest.fn(),
+          onSubscriptionData: jest.fn(),
+        }),
       {
         wrapper: ({ children }) => (
-          <ApolloProvider client={client}>
-            {children}
-          </ApolloProvider>
+          <ApolloProvider client={client}>{children}</ApolloProvider>
         ),
-      },
+      }
     );
 
     expect(warningSpy).toHaveBeenCalledTimes(1);
-    expect(warningSpy).toHaveBeenCalledWith(expect.stringContaining("supports only the 'onSubscriptionData' or 'onData' option"));
+    expect(warningSpy).toHaveBeenCalledWith(
+      expect.stringContaining(
+        "supports only the 'onSubscriptionData' or 'onData' option"
+      )
+    );
     warningSpy.mockRestore();
   });
 
   test("prefers 'onData' when using 'onSubscriptionData' and 'onData' together", async () => {
-    jest.spyOn(console, 'warn').mockImplementation(() => {});
+    jest.spyOn(console, "warn").mockImplementation(() => {});
     const subscription = gql`
       subscription {
         car {
@@ -659,8 +702,8 @@ describe('useSubscription Hook', () => {
 
     const results = [
       {
-        result: { data: { car: { make: 'Pagani' } } }
-      }
+        result: { data: { car: { make: "Pagani" } } },
+      },
     ];
 
     const link = new MockSubscriptionLink();
@@ -673,28 +716,30 @@ describe('useSubscription Hook', () => {
     const onSubscriptionData = jest.fn();
 
     renderHook(
-      () => useSubscription(subscription, {
-        onData,
-        onSubscriptionData,
-      }),
+      () =>
+        useSubscription(subscription, {
+          onData,
+          onSubscriptionData,
+        }),
       {
         wrapper: ({ children }) => (
-          <ApolloProvider client={client}>
-            {children}
-          </ApolloProvider>
+          <ApolloProvider client={client}>{children}</ApolloProvider>
         ),
-      },
+      }
     );
 
     setTimeout(() => link.simulateResult(results[0]));
-    await waitFor(() => {
-      expect(onData).toHaveBeenCalledTimes(1);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(onData).toHaveBeenCalledTimes(1);
+      },
+      { interval: 1 }
+    );
     expect(onSubscriptionData).toHaveBeenCalledTimes(0);
   });
 
   test("uses 'onSubscriptionData' when 'onData' is absent", async () => {
-    const warningSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    const warningSpy = jest.spyOn(console, "warn").mockImplementation(() => {});
     const subscription = gql`
       subscription {
         car {
@@ -705,8 +750,8 @@ describe('useSubscription Hook', () => {
 
     const results = [
       {
-        result: { data: { car: { make: 'Pagani' } } }
-      }
+        result: { data: { car: { make: "Pagani" } } },
+      },
     ];
 
     const link = new MockSubscriptionLink();
@@ -718,27 +763,29 @@ describe('useSubscription Hook', () => {
     const onSubscriptionData = jest.fn();
 
     renderHook(
-      () => useSubscription(subscription, {
-        onSubscriptionData,
-      }),
+      () =>
+        useSubscription(subscription, {
+          onSubscriptionData,
+        }),
       {
         wrapper: ({ children }) => (
-          <ApolloProvider client={client}>
-            {children}
-          </ApolloProvider>
+          <ApolloProvider client={client}>{children}</ApolloProvider>
         ),
-      },
+      }
     );
 
     setTimeout(() => link.simulateResult(results[0]));
-    await waitFor(() => {
-      expect(onSubscriptionData).toHaveBeenCalledTimes(1);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(onSubscriptionData).toHaveBeenCalledTimes(1);
+      },
+      { interval: 1 }
+    );
     warningSpy.mockRestore();
   });
 
   test("only warns once using `onSubscriptionData`", () => {
-    const warningSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    const warningSpy = jest.spyOn(console, "warn").mockImplementation(() => {});
     const subscription = gql`
       subscription {
         car {
@@ -754,16 +801,15 @@ describe('useSubscription Hook', () => {
     });
 
     const { rerender } = renderHook(
-      () => useSubscription(subscription, {
-        onSubscriptionData: jest.fn(),
-      }),
+      () =>
+        useSubscription(subscription, {
+          onSubscriptionData: jest.fn(),
+        }),
       {
         wrapper: ({ children }) => (
-          <ApolloProvider client={client}>
-            {children}
-          </ApolloProvider>
+          <ApolloProvider client={client}>{children}</ApolloProvider>
         ),
-      },
+      }
     );
 
     rerender();
@@ -773,7 +819,7 @@ describe('useSubscription Hook', () => {
   });
 
   test("should warn when using 'onComplete' and 'onSubscriptionComplete' together", () => {
-    const warningSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    const warningSpy = jest.spyOn(console, "warn").mockImplementation(() => {});
     const subscription = gql`
       subscription {
         car {
@@ -789,26 +835,29 @@ describe('useSubscription Hook', () => {
     });
 
     renderHook(
-      () => useSubscription(subscription, {
-        onComplete: jest.fn(),
-        onSubscriptionComplete: jest.fn(),
-      }),
+      () =>
+        useSubscription(subscription, {
+          onComplete: jest.fn(),
+          onSubscriptionComplete: jest.fn(),
+        }),
       {
         wrapper: ({ children }) => (
-          <ApolloProvider client={client}>
-            {children}
-          </ApolloProvider>
+          <ApolloProvider client={client}>{children}</ApolloProvider>
         ),
-      },
+      }
     );
 
     expect(warningSpy).toHaveBeenCalledTimes(1);
-    expect(warningSpy).toHaveBeenCalledWith(expect.stringContaining("supports only the 'onSubscriptionComplete' or 'onComplete' option"));
+    expect(warningSpy).toHaveBeenCalledWith(
+      expect.stringContaining(
+        "supports only the 'onSubscriptionComplete' or 'onComplete' option"
+      )
+    );
     warningSpy.mockRestore();
   });
 
   test("prefers 'onComplete' when using 'onComplete' and 'onSubscriptionComplete' together", async () => {
-    const warningSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    const warningSpy = jest.spyOn(console, "warn").mockImplementation(() => {});
     const subscription = gql`
       subscription {
         car {
@@ -817,9 +866,11 @@ describe('useSubscription Hook', () => {
       }
     `;
 
-    const results = [{
-      result: { data: { car: { make: 'Audi' } } }
-    }];
+    const results = [
+      {
+        result: { data: { car: { make: "Audi" } } },
+      },
+    ];
 
     const link = new MockSubscriptionLink();
     const client = new ApolloClient({
@@ -831,31 +882,33 @@ describe('useSubscription Hook', () => {
     const onSubscriptionComplete = jest.fn();
 
     renderHook(
-      () => useSubscription(subscription, {
-        onComplete,
-        onSubscriptionComplete,
-      }),
+      () =>
+        useSubscription(subscription, {
+          onComplete,
+          onSubscriptionComplete,
+        }),
       {
         wrapper: ({ children }) => (
-          <ApolloProvider client={client}>
-            {children}
-          </ApolloProvider>
+          <ApolloProvider client={client}>{children}</ApolloProvider>
         ),
-      },
+      }
     );
 
     link.simulateResult(results[0]);
 
     setTimeout(() => link.simulateComplete());
-    await waitFor(() => {
-      expect(onComplete).toHaveBeenCalledTimes(1);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(onComplete).toHaveBeenCalledTimes(1);
+      },
+      { interval: 1 }
+    );
     expect(onSubscriptionComplete).toHaveBeenCalledTimes(0);
     warningSpy.mockRestore();
   });
 
   test("uses 'onSubscriptionComplete' when 'onComplete' is absent", async () => {
-    const warningSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    const warningSpy = jest.spyOn(console, "warn").mockImplementation(() => {});
     const subscription = gql`
       subscription {
         car {
@@ -864,9 +917,11 @@ describe('useSubscription Hook', () => {
       }
     `;
 
-    const results = [{
-      result: { data: { car: { make: 'Audi' } } }
-    }];
+    const results = [
+      {
+        result: { data: { car: { make: "Audi" } } },
+      },
+    ];
 
     const link = new MockSubscriptionLink();
     const client = new ApolloClient({
@@ -877,29 +932,31 @@ describe('useSubscription Hook', () => {
     const onSubscriptionComplete = jest.fn();
 
     renderHook(
-      () => useSubscription(subscription, {
-        onSubscriptionComplete,
-      }),
+      () =>
+        useSubscription(subscription, {
+          onSubscriptionComplete,
+        }),
       {
         wrapper: ({ children }) => (
-          <ApolloProvider client={client}>
-            {children}
-          </ApolloProvider>
+          <ApolloProvider client={client}>{children}</ApolloProvider>
         ),
-      },
+      }
     );
 
     link.simulateResult(results[0]);
 
     setTimeout(() => link.simulateComplete());
-    await waitFor(() => {
-      expect(onSubscriptionComplete).toHaveBeenCalledTimes(1);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(onSubscriptionComplete).toHaveBeenCalledTimes(1);
+      },
+      { interval: 1 }
+    );
     warningSpy.mockRestore();
   });
 
   test("only warns once using `onSubscriptionComplete`", () => {
-    const warningSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    const warningSpy = jest.spyOn(console, "warn").mockImplementation(() => {});
     const subscription = gql`
       subscription {
         car {
@@ -915,16 +972,15 @@ describe('useSubscription Hook', () => {
     });
 
     const { rerender } = renderHook(
-      () => useSubscription(subscription, {
-        onSubscriptionComplete: jest.fn(),
-      }),
+      () =>
+        useSubscription(subscription, {
+          onSubscriptionComplete: jest.fn(),
+        }),
       {
         wrapper: ({ children }) => (
-          <ApolloProvider client={client}>
-            {children}
-          </ApolloProvider>
+          <ApolloProvider client={client}>{children}</ApolloProvider>
         ),
-      },
+      }
     );
 
     rerender();
@@ -933,8 +989,8 @@ describe('useSubscription Hook', () => {
     warningSpy.mockRestore();
   });
 
-  describe('multipart subscriptions', () => {
-    it('should handle a simple subscription properly', async () => {
+  describe("multipart subscriptions", () => {
+    it("should handle a simple subscription properly", async () => {
       const subscription = gql`
         subscription ANewDieWasCreated {
           aNewDieWasCreated {
@@ -953,54 +1009,55 @@ describe('useSubscription Hook', () => {
             extensions: {
               [PROTOCOL_ERRORS_SYMBOL]: [
                 {
-                  message: 'cannot read message from websocket',
+                  message: "cannot read message from websocket",
                   extensions: [
                     {
-                      code: "WEBSOCKET_MESSAGE_ERROR"
-                    }
+                      code: "WEBSOCKET_MESSAGE_ERROR",
+                    },
                   ],
                 },
               ],
-            }
+            },
           },
         },
-      ]
+      ];
       const link = new MockSubscriptionLink();
       const client = new ApolloClient({
         link,
-        cache: new Cache({ addTypename: false })
+        cache: new Cache({ addTypename: false }),
       });
       let renderCount = 0;
 
       const { result } = renderHook(
         () => {
           renderCount++;
-          return useSubscription(subscription)
+          return useSubscription(subscription);
         },
         {
           wrapper: ({ children }) => (
-            <ApolloProvider client={client}>
-              {children}
-            </ApolloProvider>
+            <ApolloProvider client={client}>{children}</ApolloProvider>
           ),
-        },
+        }
       );
       expect(result.current.loading).toBe(true);
       expect(result.current.error).toBe(undefined);
       expect(result.current.data).toBe(undefined);
       link.simulateResult(results[0]);
       expect(renderCount).toBe(1);
-      await waitFor(() => {
-        expect(result.current.error).toBeInstanceOf(ApolloError);
-      }, { interval: 1 });
+      await waitFor(
+        () => {
+          expect(result.current.error).toBeInstanceOf(ApolloError);
+        },
+        { interval: 1 }
+      );
       expect(result.current.error!.protocolErrors[0].message).toBe(
         "cannot read message from websocket"
       );
     });
   });
 
-  it('should handle simple subscription after old in-flight teardown immediately \
-followed by new in-flight setup', async () => {
+  it("should handle simple subscription after old in-flight teardown immediately \
+followed by new in-flight setup", async () => {
     const subscription = gql`
       subscription {
         car {
@@ -1009,60 +1066,64 @@ followed by new in-flight setup', async () => {
       }
     `;
 
-    const results = ['Audi', 'BMW'].map(make => ({
+    const results = ["Audi", "BMW"].map((make) => ({
       result: { data: { car: { make } } },
     }));
 
     const link = new MockSubscriptionLink();
     const client = new ApolloClient({
       link,
-      cache: new Cache({ addTypename: false })
+      cache: new Cache({ addTypename: false }),
     });
 
     const { result, unmount, rerender } = renderHook(
       ({ coin }) => {
         const heads = useSubscription(subscription, {
           variables: {},
-          skip: coin === 'tails',
-          context: { coin: 'heads' }
+          skip: coin === "tails",
+          context: { coin: "heads" },
         });
         const tails = useSubscription(subscription, {
           variables: {},
-          skip: coin === 'heads',
-          context: { coin: 'tails' }
+          skip: coin === "heads",
+          context: { coin: "tails" },
         });
         return { heads, tails };
       },
       {
         initialProps: {
-          coin: 'heads'
+          coin: "heads",
         },
         wrapper: ({ children }) => (
-          <ApolloProvider client={client}>
-            {children}
-          </ApolloProvider>
-        )
-      },
+          <ApolloProvider client={client}>{children}</ApolloProvider>
+        ),
+      }
     );
 
-    rerender({ coin: 'tails' });
+    rerender({ coin: "tails" });
 
-    await new Promise(resolve => setTimeout(() => resolve('wait'), 20));
+    await new Promise((resolve) => setTimeout(() => resolve("wait"), 20));
 
     link.simulateResult(results[0]);
 
-    await waitFor(() => {
-      expect(result.current.tails.data).toEqual(results[0].result.data);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current.tails.data).toEqual(results[0].result.data);
+      },
+      { interval: 1 }
+    );
     expect(result.current.heads.data).toBeUndefined();
 
-    rerender({ coin: 'heads' });
+    rerender({ coin: "heads" });
 
     link.simulateResult(results[1]);
 
-    await waitFor(() => {
-      expect(result.current.heads.data).toEqual(results[1].result.data);
-    }, { interval: 1 });
+    await waitFor(
+      () => {
+        expect(result.current.heads.data).toEqual(results[1].result.data);
+      },
+      { interval: 1 }
+    );
     expect(result.current.tails.data).toBeUndefined();
 
     unmount();
@@ -1070,17 +1131,17 @@ followed by new in-flight setup', async () => {
 });
 
 describe.skip("Type Tests", () => {
-  test('NoInfer prevents adding arbitrary additional variables', () => {
-    const typedNode = {} as TypedDocumentNode<{ foo: string}, { bar: number }>
+  test("NoInfer prevents adding arbitrary additional variables", () => {
+    const typedNode = {} as TypedDocumentNode<{ foo: string }, { bar: number }>;
     const { variables } = useSubscription(typedNode, {
       variables: {
         bar: 4,
         // @ts-expect-error
-        nonExistingVariable: "string"
-      }
+        nonExistingVariable: "string",
+      },
     });
-    variables?.bar
+    variables?.bar;
     // @ts-expect-error
-    variables?.nonExistingVariable
-  })
-})
+    variables?.nonExistingVariable;
+  });
+});
diff --git a/src/react/hooks/__tests__/useSuspenseQuery.test.tsx b/src/react/hooks/__tests__/useSuspenseQuery.test.tsx
index d06eda39599..0be1216359e 100644
--- a/src/react/hooks/__tests__/useSuspenseQuery.test.tsx
+++ b/src/react/hooks/__tests__/useSuspenseQuery.test.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, StrictMode, Suspense } from 'react';
+import React, { Fragment, StrictMode, Suspense } from "react";
 import {
   act,
   screen,
@@ -6,13 +6,13 @@ import {
   renderHook,
   waitFor,
   RenderHookOptions,
-} from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { ErrorBoundary } from 'react-error-boundary';
-import { GraphQLError } from 'graphql';
-import { InvariantError } from 'ts-invariant';
-import { equal } from '@wry/equality';
-import { expectTypeOf } from 'expect-type';
+} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { ErrorBoundary } from "react-error-boundary";
+import { GraphQLError } from "graphql";
+import { InvariantError } from "ts-invariant";
+import { equal } from "@wry/equality";
+import { expectTypeOf } from "expect-type";
 
 import {
   gql,
@@ -30,28 +30,28 @@ import {
   NetworkStatus,
   ApolloQueryResult,
   ErrorPolicy,
-} from '../../../core';
+} from "../../../core";
 import {
   DeepPartial,
   compact,
   concatPagination,
   getMainDefinition,
   offsetLimitPagination,
-} from '../../../utilities';
+} from "../../../utilities";
 import {
   MockedProvider,
   MockedResponse,
   MockSubscriptionLink,
   MockLink,
-} from '../../../testing';
-import { ApolloProvider } from '../../context';
-import { SuspenseQueryHookFetchPolicy } from '../../../react';
-import { useSuspenseQuery } from '../useSuspenseQuery';
-import { RefetchWritePolicy } from '../../../core/watchQueryOptions';
+} from "../../../testing";
+import { ApolloProvider } from "../../context";
+import { SuspenseQueryHookFetchPolicy } from "../../../react";
+import { useSuspenseQuery } from "../useSuspenseQuery";
+import { RefetchWritePolicy } from "../../../core/watchQueryOptions";
 
 type RenderSuspenseHookOptions<Props, TSerializedCache = {}> = Omit<
   RenderHookOptions<Props>,
-  'wrapper'
+  "wrapper"
 > & {
   client?: ApolloClient<TSerializedCache>;
   link?: ApolloLink;
@@ -146,7 +146,7 @@ function useSimpleQueryCase() {
   const mocks = [
     {
       request: { query },
-      result: { data: { greeting: 'Hello' } },
+      result: { data: { greeting: "Hello" } },
     },
   ];
 
@@ -175,8 +175,8 @@ function usePaginatedCase() {
     }
   `;
 
-  const data = 'ABCDEFG'.split('').map((letter, index) => ({
-    __typename: 'Letter',
+  const data = "ABCDEFG".split("").map((letter, index) => ({
+    __typename: "Letter",
     letter,
     position: index + 1,
   }));
@@ -244,7 +244,7 @@ interface VariablesCaseVariables {
 }
 
 function useVariablesQueryCase() {
-  const CHARACTERS = ['Spider-Man', 'Black Widow', 'Iron Man', 'Hulk'];
+  const CHARACTERS = ["Spider-Man", "Black Widow", "Iron Man", "Hulk"];
 
   const query: TypedDocumentNode<
     VariablesCaseData,
@@ -262,7 +262,7 @@ function useVariablesQueryCase() {
     request: { query, variables: { id: String(index + 1) } },
     result: {
       data: {
-        character: { __typename: 'Character', id: String(index + 1), name },
+        character: { __typename: "Character", id: String(index + 1), name },
       },
     },
   }));
@@ -274,9 +274,9 @@ function wait(delay: number) {
   return new Promise((resolve) => setTimeout(resolve, delay));
 }
 
-describe('useSuspenseQuery', () => {
-  it('validates the GraphQL query as a query', () => {
-    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
+describe("useSuspenseQuery", () => {
+  it("validates the GraphQL query as a query", () => {
+    const consoleSpy = jest.spyOn(console, "error").mockImplementation();
 
     const query = gql`
       mutation ShouldThrow {
@@ -290,16 +290,16 @@ describe('useSuspenseQuery', () => {
       });
     }).toThrowError(
       new InvariantError(
-        'Running a Query requires a graphql Query, but a Mutation was used instead.'
+        "Running a Query requires a graphql Query, but a Mutation was used instead."
       )
     );
 
     consoleSpy.mockRestore();
   });
 
-  it('ensures a valid fetch policy is used', () => {
-    const INVALID_FETCH_POLICIES = ['cache-only', 'standby'];
-    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
+  it("ensures a valid fetch policy is used", () => {
+    const INVALID_FETCH_POLICIES = ["cache-only", "standby"];
+    const consoleSpy = jest.spyOn(console, "error").mockImplementation();
     const { query } = useSimpleQueryCase();
 
     INVALID_FETCH_POLICIES.forEach((fetchPolicy: any) => {
@@ -319,7 +319,7 @@ describe('useSuspenseQuery', () => {
     consoleSpy.mockRestore();
   });
 
-  it('suspends a query and returns results', async () => {
+  it("suspends a query and returns results", async () => {
     const { query, mocks } = useSimpleQueryCase();
 
     const { result, renders } = renderSuspenseHook(
@@ -347,11 +347,11 @@ describe('useSuspenseQuery', () => {
     ]);
   });
 
-  it('suspends a query with variables and returns results', async () => {
+  it("suspends a query with variables and returns results", async () => {
     const { query, mocks } = useVariablesQueryCase();
 
     const { result, renders } = renderSuspenseHook(
-      () => useSuspenseQuery(query, { variables: { id: '1' } }),
+      () => useSuspenseQuery(query, { variables: { id: "1" } }),
       { mocks }
     );
 
@@ -373,12 +373,12 @@ describe('useSuspenseQuery', () => {
     ]);
   });
 
-  it('returns the same results for the same variables', async () => {
+  it("returns the same results for the same variables", async () => {
     const { query, mocks } = useVariablesQueryCase();
 
     const { result, rerender, renders } = renderSuspenseHook(
       ({ id }) => useSuspenseQuery(query, { variables: { id } }),
-      { mocks, initialProps: { id: '1' } }
+      { mocks, initialProps: { id: "1" } }
     );
 
     await waitFor(() => {
@@ -390,7 +390,7 @@ describe('useSuspenseQuery', () => {
 
     const previousResult = result.current;
 
-    rerender({ id: '1' });
+    rerender({ id: "1" });
 
     expect(result.current).toBe(previousResult);
     expect(renders.count).toBe(3);
@@ -409,15 +409,15 @@ describe('useSuspenseQuery', () => {
     ]);
   });
 
-  it('ensures result is referentially stable', async () => {
+  it("ensures result is referentially stable", async () => {
     const { query, mocks } = useVariablesQueryCase();
 
     const { result, rerender } = renderSuspenseHook(
       ({ id }) => useSuspenseQuery(query, { variables: { id } }),
-      { mocks, initialProps: { id: '1' } }
+      { mocks, initialProps: { id: "1" } }
     );
 
-    expect(screen.getByText('loading')).toBeInTheDocument();
+    expect(screen.getByText("loading")).toBeInTheDocument();
 
     await waitFor(() => {
       expect(result.current).toMatchObject({
@@ -428,12 +428,12 @@ describe('useSuspenseQuery', () => {
 
     const previousResult = result.current;
 
-    rerender({ id: '1' });
+    rerender({ id: "1" });
 
     expect(result.current).toBe(previousResult);
   });
 
-  it('ensures refetch, fetchMore, and subscribeToMore are referentially stable even after result data has changed', async () => {
+  it("ensures refetch, fetchMore, and subscribeToMore are referentially stable even after result data has changed", async () => {
     const { query, mocks } = useSimpleQueryCase();
 
     const client = new ApolloClient({
@@ -456,12 +456,12 @@ describe('useSuspenseQuery', () => {
 
     client.writeQuery({
       query,
-      data: { greeting: 'Updated cache greeting' },
+      data: { greeting: "Updated cache greeting" },
     });
 
     await waitFor(() => {
       expect(result.current.data).toEqual({
-        greeting: 'Updated cache greeting',
+        greeting: "Updated cache greeting",
       });
     });
 
@@ -493,12 +493,12 @@ describe('useSuspenseQuery', () => {
     `;
 
     const results: Result[] = [
-      { __typename: 'Result', value: 0 },
-      { __typename: 'Result', value: 1 },
-      { __typename: 'Result', value: 1 },
-      { __typename: 'Result', value: 2 },
-      { __typename: 'Result', value: 3 },
-      { __typename: 'Result', value: 5 },
+      { __typename: "Result", value: 0 },
+      { __typename: "Result", value: 1 },
+      { __typename: "Result", value: 1 },
+      { __typename: "Result", value: 2 },
+      { __typename: "Result", value: 3 },
+      { __typename: "Result", value: 5 },
     ];
 
     cache.writeQuery({
@@ -545,12 +545,12 @@ describe('useSuspenseQuery', () => {
     `;
 
     const results: Result[] = [
-      { __typename: 'Result', value: 0 },
-      { __typename: 'Result', value: 1 },
-      { __typename: 'Result', value: 1 },
-      { __typename: 'Result', value: 2 },
-      { __typename: 'Result', value: 3 },
-      { __typename: 'Result', value: 5 },
+      { __typename: "Result", value: 0 },
+      { __typename: "Result", value: 1 },
+      { __typename: "Result", value: 1 },
+      { __typename: "Result", value: 2 },
+      { __typename: "Result", value: 3 },
+      { __typename: "Result", value: 5 },
     ];
 
     cache.writeQuery({
@@ -573,7 +573,7 @@ describe('useSuspenseQuery', () => {
     expect(values).toEqual([0, 1, 1, 2, 3, 5]);
   });
 
-  it('tears down the query on unmount', async () => {
+  it("tears down the query on unmount", async () => {
     const { query, mocks } = useSimpleQueryCase();
 
     const client = new ApolloClient({
@@ -603,7 +603,7 @@ describe('useSuspenseQuery', () => {
     expect(client).not.toHaveSuspenseCacheEntryUsing(query);
   });
 
-  it('tears down all queries when rendering with multiple variable sets', async () => {
+  it("tears down all queries when rendering with multiple variable sets", async () => {
     const { query, mocks } = useVariablesQueryCase();
 
     const client = new ApolloClient({
@@ -613,14 +613,14 @@ describe('useSuspenseQuery', () => {
 
     const { rerender, result, unmount } = renderSuspenseHook(
       ({ id }) => useSuspenseQuery(query, { variables: { id } }),
-      { client, initialProps: { id: '1' } }
+      { client, initialProps: { id: "1" } }
     );
 
     await waitFor(() =>
       expect(result.current.data).toEqual(mocks[0].result.data)
     );
 
-    rerender({ id: '2' });
+    rerender({ id: "2" });
 
     await waitFor(() => {
       expect(result.current.data).toEqual(mocks[1].result.data);
@@ -635,21 +635,21 @@ describe('useSuspenseQuery', () => {
     expect(client.getObservableQueries().size).toBe(0);
 
     expect(client).not.toHaveSuspenseCacheEntryUsing(query, {
-      variables: { id: '1' },
+      variables: { id: "1" },
     });
     expect(client).not.toHaveSuspenseCacheEntryUsing(query, {
-      variables: { id: '2' },
+      variables: { id: "2" },
     });
   });
 
-  it('tears down all queries when multiple clients are used', async () => {
+  it("tears down all queries when multiple clients are used", async () => {
     const { query } = useVariablesQueryCase();
 
     const client1 = new ApolloClient({
       link: new MockLink([
         {
-          request: { query, variables: { id: '1' } },
-          result: { data: { character: { id: '1', name: 'Client 1' } } },
+          request: { query, variables: { id: "1" } },
+          result: { data: { character: { id: "1", name: "Client 1" } } },
         },
       ]),
       cache: new InMemoryCache(),
@@ -658,8 +658,8 @@ describe('useSuspenseQuery', () => {
     const client2 = new ApolloClient({
       link: new MockLink([
         {
-          request: { query, variables: { id: '1' } },
-          result: { data: { character: { id: '1', name: 'Client 2' } } },
+          request: { query, variables: { id: "1" } },
+          result: { data: { character: { id: "1", name: "Client 2" } } },
         },
       ]),
       cache: new InMemoryCache(),
@@ -667,13 +667,13 @@ describe('useSuspenseQuery', () => {
 
     const { rerender, result, unmount } = renderSuspenseHook(
       ({ client }) =>
-        useSuspenseQuery(query, { client, variables: { id: '1' } }),
+        useSuspenseQuery(query, { client, variables: { id: "1" } }),
       { initialProps: { client: client1 } }
     );
 
     await waitFor(() =>
       expect(result.current.data).toEqual({
-        character: { id: '1', name: 'Client 1' },
+        character: { id: "1", name: "Client 1" },
       })
     );
 
@@ -681,11 +681,11 @@ describe('useSuspenseQuery', () => {
 
     await waitFor(() => {
       expect(result.current.data).toEqual({
-        character: { id: '1', name: 'Client 2' },
+        character: { id: "1", name: "Client 2" },
       });
     });
 
-    const variables = { id: '1' };
+    const variables = { id: "1" };
 
     unmount();
 
@@ -703,7 +703,7 @@ describe('useSuspenseQuery', () => {
     });
   });
 
-  it('tears down the query if the component never renders again after suspending', async () => {
+  it("tears down the query if the component never renders again after suspending", async () => {
     jest.useFakeTimers();
     const { query } = useSimpleQueryCase();
     const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
@@ -737,14 +737,14 @@ describe('useSuspenseQuery', () => {
     render(<App />);
 
     // Ensure <Greeting /> suspends immediately
-    expect(screen.getByText('Loading greeting...')).toBeInTheDocument();
+    expect(screen.getByText("Loading greeting...")).toBeInTheDocument();
 
     // Hide the greeting before it finishes loading data
-    await act(() => user.click(screen.getByText('Hide greeting')));
+    await act(() => user.click(screen.getByText("Hide greeting")));
 
-    expect(screen.queryByText('Loading greeting...')).not.toBeInTheDocument();
+    expect(screen.queryByText("Loading greeting...")).not.toBeInTheDocument();
 
-    link.simulateResult({ result: { data: { greeting: 'Hello' } } });
+    link.simulateResult({ result: { data: { greeting: "Hello" } } });
     link.simulateComplete();
 
     expect(client.getObservableQueries().size).toBe(1);
@@ -762,7 +762,7 @@ describe('useSuspenseQuery', () => {
     await act(() => wait(0));
   });
 
-  it('has configurable auto dispose timer if the component never renders again after suspending', async () => {
+  it("has configurable auto dispose timer if the component never renders again after suspending", async () => {
     jest.useFakeTimers();
     const { query } = useSimpleQueryCase();
     const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
@@ -803,14 +803,14 @@ describe('useSuspenseQuery', () => {
     render(<App />);
 
     // Ensure <Greeting /> suspends immediately
-    expect(screen.getByText('Loading greeting...')).toBeInTheDocument();
+    expect(screen.getByText("Loading greeting...")).toBeInTheDocument();
 
     // Hide the greeting before it finishes loading data
-    await act(() => user.click(screen.getByText('Hide greeting')));
+    await act(() => user.click(screen.getByText("Hide greeting")));
 
-    expect(screen.queryByText('Loading greeting...')).not.toBeInTheDocument();
+    expect(screen.queryByText("Loading greeting...")).not.toBeInTheDocument();
 
-    link.simulateResult({ result: { data: { greeting: 'Hello' } } });
+    link.simulateResult({ result: { data: { greeting: "Hello" } } });
     link.simulateComplete();
 
     expect(client.getObservableQueries().size).toBe(1);
@@ -828,13 +828,13 @@ describe('useSuspenseQuery', () => {
     await act(() => wait(0));
   });
 
-  it('cancels auto dispose if the component renders before timer finishes', async () => {
+  it("cancels auto dispose if the component renders before timer finishes", async () => {
     jest.useFakeTimers();
     const { query } = useSimpleQueryCase();
     const link = new ApolloLink(() => {
       return new Observable((observer) => {
         setTimeout(() => {
-          observer.next({ data: { greeting: 'Hello' } });
+          observer.next({ data: { greeting: "Hello" } });
           observer.complete();
         }, 10);
       });
@@ -863,12 +863,12 @@ describe('useSuspenseQuery', () => {
     render(<App />);
 
     // Ensure <Greeting /> suspends immediately
-    expect(screen.getByText('Loading greeting...')).toBeInTheDocument();
+    expect(screen.getByText("Loading greeting...")).toBeInTheDocument();
 
     jest.advanceTimersByTime(10);
 
     await waitFor(() => {
-      expect(screen.getByText('Hello')).toBeInTheDocument();
+      expect(screen.getByText("Hello")).toBeInTheDocument();
     });
 
     jest.advanceTimersByTime(30_000);
@@ -879,19 +879,19 @@ describe('useSuspenseQuery', () => {
     jest.useRealTimers();
   });
 
-  it('allows the client to be overridden', async () => {
+  it("allows the client to be overridden", async () => {
     const { query } = useSimpleQueryCase();
 
     const globalClient = new ApolloClient({
       link: new ApolloLink(() =>
-        Observable.of({ data: { greeting: 'global hello' } })
+        Observable.of({ data: { greeting: "global hello" } })
       ),
       cache: new InMemoryCache(),
     });
 
     const localClient = new ApolloClient({
       link: new ApolloLink(() =>
-        Observable.of({ data: { greeting: 'local hello' } })
+        Observable.of({ data: { greeting: "local hello" } })
       ),
       cache: new InMemoryCache(),
     });
@@ -902,31 +902,31 @@ describe('useSuspenseQuery', () => {
     );
 
     await waitFor(() =>
-      expect(result.current.data).toEqual({ greeting: 'local hello' })
+      expect(result.current.data).toEqual({ greeting: "local hello" })
     );
 
     expect(renders.frames).toMatchObject([
       {
-        data: { greeting: 'local hello' },
+        data: { greeting: "local hello" },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       },
     ]);
   });
 
-  it('allows the client to be overridden in strict mode', async () => {
+  it("allows the client to be overridden in strict mode", async () => {
     const { query } = useSimpleQueryCase();
 
     const globalClient = new ApolloClient({
       link: new ApolloLink(() =>
-        Observable.of({ data: { greeting: 'global hello' } })
+        Observable.of({ data: { greeting: "global hello" } })
       ),
       cache: new InMemoryCache(),
     });
 
     const localClient = new ApolloClient({
       link: new ApolloLink(() =>
-        Observable.of({ data: { greeting: 'local hello' } })
+        Observable.of({ data: { greeting: "local hello" } })
       ),
       cache: new InMemoryCache(),
     });
@@ -937,31 +937,31 @@ describe('useSuspenseQuery', () => {
     );
 
     await waitFor(() =>
-      expect(result.current.data).toEqual({ greeting: 'local hello' })
+      expect(result.current.data).toEqual({ greeting: "local hello" })
     );
 
     // React double invokes the render function in strict mode so we expect
     // to render 2 frames after the initial suspense.
     expect(renders.frames).toMatchObject([
       {
-        data: { greeting: 'local hello' },
+        data: { greeting: "local hello" },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       },
       {
-        data: { greeting: 'local hello' },
+        data: { greeting: "local hello" },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       },
     ]);
   });
 
-  it('returns the client used in the result', async () => {
+  it("returns the client used in the result", async () => {
     const { query } = useSimpleQueryCase();
 
     const client = new ApolloClient({
       link: new ApolloLink(() =>
-        Observable.of({ data: { greeting: 'hello' } })
+        Observable.of({ data: { greeting: "hello" } })
       ),
       cache: new InMemoryCache(),
     });
@@ -972,18 +972,18 @@ describe('useSuspenseQuery', () => {
 
     // wait for query to finish suspending to avoid warnings
     await waitFor(() => {
-      expect(result.current.data).toEqual({ greeting: 'hello' });
+      expect(result.current.data).toEqual({ greeting: "hello" });
     });
 
     expect(result.current.client).toBe(client);
   });
 
-  it('suspends when changing variables', async () => {
+  it("suspends when changing variables", async () => {
     const { query, mocks } = useVariablesQueryCase();
 
     const { result, rerender, renders } = renderSuspenseHook(
       ({ id }) => useSuspenseQuery(query, { variables: { id } }),
-      { mocks, initialProps: { id: '1' } }
+      { mocks, initialProps: { id: "1" } }
     );
 
     await waitFor(() => {
@@ -994,7 +994,7 @@ describe('useSuspenseQuery', () => {
       });
     });
 
-    rerender({ id: '2' });
+    rerender({ id: "2" });
 
     await waitFor(() => {
       expect(result.current).toMatchObject({
@@ -1020,7 +1020,7 @@ describe('useSuspenseQuery', () => {
     ]);
   });
 
-  it('suspends and fetches data from new client when changing clients', async () => {
+  it("suspends and fetches data from new client when changing clients", async () => {
     const { query } = useSimpleQueryCase();
 
     const client1 = new ApolloClient({
@@ -1028,7 +1028,7 @@ describe('useSuspenseQuery', () => {
       link: new MockLink([
         {
           request: { query },
-          result: { data: { greeting: 'Hello client 1' } },
+          result: { data: { greeting: "Hello client 1" } },
         },
       ]),
     });
@@ -1038,7 +1038,7 @@ describe('useSuspenseQuery', () => {
       link: new MockLink([
         {
           request: { query },
-          result: { data: { greeting: 'Hello client 2' } },
+          result: { data: { greeting: "Hello client 2" } },
         },
       ]),
     });
@@ -1050,7 +1050,7 @@ describe('useSuspenseQuery', () => {
 
     await waitFor(() => {
       expect(result.current).toMatchObject({
-        data: { greeting: 'Hello client 1' },
+        data: { greeting: "Hello client 1" },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       });
@@ -1060,7 +1060,7 @@ describe('useSuspenseQuery', () => {
 
     await waitFor(() => {
       expect(result.current).toMatchObject({
-        data: { greeting: 'Hello client 2' },
+        data: { greeting: "Hello client 2" },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       });
@@ -1070,19 +1070,19 @@ describe('useSuspenseQuery', () => {
     expect(renders.suspenseCount).toBe(2);
     expect(renders.frames).toMatchObject([
       {
-        data: { greeting: 'Hello client 1' },
+        data: { greeting: "Hello client 1" },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       },
       {
-        data: { greeting: 'Hello client 2' },
+        data: { greeting: "Hello client 2" },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       },
     ]);
   });
 
-  it('allows custom query key so two components that share same query and variables do not interfere with each other', async () => {
+  it("allows custom query key so two components that share same query and variables do not interfere with each other", async () => {
     interface Data {
       todo: {
         id: number;
@@ -1109,7 +1109,7 @@ describe('useSuspenseQuery', () => {
       {
         request: { query, variables: { id: 1 } },
         result: {
-          data: { todo: { id: 1, name: 'Take out trash', completed: false } },
+          data: { todo: { id: 1, name: "Take out trash", completed: false } },
         },
         delay: 20,
       },
@@ -1117,7 +1117,7 @@ describe('useSuspenseQuery', () => {
       {
         request: { query, variables: { id: 1 } },
         result: {
-          data: { todo: { id: 1, name: 'Take out trash', completed: true } },
+          data: { todo: { id: 1, name: "Take out trash", completed: true } },
         },
         delay: 20,
       },
@@ -1151,7 +1151,7 @@ describe('useSuspenseQuery', () => {
       const { data, refetch } = useSuspenseQuery(query, {
         // intentionally use no-cache to allow us to verify each suspense
         // component is independent of each other
-        fetchPolicy: 'no-cache',
+        fetchPolicy: "no-cache",
         variables: { id: 1 },
         queryKey: [name],
       });
@@ -1159,8 +1159,8 @@ describe('useSuspenseQuery', () => {
       return (
         <div>
           <button onClick={() => refetch()}>Refetch {name}</button>
-          <span data-testid={[name, 'data'].join('.')}>
-            {data.todo.name} {data.todo.completed && '(completed)'}
+          <span data-testid={[name, "data"].join(".")}>
+            {data.todo.name} {data.todo.completed && "(completed)"}
           </span>
         </div>
       );
@@ -1168,50 +1168,50 @@ describe('useSuspenseQuery', () => {
 
     render(<App />);
 
-    expect(screen.getByText('Loading first')).toBeInTheDocument();
-    expect(screen.getByText('Loading second')).toBeInTheDocument();
+    expect(screen.getByText("Loading first")).toBeInTheDocument();
+    expect(screen.getByText("Loading second")).toBeInTheDocument();
 
     await waitFor(() => {
-      expect(screen.getByTestId('first.data')).toHaveTextContent(
-        'Take out trash'
+      expect(screen.getByTestId("first.data")).toHaveTextContent(
+        "Take out trash"
       );
     });
 
-    expect(screen.getByTestId('second.data')).toHaveTextContent(
-      'Take out trash'
+    expect(screen.getByTestId("second.data")).toHaveTextContent(
+      "Take out trash"
     );
 
-    await act(() => user.click(screen.getByText('Refetch first')));
+    await act(() => user.click(screen.getByText("Refetch first")));
 
     // Ensure that refetching the first todo does not update the second todo
     // as well
-    expect(screen.getByText('Loading first')).toBeInTheDocument();
-    expect(screen.queryByText('Loading second')).not.toBeInTheDocument();
+    expect(screen.getByText("Loading first")).toBeInTheDocument();
+    expect(screen.queryByText("Loading second")).not.toBeInTheDocument();
 
     await waitFor(() => {
-      expect(screen.getByTestId('first.data')).toHaveTextContent(
-        'Take out trash (completed)'
+      expect(screen.getByTestId("first.data")).toHaveTextContent(
+        "Take out trash (completed)"
       );
     });
 
     // Ensure that refetching the first todo did not affect the second
-    expect(screen.getByTestId('second.data')).toHaveTextContent(
-      'Take out trash'
+    expect(screen.getByTestId("second.data")).toHaveTextContent(
+      "Take out trash"
     );
   });
 
-  it('suspends and refetches data when changing query keys', async () => {
+  it("suspends and refetches data when changing query keys", async () => {
     const { query } = useSimpleQueryCase();
 
     const mocks = [
       {
         request: { query },
-        result: { data: { greeting: 'Hello first fetch' } },
+        result: { data: { greeting: "Hello first fetch" } },
         delay: 20,
       },
       {
         request: { query },
-        result: { data: { greeting: 'Hello second fetch' } },
+        result: { data: { greeting: "Hello second fetch" } },
         delay: 20,
       },
     ];
@@ -1219,23 +1219,23 @@ describe('useSuspenseQuery', () => {
     const { result, rerender, renders } = renderSuspenseHook(
       ({ queryKey }) =>
         // intentionally use a fetch policy that will execute a network request
-        useSuspenseQuery(query, { queryKey, fetchPolicy: 'network-only' }),
-      { mocks, initialProps: { queryKey: ['first'] } }
+        useSuspenseQuery(query, { queryKey, fetchPolicy: "network-only" }),
+      { mocks, initialProps: { queryKey: ["first"] } }
     );
 
     await waitFor(() => {
       expect(result.current).toMatchObject({
-        data: { greeting: 'Hello first fetch' },
+        data: { greeting: "Hello first fetch" },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       });
     });
 
-    rerender({ queryKey: ['second'] });
+    rerender({ queryKey: ["second"] });
 
     await waitFor(() => {
       expect(result.current).toMatchObject({
-        data: { greeting: 'Hello second fetch' },
+        data: { greeting: "Hello second fetch" },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       });
@@ -1245,30 +1245,30 @@ describe('useSuspenseQuery', () => {
     expect(renders.suspenseCount).toBe(2);
     expect(renders.frames).toMatchObject([
       {
-        data: { greeting: 'Hello first fetch' },
+        data: { greeting: "Hello first fetch" },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       },
       {
-        data: { greeting: 'Hello second fetch' },
+        data: { greeting: "Hello second fetch" },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       },
     ]);
   });
 
-  it('suspends and refetches data when part of the query key changes', async () => {
+  it("suspends and refetches data when part of the query key changes", async () => {
     const { query } = useSimpleQueryCase();
 
     const mocks = [
       {
         request: { query },
-        result: { data: { greeting: 'Hello first fetch' } },
+        result: { data: { greeting: "Hello first fetch" } },
         delay: 20,
       },
       {
         request: { query },
-        result: { data: { greeting: 'Hello second fetch' } },
+        result: { data: { greeting: "Hello second fetch" } },
         delay: 20,
       },
     ];
@@ -1276,23 +1276,23 @@ describe('useSuspenseQuery', () => {
     const { result, rerender, renders } = renderSuspenseHook(
       ({ queryKey }) =>
         // intentionally use a fetch policy that will execute a network request
-        useSuspenseQuery(query, { queryKey, fetchPolicy: 'network-only' }),
-      { mocks, initialProps: { queryKey: ['greeting', 1] } }
+        useSuspenseQuery(query, { queryKey, fetchPolicy: "network-only" }),
+      { mocks, initialProps: { queryKey: ["greeting", 1] } }
     );
 
     await waitFor(() => {
       expect(result.current).toMatchObject({
-        data: { greeting: 'Hello first fetch' },
+        data: { greeting: "Hello first fetch" },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       });
     });
 
-    rerender({ queryKey: ['greeting', 2] });
+    rerender({ queryKey: ["greeting", 2] });
 
     await waitFor(() => {
       expect(result.current).toMatchObject({
-        data: { greeting: 'Hello second fetch' },
+        data: { greeting: "Hello second fetch" },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       });
@@ -1302,30 +1302,30 @@ describe('useSuspenseQuery', () => {
     expect(renders.suspenseCount).toBe(2);
     expect(renders.frames).toMatchObject([
       {
-        data: { greeting: 'Hello first fetch' },
+        data: { greeting: "Hello first fetch" },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       },
       {
-        data: { greeting: 'Hello second fetch' },
+        data: { greeting: "Hello second fetch" },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       },
     ]);
   });
 
-  it('suspends and refetches when using plain string query keys', async () => {
+  it("suspends and refetches when using plain string query keys", async () => {
     const { query } = useSimpleQueryCase();
 
     const mocks = [
       {
         request: { query },
-        result: { data: { greeting: 'Hello first fetch' } },
+        result: { data: { greeting: "Hello first fetch" } },
         delay: 20,
       },
       {
         request: { query },
-        result: { data: { greeting: 'Hello second fetch' } },
+        result: { data: { greeting: "Hello second fetch" } },
         delay: 20,
       },
     ];
@@ -1333,23 +1333,23 @@ describe('useSuspenseQuery', () => {
     const { result, rerender, renders } = renderSuspenseHook(
       ({ queryKey }) =>
         // intentionally use a fetch policy that will execute a network request
-        useSuspenseQuery(query, { queryKey, fetchPolicy: 'network-only' }),
-      { mocks, initialProps: { queryKey: 'first' } }
+        useSuspenseQuery(query, { queryKey, fetchPolicy: "network-only" }),
+      { mocks, initialProps: { queryKey: "first" } }
     );
 
     await waitFor(() => {
       expect(result.current).toMatchObject({
-        data: { greeting: 'Hello first fetch' },
+        data: { greeting: "Hello first fetch" },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       });
     });
 
-    rerender({ queryKey: 'second' });
+    rerender({ queryKey: "second" });
 
     await waitFor(() => {
       expect(result.current).toMatchObject({
-        data: { greeting: 'Hello second fetch' },
+        data: { greeting: "Hello second fetch" },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       });
@@ -1359,30 +1359,30 @@ describe('useSuspenseQuery', () => {
     expect(renders.suspenseCount).toBe(2);
     expect(renders.frames).toMatchObject([
       {
-        data: { greeting: 'Hello first fetch' },
+        data: { greeting: "Hello first fetch" },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       },
       {
-        data: { greeting: 'Hello second fetch' },
+        data: { greeting: "Hello second fetch" },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       },
     ]);
   });
 
-  it('suspends and refetches when using numeric query keys', async () => {
+  it("suspends and refetches when using numeric query keys", async () => {
     const { query } = useSimpleQueryCase();
 
     const mocks = [
       {
         request: { query },
-        result: { data: { greeting: 'Hello first fetch' } },
+        result: { data: { greeting: "Hello first fetch" } },
         delay: 20,
       },
       {
         request: { query },
-        result: { data: { greeting: 'Hello second fetch' } },
+        result: { data: { greeting: "Hello second fetch" } },
         delay: 20,
       },
     ];
@@ -1390,13 +1390,13 @@ describe('useSuspenseQuery', () => {
     const { result, rerender, renders } = renderSuspenseHook(
       ({ queryKey }) =>
         // intentionally use a fetch policy that will execute a network request
-        useSuspenseQuery(query, { queryKey, fetchPolicy: 'network-only' }),
+        useSuspenseQuery(query, { queryKey, fetchPolicy: "network-only" }),
       { mocks, initialProps: { queryKey: 1 } }
     );
 
     await waitFor(() => {
       expect(result.current).toMatchObject({
-        data: { greeting: 'Hello first fetch' },
+        data: { greeting: "Hello first fetch" },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       });
@@ -1406,7 +1406,7 @@ describe('useSuspenseQuery', () => {
 
     await waitFor(() => {
       expect(result.current).toMatchObject({
-        data: { greeting: 'Hello second fetch' },
+        data: { greeting: "Hello second fetch" },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       });
@@ -1416,19 +1416,19 @@ describe('useSuspenseQuery', () => {
     expect(renders.suspenseCount).toBe(2);
     expect(renders.frames).toMatchObject([
       {
-        data: { greeting: 'Hello first fetch' },
+        data: { greeting: "Hello first fetch" },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       },
       {
-        data: { greeting: 'Hello second fetch' },
+        data: { greeting: "Hello second fetch" },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       },
     ]);
   });
 
-  it('responds to cache updates after changing variables', async () => {
+  it("responds to cache updates after changing variables", async () => {
     const { query, mocks } = useVariablesQueryCase();
 
     const client = new ApolloClient({
@@ -1438,7 +1438,7 @@ describe('useSuspenseQuery', () => {
 
     const { result, rerender, renders } = renderSuspenseHook(
       ({ id }) => useSuspenseQuery(query, { variables: { id } }),
-      { client, initialProps: { id: '1' } }
+      { client, initialProps: { id: "1" } }
     );
 
     await waitFor(() => {
@@ -1449,7 +1449,7 @@ describe('useSuspenseQuery', () => {
       });
     });
 
-    rerender({ id: '2' });
+    rerender({ id: "2" });
 
     await waitFor(() => {
       expect(result.current).toMatchObject({
@@ -1461,13 +1461,13 @@ describe('useSuspenseQuery', () => {
 
     client.writeQuery({
       query,
-      variables: { id: '2' },
-      data: { character: { id: '2', name: 'Cached hero' } },
+      variables: { id: "2" },
+      data: { character: { id: "2", name: "Cached hero" } },
     });
 
     await waitFor(() => {
       expect(result.current).toMatchObject({
-        data: { character: { id: '2', name: 'Cached hero' } },
+        data: { character: { id: "2", name: "Cached hero" } },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       });
@@ -1487,23 +1487,23 @@ describe('useSuspenseQuery', () => {
         error: undefined,
       },
       {
-        data: { character: { id: '2', name: 'Cached hero' } },
+        data: { character: { id: "2", name: "Cached hero" } },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       },
     ]);
   });
 
-  it('uses cached result and does not suspend when switching back to already used variables while using `cache-first` fetch policy', async () => {
+  it("uses cached result and does not suspend when switching back to already used variables while using `cache-first` fetch policy", async () => {
     const { query, mocks } = useVariablesQueryCase();
 
     const { result, rerender, renders } = renderSuspenseHook(
       ({ id }) =>
         useSuspenseQuery(query, {
-          fetchPolicy: 'cache-first',
+          fetchPolicy: "cache-first",
           variables: { id },
         }),
-      { mocks, initialProps: { id: '1' } }
+      { mocks, initialProps: { id: "1" } }
     );
 
     await waitFor(() => {
@@ -1514,7 +1514,7 @@ describe('useSuspenseQuery', () => {
       });
     });
 
-    rerender({ id: '2' });
+    rerender({ id: "2" });
 
     await waitFor(() => {
       expect(result.current).toMatchObject({
@@ -1524,7 +1524,7 @@ describe('useSuspenseQuery', () => {
       });
     });
 
-    rerender({ id: '1' });
+    rerender({ id: "1" });
 
     expect(result.current).toMatchObject({
       ...mocks[0].result,
@@ -1553,7 +1553,7 @@ describe('useSuspenseQuery', () => {
     ]);
   });
 
-  it('uses cached result with network request and does not suspend when switching back to already used variables while using `cache-and-network` fetch policy', async () => {
+  it("uses cached result with network request and does not suspend when switching back to already used variables while using `cache-and-network` fetch policy", async () => {
     const query: TypedDocumentNode<
       VariablesCaseData,
       VariablesCaseVariables
@@ -1568,33 +1568,33 @@ describe('useSuspenseQuery', () => {
 
     const mocks = [
       {
-        request: { query, variables: { id: '1' } },
+        request: { query, variables: { id: "1" } },
         result: {
           data: {
-            character: { __typename: 'Character', id: '1', name: 'Spider-Man' },
+            character: { __typename: "Character", id: "1", name: "Spider-Man" },
           },
         },
       },
       {
-        request: { query, variables: { id: '2' } },
+        request: { query, variables: { id: "2" } },
         result: {
           data: {
             character: {
-              __typename: 'Character',
-              id: '2',
-              name: 'Black Widow',
+              __typename: "Character",
+              id: "2",
+              name: "Black Widow",
             },
           },
         },
       },
       {
-        request: { query, variables: { id: '1' } },
+        request: { query, variables: { id: "1" } },
         result: {
           data: {
             character: {
-              __typename: 'Character',
-              id: '1',
-              name: 'Spider-Man (refetch)',
+              __typename: "Character",
+              id: "1",
+              name: "Spider-Man (refetch)",
             },
           },
         },
@@ -1604,10 +1604,10 @@ describe('useSuspenseQuery', () => {
     const { result, rerender, renders } = renderSuspenseHook(
       ({ id }) =>
         useSuspenseQuery(query, {
-          fetchPolicy: 'cache-and-network',
+          fetchPolicy: "cache-and-network",
           variables: { id },
         }),
-      { mocks, initialProps: { id: '1' } }
+      { mocks, initialProps: { id: "1" } }
     );
 
     await waitFor(() => {
@@ -1618,7 +1618,7 @@ describe('useSuspenseQuery', () => {
       });
     });
 
-    rerender({ id: '2' });
+    rerender({ id: "2" });
 
     await waitFor(() => {
       expect(result.current).toMatchObject({
@@ -1628,7 +1628,7 @@ describe('useSuspenseQuery', () => {
       });
     });
 
-    rerender({ id: '1' });
+    rerender({ id: "1" });
 
     expect(result.current).toMatchObject({
       ...mocks[0].result,
@@ -1670,7 +1670,7 @@ describe('useSuspenseQuery', () => {
     ]);
   });
 
-  it('refetches and suspends when switching back to already used variables while using `network-only` fetch policy', async () => {
+  it("refetches and suspends when switching back to already used variables while using `network-only` fetch policy", async () => {
     const query: TypedDocumentNode<
       VariablesCaseData,
       VariablesCaseVariables
@@ -1685,33 +1685,33 @@ describe('useSuspenseQuery', () => {
 
     const mocks = [
       {
-        request: { query, variables: { id: '1' } },
+        request: { query, variables: { id: "1" } },
         result: {
           data: {
-            character: { __typename: 'Character', id: '1', name: 'Spider-Man' },
+            character: { __typename: "Character", id: "1", name: "Spider-Man" },
           },
         },
       },
       {
-        request: { query, variables: { id: '2' } },
+        request: { query, variables: { id: "2" } },
         result: {
           data: {
             character: {
-              __typename: 'Character',
-              id: '2',
-              name: 'Black Widow',
+              __typename: "Character",
+              id: "2",
+              name: "Black Widow",
             },
           },
         },
       },
       {
-        request: { query, variables: { id: '1' } },
+        request: { query, variables: { id: "1" } },
         result: {
           data: {
             character: {
-              __typename: 'Character',
-              id: '1',
-              name: 'Spider-Man (refetch)',
+              __typename: "Character",
+              id: "1",
+              name: "Spider-Man (refetch)",
             },
           },
         },
@@ -1721,10 +1721,10 @@ describe('useSuspenseQuery', () => {
     const { result, rerender, renders } = renderSuspenseHook(
       ({ id }) =>
         useSuspenseQuery(query, {
-          fetchPolicy: 'network-only',
+          fetchPolicy: "network-only",
           variables: { id },
         }),
-      { mocks, initialProps: { id: '1' } }
+      { mocks, initialProps: { id: "1" } }
     );
 
     await waitFor(() => {
@@ -1735,7 +1735,7 @@ describe('useSuspenseQuery', () => {
       });
     });
 
-    rerender({ id: '2' });
+    rerender({ id: "2" });
 
     await waitFor(() => {
       expect(result.current).toMatchObject({
@@ -1745,7 +1745,7 @@ describe('useSuspenseQuery', () => {
       });
     });
 
-    rerender({ id: '1' });
+    rerender({ id: "1" });
 
     await waitFor(() => {
       expect(result.current).toMatchObject({
@@ -1776,7 +1776,7 @@ describe('useSuspenseQuery', () => {
     ]);
   });
 
-  it('refetches and suspends when switching back to already used variables while using `no-cache` fetch policy', async () => {
+  it("refetches and suspends when switching back to already used variables while using `no-cache` fetch policy", async () => {
     const query: TypedDocumentNode<
       VariablesCaseData,
       VariablesCaseVariables
@@ -1791,33 +1791,33 @@ describe('useSuspenseQuery', () => {
 
     const mocks = [
       {
-        request: { query, variables: { id: '1' } },
+        request: { query, variables: { id: "1" } },
         result: {
           data: {
-            character: { __typename: 'Character', id: '1', name: 'Spider-Man' },
+            character: { __typename: "Character", id: "1", name: "Spider-Man" },
           },
         },
       },
       {
-        request: { query, variables: { id: '2' } },
+        request: { query, variables: { id: "2" } },
         result: {
           data: {
             character: {
-              __typename: 'Character',
-              id: '2',
-              name: 'Black Widow',
+              __typename: "Character",
+              id: "2",
+              name: "Black Widow",
             },
           },
         },
       },
       {
-        request: { query, variables: { id: '1' } },
+        request: { query, variables: { id: "1" } },
         result: {
           data: {
             character: {
-              __typename: 'Character',
-              id: '1',
-              name: 'Spider-Man (refetch)',
+              __typename: "Character",
+              id: "1",
+              name: "Spider-Man (refetch)",
             },
           },
         },
@@ -1827,10 +1827,10 @@ describe('useSuspenseQuery', () => {
     const { result, rerender, renders } = renderSuspenseHook(
       ({ id }) =>
         useSuspenseQuery(query, {
-          fetchPolicy: 'no-cache',
+          fetchPolicy: "no-cache",
           variables: { id },
         }),
-      { mocks, initialProps: { id: '1' } }
+      { mocks, initialProps: { id: "1" } }
     );
 
     await waitFor(() => {
@@ -1841,7 +1841,7 @@ describe('useSuspenseQuery', () => {
       });
     });
 
-    rerender({ id: '2' });
+    rerender({ id: "2" });
 
     await waitFor(() => {
       expect(result.current).toMatchObject({
@@ -1851,7 +1851,7 @@ describe('useSuspenseQuery', () => {
       });
     });
 
-    rerender({ id: '1' });
+    rerender({ id: "1" });
 
     await waitFor(() => {
       expect(result.current).toMatchObject({
@@ -1882,7 +1882,7 @@ describe('useSuspenseQuery', () => {
     ]);
   });
 
-  it('responds to cache updates after changing back to already fetched variables', async () => {
+  it("responds to cache updates after changing back to already fetched variables", async () => {
     const { query, mocks } = useVariablesQueryCase();
 
     const client = new ApolloClient({
@@ -1892,7 +1892,7 @@ describe('useSuspenseQuery', () => {
 
     const { result, rerender, renders } = renderSuspenseHook(
       ({ id }) => useSuspenseQuery(query, { variables: { id } }),
-      { client, initialProps: { id: '1' } }
+      { client, initialProps: { id: "1" } }
     );
 
     await waitFor(() => {
@@ -1903,7 +1903,7 @@ describe('useSuspenseQuery', () => {
       });
     });
 
-    rerender({ id: '2' });
+    rerender({ id: "2" });
 
     await waitFor(() => {
       expect(result.current).toMatchObject({
@@ -1913,7 +1913,7 @@ describe('useSuspenseQuery', () => {
       });
     });
 
-    rerender({ id: '1' });
+    rerender({ id: "1" });
 
     await waitFor(() => {
       expect(result.current).toMatchObject({
@@ -1925,13 +1925,13 @@ describe('useSuspenseQuery', () => {
 
     client.writeQuery({
       query,
-      variables: { id: '1' },
-      data: { character: { id: '1', name: 'Cached hero' } },
+      variables: { id: "1" },
+      data: { character: { id: "1", name: "Cached hero" } },
     });
 
     await waitFor(() => {
       expect(result.current).toMatchObject({
-        data: { character: { id: '1', name: 'Cached hero' } },
+        data: { character: { id: "1", name: "Cached hero" } },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       });
@@ -1956,7 +1956,7 @@ describe('useSuspenseQuery', () => {
         error: undefined,
       },
       {
-        data: { character: { id: '1', name: 'Cached hero' } },
+        data: { character: { id: "1", name: "Cached hero" } },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       },
@@ -1970,16 +1970,16 @@ describe('useSuspenseQuery', () => {
 
     cache.writeQuery({
       query,
-      data: { greeting: 'hello from cache' },
+      data: { greeting: "hello from cache" },
     });
 
     const { result, renders } = renderSuspenseHook(
-      () => useSuspenseQuery(query, { fetchPolicy: 'cache-first' }),
+      () => useSuspenseQuery(query, { fetchPolicy: "cache-first" }),
       { cache, mocks }
     );
 
     expect(result.current).toMatchObject({
-      data: { greeting: 'hello from cache' },
+      data: { greeting: "hello from cache" },
       networkStatus: NetworkStatus.ready,
       error: undefined,
     });
@@ -1988,7 +1988,7 @@ describe('useSuspenseQuery', () => {
     expect(renders.suspenseCount).toBe(0);
     expect(renders.frames).toMatchObject([
       {
-        data: { greeting: 'hello from cache' },
+        data: { greeting: "hello from cache" },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       },
@@ -2014,12 +2014,12 @@ describe('useSuspenseQuery', () => {
 
     cache.writeQuery({
       query,
-      data: { greeting: 'hello from cache' },
+      data: { greeting: "hello from cache" },
     });
 
     renderSuspenseHook(
-      () => useSuspenseQuery(query, { fetchPolicy: 'cache-first' }),
-      { cache, link, initialProps: { id: '1' } }
+      () => useSuspenseQuery(query, { fetchPolicy: "cache-first" }),
+      { cache, link, initialProps: { id: "1" } }
     );
 
     expect(fetchCount).toBe(0);
@@ -2046,7 +2046,7 @@ describe('useSuspenseQuery', () => {
     const mocks = [
       {
         request: { query: fullQuery },
-        result: { data: { character: { id: '1', name: 'Doctor Strange' } } },
+        result: { data: { character: { id: "1", name: "Doctor Strange" } } },
       },
     ];
 
@@ -2054,11 +2054,11 @@ describe('useSuspenseQuery', () => {
 
     cache.writeQuery({
       query: partialQuery,
-      data: { character: { id: '1' } },
+      data: { character: { id: "1" } },
     });
 
     const { result, renders } = renderSuspenseHook(
-      () => useSuspenseQuery(fullQuery, { fetchPolicy: 'cache-first' }),
+      () => useSuspenseQuery(fullQuery, { fetchPolicy: "cache-first" }),
       { cache, mocks }
     );
 
@@ -2102,7 +2102,7 @@ describe('useSuspenseQuery', () => {
     const mocks = [
       {
         request: { query: fullQuery },
-        result: { data: { character: { id: '1', name: 'Doctor Strange' } } },
+        result: { data: { character: { id: "1", name: "Doctor Strange" } } },
       },
     ];
 
@@ -2110,13 +2110,13 @@ describe('useSuspenseQuery', () => {
 
     cache.writeQuery({
       query: partialQuery,
-      data: { character: { id: '1' } },
+      data: { character: { id: "1" } },
     });
 
     const { result, renders } = renderSuspenseHook(
       () =>
         useSuspenseQuery(fullQuery, {
-          fetchPolicy: 'cache-first',
+          fetchPolicy: "cache-first",
           returnPartialData: true,
         }),
       { cache, mocks }
@@ -2124,7 +2124,7 @@ describe('useSuspenseQuery', () => {
 
     expect(renders.suspenseCount).toBe(0);
     expect(result.current).toMatchObject({
-      data: { character: { id: '1' } },
+      data: { character: { id: "1" } },
       networkStatus: NetworkStatus.loading,
       error: undefined,
     });
@@ -2141,7 +2141,7 @@ describe('useSuspenseQuery', () => {
     expect(renders.suspenseCount).toBe(0);
     expect(renders.frames).toMatchObject([
       {
-        data: { character: { id: '1' } },
+        data: { character: { id: "1" } },
         networkStatus: NetworkStatus.loading,
         error: undefined,
       },
@@ -2168,23 +2168,23 @@ describe('useSuspenseQuery', () => {
 
     cache.writeQuery({
       query: partialQuery,
-      data: { character: { id: '1' } },
-      variables: { id: '1' },
+      data: { character: { id: "1" } },
+      variables: { id: "1" },
     });
 
     const { result, renders, rerender } = renderSuspenseHook(
       ({ id }) =>
         useSuspenseQuery(fullQuery, {
-          fetchPolicy: 'cache-first',
+          fetchPolicy: "cache-first",
           returnPartialData: true,
           variables: { id },
         }),
-      { cache, mocks, initialProps: { id: '1' } }
+      { cache, mocks, initialProps: { id: "1" } }
     );
 
     expect(renders.suspenseCount).toBe(0);
     expect(result.current).toMatchObject({
-      data: { character: { id: '1' } },
+      data: { character: { id: "1" } },
       networkStatus: NetworkStatus.loading,
       error: undefined,
     });
@@ -2197,7 +2197,7 @@ describe('useSuspenseQuery', () => {
       });
     });
 
-    rerender({ id: '2' });
+    rerender({ id: "2" });
 
     await waitFor(() => {
       expect(result.current).toMatchObject({
@@ -2211,7 +2211,7 @@ describe('useSuspenseQuery', () => {
     expect(renders.suspenseCount).toBe(1);
     expect(renders.frames).toMatchObject([
       {
-        data: { character: { id: '1' } },
+        data: { character: { id: "1" } },
         networkStatus: NetworkStatus.loading,
         error: undefined,
       },
@@ -2235,11 +2235,11 @@ describe('useSuspenseQuery', () => {
 
     cache.writeQuery({
       query,
-      data: { greeting: 'hello from cache' },
+      data: { greeting: "hello from cache" },
     });
 
     const { result, renders } = renderSuspenseHook(
-      () => useSuspenseQuery(query, { fetchPolicy: 'network-only' }),
+      () => useSuspenseQuery(query, { fetchPolicy: "network-only" }),
       { cache, mocks }
     );
 
@@ -2255,7 +2255,7 @@ describe('useSuspenseQuery', () => {
     expect(renders.suspenseCount).toBe(1);
     expect(renders.frames).toMatchObject([
       {
-        data: { greeting: 'Hello' },
+        data: { greeting: "Hello" },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       },
@@ -2283,7 +2283,7 @@ describe('useSuspenseQuery', () => {
     const mocks = [
       {
         request: { query: fullQuery },
-        result: { data: { character: { id: '1', name: 'Doctor Strange' } } },
+        result: { data: { character: { id: "1", name: "Doctor Strange" } } },
       },
     ];
 
@@ -2291,13 +2291,13 @@ describe('useSuspenseQuery', () => {
 
     cache.writeQuery({
       query: partialQuery,
-      data: { character: { id: '1' } },
+      data: { character: { id: "1" } },
     });
 
     const { result, renders } = renderSuspenseHook(
       () =>
         useSuspenseQuery(fullQuery, {
-          fetchPolicy: 'network-only',
+          fetchPolicy: "network-only",
           returnPartialData: true,
         }),
       { cache, mocks }
@@ -2331,11 +2331,11 @@ describe('useSuspenseQuery', () => {
 
     cache.writeQuery({
       query,
-      data: { greeting: 'hello from cache' },
+      data: { greeting: "hello from cache" },
     });
 
     const { result, renders } = renderSuspenseHook(
-      () => useSuspenseQuery(query, { fetchPolicy: 'no-cache' }),
+      () => useSuspenseQuery(query, { fetchPolicy: "no-cache" }),
       { cache, mocks }
     );
 
@@ -2353,12 +2353,12 @@ describe('useSuspenseQuery', () => {
     expect(renders.suspenseCount).toBe(1);
     expect(renders.frames).toMatchObject([
       {
-        data: { greeting: 'Hello' },
+        data: { greeting: "Hello" },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       },
     ]);
-    expect(cachedData).toEqual({ greeting: 'hello from cache' });
+    expect(cachedData).toEqual({ greeting: "hello from cache" });
   });
 
   it('maintains results when rerendering a query using a "no-cache" fetch policy', async () => {
@@ -2367,7 +2367,7 @@ describe('useSuspenseQuery', () => {
     const cache = new InMemoryCache();
 
     const { result, rerender, renders } = renderSuspenseHook(
-      () => useSuspenseQuery(query, { fetchPolicy: 'no-cache' }),
+      () => useSuspenseQuery(query, { fetchPolicy: "no-cache" }),
       { cache, mocks }
     );
 
@@ -2383,7 +2383,7 @@ describe('useSuspenseQuery', () => {
     expect(renders.suspenseCount).toBe(1);
     expect(renders.frames).toMatchObject([
       {
-        data: { greeting: 'Hello' },
+        data: { greeting: "Hello" },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       },
@@ -2400,12 +2400,12 @@ describe('useSuspenseQuery', () => {
     expect(renders.suspenseCount).toBe(1);
     expect(renders.frames).toMatchObject([
       {
-        data: { greeting: 'Hello' },
+        data: { greeting: "Hello" },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       },
       {
-        data: { greeting: 'Hello' },
+        data: { greeting: "Hello" },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       },
@@ -2413,7 +2413,7 @@ describe('useSuspenseQuery', () => {
   });
 
   it('suspends when partial data is in the cache and using a "no-cache" fetch policy with returnPartialData', async () => {
-    const consoleSpy = jest.spyOn(console, 'warn').mockImplementation();
+    const consoleSpy = jest.spyOn(console, "warn").mockImplementation();
 
     const fullQuery = gql`
       query {
@@ -2435,7 +2435,7 @@ describe('useSuspenseQuery', () => {
     const mocks = [
       {
         request: { query: fullQuery },
-        result: { data: { character: { id: '1', name: 'Doctor Strange' } } },
+        result: { data: { character: { id: "1", name: "Doctor Strange" } } },
       },
     ];
 
@@ -2443,13 +2443,13 @@ describe('useSuspenseQuery', () => {
 
     cache.writeQuery({
       query: partialQuery,
-      data: { character: { id: '1' } },
+      data: { character: { id: "1" } },
     });
 
     const { result, renders } = renderSuspenseHook(
       () =>
         useSuspenseQuery(fullQuery, {
-          fetchPolicy: 'no-cache',
+          fetchPolicy: "no-cache",
           returnPartialData: true,
         }),
       { cache, mocks }
@@ -2479,14 +2479,14 @@ describe('useSuspenseQuery', () => {
   });
 
   it('warns when using returnPartialData with a "no-cache" fetch policy', async () => {
-    const consoleSpy = jest.spyOn(console, 'warn').mockImplementation();
+    const consoleSpy = jest.spyOn(console, "warn").mockImplementation();
 
     const { query, mocks } = useSimpleQueryCase();
 
     renderSuspenseHook(
       () =>
         useSuspenseQuery(query, {
-          fetchPolicy: 'no-cache',
+          fetchPolicy: "no-cache",
           returnPartialData: true,
         }),
       { mocks }
@@ -2494,7 +2494,7 @@ describe('useSuspenseQuery', () => {
 
     expect(console.warn).toHaveBeenCalledTimes(1);
     expect(console.warn).toHaveBeenCalledWith(
-      'Using `returnPartialData` with a `no-cache` fetch policy has no effect. To read partial data from the cache, consider using an alternate fetch policy.'
+      "Using `returnPartialData` with a `no-cache` fetch policy has no effect. To read partial data from the cache, consider using an alternate fetch policy."
     );
 
     consoleSpy.mockRestore();
@@ -2507,16 +2507,16 @@ describe('useSuspenseQuery', () => {
 
     cache.writeQuery({
       query,
-      data: { greeting: 'hello from cache' },
+      data: { greeting: "hello from cache" },
     });
 
     const { result, renders } = renderSuspenseHook(
-      () => useSuspenseQuery(query, { fetchPolicy: 'cache-and-network' }),
+      () => useSuspenseQuery(query, { fetchPolicy: "cache-and-network" }),
       { cache, mocks }
     );
 
     expect(result.current).toMatchObject({
-      data: { greeting: 'hello from cache' },
+      data: { greeting: "hello from cache" },
       networkStatus: NetworkStatus.loading,
       error: undefined,
     });
@@ -2533,12 +2533,12 @@ describe('useSuspenseQuery', () => {
     expect(renders.suspenseCount).toBe(0);
     expect(renders.frames).toMatchObject([
       {
-        data: { greeting: 'hello from cache' },
+        data: { greeting: "hello from cache" },
         networkStatus: NetworkStatus.loading,
         error: undefined,
       },
       {
-        data: { greeting: 'Hello' },
+        data: { greeting: "Hello" },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       },
@@ -2566,7 +2566,7 @@ describe('useSuspenseQuery', () => {
     const mocks = [
       {
         request: { query: fullQuery },
-        result: { data: { character: { id: '1', name: 'Doctor Strange' } } },
+        result: { data: { character: { id: "1", name: "Doctor Strange" } } },
       },
     ];
 
@@ -2574,13 +2574,13 @@ describe('useSuspenseQuery', () => {
 
     cache.writeQuery({
       query: partialQuery,
-      data: { character: { id: '1' } },
+      data: { character: { id: "1" } },
     });
 
     const { result, renders } = renderSuspenseHook(
       () =>
         useSuspenseQuery(fullQuery, {
-          fetchPolicy: 'cache-and-network',
+          fetchPolicy: "cache-and-network",
           returnPartialData: true,
         }),
       { cache, mocks }
@@ -2588,7 +2588,7 @@ describe('useSuspenseQuery', () => {
 
     expect(renders.suspenseCount).toBe(0);
     expect(result.current).toMatchObject({
-      data: { character: { id: '1' } },
+      data: { character: { id: "1" } },
       networkStatus: NetworkStatus.loading,
       error: undefined,
     });
@@ -2605,7 +2605,7 @@ describe('useSuspenseQuery', () => {
     expect(renders.suspenseCount).toBe(0);
     expect(renders.frames).toMatchObject([
       {
-        data: { character: { id: '1' } },
+        data: { character: { id: "1" } },
         networkStatus: NetworkStatus.loading,
         error: undefined,
       },
@@ -2632,23 +2632,23 @@ describe('useSuspenseQuery', () => {
 
     cache.writeQuery({
       query: partialQuery,
-      data: { character: { id: '1' } },
-      variables: { id: '1' },
+      data: { character: { id: "1" } },
+      variables: { id: "1" },
     });
 
     const { result, renders, rerender } = renderSuspenseHook(
       ({ id }) =>
         useSuspenseQuery(fullQuery, {
-          fetchPolicy: 'cache-and-network',
+          fetchPolicy: "cache-and-network",
           returnPartialData: true,
           variables: { id },
         }),
-      { cache, mocks, initialProps: { id: '1' } }
+      { cache, mocks, initialProps: { id: "1" } }
     );
 
     expect(renders.suspenseCount).toBe(0);
     expect(result.current).toMatchObject({
-      data: { character: { id: '1' } },
+      data: { character: { id: "1" } },
       networkStatus: NetworkStatus.loading,
       error: undefined,
     });
@@ -2661,7 +2661,7 @@ describe('useSuspenseQuery', () => {
       });
     });
 
-    rerender({ id: '2' });
+    rerender({ id: "2" });
 
     await waitFor(() => {
       expect(result.current).toMatchObject({
@@ -2675,7 +2675,7 @@ describe('useSuspenseQuery', () => {
     expect(renders.suspenseCount).toBe(1);
     expect(renders.frames).toMatchObject([
       {
-        data: { character: { id: '1' } },
+        data: { character: { id: "1" } },
         networkStatus: NetworkStatus.loading,
         error: undefined,
       },
@@ -2693,9 +2693,9 @@ describe('useSuspenseQuery', () => {
   });
 
   it.each<SuspenseQueryHookFetchPolicy>([
-    'cache-first',
-    'network-only',
-    'cache-and-network',
+    "cache-first",
+    "network-only",
+    "cache-and-network",
   ])(
     'writes to the cache when using a "%s" fetch policy',
     async (fetchPolicy) => {
@@ -2705,14 +2705,14 @@ describe('useSuspenseQuery', () => {
 
       const { result } = renderSuspenseHook(
         ({ id }) => useSuspenseQuery(query, { fetchPolicy, variables: { id } }),
-        { cache, mocks, initialProps: { id: '1' } }
+        { cache, mocks, initialProps: { id: "1" } }
       );
 
       await waitFor(() => {
         expect(result.current.data).toEqual(mocks[0].result.data);
       });
 
-      const cachedData = cache.readQuery({ query, variables: { id: '1' } });
+      const cachedData = cache.readQuery({ query, variables: { id: "1" } });
 
       expect(cachedData).toEqual(mocks[0].result.data);
     }
@@ -2725,23 +2725,23 @@ describe('useSuspenseQuery', () => {
 
     const { result } = renderSuspenseHook(
       ({ id }) =>
-        useSuspenseQuery(query, { fetchPolicy: 'no-cache', variables: { id } }),
-      { cache, mocks, initialProps: { id: '1' } }
+        useSuspenseQuery(query, { fetchPolicy: "no-cache", variables: { id } }),
+      { cache, mocks, initialProps: { id: "1" } }
     );
 
     await waitFor(() => {
       expect(result.current.data).toEqual(mocks[0].result.data);
     });
 
-    const cachedData = cache.readQuery({ query, variables: { id: '1' } });
+    const cachedData = cache.readQuery({ query, variables: { id: "1" } });
 
     expect(cachedData).toBeNull();
   });
 
   it.each<SuspenseQueryHookFetchPolicy>([
-    'cache-first',
-    'network-only',
-    'cache-and-network',
+    "cache-first",
+    "network-only",
+    "cache-and-network",
   ])(
     'responds to cache updates when using a "%s" fetch policy',
     async (fetchPolicy) => {
@@ -2763,12 +2763,12 @@ describe('useSuspenseQuery', () => {
 
       client.writeQuery({
         query,
-        data: { greeting: 'Updated hello' },
+        data: { greeting: "Updated hello" },
       });
 
       await waitFor(() => {
         expect(result.current).toMatchObject({
-          data: { greeting: 'Updated hello' },
+          data: { greeting: "Updated hello" },
           networkStatus: NetworkStatus.ready,
           error: undefined,
         });
@@ -2782,7 +2782,7 @@ describe('useSuspenseQuery', () => {
           error: undefined,
         },
         {
-          data: { greeting: 'Updated hello' },
+          data: { greeting: "Updated hello" },
           networkStatus: NetworkStatus.ready,
           error: undefined,
         },
@@ -2799,7 +2799,7 @@ describe('useSuspenseQuery', () => {
     });
 
     const { result, renders } = renderSuspenseHook(
-      () => useSuspenseQuery(query, { fetchPolicy: 'no-cache' }),
+      () => useSuspenseQuery(query, { fetchPolicy: "no-cache" }),
       { client }
     );
 
@@ -2809,7 +2809,7 @@ describe('useSuspenseQuery', () => {
 
     client.writeQuery({
       query,
-      data: { greeting: 'Updated hello' },
+      data: { greeting: "Updated hello" },
     });
 
     // Wait for a while to ensure no updates happen asynchronously
@@ -2832,10 +2832,10 @@ describe('useSuspenseQuery', () => {
   });
 
   it.each<SuspenseQueryHookFetchPolicy>([
-    'cache-first',
-    'network-only',
-    'no-cache',
-    'cache-and-network',
+    "cache-first",
+    "network-only",
+    "no-cache",
+    "cache-and-network",
   ])(
     're-suspends the component when changing variables and using a "%s" fetch policy',
     async (fetchPolicy) => {
@@ -2843,7 +2843,7 @@ describe('useSuspenseQuery', () => {
 
       const { result, rerender, renders } = renderSuspenseHook(
         ({ id }) => useSuspenseQuery(query, { fetchPolicy, variables: { id } }),
-        { mocks, initialProps: { id: '1' } }
+        { mocks, initialProps: { id: "1" } }
       );
 
       expect(renders.suspenseCount).toBe(1);
@@ -2854,7 +2854,7 @@ describe('useSuspenseQuery', () => {
         });
       });
 
-      rerender({ id: '2' });
+      rerender({ id: "2" });
 
       await waitFor(() => {
         expect(result.current).toMatchObject({
@@ -2887,10 +2887,10 @@ describe('useSuspenseQuery', () => {
   );
 
   it.each<SuspenseQueryHookFetchPolicy>([
-    'cache-first',
-    'network-only',
-    'no-cache',
-    'cache-and-network',
+    "cache-first",
+    "network-only",
+    "no-cache",
+    "cache-and-network",
   ])(
     're-suspends the component when changing queries and using a "%s" fetch policy',
     async (fetchPolicy) => {
@@ -2909,11 +2909,11 @@ describe('useSuspenseQuery', () => {
       const mocks = [
         {
           request: { query: query1 },
-          result: { data: { hello: 'query1' } },
+          result: { data: { hello: "query1" } },
         },
         {
           request: { query: query2 },
-          result: { data: { world: 'query2' } },
+          result: { data: { world: "query2" } },
         },
       ];
 
@@ -2964,10 +2964,10 @@ describe('useSuspenseQuery', () => {
   );
 
   it.each<SuspenseQueryHookFetchPolicy>([
-    'cache-first',
-    'network-only',
-    'no-cache',
-    'cache-and-network',
+    "cache-first",
+    "network-only",
+    "no-cache",
+    "cache-and-network",
   ])(
     'ensures data is fetched the correct amount of times when changing variables and using a "%s" fetch policy',
     async (fetchPolicy) => {
@@ -2984,7 +2984,7 @@ describe('useSuspenseQuery', () => {
           );
 
           if (!mock) {
-            throw new Error('Could not find mock for operation');
+            throw new Error("Could not find mock for operation");
           }
 
           observer.next(mock.result);
@@ -2994,7 +2994,7 @@ describe('useSuspenseQuery', () => {
 
       const { result, rerender } = renderSuspenseHook(
         ({ id }) => useSuspenseQuery(query, { fetchPolicy, variables: { id } }),
-        { link, initialProps: { id: '1' } }
+        { link, initialProps: { id: "1" } }
       );
 
       await waitFor(() => {
@@ -3003,7 +3003,7 @@ describe('useSuspenseQuery', () => {
 
       expect(fetchCount).toBe(1);
 
-      rerender({ id: '2' });
+      rerender({ id: "2" });
 
       await waitFor(() => {
         expect(result.current.data).toEqual(mocks[1].result.data);
@@ -3014,10 +3014,10 @@ describe('useSuspenseQuery', () => {
   );
 
   it.each<SuspenseQueryHookFetchPolicy>([
-    'cache-first',
-    'network-only',
-    'no-cache',
-    'cache-and-network',
+    "cache-first",
+    "network-only",
+    "no-cache",
+    "cache-and-network",
   ])(
     'ensures data is fetched and suspended the correct amount of times in strict mode while using a "%s" fetch policy',
     async (fetchPolicy) => {
@@ -3034,7 +3034,7 @@ describe('useSuspenseQuery', () => {
           );
 
           if (!mock) {
-            throw new Error('Could not find mock for operation');
+            throw new Error("Could not find mock for operation");
           }
 
           observer.next(mock.result);
@@ -3044,7 +3044,7 @@ describe('useSuspenseQuery', () => {
 
       const { result, renders } = renderSuspenseHook(
         ({ id }) => useSuspenseQuery(query, { fetchPolicy, variables: { id } }),
-        { strictMode: true, link, initialProps: { id: '1' } }
+        { strictMode: true, link, initialProps: { id: "1" } }
       );
 
       await waitFor(() => {
@@ -3061,9 +3061,9 @@ describe('useSuspenseQuery', () => {
   );
 
   it.each<SuspenseQueryHookFetchPolicy>([
-    'cache-first',
-    'network-only',
-    'cache-and-network',
+    "cache-first",
+    "network-only",
+    "cache-and-network",
   ])(
     'responds to cache updates in strict mode while using a "%s" fetch policy',
     async (fetchPolicy) => {
@@ -3085,12 +3085,12 @@ describe('useSuspenseQuery', () => {
 
       client.writeQuery({
         query,
-        data: { greeting: 'Updated hello' },
+        data: { greeting: "Updated hello" },
       });
 
       await waitFor(() => {
         expect(result.current).toMatchObject({
-          data: { greeting: 'Updated hello' },
+          data: { greeting: "Updated hello" },
           networkStatus: NetworkStatus.ready,
           error: undefined,
         });
@@ -3099,7 +3099,7 @@ describe('useSuspenseQuery', () => {
   );
 
   // https://github.com/apollographql/apollo-client/issues/10478
-  it('responds to cache updates when data is already in the cache while using a cache-first fetch policy', async () => {
+  it("responds to cache updates when data is already in the cache while using a cache-first fetch policy", async () => {
     const { query, mocks } = useSimpleQueryCase();
 
     const client = new ApolloClient({
@@ -3109,15 +3109,15 @@ describe('useSuspenseQuery', () => {
 
     client.writeQuery({
       query,
-      data: { greeting: 'Hello from cache' },
+      data: { greeting: "Hello from cache" },
     });
 
     const { result } = renderSuspenseHook(
-      () => useSuspenseQuery(query, { fetchPolicy: 'cache-first' }),
+      () => useSuspenseQuery(query, { fetchPolicy: "cache-first" }),
       { client }
     );
 
-    expect(result.current.data).toEqual({ greeting: 'Hello from cache' });
+    expect(result.current.data).toEqual({ greeting: "Hello from cache" });
 
     // Allow time for the subscription in the hook to set itself up since it is
     // wrapped in a setTimeout (to handle Strict mode bugs). Without this
@@ -3128,18 +3128,18 @@ describe('useSuspenseQuery', () => {
 
     client.writeQuery({
       query,
-      data: { greeting: 'Updated hello' },
+      data: { greeting: "Updated hello" },
     });
 
     await waitFor(() => {
       expect(result.current).toMatchObject({
-        data: { greeting: 'Updated hello' },
+        data: { greeting: "Updated hello" },
         error: undefined,
       });
     });
   });
 
-  it('uses the default fetch policy from the client when none provided in options', async () => {
+  it("uses the default fetch policy from the client when none provided in options", async () => {
     const { query, mocks } = useSimpleQueryCase();
 
     const cache = new InMemoryCache();
@@ -3149,12 +3149,12 @@ describe('useSuspenseQuery', () => {
       link: new MockLink(mocks),
       defaultOptions: {
         watchQuery: {
-          fetchPolicy: 'network-only',
+          fetchPolicy: "network-only",
         },
       },
     });
 
-    client.writeQuery({ query, data: { greeting: 'hello from cache' } });
+    client.writeQuery({ query, data: { greeting: "hello from cache" } });
 
     const { result, renders } = renderSuspenseHook(
       () => useSuspenseQuery(query),
@@ -3176,7 +3176,7 @@ describe('useSuspenseQuery', () => {
     ]);
   });
 
-  it('uses default variables from the client when none provided in options', async () => {
+  it("uses default variables from the client when none provided in options", async () => {
     const { query, mocks } = useVariablesQueryCase();
 
     const client = new ApolloClient({
@@ -3184,7 +3184,7 @@ describe('useSuspenseQuery', () => {
       link: new MockLink(mocks),
       defaultOptions: {
         watchQuery: {
-          variables: { id: '2' },
+          variables: { id: "2" },
         },
       },
     });
@@ -3211,7 +3211,7 @@ describe('useSuspenseQuery', () => {
     ]);
   });
 
-  it('uses default variables from the client when none provided in options in strict mode', async () => {
+  it("uses default variables from the client when none provided in options in strict mode", async () => {
     const { query, mocks } = useVariablesQueryCase();
 
     const client = new ApolloClient({
@@ -3219,7 +3219,7 @@ describe('useSuspenseQuery', () => {
       link: new MockLink(mocks),
       defaultOptions: {
         watchQuery: {
-          variables: { id: '2' },
+          variables: { id: "2" },
         },
       },
     });
@@ -3253,7 +3253,7 @@ describe('useSuspenseQuery', () => {
     ]);
   });
 
-  it('merges global default variables with local variables', async () => {
+  it("merges global default variables with local variables", async () => {
     const query = gql`
       query MergedVariablesQuery {
         vars
@@ -3270,7 +3270,7 @@ describe('useSuspenseQuery', () => {
       }),
       defaultOptions: {
         watchQuery: {
-          variables: { source: 'global', globalOnlyVar: true },
+          variables: { source: "global", globalOnlyVar: true },
         },
       },
     });
@@ -3278,28 +3278,28 @@ describe('useSuspenseQuery', () => {
     const { result, rerender, renders } = renderSuspenseHook(
       ({ source }) =>
         useSuspenseQuery(query, {
-          fetchPolicy: 'network-only',
+          fetchPolicy: "network-only",
           variables: { source, localOnlyVar: true },
         }),
-      { client, initialProps: { source: 'local' } }
+      { client, initialProps: { source: "local" } }
     );
 
     await waitFor(() => {
       expect(result.current).toMatchObject({
         data: {
-          vars: { source: 'local', globalOnlyVar: true, localOnlyVar: true },
+          vars: { source: "local", globalOnlyVar: true, localOnlyVar: true },
         },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       });
     });
 
-    rerender({ source: 'rerender' });
+    rerender({ source: "rerender" });
 
     await waitFor(() => {
       expect(result.current).toMatchObject({
         data: {
-          vars: { source: 'rerender', globalOnlyVar: true, localOnlyVar: true },
+          vars: { source: "rerender", globalOnlyVar: true, localOnlyVar: true },
         },
         networkStatus: NetworkStatus.ready,
         error: undefined,
@@ -3309,14 +3309,14 @@ describe('useSuspenseQuery', () => {
     expect(renders.frames).toMatchObject([
       {
         data: {
-          vars: { source: 'local', globalOnlyVar: true, localOnlyVar: true },
+          vars: { source: "local", globalOnlyVar: true, localOnlyVar: true },
         },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       },
       {
         data: {
-          vars: { source: 'rerender', globalOnlyVar: true, localOnlyVar: true },
+          vars: { source: "rerender", globalOnlyVar: true, localOnlyVar: true },
         },
         networkStatus: NetworkStatus.ready,
         error: undefined,
@@ -3324,7 +3324,7 @@ describe('useSuspenseQuery', () => {
     ]);
   });
 
-  it('can unset a globally defined variable', async () => {
+  it("can unset a globally defined variable", async () => {
     const query: TypedDocumentNode<{ vars: Record<string, any> }> = gql`
       query MergedVariablesQuery {
         vars
@@ -3341,7 +3341,7 @@ describe('useSuspenseQuery', () => {
       }),
       defaultOptions: {
         watchQuery: {
-          variables: { source: 'global', globalOnlyVar: true },
+          variables: { source: "global", globalOnlyVar: true },
         },
       },
     });
@@ -3349,14 +3349,14 @@ describe('useSuspenseQuery', () => {
     const { result, renders } = renderSuspenseHook(
       () =>
         useSuspenseQuery(query, {
-          variables: { source: 'local', globalOnlyVar: undefined },
+          variables: { source: "local", globalOnlyVar: undefined },
         }),
       { client }
     );
 
     await waitFor(() => {
       expect(result.current).toMatchObject({
-        data: { vars: { source: 'local' } },
+        data: { vars: { source: "local" } },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       });
@@ -3366,18 +3366,18 @@ describe('useSuspenseQuery', () => {
     // undefined. Unfortunately this is not caught by toMatchObject as
     // toMatchObject only checks a if the subset of options are equal, not if
     // they have strictly the same keys and values.
-    expect(result.current.data.vars).not.toHaveProperty('globalOnlyVar');
+    expect(result.current.data.vars).not.toHaveProperty("globalOnlyVar");
 
     expect(renders.frames).toMatchObject([
       {
-        data: { vars: { source: 'local' } },
+        data: { vars: { source: "local" } },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       },
     ]);
   });
 
-  it('passes context to the link', async () => {
+  it("passes context to the link", async () => {
     const query = gql`
       query ContextQuery {
         context
@@ -3399,25 +3399,25 @@ describe('useSuspenseQuery', () => {
     const { result } = renderSuspenseHook(
       () =>
         useSuspenseQuery(query, {
-          context: { valueA: 'A', valueB: 'B' },
+          context: { valueA: "A", valueB: "B" },
         }),
       { client }
     );
 
     await waitFor(() => {
       expect(result.current).toMatchObject({
-        data: { context: { valueA: 'A', valueB: 'B' } },
+        data: { context: { valueA: "A", valueB: "B" } },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       });
     });
   });
 
-  it('throws network errors by default', async () => {
-    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
+  it("throws network errors by default", async () => {
+    const consoleSpy = jest.spyOn(console, "error").mockImplementation();
 
     const { query, mocks } = useErrorCase({
-      networkError: new Error('Could not fetch'),
+      networkError: new Error("Could not fetch"),
     });
 
     const { renders } = renderSuspenseHook(() => useSuspenseQuery(query), {
@@ -3433,17 +3433,17 @@ describe('useSuspenseQuery', () => {
     const [error] = renders.errors as ApolloError[];
 
     expect(error).toBeInstanceOf(ApolloError);
-    expect(error.networkError).toEqual(new Error('Could not fetch'));
+    expect(error.networkError).toEqual(new Error("Could not fetch"));
     expect(error.graphQLErrors).toEqual([]);
 
     consoleSpy.mockRestore();
   });
 
-  it('throws graphql errors by default', async () => {
-    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
+  it("throws graphql errors by default", async () => {
+    const consoleSpy = jest.spyOn(console, "error").mockImplementation();
 
     const { query, mocks } = useErrorCase({
-      graphQLErrors: [new GraphQLError('`id` should not be null')],
+      graphQLErrors: [new GraphQLError("`id` should not be null")],
     });
 
     const { renders } = renderSuspenseHook(() => useSuspenseQuery(query), {
@@ -3461,17 +3461,17 @@ describe('useSuspenseQuery', () => {
     expect(error).toBeInstanceOf(ApolloError);
     expect(error.networkError).toBeNull();
     expect(error.graphQLErrors).toEqual([
-      new GraphQLError('`id` should not be null'),
+      new GraphQLError("`id` should not be null"),
     ]);
 
     consoleSpy.mockRestore();
   });
 
-  it('tears down subscription when throwing an error', async () => {
-    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
+  it("tears down subscription when throwing an error", async () => {
+    const consoleSpy = jest.spyOn(console, "error").mockImplementation();
 
     const { query, mocks } = useErrorCase({
-      networkError: new Error('Could not fetch'),
+      networkError: new Error("Could not fetch"),
     });
 
     const client = new ApolloClient({
@@ -3490,8 +3490,8 @@ describe('useSuspenseQuery', () => {
     consoleSpy.mockRestore();
   });
 
-  it('tears down subscription when throwing an error on refetch', async () => {
-    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
+  it("tears down subscription when throwing an error on refetch", async () => {
+    const consoleSpy = jest.spyOn(console, "error").mockImplementation();
 
     const query = gql`
       query UserQuery($id: String!) {
@@ -3504,15 +3504,15 @@ describe('useSuspenseQuery', () => {
 
     const mocks = [
       {
-        request: { query, variables: { id: '1' } },
+        request: { query, variables: { id: "1" } },
         result: {
-          data: { user: { id: '1', name: 'Captain Marvel' } },
+          data: { user: { id: "1", name: "Captain Marvel" } },
         },
       },
       {
-        request: { query, variables: { id: '1' } },
+        request: { query, variables: { id: "1" } },
         result: {
-          errors: [new GraphQLError('Something went wrong')],
+          errors: [new GraphQLError("Something went wrong")],
         },
       },
     ];
@@ -3523,7 +3523,7 @@ describe('useSuspenseQuery', () => {
     });
 
     const { result, renders } = renderSuspenseHook(
-      () => useSuspenseQuery(query, { variables: { id: '1' } }),
+      () => useSuspenseQuery(query, { variables: { id: "1" } }),
       { client }
     );
 
@@ -3547,14 +3547,14 @@ describe('useSuspenseQuery', () => {
   });
 
   it('throws network errors when errorPolicy is set to "none"', async () => {
-    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
+    const consoleSpy = jest.spyOn(console, "error").mockImplementation();
 
     const { query, mocks } = useErrorCase({
-      networkError: new Error('Could not fetch'),
+      networkError: new Error("Could not fetch"),
     });
 
     const { renders } = renderSuspenseHook(
-      () => useSuspenseQuery(query, { errorPolicy: 'none' }),
+      () => useSuspenseQuery(query, { errorPolicy: "none" }),
       { mocks }
     );
 
@@ -3567,21 +3567,21 @@ describe('useSuspenseQuery', () => {
     const [error] = renders.errors as ApolloError[];
 
     expect(error).toBeInstanceOf(ApolloError);
-    expect(error.networkError).toEqual(new Error('Could not fetch'));
+    expect(error.networkError).toEqual(new Error("Could not fetch"));
     expect(error.graphQLErrors).toEqual([]);
 
     consoleSpy.mockRestore();
   });
 
   it('throws graphql errors when errorPolicy is set to "none"', async () => {
-    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
+    const consoleSpy = jest.spyOn(console, "error").mockImplementation();
 
     const { query, mocks } = useErrorCase({
-      graphQLErrors: [new GraphQLError('`id` should not be null')],
+      graphQLErrors: [new GraphQLError("`id` should not be null")],
     });
 
     const { renders } = renderSuspenseHook(
-      () => useSuspenseQuery(query, { errorPolicy: 'none' }),
+      () => useSuspenseQuery(query, { errorPolicy: "none" }),
       { mocks }
     );
 
@@ -3596,24 +3596,24 @@ describe('useSuspenseQuery', () => {
     expect(error).toBeInstanceOf(ApolloError);
     expect(error.networkError).toBeNull();
     expect(error.graphQLErrors).toEqual([
-      new GraphQLError('`id` should not be null'),
+      new GraphQLError("`id` should not be null"),
     ]);
 
     consoleSpy.mockRestore();
   });
 
   it('handles multiple graphql errors when errorPolicy is set to "none"', async () => {
-    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
+    const consoleSpy = jest.spyOn(console, "error").mockImplementation();
 
     const graphQLErrors = [
-      new GraphQLError('Fool me once'),
-      new GraphQLError('Fool me twice'),
+      new GraphQLError("Fool me once"),
+      new GraphQLError("Fool me twice"),
     ];
 
     const { query, mocks } = useErrorCase({ graphQLErrors });
 
     const { renders } = renderSuspenseHook(
-      () => useSuspenseQuery(query, { errorPolicy: 'none' }),
+      () => useSuspenseQuery(query, { errorPolicy: "none" }),
       { mocks }
     );
 
@@ -3633,13 +3633,13 @@ describe('useSuspenseQuery', () => {
   });
 
   it('throws network errors when errorPolicy is set to "ignore"', async () => {
-    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
-    const networkError = new Error('Could not fetch');
+    const consoleSpy = jest.spyOn(console, "error").mockImplementation();
+    const networkError = new Error("Could not fetch");
 
     const { query, mocks } = useErrorCase({ networkError });
 
     const { renders } = renderSuspenseHook(
-      () => useSuspenseQuery(query, { errorPolicy: 'ignore' }),
+      () => useSuspenseQuery(query, { errorPolicy: "ignore" }),
       { mocks }
     );
 
@@ -3662,11 +3662,11 @@ describe('useSuspenseQuery', () => {
 
   it('does not throw or return graphql errors when errorPolicy is set to "ignore"', async () => {
     const { query, mocks } = useErrorCase({
-      graphQLErrors: [new GraphQLError('`id` should not be null')],
+      graphQLErrors: [new GraphQLError("`id` should not be null")],
     });
 
     const { result, renders } = renderSuspenseHook(
-      () => useSuspenseQuery(query, { errorPolicy: 'ignore' }),
+      () => useSuspenseQuery(query, { errorPolicy: "ignore" }),
       { mocks }
     );
 
@@ -3689,18 +3689,18 @@ describe('useSuspenseQuery', () => {
 
   it('returns partial data results and discards GraphQL errors when errorPolicy is set to "ignore"', async () => {
     const { query, mocks } = useErrorCase({
-      data: { currentUser: { id: '1', name: null } },
-      graphQLErrors: [new GraphQLError('`name` could not be found')],
+      data: { currentUser: { id: "1", name: null } },
+      graphQLErrors: [new GraphQLError("`name` could not be found")],
     });
 
     const { result, renders } = renderSuspenseHook(
-      () => useSuspenseQuery(query, { errorPolicy: 'ignore' }),
+      () => useSuspenseQuery(query, { errorPolicy: "ignore" }),
       { mocks }
     );
 
     await waitFor(() => {
       expect(result.current).toMatchObject({
-        data: { currentUser: { id: '1', name: null } },
+        data: { currentUser: { id: "1", name: null } },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       });
@@ -3708,7 +3708,7 @@ describe('useSuspenseQuery', () => {
 
     expect(renders.frames).toMatchObject([
       {
-        data: { currentUser: { id: '1', name: null } },
+        data: { currentUser: { id: "1", name: null } },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       },
@@ -3718,13 +3718,13 @@ describe('useSuspenseQuery', () => {
   it('discards multiple graphql errors when errorPolicy is set to "ignore"', async () => {
     const { query, mocks } = useErrorCase({
       graphQLErrors: [
-        new GraphQLError('Fool me once'),
-        new GraphQLError('Fool me twice'),
+        new GraphQLError("Fool me once"),
+        new GraphQLError("Fool me twice"),
       ],
     });
 
     const { result, renders } = renderSuspenseHook(
-      () => useSuspenseQuery(query, { errorPolicy: 'ignore' }),
+      () => useSuspenseQuery(query, { errorPolicy: "ignore" }),
       { mocks }
     );
 
@@ -3742,7 +3742,7 @@ describe('useSuspenseQuery', () => {
   });
 
   it('responds to cache updates and clears errors after an error returns when errorPolicy is set to "ignore"', async () => {
-    const graphQLError = new GraphQLError('`id` should not be null');
+    const graphQLError = new GraphQLError("`id` should not be null");
 
     const { query, mocks } = useErrorCase({ graphQLErrors: [graphQLError] });
 
@@ -3752,7 +3752,7 @@ describe('useSuspenseQuery', () => {
     });
 
     const { result, renders } = renderSuspenseHook(
-      () => useSuspenseQuery(query, { errorPolicy: 'ignore' }),
+      () => useSuspenseQuery(query, { errorPolicy: "ignore" }),
       { client }
     );
 
@@ -3768,8 +3768,8 @@ describe('useSuspenseQuery', () => {
       query,
       data: {
         currentUser: {
-          id: '1',
-          name: 'Cache User',
+          id: "1",
+          name: "Cache User",
         },
       },
     });
@@ -3778,8 +3778,8 @@ describe('useSuspenseQuery', () => {
       expect(result.current).toMatchObject({
         data: {
           currentUser: {
-            id: '1',
-            name: 'Cache User',
+            id: "1",
+            name: "Cache User",
           },
         },
         networkStatus: NetworkStatus.ready,
@@ -3795,7 +3795,7 @@ describe('useSuspenseQuery', () => {
         error: undefined,
       },
       {
-        data: { currentUser: { id: '1', name: 'Cache User' } },
+        data: { currentUser: { id: "1", name: "Cache User" } },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       },
@@ -3803,14 +3803,14 @@ describe('useSuspenseQuery', () => {
   });
 
   it('throws network errors when errorPolicy is set to "all"', async () => {
-    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
+    const consoleSpy = jest.spyOn(console, "error").mockImplementation();
 
-    const networkError = new Error('Could not fetch');
+    const networkError = new Error("Could not fetch");
 
     const { query, mocks } = useErrorCase({ networkError });
 
     const { renders } = renderSuspenseHook(
-      () => useSuspenseQuery(query, { errorPolicy: 'all' }),
+      () => useSuspenseQuery(query, { errorPolicy: "all" }),
       { mocks }
     );
 
@@ -3832,12 +3832,12 @@ describe('useSuspenseQuery', () => {
   });
 
   it('does not throw and returns graphql errors when errorPolicy is set to "all"', async () => {
-    const graphQLError = new GraphQLError('`id` should not be null');
+    const graphQLError = new GraphQLError("`id` should not be null");
 
     const { query, mocks } = useErrorCase({ graphQLErrors: [graphQLError] });
 
     const { result, renders } = renderSuspenseHook(
-      () => useSuspenseQuery(query, { errorPolicy: 'all' }),
+      () => useSuspenseQuery(query, { errorPolicy: "all" }),
       { mocks }
     );
 
@@ -3868,7 +3868,7 @@ describe('useSuspenseQuery', () => {
   });
 
   it('responds to cache updates and clears errors after an error returns when errorPolicy is set to "all"', async () => {
-    const graphQLError = new GraphQLError('`id` should not be null');
+    const graphQLError = new GraphQLError("`id` should not be null");
 
     const { query, mocks } = useErrorCase({ graphQLErrors: [graphQLError] });
 
@@ -3878,7 +3878,7 @@ describe('useSuspenseQuery', () => {
     });
 
     const { result, renders } = renderSuspenseHook(
-      () => useSuspenseQuery(query, { errorPolicy: 'all' }),
+      () => useSuspenseQuery(query, { errorPolicy: "all" }),
       { client }
     );
 
@@ -3894,8 +3894,8 @@ describe('useSuspenseQuery', () => {
       query,
       data: {
         currentUser: {
-          id: '1',
-          name: 'Cache User',
+          id: "1",
+          name: "Cache User",
         },
       },
     });
@@ -3904,8 +3904,8 @@ describe('useSuspenseQuery', () => {
       expect(result.current).toMatchObject({
         data: {
           currentUser: {
-            id: '1',
-            name: 'Cache User',
+            id: "1",
+            name: "Cache User",
           },
         },
         networkStatus: NetworkStatus.ready,
@@ -3921,7 +3921,7 @@ describe('useSuspenseQuery', () => {
         error: new ApolloError({ graphQLErrors: [graphQLError] }),
       },
       {
-        data: { currentUser: { id: '1', name: 'Cache User' } },
+        data: { currentUser: { id: "1", name: "Cache User" } },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       },
@@ -3930,14 +3930,14 @@ describe('useSuspenseQuery', () => {
 
   it('handles multiple graphql errors when errorPolicy is set to "all"', async () => {
     const graphQLErrors = [
-      new GraphQLError('Fool me once'),
-      new GraphQLError('Fool me twice'),
+      new GraphQLError("Fool me once"),
+      new GraphQLError("Fool me twice"),
     ];
 
     const { query, mocks } = useErrorCase({ graphQLErrors });
 
     const { result, renders } = renderSuspenseHook(
-      () => useSuspenseQuery(query, { errorPolicy: 'all' }),
+      () => useSuspenseQuery(query, { errorPolicy: "all" }),
       { mocks }
     );
 
@@ -3970,15 +3970,15 @@ describe('useSuspenseQuery', () => {
   });
 
   it('returns partial data and keeps errors when errorPolicy is set to "all"', async () => {
-    const graphQLError = new GraphQLError('`name` could not be found');
+    const graphQLError = new GraphQLError("`name` could not be found");
 
     const { query, mocks } = useErrorCase({
-      data: { currentUser: { id: '1', name: null } },
+      data: { currentUser: { id: "1", name: null } },
       graphQLErrors: [graphQLError],
     });
 
     const { result, renders } = renderSuspenseHook(
-      () => useSuspenseQuery(query, { errorPolicy: 'all' }),
+      () => useSuspenseQuery(query, { errorPolicy: "all" }),
       { mocks }
     );
 
@@ -3986,7 +3986,7 @@ describe('useSuspenseQuery', () => {
 
     await waitFor(() => {
       expect(result.current).toMatchObject({
-        data: { currentUser: { id: '1', name: null } },
+        data: { currentUser: { id: "1", name: null } },
         networkStatus: NetworkStatus.error,
         error: expectedError,
       });
@@ -3994,7 +3994,7 @@ describe('useSuspenseQuery', () => {
 
     expect(renders.frames).toMatchObject([
       {
-        data: { currentUser: { id: '1', name: null } },
+        data: { currentUser: { id: "1", name: null } },
         networkStatus: NetworkStatus.error,
         error: expectedError,
       },
@@ -4002,14 +4002,14 @@ describe('useSuspenseQuery', () => {
   });
 
   it('persists errors between rerenders when errorPolicy is set to "all"', async () => {
-    const graphQLError = new GraphQLError('`name` could not be found');
+    const graphQLError = new GraphQLError("`name` could not be found");
 
     const { query, mocks } = useErrorCase({
       graphQLErrors: [graphQLError],
     });
 
     const { result, rerender } = renderSuspenseHook(
-      () => useSuspenseQuery(query, { errorPolicy: 'all' }),
+      () => useSuspenseQuery(query, { errorPolicy: "all" }),
       { mocks }
     );
 
@@ -4034,27 +4034,27 @@ describe('useSuspenseQuery', () => {
       }
     `;
 
-    const graphQLErrors = [new GraphQLError('Could not fetch user 1')];
+    const graphQLErrors = [new GraphQLError("Could not fetch user 1")];
 
     const mocks = [
       {
-        request: { query, variables: { id: '1' } },
+        request: { query, variables: { id: "1" } },
         result: {
           errors: graphQLErrors,
         },
       },
       {
-        request: { query, variables: { id: '2' } },
+        request: { query, variables: { id: "2" } },
         result: {
-          data: { user: { id: '2', name: 'Captain Marvel' } },
+          data: { user: { id: "2", name: "Captain Marvel" } },
         },
       },
     ];
 
     const { result, renders, rerender } = renderSuspenseHook(
       ({ id }) =>
-        useSuspenseQuery(query, { errorPolicy: 'all', variables: { id } }),
-      { mocks, initialProps: { id: '1' } }
+        useSuspenseQuery(query, { errorPolicy: "all", variables: { id } }),
+      { mocks, initialProps: { id: "1" } }
     );
 
     const expectedError = new ApolloError({ graphQLErrors });
@@ -4067,7 +4067,7 @@ describe('useSuspenseQuery', () => {
       });
     });
 
-    rerender({ id: '2' });
+    rerender({ id: "2" });
 
     await waitFor(() => {
       expect(result.current).toMatchObject({
@@ -4095,7 +4095,7 @@ describe('useSuspenseQuery', () => {
     ]);
   });
 
-  it('re-suspends when calling `refetch`', async () => {
+  it("re-suspends when calling `refetch`", async () => {
     const query = gql`
       query UserQuery($id: String!) {
         user(id: $id) {
@@ -4107,22 +4107,22 @@ describe('useSuspenseQuery', () => {
 
     const mocks = [
       {
-        request: { query, variables: { id: '1' } },
+        request: { query, variables: { id: "1" } },
         result: {
-          data: { user: { id: '1', name: 'Captain Marvel' } },
+          data: { user: { id: "1", name: "Captain Marvel" } },
         },
       },
       {
-        request: { query, variables: { id: '1' } },
+        request: { query, variables: { id: "1" } },
         result: {
-          data: { user: { id: '1', name: 'Captain Marvel (updated)' } },
+          data: { user: { id: "1", name: "Captain Marvel (updated)" } },
         },
       },
     ];
 
     const { result, renders } = renderSuspenseHook(
-      () => useSuspenseQuery(query, { variables: { id: '1' } }),
-      { mocks, initialProps: { id: '1' } }
+      () => useSuspenseQuery(query, { variables: { id: "1" } }),
+      { mocks, initialProps: { id: "1" } }
     );
 
     await waitFor(() => {
@@ -4161,7 +4161,7 @@ describe('useSuspenseQuery', () => {
     ]);
   });
 
-  it('properly resolves `refetch` when returning a result that is deeply equal to data in the cache', async () => {
+  it("properly resolves `refetch` when returning a result that is deeply equal to data in the cache", async () => {
     type Variables = {
       id: string;
     };
@@ -4185,16 +4185,16 @@ describe('useSuspenseQuery', () => {
 
     const mocks: MockedResponse<Data, Variables>[] = [
       {
-        request: { query, variables: { id: '1' } },
+        request: { query, variables: { id: "1" } },
         result: {
-          data: { todo: { id: '1', name: 'Clean room', completed: false } },
+          data: { todo: { id: "1", name: "Clean room", completed: false } },
         },
         delay: 10,
       },
       {
-        request: { query, variables: { id: '1' } },
+        request: { query, variables: { id: "1" } },
         result: {
-          data: { todo: { id: '1', name: 'Clean room', completed: false } },
+          data: { todo: { id: "1", name: "Clean room", completed: false } },
         },
         delay: 10,
       },
@@ -4231,7 +4231,7 @@ describe('useSuspenseQuery', () => {
           <button onClick={() => refetch()}>Refetch</button>
           <div data-testid="todo">
             {todo.name}
-            {todo.completed && ' (completed)'}
+            {todo.completed && " (completed)"}
           </div>
         </div>
       );
@@ -4239,15 +4239,15 @@ describe('useSuspenseQuery', () => {
 
     render(<App />);
 
-    expect(await screen.findByText('Loading')).toBeInTheDocument();
+    expect(await screen.findByText("Loading")).toBeInTheDocument();
 
-    const todo = await screen.findByTestId('todo');
+    const todo = await screen.findByTestId("todo");
 
-    expect(todo).toHaveTextContent('Clean room');
+    expect(todo).toHaveTextContent("Clean room");
 
-    await act(() => user.click(screen.getByText('Refetch')));
+    await act(() => user.click(screen.getByText("Refetch")));
 
-    expect(screen.getByText('Loading')).toBeInTheDocument();
+    expect(screen.getByText("Loading")).toBeInTheDocument();
 
     await waitFor(() => {
       // Suspense will hide the component until the suspense boundary has
@@ -4255,10 +4255,10 @@ describe('useSuspenseQuery', () => {
       expect(todo).toBeVisible();
     });
 
-    expect(todo).toHaveTextContent('Clean room');
+    expect(todo).toHaveTextContent("Clean room");
   });
 
-  it('re-suspends when calling `refetch` with new variables', async () => {
+  it("re-suspends when calling `refetch` with new variables", async () => {
     const query = gql`
       query UserQuery($id: String!) {
         user(id: $id) {
@@ -4270,21 +4270,21 @@ describe('useSuspenseQuery', () => {
 
     const mocks = [
       {
-        request: { query, variables: { id: '1' } },
+        request: { query, variables: { id: "1" } },
         result: {
-          data: { user: { id: '1', name: 'Captain Marvel' } },
+          data: { user: { id: "1", name: "Captain Marvel" } },
         },
       },
       {
-        request: { query, variables: { id: '2' } },
+        request: { query, variables: { id: "2" } },
         result: {
-          data: { user: { id: '2', name: 'Captain America' } },
+          data: { user: { id: "2", name: "Captain America" } },
         },
       },
     ];
 
     const { result, renders } = renderSuspenseHook(
-      () => useSuspenseQuery(query, { variables: { id: '1' } }),
+      () => useSuspenseQuery(query, { variables: { id: "1" } }),
       { mocks }
     );
 
@@ -4297,7 +4297,7 @@ describe('useSuspenseQuery', () => {
     });
 
     act(() => {
-      result.current.refetch({ id: '2' });
+      result.current.refetch({ id: "2" });
     });
 
     await waitFor(() => {
@@ -4323,7 +4323,7 @@ describe('useSuspenseQuery', () => {
     ]);
   });
 
-  it('re-suspends multiple times when calling `refetch` multiple times', async () => {
+  it("re-suspends multiple times when calling `refetch` multiple times", async () => {
     const query = gql`
       query UserQuery($id: String!) {
         user(id: $id) {
@@ -4335,28 +4335,28 @@ describe('useSuspenseQuery', () => {
 
     const mocks = [
       {
-        request: { query, variables: { id: '1' } },
+        request: { query, variables: { id: "1" } },
         result: {
-          data: { user: { id: '1', name: 'Captain Marvel' } },
+          data: { user: { id: "1", name: "Captain Marvel" } },
         },
       },
       {
-        request: { query, variables: { id: '1' } },
+        request: { query, variables: { id: "1" } },
         result: {
-          data: { user: { id: '1', name: 'Captain Marvel (updated)' } },
+          data: { user: { id: "1", name: "Captain Marvel (updated)" } },
         },
       },
       {
-        request: { query, variables: { id: '1' } },
+        request: { query, variables: { id: "1" } },
         result: {
-          data: { user: { id: '1', name: 'Captain Marvel (updated again)' } },
+          data: { user: { id: "1", name: "Captain Marvel (updated again)" } },
         },
       },
     ];
 
     const { result, renders } = renderSuspenseHook(
-      () => useSuspenseQuery(query, { variables: { id: '1' } }),
-      { mocks, initialProps: { id: '1' } }
+      () => useSuspenseQuery(query, { variables: { id: "1" } }),
+      { mocks, initialProps: { id: "1" } }
     );
 
     await waitFor(() => {
@@ -4411,8 +4411,8 @@ describe('useSuspenseQuery', () => {
     ]);
   });
 
-  it('throws errors when errors are returned after calling `refetch`', async () => {
-    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
+  it("throws errors when errors are returned after calling `refetch`", async () => {
+    const consoleSpy = jest.spyOn(console, "error").mockImplementation();
 
     const query = gql`
       query UserQuery($id: String!) {
@@ -4425,21 +4425,21 @@ describe('useSuspenseQuery', () => {
 
     const mocks = [
       {
-        request: { query, variables: { id: '1' } },
+        request: { query, variables: { id: "1" } },
         result: {
-          data: { user: { id: '1', name: 'Captain Marvel' } },
+          data: { user: { id: "1", name: "Captain Marvel" } },
         },
       },
       {
-        request: { query, variables: { id: '1' } },
+        request: { query, variables: { id: "1" } },
         result: {
-          errors: [new GraphQLError('Something went wrong')],
+          errors: [new GraphQLError("Something went wrong")],
         },
       },
     ];
 
     const { result, renders } = renderSuspenseHook(
-      () => useSuspenseQuery(query, { variables: { id: '1' } }),
+      () => useSuspenseQuery(query, { variables: { id: "1" } }),
       { mocks }
     );
 
@@ -4461,7 +4461,7 @@ describe('useSuspenseQuery', () => {
 
     expect(renders.errors).toEqual([
       new ApolloError({
-        graphQLErrors: [new GraphQLError('Something went wrong')],
+        graphQLErrors: [new GraphQLError("Something went wrong")],
       }),
     ]);
     expect(renders.frames).toMatchObject([
@@ -4487,15 +4487,15 @@ describe('useSuspenseQuery', () => {
 
     const mocks = [
       {
-        request: { query, variables: { id: '1' } },
+        request: { query, variables: { id: "1" } },
         result: {
-          data: { user: { id: '1', name: 'Captain Marvel' } },
+          data: { user: { id: "1", name: "Captain Marvel" } },
         },
       },
       {
-        request: { query, variables: { id: '1' } },
+        request: { query, variables: { id: "1" } },
         result: {
-          errors: [new GraphQLError('Something went wrong')],
+          errors: [new GraphQLError("Something went wrong")],
         },
       },
     ];
@@ -4503,8 +4503,8 @@ describe('useSuspenseQuery', () => {
     const { result, renders } = renderSuspenseHook(
       () =>
         useSuspenseQuery(query, {
-          errorPolicy: 'ignore',
-          variables: { id: '1' },
+          errorPolicy: "ignore",
+          variables: { id: "1" },
         }),
       { mocks }
     );
@@ -4549,15 +4549,15 @@ describe('useSuspenseQuery', () => {
 
     const mocks = [
       {
-        request: { query, variables: { id: '1' } },
+        request: { query, variables: { id: "1" } },
         result: {
-          data: { user: { id: '1', name: 'Captain Marvel' } },
+          data: { user: { id: "1", name: "Captain Marvel" } },
         },
       },
       {
-        request: { query, variables: { id: '1' } },
+        request: { query, variables: { id: "1" } },
         result: {
-          errors: [new GraphQLError('Something went wrong')],
+          errors: [new GraphQLError("Something went wrong")],
         },
       },
     ];
@@ -4565,14 +4565,14 @@ describe('useSuspenseQuery', () => {
     const { result, renders } = renderSuspenseHook(
       () =>
         useSuspenseQuery(query, {
-          errorPolicy: 'all',
-          variables: { id: '1' },
+          errorPolicy: "all",
+          variables: { id: "1" },
         }),
       { mocks }
     );
 
     const expectedError = new ApolloError({
-      graphQLErrors: [new GraphQLError('Something went wrong')],
+      graphQLErrors: [new GraphQLError("Something went wrong")],
     });
 
     await waitFor(() => {
@@ -4623,16 +4623,16 @@ describe('useSuspenseQuery', () => {
 
     const mocks = [
       {
-        request: { query, variables: { id: '1' } },
+        request: { query, variables: { id: "1" } },
         result: {
-          data: { user: { id: '1', name: 'Captain Marvel' } },
+          data: { user: { id: "1", name: "Captain Marvel" } },
         },
       },
       {
-        request: { query, variables: { id: '1' } },
+        request: { query, variables: { id: "1" } },
         result: {
-          data: { user: { id: '1', name: null } },
-          errors: [new GraphQLError('Something went wrong')],
+          data: { user: { id: "1", name: null } },
+          errors: [new GraphQLError("Something went wrong")],
         },
       },
     ];
@@ -4640,14 +4640,14 @@ describe('useSuspenseQuery', () => {
     const { result, renders } = renderSuspenseHook(
       () =>
         useSuspenseQuery(query, {
-          errorPolicy: 'all',
-          variables: { id: '1' },
+          errorPolicy: "all",
+          variables: { id: "1" },
         }),
       { mocks }
     );
 
     const expectedError = new ApolloError({
-      graphQLErrors: [new GraphQLError('Something went wrong')],
+      graphQLErrors: [new GraphQLError("Something went wrong")],
     });
 
     await waitFor(() => {
@@ -4685,7 +4685,7 @@ describe('useSuspenseQuery', () => {
     ]);
   });
 
-  it('re-suspends when calling `fetchMore` with different variables', async () => {
+  it("re-suspends when calling `fetchMore` with different variables", async () => {
     const { data, query, link } = usePaginatedCase();
 
     const { result, renders } = renderSuspenseHook(
@@ -4729,7 +4729,7 @@ describe('useSuspenseQuery', () => {
     ]);
   });
 
-  it('properly resolves `fetchMore` when returning a result that is deeply equal to data in the cache', async () => {
+  it("properly resolves `fetchMore` when returning a result that is deeply equal to data in the cache", async () => {
     const { query, link } = usePaginatedCase();
 
     const user = userEvent.setup();
@@ -4764,7 +4764,7 @@ describe('useSuspenseQuery', () => {
             Fetch more
           </button>
           <div data-testid="letters">
-            {data.letters.map(({ letter }) => letter).join('')}
+            {data.letters.map(({ letter }) => letter).join("")}
           </div>
         </div>
       );
@@ -4772,15 +4772,15 @@ describe('useSuspenseQuery', () => {
 
     render(<App />);
 
-    expect(await screen.findByText('Loading')).toBeInTheDocument();
+    expect(await screen.findByText("Loading")).toBeInTheDocument();
 
-    const letters = await screen.findByTestId('letters');
+    const letters = await screen.findByTestId("letters");
 
-    expect(letters).toHaveTextContent('AB');
+    expect(letters).toHaveTextContent("AB");
 
-    await act(() => user.click(screen.getByText('Fetch more')));
+    await act(() => user.click(screen.getByText("Fetch more")));
 
-    expect(screen.getByText('Loading')).toBeInTheDocument();
+    expect(screen.getByText("Loading")).toBeInTheDocument();
 
     await waitFor(() => {
       // Suspense will hide the component until the suspense boundary has
@@ -4788,17 +4788,17 @@ describe('useSuspenseQuery', () => {
       expect(letters).toBeVisible();
     });
 
-    expect(letters).toHaveTextContent('AB');
+    expect(letters).toHaveTextContent("AB");
   });
 
-  it('suspends when refetching after returning cached data for the initial fetch', async () => {
+  it("suspends when refetching after returning cached data for the initial fetch", async () => {
     const { query, mocks } = useSimpleQueryCase();
 
     const cache = new InMemoryCache();
 
     cache.writeQuery({
       query,
-      data: { greeting: 'hello from cache' },
+      data: { greeting: "hello from cache" },
     });
 
     const { result, renders } = renderSuspenseHook(
@@ -4807,7 +4807,7 @@ describe('useSuspenseQuery', () => {
     );
 
     expect(result.current).toMatchObject({
-      data: { greeting: 'hello from cache' },
+      data: { greeting: "hello from cache" },
       networkStatus: NetworkStatus.ready,
       error: undefined,
     });
@@ -4818,7 +4818,7 @@ describe('useSuspenseQuery', () => {
 
     await waitFor(() => {
       expect(result.current).toMatchObject({
-        data: { greeting: 'Hello' },
+        data: { greeting: "Hello" },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       });
@@ -4828,19 +4828,19 @@ describe('useSuspenseQuery', () => {
     expect(renders.suspenseCount).toBe(1);
     expect(renders.frames).toMatchObject([
       {
-        data: { greeting: 'hello from cache' },
+        data: { greeting: "hello from cache" },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       },
       {
-        data: { greeting: 'Hello' },
+        data: { greeting: "Hello" },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       },
     ]);
   });
 
-  it('properly uses `updateQuery` when calling `fetchMore`', async () => {
+  it("properly uses `updateQuery` when calling `fetchMore`", async () => {
     const { data, query, link } = usePaginatedCase();
 
     const { result, renders } = renderSuspenseHook(
@@ -4885,7 +4885,7 @@ describe('useSuspenseQuery', () => {
     ]);
   });
 
-  it('properly uses cache field policies when calling `fetchMore` without `updateQuery`', async () => {
+  it("properly uses cache field policies when calling `fetchMore` without `updateQuery`", async () => {
     const { data, query, link } = usePaginatedCase();
 
     const cache = new InMemoryCache({
@@ -4980,7 +4980,7 @@ describe('useSuspenseQuery', () => {
       () =>
         useSuspenseQuery(query, {
           variables: { min: 0, max: 12 },
-          refetchWritePolicy: 'overwrite',
+          refetchWritePolicy: "overwrite",
         }),
       { cache, mocks }
     );
@@ -5056,7 +5056,7 @@ describe('useSuspenseQuery', () => {
       () =>
         useSuspenseQuery(query, {
           variables: { min: 0, max: 12 },
-          refetchWritePolicy: 'merge',
+          refetchWritePolicy: "merge",
         }),
       { cache, mocks }
     );
@@ -5164,7 +5164,7 @@ describe('useSuspenseQuery', () => {
     ]);
   });
 
-  it('does not suspend when `skip` is true', async () => {
+  it("does not suspend when `skip` is true", async () => {
     const { query, mocks } = useSimpleQueryCase();
 
     const cache = new InMemoryCache();
@@ -5182,7 +5182,7 @@ describe('useSuspenseQuery', () => {
     });
   });
 
-  it('suspends when `skip` becomes `false` after it was `true`', async () => {
+  it("suspends when `skip` becomes `false` after it was `true`", async () => {
     const { query, mocks } = useSimpleQueryCase();
 
     const cache = new InMemoryCache();
@@ -5223,7 +5223,7 @@ describe('useSuspenseQuery', () => {
     ]);
   });
 
-  it('renders skip result, does not suspend, and maintains `data` when `skip` becomes `true` after it was `false`', async () => {
+  it("renders skip result, does not suspend, and maintains `data` when `skip` becomes `true` after it was `false`", async () => {
     const { query, mocks } = useSimpleQueryCase();
 
     const cache = new InMemoryCache();
@@ -5269,7 +5269,7 @@ describe('useSuspenseQuery', () => {
     ]);
   });
 
-  it('does not make network requests when `skip` is `true`', async () => {
+  it("does not make network requests when `skip` is `true`", async () => {
     const { query, mocks } = useSimpleQueryCase();
 
     let fetchCount = 0;
@@ -5283,7 +5283,7 @@ describe('useSuspenseQuery', () => {
         );
 
         if (!mock) {
-          throw new Error('Could not find mock for operation');
+          throw new Error("Could not find mock for operation");
         }
 
         observer.next(mock.result);
@@ -5315,7 +5315,7 @@ describe('useSuspenseQuery', () => {
     expect(fetchCount).toBe(1);
   });
 
-  it('`skip` result is referentially stable', async () => {
+  it("`skip` result is referentially stable", async () => {
     const { query, mocks } = useSimpleQueryCase();
 
     const { result, rerender } = renderSuspenseHook(
@@ -5342,7 +5342,7 @@ describe('useSuspenseQuery', () => {
     expect(fetchedSkipResult).toBe(fetchedSkipResult);
   });
 
-  it('properly resolves when `skip` becomes false when returning a result that is deeply equal to data in the cache', async () => {
+  it("properly resolves when `skip` becomes false when returning a result that is deeply equal to data in the cache", async () => {
     type Variables = {
       id: string;
     };
@@ -5366,16 +5366,16 @@ describe('useSuspenseQuery', () => {
 
     const mocks: MockedResponse<Data, Variables>[] = [
       {
-        request: { query, variables: { id: '1' } },
+        request: { query, variables: { id: "1" } },
         result: {
-          data: { todo: { id: '1', name: 'Clean room', completed: false } },
+          data: { todo: { id: "1", name: "Clean room", completed: false } },
         },
         delay: 10,
       },
       {
-        request: { query, variables: { id: '1' } },
+        request: { query, variables: { id: "1" } },
         result: {
-          data: { todo: { id: '1', name: 'Clean room', completed: false } },
+          data: { todo: { id: "1", name: "Clean room", completed: false } },
         },
         delay: 10,
       },
@@ -5404,7 +5404,7 @@ describe('useSuspenseQuery', () => {
       const [skip, setSkip] = React.useState(false);
       const { data } = useSuspenseQuery(query, {
         // Force a network request that returns the same data from the cache
-        fetchPolicy: 'network-only',
+        fetchPolicy: "network-only",
         skip,
         variables: { id },
       });
@@ -5417,7 +5417,7 @@ describe('useSuspenseQuery', () => {
           {todo && (
             <div data-testid="todo">
               {todo.name}
-              {todo.completed && ' (completed)'}
+              {todo.completed && " (completed)"}
             </div>
           )}
         </>
@@ -5426,28 +5426,28 @@ describe('useSuspenseQuery', () => {
 
     render(<App />);
 
-    expect(screen.getByText('Loading')).toBeInTheDocument();
+    expect(screen.getByText("Loading")).toBeInTheDocument();
 
-    const todo = await screen.findByTestId('todo');
-    expect(todo).toHaveTextContent('Clean room');
+    const todo = await screen.findByTestId("todo");
+    expect(todo).toHaveTextContent("Clean room");
 
     // skip false -> true
-    await act(() => user.click(screen.getByText('Toggle skip')));
-    expect(todo).toHaveTextContent('Clean room');
+    await act(() => user.click(screen.getByText("Toggle skip")));
+    expect(todo).toHaveTextContent("Clean room");
 
     // skip true -> false
-    await act(() => user.click(screen.getByText('Toggle skip')));
+    await act(() => user.click(screen.getByText("Toggle skip")));
 
-    expect(screen.getByText('Loading')).toBeInTheDocument();
+    expect(screen.getByText("Loading")).toBeInTheDocument();
 
     await waitFor(() => {
       expect(todo).toBeVisible();
     });
 
-    expect(todo).toHaveTextContent('Clean room');
+    expect(todo).toHaveTextContent("Clean room");
   });
 
-  it('`skip` option works with `startTransition`', async () => {
+  it("`skip` option works with `startTransition`", async () => {
     type Variables = {
       id: string;
     };
@@ -5470,9 +5470,9 @@ describe('useSuspenseQuery', () => {
     `;
     const mocks: MockedResponse<Data, Variables>[] = [
       {
-        request: { query, variables: { id: '1' } },
+        request: { query, variables: { id: "1" } },
         result: {
-          data: { todo: { id: '1', name: 'Clean room', completed: false } },
+          data: { todo: { id: "1", name: "Clean room", completed: false } },
         },
         delay: 10,
       },
@@ -5493,7 +5493,7 @@ describe('useSuspenseQuery', () => {
             disabled={isPending}
             onClick={() => {
               startTransition(() => {
-                setId('1');
+                setId("1");
               });
             }}
           >
@@ -5513,7 +5513,7 @@ describe('useSuspenseQuery', () => {
     function Todo({ id }: { id: string | null }) {
       const { data } = useSuspenseQuery(query, {
         skip: !id,
-        variables: { id: id ?? '0' },
+        variables: { id: id ?? "0" },
       });
 
       const todo = data?.todo;
@@ -5521,16 +5521,16 @@ describe('useSuspenseQuery', () => {
       return todo ? (
         <div data-testid="todo">
           {todo.name}
-          {todo.completed && ' (completed)'}
+          {todo.completed && " (completed)"}
         </div>
       ) : null;
     }
 
     render(<App />);
 
-    expect(screen.queryByTestId('todo')).not.toBeInTheDocument();
+    expect(screen.queryByTestId("todo")).not.toBeInTheDocument();
 
-    const button = screen.getByText('Fetch to-do 1');
+    const button = screen.getByText("Fetch to-do 1");
     await act(() => user.click(button));
     // startTransition will avoid rendering the suspense fallback for already
     // revealed content if the state update inside the transition causes the
@@ -5539,15 +5539,15 @@ describe('useSuspenseQuery', () => {
     // Here we should not see the suspense fallback while the component suspends
     // until the todo is finished loading. Seeing the suspense fallback is an
     // indication that we are suspending the component too late in the process.
-    expect(screen.queryByText('Loading')).not.toBeInTheDocument();
+    expect(screen.queryByText("Loading")).not.toBeInTheDocument();
     // We can ensure this works with isPending from useTransition in the process
     expect(button).toBeDisabled();
     // Eventually we should see the updated todo content once its done
     // suspending.
-    expect(await screen.findByTestId('todo')).toHaveTextContent('Clean room');
+    expect(await screen.findByTestId("todo")).toHaveTextContent("Clean room");
   });
 
-  it('applies `errorPolicy` on next fetch when it changes between renders', async () => {
+  it("applies `errorPolicy` on next fetch when it changes between renders", async () => {
     const { query, mocks: simpleMocks } = useSimpleQueryCase();
 
     const successMock = simpleMocks[0];
@@ -5557,14 +5557,14 @@ describe('useSuspenseQuery', () => {
       {
         request: { query },
         result: {
-          errors: [new GraphQLError('oops')],
+          errors: [new GraphQLError("oops")],
         },
       },
     ];
 
     const { result, rerender, renders } = renderSuspenseHook(
       ({ errorPolicy }) => useSuspenseQuery(query, { errorPolicy }),
-      { mocks, initialProps: { errorPolicy: 'none' as ErrorPolicy } }
+      { mocks, initialProps: { errorPolicy: "none" as ErrorPolicy } }
     );
 
     await waitFor(() => {
@@ -5575,7 +5575,7 @@ describe('useSuspenseQuery', () => {
       });
     });
 
-    rerender({ errorPolicy: 'all' });
+    rerender({ errorPolicy: "all" });
 
     act(() => {
       result.current.refetch();
@@ -5585,7 +5585,7 @@ describe('useSuspenseQuery', () => {
       expect(result.current).toMatchObject({
         ...successMock.result,
         networkStatus: NetworkStatus.error,
-        error: new ApolloError({ graphQLErrors: [new GraphQLError('oops')] }),
+        error: new ApolloError({ graphQLErrors: [new GraphQLError("oops")] }),
       });
     });
 
@@ -5610,12 +5610,12 @@ describe('useSuspenseQuery', () => {
       {
         ...successMock.result,
         networkStatus: NetworkStatus.error,
-        error: new ApolloError({ graphQLErrors: [new GraphQLError('oops')] }),
+        error: new ApolloError({ graphQLErrors: [new GraphQLError("oops")] }),
       },
     ]);
   });
 
-  it('applies `context` on next fetch when it changes between renders', async () => {
+  it("applies `context` on next fetch when it changes between renders", async () => {
     const query = gql`
       query {
         context
@@ -5637,18 +5637,18 @@ describe('useSuspenseQuery', () => {
 
     const { result, rerender, renders } = renderSuspenseHook(
       ({ context }) => useSuspenseQuery(query, { context }),
-      { client, initialProps: { context: { phase: 'initialValue' } } }
+      { client, initialProps: { context: { phase: "initialValue" } } }
     );
 
     await waitFor(() => {
       expect(result.current).toMatchObject({
-        data: { context: { phase: 'initialValue' } },
+        data: { context: { phase: "initialValue" } },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       });
     });
 
-    rerender({ context: { phase: 'rerender' } });
+    rerender({ context: { phase: "rerender" } });
 
     act(() => {
       result.current.refetch();
@@ -5657,7 +5657,7 @@ describe('useSuspenseQuery', () => {
     await waitFor(() => {
       expect(result.current).toMatchObject({
         data: {
-          context: { phase: 'rerender' },
+          context: { phase: "rerender" },
         },
         networkStatus: NetworkStatus.ready,
         error: undefined,
@@ -5666,17 +5666,17 @@ describe('useSuspenseQuery', () => {
 
     expect(renders.frames).toMatchObject([
       {
-        data: { context: { phase: 'initialValue' } },
+        data: { context: { phase: "initialValue" } },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       },
       {
-        data: { context: { phase: 'initialValue' } },
+        data: { context: { phase: "initialValue" } },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       },
       {
-        data: { context: { phase: 'rerender' } },
+        data: { context: { phase: "rerender" } },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       },
@@ -5686,7 +5686,7 @@ describe('useSuspenseQuery', () => {
   // NOTE: We only test the `false` -> `true` path here. If the option changes
   // from `true` -> `false`, the data has already been canonized, so it has no
   // effect on the output.
-  it('returns canonical results immediately when `canonizeResults` changes from `false` to `true` between renders', async () => {
+  it("returns canonical results immediately when `canonizeResults` changes from `false` to `true` between renders", async () => {
     interface Result {
       __typename: string;
       value: number;
@@ -5713,12 +5713,12 @@ describe('useSuspenseQuery', () => {
     `;
 
     const results: Result[] = [
-      { __typename: 'Result', value: 0 },
-      { __typename: 'Result', value: 1 },
-      { __typename: 'Result', value: 1 },
-      { __typename: 'Result', value: 2 },
-      { __typename: 'Result', value: 3 },
-      { __typename: 'Result', value: 5 },
+      { __typename: "Result", value: 0 },
+      { __typename: "Result", value: 1 },
+      { __typename: "Result", value: 1 },
+      { __typename: "Result", value: 2 },
+      { __typename: "Result", value: 3 },
+      { __typename: "Result", value: 5 },
     ];
 
     cache.writeQuery({
@@ -5756,7 +5756,7 @@ describe('useSuspenseQuery', () => {
     expect(renders.count).toBe(2);
   });
 
-  it('applies changed `refetchWritePolicy` to next fetch when changing between renders', async () => {
+  it("applies changed `refetchWritePolicy` to next fetch when changing between renders", async () => {
     const query: TypedDocumentNode<
       { primes: number[] },
       { min: number; max: number }
@@ -5809,7 +5809,7 @@ describe('useSuspenseQuery', () => {
       {
         cache,
         mocks,
-        initialProps: { refetchWritePolicy: 'merge' as RefetchWritePolicy },
+        initialProps: { refetchWritePolicy: "merge" as RefetchWritePolicy },
       }
     );
 
@@ -5843,7 +5843,7 @@ describe('useSuspenseQuery', () => {
       ],
     ]);
 
-    rerender({ refetchWritePolicy: 'overwrite' });
+    rerender({ refetchWritePolicy: "overwrite" });
 
     act(() => {
       result.current.refetch({ min: 30, max: 50 });
@@ -5875,7 +5875,7 @@ describe('useSuspenseQuery', () => {
     ]);
   });
 
-  it('applies `returnPartialData` on next fetch when it changes between renders', async () => {
+  it("applies `returnPartialData` on next fetch when it changes between renders", async () => {
     const fullQuery = gql`
       query {
         character {
@@ -5901,9 +5901,9 @@ describe('useSuspenseQuery', () => {
         result: {
           data: {
             character: {
-              __typename: 'Character',
-              id: '1',
-              name: 'Doctor Strange',
+              __typename: "Character",
+              id: "1",
+              name: "Doctor Strange",
             },
           },
         },
@@ -5913,9 +5913,9 @@ describe('useSuspenseQuery', () => {
         result: {
           data: {
             character: {
-              __typename: 'Character',
-              id: '1',
-              name: 'Doctor Strange (refetched)',
+              __typename: "Character",
+              id: "1",
+              name: "Doctor Strange (refetched)",
             },
           },
         },
@@ -5927,7 +5927,7 @@ describe('useSuspenseQuery', () => {
 
     cache.writeQuery({
       query: partialQuery,
-      data: { character: { __typename: 'Character', id: '1' } },
+      data: { character: { __typename: "Character", id: "1" } },
     });
 
     const { result, renders, rerender } = renderSuspenseHook(
@@ -5949,7 +5949,7 @@ describe('useSuspenseQuery', () => {
     rerender({ returnPartialData: true });
 
     cache.modify({
-      id: cache.identify({ __typename: 'Character', id: '1' }),
+      id: cache.identify({ __typename: "Character", id: "1" }),
       fields: {
         name: (_, { DELETE }) => DELETE,
       },
@@ -5957,7 +5957,7 @@ describe('useSuspenseQuery', () => {
 
     await waitFor(() => {
       expect(result.current.data).toEqual({
-        character: { __typename: 'Character', id: '1' },
+        character: { __typename: "Character", id: "1" },
       });
     });
 
@@ -5973,7 +5973,7 @@ describe('useSuspenseQuery', () => {
     expect(renders.suspenseCount).toBe(1);
     expect(renders.frames).toMatchObject([
       {
-        data: { character: { __typename: 'Character', id: '1' } },
+        data: { character: { __typename: "Character", id: "1" } },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       },
@@ -5983,7 +5983,7 @@ describe('useSuspenseQuery', () => {
         error: undefined,
       },
       {
-        data: { character: { __typename: 'Character', id: '1' } },
+        data: { character: { __typename: "Character", id: "1" } },
         networkStatus: NetworkStatus.loading,
         error: undefined,
       },
@@ -5995,7 +5995,7 @@ describe('useSuspenseQuery', () => {
     ]);
   });
 
-  it('applies updated `fetchPolicy` on next fetch when it changes between renders', async () => {
+  it("applies updated `fetchPolicy` on next fetch when it changes between renders", async () => {
     const query = gql`
       query {
         character {
@@ -6012,9 +6012,9 @@ describe('useSuspenseQuery', () => {
         result: {
           data: {
             character: {
-              __typename: 'Character',
-              id: '1',
-              name: 'Doctor Strange',
+              __typename: "Character",
+              id: "1",
+              name: "Doctor Strange",
             },
           },
         },
@@ -6028,9 +6028,9 @@ describe('useSuspenseQuery', () => {
       query,
       data: {
         character: {
-          __typename: 'Character',
-          id: '1',
-          name: 'Doctor Strangecache',
+          __typename: "Character",
+          id: "1",
+          name: "Doctor Strangecache",
         },
       },
     });
@@ -6041,7 +6041,7 @@ describe('useSuspenseQuery', () => {
         cache,
         mocks,
         initialProps: {
-          fetchPolicy: 'cache-first' as SuspenseQueryHookFetchPolicy,
+          fetchPolicy: "cache-first" as SuspenseQueryHookFetchPolicy,
         },
       }
     );
@@ -6049,18 +6049,18 @@ describe('useSuspenseQuery', () => {
     expect(result.current).toMatchObject({
       data: {
         character: {
-          __typename: 'Character',
-          id: '1',
-          name: 'Doctor Strangecache',
+          __typename: "Character",
+          id: "1",
+          name: "Doctor Strangecache",
         },
       },
       networkStatus: NetworkStatus.ready,
       error: undefined,
     });
 
-    rerender({ fetchPolicy: 'no-cache' });
+    rerender({ fetchPolicy: "no-cache" });
 
-    const cacheKey = cache.identify({ __typename: 'Character', id: '1' })!;
+    const cacheKey = cache.identify({ __typename: "Character", id: "1" })!;
 
     act(() => {
       result.current.refetch();
@@ -6069,9 +6069,9 @@ describe('useSuspenseQuery', () => {
     await waitFor(() => {
       expect(result.current.data).toEqual({
         character: {
-          __typename: 'Character',
-          id: '1',
-          name: 'Doctor Strange',
+          __typename: "Character",
+          id: "1",
+          name: "Doctor Strange",
         },
       });
     });
@@ -6079,9 +6079,9 @@ describe('useSuspenseQuery', () => {
     // Because we switched to a `no-cache` fetch policy, we should not see the
     // newly fetched data in the cache after the fetch occured.
     expect(cache.extract()[cacheKey]).toEqual({
-      __typename: 'Character',
-      id: '1',
-      name: 'Doctor Strangecache',
+      __typename: "Character",
+      id: "1",
+      name: "Doctor Strangecache",
     });
 
     // TODO: Determine why there is an extra render. Unfortunately this is hard
@@ -6120,7 +6120,7 @@ describe('useSuspenseQuery', () => {
     // ]);
   });
 
-  it('properly handles changing options along with changing `variables`', async () => {
+  it("properly handles changing options along with changing `variables`", async () => {
     const query = gql`
       query ($id: ID!) {
         character(id: $id) {
@@ -6133,20 +6133,20 @@ describe('useSuspenseQuery', () => {
 
     const mocks = [
       {
-        request: { query, variables: { id: '1' } },
+        request: { query, variables: { id: "1" } },
         result: {
-          errors: [new GraphQLError('oops')],
+          errors: [new GraphQLError("oops")],
         },
         delay: 10,
       },
       {
-        request: { query, variables: { id: '2' } },
+        request: { query, variables: { id: "2" } },
         result: {
           data: {
             character: {
-              __typename: 'Character',
-              id: '2',
-              name: 'Hulk',
+              __typename: "Character",
+              id: "2",
+              name: "Hulk",
             },
           },
         },
@@ -6159,13 +6159,13 @@ describe('useSuspenseQuery', () => {
     cache.writeQuery({
       query,
       variables: {
-        id: '1',
+        id: "1",
       },
       data: {
         character: {
-          __typename: 'Character',
-          id: '1',
-          name: 'Doctor Strangecache',
+          __typename: "Character",
+          id: "1",
+          name: "Doctor Strangecache",
         },
       },
     });
@@ -6177,8 +6177,8 @@ describe('useSuspenseQuery', () => {
         cache,
         mocks,
         initialProps: {
-          errorPolicy: 'none' as ErrorPolicy,
-          variables: { id: '1' },
+          errorPolicy: "none" as ErrorPolicy,
+          variables: { id: "1" },
         },
       }
     );
@@ -6186,16 +6186,16 @@ describe('useSuspenseQuery', () => {
     expect(result.current).toMatchObject({
       data: {
         character: {
-          __typename: 'Character',
-          id: '1',
-          name: 'Doctor Strangecache',
+          __typename: "Character",
+          id: "1",
+          name: "Doctor Strangecache",
         },
       },
       networkStatus: NetworkStatus.ready,
       error: undefined,
     });
 
-    rerender({ errorPolicy: 'none', variables: { id: '2' } });
+    rerender({ errorPolicy: "none", variables: { id: "2" } });
 
     expect(renders.suspenseCount).toBe(1);
 
@@ -6203,9 +6203,9 @@ describe('useSuspenseQuery', () => {
       expect(result.current).toMatchObject({
         data: {
           character: {
-            __typename: 'Character',
-            id: '2',
-            name: 'Hulk',
+            __typename: "Character",
+            id: "2",
+            name: "Hulk",
           },
         },
         networkStatus: NetworkStatus.ready,
@@ -6213,23 +6213,23 @@ describe('useSuspenseQuery', () => {
       });
     });
 
-    rerender({ errorPolicy: 'all', variables: { id: '1' } });
+    rerender({ errorPolicy: "all", variables: { id: "1" } });
 
     act(() => {
       result.current.refetch();
     });
 
     const expectedError = new ApolloError({
-      graphQLErrors: [new GraphQLError('oops')],
+      graphQLErrors: [new GraphQLError("oops")],
     });
 
     await waitFor(() => {
       expect(result.current).toMatchObject({
         data: {
           character: {
-            __typename: 'Character',
-            id: '1',
-            name: 'Doctor Strangecache',
+            __typename: "Character",
+            id: "1",
+            name: "Doctor Strangecache",
           },
         },
         networkStatus: NetworkStatus.error,
@@ -6240,7 +6240,7 @@ describe('useSuspenseQuery', () => {
     expect(renders.errorCount).toBe(0);
   });
 
-  it('does not oversubscribe when suspending multiple times', async () => {
+  it("does not oversubscribe when suspending multiple times", async () => {
     const query = gql`
       query UserQuery($id: String!) {
         user(id: $id) {
@@ -6252,21 +6252,21 @@ describe('useSuspenseQuery', () => {
 
     const mocks = [
       {
-        request: { query, variables: { id: '1' } },
+        request: { query, variables: { id: "1" } },
         result: {
-          data: { user: { id: '1', name: 'Captain Marvel' } },
+          data: { user: { id: "1", name: "Captain Marvel" } },
         },
       },
       {
-        request: { query, variables: { id: '1' } },
+        request: { query, variables: { id: "1" } },
         result: {
-          data: { user: { id: '1', name: 'Captain Marvel (updated)' } },
+          data: { user: { id: "1", name: "Captain Marvel (updated)" } },
         },
       },
       {
-        request: { query, variables: { id: '1' } },
+        request: { query, variables: { id: "1" } },
         result: {
-          data: { user: { id: '1', name: 'Captain Marvel (updated again)' } },
+          data: { user: { id: "1", name: "Captain Marvel (updated again)" } },
         },
       },
     ];
@@ -6277,8 +6277,8 @@ describe('useSuspenseQuery', () => {
     });
 
     const { result } = renderSuspenseHook(
-      () => useSuspenseQuery(query, { variables: { id: '1' } }),
-      { client, initialProps: { id: '1' } }
+      () => useSuspenseQuery(query, { variables: { id: "1" } }),
+      { client, initialProps: { id: "1" } }
     );
 
     await waitFor(() => {
@@ -6316,7 +6316,7 @@ describe('useSuspenseQuery', () => {
     expect(client.getObservableQueries().size).toBe(1);
   });
 
-  it('suspends deferred queries until initial chunk loads then streams in data as it loads', async () => {
+  it("suspends deferred queries until initial chunk loads then streams in data as it loads", async () => {
     const query = gql`
       query {
         greeting {
@@ -6341,14 +6341,14 @@ describe('useSuspenseQuery', () => {
 
     link.simulateResult({
       result: {
-        data: { greeting: { message: 'Hello world', __typename: 'Greeting' } },
+        data: { greeting: { message: "Hello world", __typename: "Greeting" } },
         hasNext: true,
       },
     });
 
     await waitFor(() => {
       expect(result.current).toMatchObject({
-        data: { greeting: { message: 'Hello world', __typename: 'Greeting' } },
+        data: { greeting: { message: "Hello world", __typename: "Greeting" } },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       });
@@ -6359,10 +6359,10 @@ describe('useSuspenseQuery', () => {
         incremental: [
           {
             data: {
-              recipient: { name: 'Alice', __typename: 'Person' },
-              __typename: 'Greeting',
+              recipient: { name: "Alice", __typename: "Person" },
+              __typename: "Greeting",
             },
-            path: ['greeting'],
+            path: ["greeting"],
           },
         ],
         hasNext: false,
@@ -6373,9 +6373,9 @@ describe('useSuspenseQuery', () => {
       expect(result.current).toMatchObject({
         data: {
           greeting: {
-            __typename: 'Greeting',
-            message: 'Hello world',
-            recipient: { __typename: 'Person', name: 'Alice' },
+            __typename: "Greeting",
+            message: "Hello world",
+            recipient: { __typename: "Person", name: "Alice" },
           },
         },
         networkStatus: NetworkStatus.ready,
@@ -6387,16 +6387,16 @@ describe('useSuspenseQuery', () => {
     expect(renders.suspenseCount).toBe(1);
     expect(renders.frames).toMatchObject([
       {
-        data: { greeting: { message: 'Hello world', __typename: 'Greeting' } },
+        data: { greeting: { message: "Hello world", __typename: "Greeting" } },
         networkStatus: NetworkStatus.ready,
         error: undefined,
       },
       {
         data: {
           greeting: {
-            __typename: 'Greeting',
-            message: 'Hello world',
-            recipient: { __typename: 'Person', name: 'Alice' },
+            __typename: "Greeting",
+            message: "Hello world",
+            recipient: { __typename: "Person", name: "Alice" },
           },
         },
         networkStatus: NetworkStatus.ready,
@@ -6406,10 +6406,10 @@ describe('useSuspenseQuery', () => {
   });
 
   it.each<SuspenseQueryHookFetchPolicy>([
-    'cache-first',
-    'network-only',
-    'no-cache',
-    'cache-and-network',
+    "cache-first",
+    "network-only",
+    "no-cache",
+    "cache-and-network",
   ])(
     'suspends deferred queries until initial chunk loads then streams in data as it loads when using a "%s" fetch policy',
     async (fetchPolicy) => {
@@ -6438,7 +6438,7 @@ describe('useSuspenseQuery', () => {
       link.simulateResult({
         result: {
           data: {
-            greeting: { message: 'Hello world', __typename: 'Greeting' },
+            greeting: { message: "Hello world", __typename: "Greeting" },
           },
           hasNext: true,
         },
@@ -6447,7 +6447,7 @@ describe('useSuspenseQuery', () => {
       await waitFor(() => {
         expect(result.current).toMatchObject({
           data: {
-            greeting: { message: 'Hello world', __typename: 'Greeting' },
+            greeting: { message: "Hello world", __typename: "Greeting" },
           },
           networkStatus: NetworkStatus.ready,
           error: undefined,
@@ -6459,10 +6459,10 @@ describe('useSuspenseQuery', () => {
           incremental: [
             {
               data: {
-                recipient: { name: 'Alice', __typename: 'Person' },
-                __typename: 'Greeting',
+                recipient: { name: "Alice", __typename: "Person" },
+                __typename: "Greeting",
               },
-              path: ['greeting'],
+              path: ["greeting"],
             },
           ],
           hasNext: false,
@@ -6473,9 +6473,9 @@ describe('useSuspenseQuery', () => {
         expect(result.current).toMatchObject({
           data: {
             greeting: {
-              __typename: 'Greeting',
-              message: 'Hello world',
-              recipient: { __typename: 'Person', name: 'Alice' },
+              __typename: "Greeting",
+              message: "Hello world",
+              recipient: { __typename: "Person", name: "Alice" },
             },
           },
           networkStatus: NetworkStatus.ready,
@@ -6488,7 +6488,7 @@ describe('useSuspenseQuery', () => {
       expect(renders.frames).toMatchObject([
         {
           data: {
-            greeting: { message: 'Hello world', __typename: 'Greeting' },
+            greeting: { message: "Hello world", __typename: "Greeting" },
           },
           networkStatus: NetworkStatus.ready,
           error: undefined,
@@ -6496,9 +6496,9 @@ describe('useSuspenseQuery', () => {
         {
           data: {
             greeting: {
-              __typename: 'Greeting',
-              message: 'Hello world',
-              recipient: { __typename: 'Person', name: 'Alice' },
+              __typename: "Greeting",
+              message: "Hello world",
+              recipient: { __typename: "Person", name: "Alice" },
             },
           },
           networkStatus: NetworkStatus.ready,
@@ -6528,24 +6528,24 @@ describe('useSuspenseQuery', () => {
       query,
       data: {
         greeting: {
-          __typename: 'Greeting',
-          message: 'Hello world',
-          recipient: { __typename: 'Person', name: 'Alice' },
+          __typename: "Greeting",
+          message: "Hello world",
+          recipient: { __typename: "Person", name: "Alice" },
         },
       },
     });
 
     const { result, renders } = renderSuspenseHook(
-      () => useSuspenseQuery(query, { fetchPolicy: 'cache-first' }),
+      () => useSuspenseQuery(query, { fetchPolicy: "cache-first" }),
       { cache }
     );
 
     expect(result.current).toMatchObject({
       data: {
         greeting: {
-          message: 'Hello world',
-          __typename: 'Greeting',
-          recipient: { __typename: 'Person', name: 'Alice' },
+          message: "Hello world",
+          __typename: "Greeting",
+          recipient: { __typename: "Person", name: "Alice" },
         },
       },
       networkStatus: NetworkStatus.ready,
@@ -6557,9 +6557,9 @@ describe('useSuspenseQuery', () => {
       {
         data: {
           greeting: {
-            __typename: 'Greeting',
-            message: 'Hello world',
-            recipient: { __typename: 'Person', name: 'Alice' },
+            __typename: "Greeting",
+            message: "Hello world",
+            recipient: { __typename: "Person", name: "Alice" },
           },
         },
         networkStatus: NetworkStatus.ready,
@@ -6587,13 +6587,13 @@ describe('useSuspenseQuery', () => {
 
     // We are intentionally writing partial data to the cache. Supress console
     // warnings to avoid unnecessary noise in the test.
-    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
+    const consoleSpy = jest.spyOn(console, "error").mockImplementation();
     cache.writeQuery({
       query,
       data: {
         greeting: {
-          __typename: 'Greeting',
-          recipient: { __typename: 'Person', name: 'Cached Alice' },
+          __typename: "Greeting",
+          recipient: { __typename: "Person", name: "Cached Alice" },
         },
       },
     });
@@ -6602,7 +6602,7 @@ describe('useSuspenseQuery', () => {
     const { result, renders } = renderSuspenseHook(
       () =>
         useSuspenseQuery(query, {
-          fetchPolicy: 'cache-first',
+          fetchPolicy: "cache-first",
           returnPartialData: true,
         }),
       { cache, link }
@@ -6611,8 +6611,8 @@ describe('useSuspenseQuery', () => {
     expect(result.current).toMatchObject({
       data: {
         greeting: {
-          __typename: 'Greeting',
-          recipient: { __typename: 'Person', name: 'Cached Alice' },
+          __typename: "Greeting",
+          recipient: { __typename: "Person", name: "Cached Alice" },
         },
       },
       networkStatus: NetworkStatus.loading,
@@ -6621,7 +6621,7 @@ describe('useSuspenseQuery', () => {
 
     link.simulateResult({
       result: {
-        data: { greeting: { message: 'Hello world', __typename: 'Greeting' } },
+        data: { greeting: { message: "Hello world", __typename: "Greeting" } },
         hasNext: true,
       },
     });
@@ -6630,9 +6630,9 @@ describe('useSuspenseQuery', () => {
       expect(result.current).toMatchObject({
         data: {
           greeting: {
-            __typename: 'Greeting',
-            message: 'Hello world',
-            recipient: { __typename: 'Person', name: 'Cached Alice' },
+            __typename: "Greeting",
+            message: "Hello world",
+            recipient: { __typename: "Person", name: "Cached Alice" },
           },
         },
         networkStatus: NetworkStatus.ready,
@@ -6645,10 +6645,10 @@ describe('useSuspenseQuery', () => {
         incremental: [
           {
             data: {
-              __typename: 'Greeting',
-              recipient: { name: 'Alice', __typename: 'Person' },
+              __typename: "Greeting",
+              recipient: { name: "Alice", __typename: "Person" },
             },
-            path: ['greeting'],
+            path: ["greeting"],
           },
         ],
         hasNext: false,
@@ -6659,9 +6659,9 @@ describe('useSuspenseQuery', () => {
       expect(result.current).toMatchObject({
         data: {
           greeting: {
-            __typename: 'Greeting',
-            message: 'Hello world',
-            recipient: { __typename: 'Person', name: 'Alice' },
+            __typename: "Greeting",
+            message: "Hello world",
+            recipient: { __typename: "Person", name: "Alice" },
           },
         },
         networkStatus: NetworkStatus.ready,
@@ -6675,8 +6675,8 @@ describe('useSuspenseQuery', () => {
       {
         data: {
           greeting: {
-            __typename: 'Greeting',
-            recipient: { __typename: 'Person', name: 'Cached Alice' },
+            __typename: "Greeting",
+            recipient: { __typename: "Person", name: "Cached Alice" },
           },
         },
         networkStatus: NetworkStatus.loading,
@@ -6685,9 +6685,9 @@ describe('useSuspenseQuery', () => {
       {
         data: {
           greeting: {
-            __typename: 'Greeting',
-            message: 'Hello world',
-            recipient: { __typename: 'Person', name: 'Cached Alice' },
+            __typename: "Greeting",
+            message: "Hello world",
+            recipient: { __typename: "Person", name: "Cached Alice" },
           },
         },
         networkStatus: NetworkStatus.ready,
@@ -6696,9 +6696,9 @@ describe('useSuspenseQuery', () => {
       {
         data: {
           greeting: {
-            __typename: 'Greeting',
-            message: 'Hello world',
-            recipient: { __typename: 'Person', name: 'Alice' },
+            __typename: "Greeting",
+            message: "Hello world",
+            recipient: { __typename: "Person", name: "Alice" },
           },
         },
         networkStatus: NetworkStatus.ready,
@@ -6729,24 +6729,24 @@ describe('useSuspenseQuery', () => {
       query,
       data: {
         greeting: {
-          __typename: 'Greeting',
-          message: 'Hello cached',
-          recipient: { __typename: 'Person', name: 'Cached Alice' },
+          __typename: "Greeting",
+          message: "Hello cached",
+          recipient: { __typename: "Person", name: "Cached Alice" },
         },
       },
     });
 
     const { result, renders } = renderSuspenseHook(
-      () => useSuspenseQuery(query, { fetchPolicy: 'cache-and-network' }),
+      () => useSuspenseQuery(query, { fetchPolicy: "cache-and-network" }),
       { client }
     );
 
     expect(result.current).toMatchObject({
       data: {
         greeting: {
-          message: 'Hello cached',
-          __typename: 'Greeting',
-          recipient: { __typename: 'Person', name: 'Cached Alice' },
+          message: "Hello cached",
+          __typename: "Greeting",
+          recipient: { __typename: "Person", name: "Cached Alice" },
         },
       },
       networkStatus: NetworkStatus.loading,
@@ -6755,7 +6755,7 @@ describe('useSuspenseQuery', () => {
 
     link.simulateResult({
       result: {
-        data: { greeting: { __typename: 'Greeting', message: 'Hello world' } },
+        data: { greeting: { __typename: "Greeting", message: "Hello world" } },
         hasNext: true,
       },
     });
@@ -6764,9 +6764,9 @@ describe('useSuspenseQuery', () => {
       expect(result.current).toMatchObject({
         data: {
           greeting: {
-            __typename: 'Greeting',
-            message: 'Hello world',
-            recipient: { __typename: 'Person', name: 'Cached Alice' },
+            __typename: "Greeting",
+            message: "Hello world",
+            recipient: { __typename: "Person", name: "Cached Alice" },
           },
         },
         networkStatus: NetworkStatus.ready,
@@ -6779,10 +6779,10 @@ describe('useSuspenseQuery', () => {
         incremental: [
           {
             data: {
-              recipient: { name: 'Alice', __typename: 'Person' },
-              __typename: 'Greeting',
+              recipient: { name: "Alice", __typename: "Person" },
+              __typename: "Greeting",
             },
-            path: ['greeting'],
+            path: ["greeting"],
           },
         ],
         hasNext: false,
@@ -6793,9 +6793,9 @@ describe('useSuspenseQuery', () => {
       expect(result.current).toMatchObject({
         data: {
           greeting: {
-            __typename: 'Greeting',
-            message: 'Hello world',
-            recipient: { __typename: 'Person', name: 'Alice' },
+            __typename: "Greeting",
+            message: "Hello world",
+            recipient: { __typename: "Person", name: "Alice" },
           },
         },
         networkStatus: NetworkStatus.ready,
@@ -6809,9 +6809,9 @@ describe('useSuspenseQuery', () => {
       {
         data: {
           greeting: {
-            __typename: 'Greeting',
-            message: 'Hello cached',
-            recipient: { __typename: 'Person', name: 'Cached Alice' },
+            __typename: "Greeting",
+            message: "Hello cached",
+            recipient: { __typename: "Person", name: "Cached Alice" },
           },
         },
         networkStatus: NetworkStatus.loading,
@@ -6820,9 +6820,9 @@ describe('useSuspenseQuery', () => {
       {
         data: {
           greeting: {
-            __typename: 'Greeting',
-            message: 'Hello world',
-            recipient: { __typename: 'Person', name: 'Cached Alice' },
+            __typename: "Greeting",
+            message: "Hello world",
+            recipient: { __typename: "Person", name: "Cached Alice" },
           },
         },
         networkStatus: NetworkStatus.ready,
@@ -6831,9 +6831,9 @@ describe('useSuspenseQuery', () => {
       {
         data: {
           greeting: {
-            __typename: 'Greeting',
-            message: 'Hello world',
-            recipient: { __typename: 'Person', name: 'Alice' },
+            __typename: "Greeting",
+            message: "Hello world",
+            recipient: { __typename: "Person", name: "Alice" },
           },
         },
         networkStatus: NetworkStatus.ready,
@@ -6842,7 +6842,7 @@ describe('useSuspenseQuery', () => {
     ]);
   });
 
-  it('suspends deferred queries with lists and properly patches results', async () => {
+  it("suspends deferred queries with lists and properly patches results", async () => {
     const query = gql`
       query {
         greetings {
@@ -6869,8 +6869,8 @@ describe('useSuspenseQuery', () => {
       result: {
         data: {
           greetings: [
-            { __typename: 'Greeting', message: 'Hello world' },
-            { __typename: 'Greeting', message: 'Hello again' },
+            { __typename: "Greeting", message: "Hello world" },
+            { __typename: "Greeting", message: "Hello again" },
           ],
         },
         hasNext: true,
@@ -6881,8 +6881,8 @@ describe('useSuspenseQuery', () => {
       expect(result.current).toMatchObject({
         data: {
           greetings: [
-            { __typename: 'Greeting', message: 'Hello world' },
-            { __typename: 'Greeting', message: 'Hello again' },
+            { __typename: "Greeting", message: "Hello world" },
+            { __typename: "Greeting", message: "Hello again" },
           ],
         },
         networkStatus: NetworkStatus.ready,
@@ -6895,10 +6895,10 @@ describe('useSuspenseQuery', () => {
         incremental: [
           {
             data: {
-              __typename: 'Greeting',
-              recipient: { __typename: 'Person', name: 'Alice' },
+              __typename: "Greeting",
+              recipient: { __typename: "Person", name: "Alice" },
             },
-            path: ['greetings', 0],
+            path: ["greetings", 0],
           },
         ],
         hasNext: true,
@@ -6910,13 +6910,13 @@ describe('useSuspenseQuery', () => {
         data: {
           greetings: [
             {
-              __typename: 'Greeting',
-              message: 'Hello world',
-              recipient: { __typename: 'Person', name: 'Alice' },
+              __typename: "Greeting",
+              message: "Hello world",
+              recipient: { __typename: "Person", name: "Alice" },
             },
             {
-              __typename: 'Greeting',
-              message: 'Hello again',
+              __typename: "Greeting",
+              message: "Hello again",
             },
           ],
         },
@@ -6930,10 +6930,10 @@ describe('useSuspenseQuery', () => {
         incremental: [
           {
             data: {
-              __typename: 'Greeting',
-              recipient: { __typename: 'Person', name: 'Bob' },
+              __typename: "Greeting",
+              recipient: { __typename: "Person", name: "Bob" },
             },
-            path: ['greetings', 1],
+            path: ["greetings", 1],
           },
         ],
         hasNext: false,
@@ -6945,14 +6945,14 @@ describe('useSuspenseQuery', () => {
         data: {
           greetings: [
             {
-              __typename: 'Greeting',
-              message: 'Hello world',
-              recipient: { __typename: 'Person', name: 'Alice' },
+              __typename: "Greeting",
+              message: "Hello world",
+              recipient: { __typename: "Person", name: "Alice" },
             },
             {
-              __typename: 'Greeting',
-              message: 'Hello again',
-              recipient: { __typename: 'Person', name: 'Bob' },
+              __typename: "Greeting",
+              message: "Hello again",
+              recipient: { __typename: "Person", name: "Bob" },
             },
           ],
         },
@@ -6967,8 +6967,8 @@ describe('useSuspenseQuery', () => {
       {
         data: {
           greetings: [
-            { __typename: 'Greeting', message: 'Hello world' },
-            { __typename: 'Greeting', message: 'Hello again' },
+            { __typename: "Greeting", message: "Hello world" },
+            { __typename: "Greeting", message: "Hello again" },
           ],
         },
         networkStatus: NetworkStatus.ready,
@@ -6978,13 +6978,13 @@ describe('useSuspenseQuery', () => {
         data: {
           greetings: [
             {
-              __typename: 'Greeting',
-              message: 'Hello world',
-              recipient: { __typename: 'Person', name: 'Alice' },
+              __typename: "Greeting",
+              message: "Hello world",
+              recipient: { __typename: "Person", name: "Alice" },
             },
             {
-              __typename: 'Greeting',
-              message: 'Hello again',
+              __typename: "Greeting",
+              message: "Hello again",
             },
           ],
         },
@@ -6995,14 +6995,14 @@ describe('useSuspenseQuery', () => {
         data: {
           greetings: [
             {
-              __typename: 'Greeting',
-              message: 'Hello world',
-              recipient: { __typename: 'Person', name: 'Alice' },
+              __typename: "Greeting",
+              message: "Hello world",
+              recipient: { __typename: "Person", name: "Alice" },
             },
             {
-              __typename: 'Greeting',
-              message: 'Hello again',
-              recipient: { __typename: 'Person', name: 'Bob' },
+              __typename: "Greeting",
+              message: "Hello again",
+              recipient: { __typename: "Person", name: "Bob" },
             },
           ],
         },
@@ -7012,7 +7012,7 @@ describe('useSuspenseQuery', () => {
     ]);
   });
 
-  it('suspends queries with deferred fragments in lists and properly merges arrays', async () => {
+  it("suspends queries with deferred fragments in lists and properly merges arrays", async () => {
     const query = gql`
       query DeferVariation {
         allProducts {
@@ -7044,20 +7044,20 @@ describe('useSuspenseQuery', () => {
         data: {
           allProducts: [
             {
-              __typename: 'Product',
+              __typename: "Product",
               delivery: {
-                __typename: 'DeliveryEstimates',
+                __typename: "DeliveryEstimates",
               },
-              id: 'apollo-federation',
-              sku: 'federation',
+              id: "apollo-federation",
+              sku: "federation",
             },
             {
-              __typename: 'Product',
+              __typename: "Product",
               delivery: {
-                __typename: 'DeliveryEstimates',
+                __typename: "DeliveryEstimates",
               },
-              id: 'apollo-studio',
-              sku: 'studio',
+              id: "apollo-studio",
+              sku: "studio",
             },
           ],
         },
@@ -7070,20 +7070,20 @@ describe('useSuspenseQuery', () => {
         data: {
           allProducts: [
             {
-              __typename: 'Product',
+              __typename: "Product",
               delivery: {
-                __typename: 'DeliveryEstimates',
+                __typename: "DeliveryEstimates",
               },
-              id: 'apollo-federation',
-              sku: 'federation',
+              id: "apollo-federation",
+              sku: "federation",
             },
             {
-              __typename: 'Product',
+              __typename: "Product",
               delivery: {
-                __typename: 'DeliveryEstimates',
+                __typename: "DeliveryEstimates",
               },
-              id: 'apollo-studio',
-              sku: 'studio',
+              id: "apollo-studio",
+              sku: "studio",
             },
           ],
         },
@@ -7098,19 +7098,19 @@ describe('useSuspenseQuery', () => {
         incremental: [
           {
             data: {
-              __typename: 'DeliveryEstimates',
-              estimatedDelivery: '6/25/2021',
-              fastestDelivery: '6/24/2021',
+              __typename: "DeliveryEstimates",
+              estimatedDelivery: "6/25/2021",
+              fastestDelivery: "6/24/2021",
             },
-            path: ['allProducts', 0, 'delivery'],
+            path: ["allProducts", 0, "delivery"],
           },
           {
             data: {
-              __typename: 'DeliveryEstimates',
-              estimatedDelivery: '6/25/2021',
-              fastestDelivery: '6/24/2021',
+              __typename: "DeliveryEstimates",
+              estimatedDelivery: "6/25/2021",
+              fastestDelivery: "6/24/2021",
             },
-            path: ['allProducts', 1, 'delivery'],
+            path: ["allProducts", 1, "delivery"],
           },
         ],
       },
@@ -7121,24 +7121,24 @@ describe('useSuspenseQuery', () => {
         data: {
           allProducts: [
             {
-              __typename: 'Product',
+              __typename: "Product",
               delivery: {
-                __typename: 'DeliveryEstimates',
-                estimatedDelivery: '6/25/2021',
-                fastestDelivery: '6/24/2021',
+                __typename: "DeliveryEstimates",
+                estimatedDelivery: "6/25/2021",
+                fastestDelivery: "6/24/2021",
               },
-              id: 'apollo-federation',
-              sku: 'federation',
+              id: "apollo-federation",
+              sku: "federation",
             },
             {
-              __typename: 'Product',
+              __typename: "Product",
               delivery: {
-                __typename: 'DeliveryEstimates',
-                estimatedDelivery: '6/25/2021',
-                fastestDelivery: '6/24/2021',
+                __typename: "DeliveryEstimates",
+                estimatedDelivery: "6/25/2021",
+                fastestDelivery: "6/24/2021",
               },
-              id: 'apollo-studio',
-              sku: 'studio',
+              id: "apollo-studio",
+              sku: "studio",
             },
           ],
         },
@@ -7148,7 +7148,7 @@ describe('useSuspenseQuery', () => {
     });
   });
 
-  it('incrementally rerenders data returned by a `refetch` for a deferred query', async () => {
+  it("incrementally rerenders data returned by a `refetch` for a deferred query", async () => {
     const query = gql`
       query {
         greeting {
@@ -7173,7 +7173,7 @@ describe('useSuspenseQuery', () => {
 
     link.simulateResult({
       result: {
-        data: { greeting: { __typename: 'Greeting', message: 'Hello world' } },
+        data: { greeting: { __typename: "Greeting", message: "Hello world" } },
         hasNext: true,
       },
     });
@@ -7182,8 +7182,8 @@ describe('useSuspenseQuery', () => {
       expect(result.current).toMatchObject({
         data: {
           greeting: {
-            __typename: 'Greeting',
-            message: 'Hello world',
+            __typename: "Greeting",
+            message: "Hello world",
           },
         },
         networkStatus: NetworkStatus.ready,
@@ -7197,9 +7197,9 @@ describe('useSuspenseQuery', () => {
           incremental: [
             {
               data: {
-                recipient: { name: 'Alice', __typename: 'Person' },
+                recipient: { name: "Alice", __typename: "Person" },
               },
-              path: ['greeting'],
+              path: ["greeting"],
             },
           ],
           hasNext: false,
@@ -7212,11 +7212,11 @@ describe('useSuspenseQuery', () => {
       expect(result.current).toMatchObject({
         data: {
           greeting: {
-            __typename: 'Greeting',
-            message: 'Hello world',
+            __typename: "Greeting",
+            message: "Hello world",
             recipient: {
-              __typename: 'Person',
-              name: 'Alice',
+              __typename: "Person",
+              name: "Alice",
             },
           },
         },
@@ -7234,8 +7234,8 @@ describe('useSuspenseQuery', () => {
       result: {
         data: {
           greeting: {
-            __typename: 'Greeting',
-            message: 'Goodbye',
+            __typename: "Greeting",
+            message: "Goodbye",
           },
         },
         hasNext: true,
@@ -7246,11 +7246,11 @@ describe('useSuspenseQuery', () => {
       expect(result.current).toMatchObject({
         data: {
           greeting: {
-            __typename: 'Greeting',
-            message: 'Goodbye',
+            __typename: "Greeting",
+            message: "Goodbye",
             recipient: {
-              __typename: 'Person',
-              name: 'Alice',
+              __typename: "Person",
+              name: "Alice",
             },
           },
         },
@@ -7265,9 +7265,9 @@ describe('useSuspenseQuery', () => {
           incremental: [
             {
               data: {
-                recipient: { name: 'Bob', __typename: 'Person' },
+                recipient: { name: "Bob", __typename: "Person" },
               },
-              path: ['greeting'],
+              path: ["greeting"],
             },
           ],
           hasNext: false,
@@ -7280,11 +7280,11 @@ describe('useSuspenseQuery', () => {
       expect(result.current).toMatchObject({
         data: {
           greeting: {
-            __typename: 'Greeting',
-            message: 'Goodbye',
+            __typename: "Greeting",
+            message: "Goodbye",
             recipient: {
-              __typename: 'Person',
-              name: 'Bob',
+              __typename: "Person",
+              name: "Bob",
             },
           },
         },
@@ -7296,11 +7296,11 @@ describe('useSuspenseQuery', () => {
     await expect(refetchPromise!).resolves.toEqual({
       data: {
         greeting: {
-          __typename: 'Greeting',
-          message: 'Goodbye',
+          __typename: "Greeting",
+          message: "Goodbye",
           recipient: {
-            __typename: 'Person',
-            name: 'Bob',
+            __typename: "Person",
+            name: "Bob",
           },
         },
       },
@@ -7315,8 +7315,8 @@ describe('useSuspenseQuery', () => {
       {
         data: {
           greeting: {
-            __typename: 'Greeting',
-            message: 'Hello world',
+            __typename: "Greeting",
+            message: "Hello world",
           },
         },
         networkStatus: NetworkStatus.ready,
@@ -7325,11 +7325,11 @@ describe('useSuspenseQuery', () => {
       {
         data: {
           greeting: {
-            __typename: 'Greeting',
-            message: 'Hello world',
+            __typename: "Greeting",
+            message: "Hello world",
             recipient: {
-              __typename: 'Person',
-              name: 'Alice',
+              __typename: "Person",
+              name: "Alice",
             },
           },
         },
@@ -7339,11 +7339,11 @@ describe('useSuspenseQuery', () => {
       {
         data: {
           greeting: {
-            __typename: 'Greeting',
-            message: 'Goodbye',
+            __typename: "Greeting",
+            message: "Goodbye",
             recipient: {
-              __typename: 'Person',
-              name: 'Alice',
+              __typename: "Person",
+              name: "Alice",
             },
           },
         },
@@ -7353,11 +7353,11 @@ describe('useSuspenseQuery', () => {
       {
         data: {
           greeting: {
-            __typename: 'Greeting',
-            message: 'Goodbye',
+            __typename: "Greeting",
+            message: "Goodbye",
             recipient: {
-              __typename: 'Person',
-              name: 'Bob',
+              __typename: "Person",
+              name: "Bob",
             },
           },
         },
@@ -7367,7 +7367,7 @@ describe('useSuspenseQuery', () => {
     ]);
   });
 
-  it('incrementally renders data returned after skipping a deferred query', async () => {
+  it("incrementally renders data returned after skipping a deferred query", async () => {
     const query = gql`
       query {
         greeting {
@@ -7402,7 +7402,7 @@ describe('useSuspenseQuery', () => {
 
     link.simulateResult({
       result: {
-        data: { greeting: { __typename: 'Greeting', message: 'Hello world' } },
+        data: { greeting: { __typename: "Greeting", message: "Hello world" } },
         hasNext: true,
       },
     });
@@ -7411,8 +7411,8 @@ describe('useSuspenseQuery', () => {
       expect(result.current).toMatchObject({
         data: {
           greeting: {
-            __typename: 'Greeting',
-            message: 'Hello world',
+            __typename: "Greeting",
+            message: "Hello world",
           },
         },
         networkStatus: NetworkStatus.ready,
@@ -7426,9 +7426,9 @@ describe('useSuspenseQuery', () => {
           incremental: [
             {
               data: {
-                recipient: { name: 'Alice', __typename: 'Person' },
+                recipient: { name: "Alice", __typename: "Person" },
               },
-              path: ['greeting'],
+              path: ["greeting"],
             },
           ],
           hasNext: false,
@@ -7441,11 +7441,11 @@ describe('useSuspenseQuery', () => {
       expect(result.current).toMatchObject({
         data: {
           greeting: {
-            __typename: 'Greeting',
-            message: 'Hello world',
+            __typename: "Greeting",
+            message: "Hello world",
             recipient: {
-              __typename: 'Person',
-              name: 'Alice',
+              __typename: "Person",
+              name: "Alice",
             },
           },
         },
@@ -7461,8 +7461,8 @@ describe('useSuspenseQuery', () => {
       {
         data: {
           greeting: {
-            __typename: 'Greeting',
-            message: 'Hello world',
+            __typename: "Greeting",
+            message: "Hello world",
           },
         },
         networkStatus: NetworkStatus.ready,
@@ -7471,11 +7471,11 @@ describe('useSuspenseQuery', () => {
       {
         data: {
           greeting: {
-            __typename: 'Greeting',
-            message: 'Hello world',
+            __typename: "Greeting",
+            message: "Hello world",
             recipient: {
-              __typename: 'Person',
-              name: 'Alice',
+              __typename: "Person",
+              name: "Alice",
             },
           },
         },
@@ -7496,7 +7496,7 @@ describe('useSuspenseQuery', () => {
   // the core bug is fixed, this test can be removed in favor of the other test.
   //
   // https://github.com/apollographql/apollo-client/issues/11034
-  it('rerenders data returned by `fetchMore` for a deferred query', async () => {
+  it("rerenders data returned by `fetchMore` for a deferred query", async () => {
     const query = gql`
       query ($offset: Int) {
         greetings(offset: $offset) {
@@ -7530,7 +7530,7 @@ describe('useSuspenseQuery', () => {
     link.simulateResult({
       result: {
         data: {
-          greetings: [{ __typename: 'Greeting', message: 'Hello world' }],
+          greetings: [{ __typename: "Greeting", message: "Hello world" }],
         },
         hasNext: true,
       },
@@ -7541,8 +7541,8 @@ describe('useSuspenseQuery', () => {
         data: {
           greetings: [
             {
-              __typename: 'Greeting',
-              message: 'Hello world',
+              __typename: "Greeting",
+              message: "Hello world",
             },
           ],
         },
@@ -7557,9 +7557,9 @@ describe('useSuspenseQuery', () => {
           incremental: [
             {
               data: {
-                recipient: { name: 'Alice', __typename: 'Person' },
+                recipient: { name: "Alice", __typename: "Person" },
               },
-              path: ['greetings', 0],
+              path: ["greetings", 0],
             },
           ],
           hasNext: false,
@@ -7573,11 +7573,11 @@ describe('useSuspenseQuery', () => {
         data: {
           greetings: [
             {
-              __typename: 'Greeting',
-              message: 'Hello world',
+              __typename: "Greeting",
+              message: "Hello world",
               recipient: {
-                __typename: 'Person',
-                name: 'Alice',
+                __typename: "Person",
+                name: "Alice",
               },
             },
           ],
@@ -7597,8 +7597,8 @@ describe('useSuspenseQuery', () => {
         data: {
           greetings: [
             {
-              __typename: 'Greeting',
-              message: 'Goodbye',
+              __typename: "Greeting",
+              message: "Goodbye",
             },
           ],
         },
@@ -7636,9 +7636,9 @@ describe('useSuspenseQuery', () => {
           incremental: [
             {
               data: {
-                recipient: { name: 'Bob', __typename: 'Person' },
+                recipient: { name: "Bob", __typename: "Person" },
               },
-              path: ['greetings', 0],
+              path: ["greetings", 0],
             },
           ],
           hasNext: false,
@@ -7652,19 +7652,19 @@ describe('useSuspenseQuery', () => {
         data: {
           greetings: [
             {
-              __typename: 'Greeting',
-              message: 'Hello world',
+              __typename: "Greeting",
+              message: "Hello world",
               recipient: {
-                __typename: 'Person',
-                name: 'Alice',
+                __typename: "Person",
+                name: "Alice",
               },
             },
             {
-              __typename: 'Greeting',
-              message: 'Goodbye',
+              __typename: "Greeting",
+              message: "Goodbye",
               recipient: {
-                __typename: 'Person',
-                name: 'Bob',
+                __typename: "Person",
+                name: "Bob",
               },
             },
           ],
@@ -7678,11 +7678,11 @@ describe('useSuspenseQuery', () => {
       data: {
         greetings: [
           {
-            __typename: 'Greeting',
-            message: 'Goodbye',
+            __typename: "Greeting",
+            message: "Goodbye",
             recipient: {
-              __typename: 'Person',
-              name: 'Bob',
+              __typename: "Person",
+              name: "Bob",
             },
           },
         ],
@@ -7699,8 +7699,8 @@ describe('useSuspenseQuery', () => {
         data: {
           greetings: [
             {
-              __typename: 'Greeting',
-              message: 'Hello world',
+              __typename: "Greeting",
+              message: "Hello world",
             },
           ],
         },
@@ -7711,11 +7711,11 @@ describe('useSuspenseQuery', () => {
         data: {
           greetings: [
             {
-              __typename: 'Greeting',
-              message: 'Hello world',
+              __typename: "Greeting",
+              message: "Hello world",
               recipient: {
-                __typename: 'Person',
-                name: 'Alice',
+                __typename: "Person",
+                name: "Alice",
               },
             },
           ],
@@ -7748,19 +7748,19 @@ describe('useSuspenseQuery', () => {
         data: {
           greetings: [
             {
-              __typename: 'Greeting',
-              message: 'Hello world',
+              __typename: "Greeting",
+              message: "Hello world",
               recipient: {
-                __typename: 'Person',
-                name: 'Alice',
+                __typename: "Person",
+                name: "Alice",
               },
             },
             {
-              __typename: 'Greeting',
-              message: 'Goodbye',
+              __typename: "Greeting",
+              message: "Goodbye",
               recipient: {
-                __typename: 'Person',
-                name: 'Bob',
+                __typename: "Person",
+                name: "Bob",
               },
             },
           ],
@@ -7777,7 +7777,7 @@ describe('useSuspenseQuery', () => {
   //
   // https://github.com/apollographql/apollo-client/issues/11034
   it.failing(
-    'incrementally rerenders data returned by a `fetchMore` for a deferred query',
+    "incrementally rerenders data returned by a `fetchMore` for a deferred query",
     async () => {
       const query = gql`
         query ($offset: Int) {
@@ -7812,7 +7812,7 @@ describe('useSuspenseQuery', () => {
       link.simulateResult({
         result: {
           data: {
-            greetings: [{ __typename: 'Greeting', message: 'Hello world' }],
+            greetings: [{ __typename: "Greeting", message: "Hello world" }],
           },
           hasNext: true,
         },
@@ -7823,8 +7823,8 @@ describe('useSuspenseQuery', () => {
           data: {
             greetings: [
               {
-                __typename: 'Greeting',
-                message: 'Hello world',
+                __typename: "Greeting",
+                message: "Hello world",
               },
             ],
           },
@@ -7839,9 +7839,9 @@ describe('useSuspenseQuery', () => {
             incremental: [
               {
                 data: {
-                  recipient: { name: 'Alice', __typename: 'Person' },
+                  recipient: { name: "Alice", __typename: "Person" },
                 },
-                path: ['greetings', 0],
+                path: ["greetings", 0],
               },
             ],
             hasNext: false,
@@ -7855,11 +7855,11 @@ describe('useSuspenseQuery', () => {
           data: {
             greetings: [
               {
-                __typename: 'Greeting',
-                message: 'Hello world',
+                __typename: "Greeting",
+                message: "Hello world",
                 recipient: {
-                  __typename: 'Person',
-                  name: 'Alice',
+                  __typename: "Person",
+                  name: "Alice",
                 },
               },
             ],
@@ -7881,8 +7881,8 @@ describe('useSuspenseQuery', () => {
           data: {
             greetings: [
               {
-                __typename: 'Greeting',
-                message: 'Goodbye',
+                __typename: "Greeting",
+                message: "Goodbye",
               },
             ],
           },
@@ -7895,16 +7895,16 @@ describe('useSuspenseQuery', () => {
           data: {
             greetings: [
               {
-                __typename: 'Greeting',
-                message: 'Hello world',
+                __typename: "Greeting",
+                message: "Hello world",
                 recipient: {
-                  __typename: 'Person',
-                  name: 'Alice',
+                  __typename: "Person",
+                  name: "Alice",
                 },
               },
               {
-                __typename: 'Greeting',
-                message: 'Goodbye',
+                __typename: "Greeting",
+                message: "Goodbye",
               },
             ],
           },
@@ -7919,9 +7919,9 @@ describe('useSuspenseQuery', () => {
             incremental: [
               {
                 data: {
-                  recipient: { name: 'Bob', __typename: 'Person' },
+                  recipient: { name: "Bob", __typename: "Person" },
                 },
-                path: ['greetings', 0],
+                path: ["greetings", 0],
               },
             ],
             hasNext: false,
@@ -7935,19 +7935,19 @@ describe('useSuspenseQuery', () => {
           data: {
             greetings: [
               {
-                __typename: 'Greeting',
-                message: 'Hello world',
+                __typename: "Greeting",
+                message: "Hello world",
                 recipient: {
-                  __typename: 'Person',
-                  name: 'Alice',
+                  __typename: "Person",
+                  name: "Alice",
                 },
               },
               {
-                __typename: 'Greeting',
-                message: 'Goodbye',
+                __typename: "Greeting",
+                message: "Goodbye",
                 recipient: {
-                  __typename: 'Person',
-                  name: 'Bob',
+                  __typename: "Person",
+                  name: "Bob",
                 },
               },
             ],
@@ -7961,11 +7961,11 @@ describe('useSuspenseQuery', () => {
         data: {
           greetings: [
             {
-              __typename: 'Greeting',
-              message: 'Goodbye',
+              __typename: "Greeting",
+              message: "Goodbye",
               recipient: {
-                __typename: 'Person',
-                name: 'Bob',
+                __typename: "Person",
+                name: "Bob",
               },
             },
           ],
@@ -7982,8 +7982,8 @@ describe('useSuspenseQuery', () => {
           data: {
             greetings: [
               {
-                __typename: 'Greeting',
-                message: 'Hello world',
+                __typename: "Greeting",
+                message: "Hello world",
               },
             ],
           },
@@ -7994,11 +7994,11 @@ describe('useSuspenseQuery', () => {
           data: {
             greetings: [
               {
-                __typename: 'Greeting',
-                message: 'Hello world',
+                __typename: "Greeting",
+                message: "Hello world",
                 recipient: {
-                  __typename: 'Person',
-                  name: 'Alice',
+                  __typename: "Person",
+                  name: "Alice",
                 },
               },
             ],
@@ -8010,16 +8010,16 @@ describe('useSuspenseQuery', () => {
           data: {
             greetings: [
               {
-                __typename: 'Greeting',
-                message: 'Hello world',
+                __typename: "Greeting",
+                message: "Hello world",
                 recipient: {
-                  __typename: 'Person',
-                  name: 'Alice',
+                  __typename: "Person",
+                  name: "Alice",
                 },
               },
               {
-                __typename: 'Greeting',
-                message: 'Goodbye',
+                __typename: "Greeting",
+                message: "Goodbye",
               },
             ],
           },
@@ -8030,19 +8030,19 @@ describe('useSuspenseQuery', () => {
           data: {
             greetings: [
               {
-                __typename: 'Greeting',
-                message: 'Hello world',
+                __typename: "Greeting",
+                message: "Hello world",
                 recipient: {
-                  __typename: 'Person',
-                  name: 'Alice',
+                  __typename: "Person",
+                  name: "Alice",
                 },
               },
               {
-                __typename: 'Greeting',
-                message: 'Goodbye',
+                __typename: "Greeting",
+                message: "Goodbye",
                 recipient: {
-                  __typename: 'Person',
-                  name: 'Bob',
+                  __typename: "Person",
+                  name: "Bob",
                 },
               },
             ],
@@ -8054,8 +8054,8 @@ describe('useSuspenseQuery', () => {
     }
   );
 
-  it('throws network errors returned by deferred queries', async () => {
-    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
+  it("throws network errors returned by deferred queries", async () => {
+    const consoleSpy = jest.spyOn(console, "error").mockImplementation();
 
     const query = gql`
       query {
@@ -8077,7 +8077,7 @@ describe('useSuspenseQuery', () => {
     });
 
     link.simulateResult({
-      error: new Error('Could not fetch'),
+      error: new Error("Could not fetch"),
     });
 
     await waitFor(() => expect(renders.errorCount).toBe(1));
@@ -8089,14 +8089,14 @@ describe('useSuspenseQuery', () => {
     const [error] = renders.errors as ApolloError[];
 
     expect(error).toBeInstanceOf(ApolloError);
-    expect(error.networkError).toEqual(new Error('Could not fetch'));
+    expect(error.networkError).toEqual(new Error("Could not fetch"));
     expect(error.graphQLErrors).toEqual([]);
 
     consoleSpy.mockRestore();
   });
 
-  it('throws graphql errors returned by deferred queries', async () => {
-    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
+  it("throws graphql errors returned by deferred queries", async () => {
+    const consoleSpy = jest.spyOn(console, "error").mockImplementation();
 
     const query = gql`
       query {
@@ -8119,7 +8119,7 @@ describe('useSuspenseQuery', () => {
 
     link.simulateResult({
       result: {
-        errors: [new GraphQLError('Could not fetch greeting')],
+        errors: [new GraphQLError("Could not fetch greeting")],
       },
     });
 
@@ -8134,14 +8134,14 @@ describe('useSuspenseQuery', () => {
     expect(error).toBeInstanceOf(ApolloError);
     expect(error.networkError).toBeNull();
     expect(error.graphQLErrors).toEqual([
-      new GraphQLError('Could not fetch greeting'),
+      new GraphQLError("Could not fetch greeting"),
     ]);
 
     consoleSpy.mockRestore();
   });
 
-  it('throws errors returned by deferred queries that include partial data', async () => {
-    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
+  it("throws errors returned by deferred queries that include partial data", async () => {
+    const consoleSpy = jest.spyOn(console, "error").mockImplementation();
 
     const query = gql`
       query {
@@ -8165,7 +8165,7 @@ describe('useSuspenseQuery', () => {
     link.simulateResult({
       result: {
         data: { greeting: null },
-        errors: [new GraphQLError('Could not fetch greeting')],
+        errors: [new GraphQLError("Could not fetch greeting")],
       },
     });
 
@@ -8180,14 +8180,14 @@ describe('useSuspenseQuery', () => {
     expect(error).toBeInstanceOf(ApolloError);
     expect(error.networkError).toBeNull();
     expect(error.graphQLErrors).toEqual([
-      new GraphQLError('Could not fetch greeting'),
+      new GraphQLError("Could not fetch greeting"),
     ]);
 
     consoleSpy.mockRestore();
   });
 
-  it('discards partial data and throws errors returned in incremental chunks', async () => {
-    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
+  it("discards partial data and throws errors returned in incremental chunks", async () => {
+    const consoleSpy = jest.spyOn(console, "error").mockImplementation();
 
     const query = gql`
       query {
@@ -8215,15 +8215,15 @@ describe('useSuspenseQuery', () => {
       result: {
         data: {
           hero: {
-            name: 'R2-D2',
+            name: "R2-D2",
             heroFriends: [
               {
-                id: '1000',
-                name: 'Luke Skywalker',
+                id: "1000",
+                name: "Luke Skywalker",
               },
               {
-                id: '1003',
-                name: 'Leia Organa',
+                id: "1003",
+                name: "Leia Organa",
               },
             ],
           },
@@ -8238,15 +8238,15 @@ describe('useSuspenseQuery', () => {
           hero: {
             heroFriends: [
               {
-                id: '1000',
-                name: 'Luke Skywalker',
+                id: "1000",
+                name: "Luke Skywalker",
               },
               {
-                id: '1003',
-                name: 'Leia Organa',
+                id: "1003",
+                name: "Leia Organa",
               },
             ],
-            name: 'R2-D2',
+            name: "R2-D2",
           },
         },
         networkStatus: NetworkStatus.ready,
@@ -8258,11 +8258,11 @@ describe('useSuspenseQuery', () => {
       result: {
         incremental: [
           {
-            path: ['hero', 'heroFriends', 0],
+            path: ["hero", "heroFriends", 0],
             errors: [
               new GraphQLError(
-                'homeWorld for character with ID 1000 could not be fetched.',
-                { path: ['hero', 'heroFriends', 0, 'homeWorld'] }
+                "homeWorld for character with ID 1000 could not be fetched.",
+                { path: ["hero", "heroFriends", 0, "homeWorld"] }
               ),
             ],
             data: {
@@ -8272,9 +8272,9 @@ describe('useSuspenseQuery', () => {
           // This chunk is ignored since errorPolicy `none` throws away partial
           // data
           {
-            path: ['hero', 'heroFriends', 1],
+            path: ["hero", "heroFriends", 1],
             data: {
-              homeWorld: 'Alderaan',
+              homeWorld: "Alderaan",
             },
           },
         ],
@@ -8293,15 +8293,15 @@ describe('useSuspenseQuery', () => {
           hero: {
             heroFriends: [
               {
-                id: '1000',
-                name: 'Luke Skywalker',
+                id: "1000",
+                name: "Luke Skywalker",
               },
               {
-                id: '1003',
-                name: 'Leia Organa',
+                id: "1003",
+                name: "Leia Organa",
               },
             ],
-            name: 'R2-D2',
+            name: "R2-D2",
           },
         },
         networkStatus: NetworkStatus.ready,
@@ -8315,15 +8315,15 @@ describe('useSuspenseQuery', () => {
     expect(error.networkError).toBeNull();
     expect(error.graphQLErrors).toEqual([
       new GraphQLError(
-        'homeWorld for character with ID 1000 could not be fetched.',
-        { path: ['hero', 'heroFriends', 0, 'homeWorld'] }
+        "homeWorld for character with ID 1000 could not be fetched.",
+        { path: ["hero", "heroFriends", 0, "homeWorld"] }
       ),
     ]);
 
     consoleSpy.mockRestore();
   });
 
-  it('adds partial data and does not throw errors returned in incremental chunks but returns them in `error` property with errorPolicy set to `all`', async () => {
+  it("adds partial data and does not throw errors returned in incremental chunks but returns them in `error` property with errorPolicy set to `all`", async () => {
     const query = gql`
       query {
         hero {
@@ -8342,7 +8342,7 @@ describe('useSuspenseQuery', () => {
     const link = new MockSubscriptionLink();
 
     const { result, renders } = renderSuspenseHook(
-      () => useSuspenseQuery(query, { errorPolicy: 'all' }),
+      () => useSuspenseQuery(query, { errorPolicy: "all" }),
       { link }
     );
 
@@ -8350,15 +8350,15 @@ describe('useSuspenseQuery', () => {
       result: {
         data: {
           hero: {
-            name: 'R2-D2',
+            name: "R2-D2",
             heroFriends: [
               {
-                id: '1000',
-                name: 'Luke Skywalker',
+                id: "1000",
+                name: "Luke Skywalker",
               },
               {
-                id: '1003',
-                name: 'Leia Organa',
+                id: "1003",
+                name: "Leia Organa",
               },
             ],
           },
@@ -8373,15 +8373,15 @@ describe('useSuspenseQuery', () => {
           hero: {
             heroFriends: [
               {
-                id: '1000',
-                name: 'Luke Skywalker',
+                id: "1000",
+                name: "Luke Skywalker",
               },
               {
-                id: '1003',
-                name: 'Leia Organa',
+                id: "1003",
+                name: "Leia Organa",
               },
             ],
-            name: 'R2-D2',
+            name: "R2-D2",
           },
         },
         networkStatus: NetworkStatus.ready,
@@ -8393,11 +8393,11 @@ describe('useSuspenseQuery', () => {
       result: {
         incremental: [
           {
-            path: ['hero', 'heroFriends', 0],
+            path: ["hero", "heroFriends", 0],
             errors: [
               new GraphQLError(
-                'homeWorld for character with ID 1000 could not be fetched.',
-                { path: ['hero', 'heroFriends', 0, 'homeWorld'] }
+                "homeWorld for character with ID 1000 could not be fetched.",
+                { path: ["hero", "heroFriends", 0, "homeWorld"] }
               ),
             ],
             data: {
@@ -8407,9 +8407,9 @@ describe('useSuspenseQuery', () => {
           // Unlike the default (errorPolicy = `none`), this data will be
           // added to the final result
           {
-            path: ['hero', 'heroFriends', 1],
+            path: ["hero", "heroFriends", 1],
             data: {
-              homeWorld: 'Alderaan',
+              homeWorld: "Alderaan",
             },
           },
         ],
@@ -8423,25 +8423,25 @@ describe('useSuspenseQuery', () => {
           hero: {
             heroFriends: [
               {
-                id: '1000',
-                name: 'Luke Skywalker',
+                id: "1000",
+                name: "Luke Skywalker",
                 homeWorld: null,
               },
               {
-                id: '1003',
-                name: 'Leia Organa',
-                homeWorld: 'Alderaan',
+                id: "1003",
+                name: "Leia Organa",
+                homeWorld: "Alderaan",
               },
             ],
-            name: 'R2-D2',
+            name: "R2-D2",
           },
         },
         networkStatus: NetworkStatus.error,
         error: new ApolloError({
           graphQLErrors: [
             new GraphQLError(
-              'homeWorld for character with ID 1000 could not be fetched.',
-              { path: ['hero', 'heroFriends', 0, 'homeWorld'] }
+              "homeWorld for character with ID 1000 could not be fetched.",
+              { path: ["hero", "heroFriends", 0, "homeWorld"] }
             ),
           ],
         }),
@@ -8456,15 +8456,15 @@ describe('useSuspenseQuery', () => {
           hero: {
             heroFriends: [
               {
-                id: '1000',
-                name: 'Luke Skywalker',
+                id: "1000",
+                name: "Luke Skywalker",
               },
               {
-                id: '1003',
-                name: 'Leia Organa',
+                id: "1003",
+                name: "Leia Organa",
               },
             ],
-            name: 'R2-D2',
+            name: "R2-D2",
           },
         },
         networkStatus: NetworkStatus.ready,
@@ -8475,25 +8475,25 @@ describe('useSuspenseQuery', () => {
           hero: {
             heroFriends: [
               {
-                id: '1000',
-                name: 'Luke Skywalker',
+                id: "1000",
+                name: "Luke Skywalker",
                 homeWorld: null,
               },
               {
-                id: '1003',
-                name: 'Leia Organa',
-                homeWorld: 'Alderaan',
+                id: "1003",
+                name: "Leia Organa",
+                homeWorld: "Alderaan",
               },
             ],
-            name: 'R2-D2',
+            name: "R2-D2",
           },
         },
         networkStatus: NetworkStatus.error,
         error: new ApolloError({
           graphQLErrors: [
             new GraphQLError(
-              'homeWorld for character with ID 1000 could not be fetched.',
-              { path: ['hero', 'heroFriends', 0, 'homeWorld'] }
+              "homeWorld for character with ID 1000 could not be fetched.",
+              { path: ["hero", "heroFriends", 0, "homeWorld"] }
             ),
           ],
         }),
@@ -8501,7 +8501,7 @@ describe('useSuspenseQuery', () => {
     ]);
   });
 
-  it('adds partial data and discards errors returned in incremental chunks with errorPolicy set to `ignore`', async () => {
+  it("adds partial data and discards errors returned in incremental chunks with errorPolicy set to `ignore`", async () => {
     const query = gql`
       query {
         hero {
@@ -8520,7 +8520,7 @@ describe('useSuspenseQuery', () => {
     const link = new MockSubscriptionLink();
 
     const { result, renders } = renderSuspenseHook(
-      () => useSuspenseQuery(query, { errorPolicy: 'ignore' }),
+      () => useSuspenseQuery(query, { errorPolicy: "ignore" }),
       { link }
     );
 
@@ -8528,15 +8528,15 @@ describe('useSuspenseQuery', () => {
       result: {
         data: {
           hero: {
-            name: 'R2-D2',
+            name: "R2-D2",
             heroFriends: [
               {
-                id: '1000',
-                name: 'Luke Skywalker',
+                id: "1000",
+                name: "Luke Skywalker",
               },
               {
-                id: '1003',
-                name: 'Leia Organa',
+                id: "1003",
+                name: "Leia Organa",
               },
             ],
           },
@@ -8551,15 +8551,15 @@ describe('useSuspenseQuery', () => {
           hero: {
             heroFriends: [
               {
-                id: '1000',
-                name: 'Luke Skywalker',
+                id: "1000",
+                name: "Luke Skywalker",
               },
               {
-                id: '1003',
-                name: 'Leia Organa',
+                id: "1003",
+                name: "Leia Organa",
               },
             ],
-            name: 'R2-D2',
+            name: "R2-D2",
           },
         },
         networkStatus: NetworkStatus.ready,
@@ -8571,11 +8571,11 @@ describe('useSuspenseQuery', () => {
       result: {
         incremental: [
           {
-            path: ['hero', 'heroFriends', 0],
+            path: ["hero", "heroFriends", 0],
             errors: [
               new GraphQLError(
-                'homeWorld for character with ID 1000 could not be fetched.',
-                { path: ['hero', 'heroFriends', 0, 'homeWorld'] }
+                "homeWorld for character with ID 1000 could not be fetched.",
+                { path: ["hero", "heroFriends", 0, "homeWorld"] }
               ),
             ],
             data: {
@@ -8583,9 +8583,9 @@ describe('useSuspenseQuery', () => {
             },
           },
           {
-            path: ['hero', 'heroFriends', 1],
+            path: ["hero", "heroFriends", 1],
             data: {
-              homeWorld: 'Alderaan',
+              homeWorld: "Alderaan",
             },
           },
         ],
@@ -8599,17 +8599,17 @@ describe('useSuspenseQuery', () => {
           hero: {
             heroFriends: [
               {
-                id: '1000',
-                name: 'Luke Skywalker',
+                id: "1000",
+                name: "Luke Skywalker",
                 homeWorld: null,
               },
               {
-                id: '1003',
-                name: 'Leia Organa',
-                homeWorld: 'Alderaan',
+                id: "1003",
+                name: "Leia Organa",
+                homeWorld: "Alderaan",
               },
             ],
-            name: 'R2-D2',
+            name: "R2-D2",
           },
         },
         networkStatus: NetworkStatus.ready,
@@ -8625,15 +8625,15 @@ describe('useSuspenseQuery', () => {
           hero: {
             heroFriends: [
               {
-                id: '1000',
-                name: 'Luke Skywalker',
+                id: "1000",
+                name: "Luke Skywalker",
               },
               {
-                id: '1003',
-                name: 'Leia Organa',
+                id: "1003",
+                name: "Leia Organa",
               },
             ],
-            name: 'R2-D2',
+            name: "R2-D2",
           },
         },
         networkStatus: NetworkStatus.ready,
@@ -8644,17 +8644,17 @@ describe('useSuspenseQuery', () => {
           hero: {
             heroFriends: [
               {
-                id: '1000',
-                name: 'Luke Skywalker',
+                id: "1000",
+                name: "Luke Skywalker",
                 homeWorld: null,
               },
               {
-                id: '1003',
-                name: 'Leia Organa',
-                homeWorld: 'Alderaan',
+                id: "1003",
+                name: "Leia Organa",
+                homeWorld: "Alderaan",
               },
             ],
-            name: 'R2-D2',
+            name: "R2-D2",
           },
         },
         networkStatus: NetworkStatus.ready,
@@ -8663,7 +8663,7 @@ describe('useSuspenseQuery', () => {
     ]);
   });
 
-  it('can refetch and respond to cache updates after encountering an error in an incremental chunk for a deferred query when `errorPolicy` is `all`', async () => {
+  it("can refetch and respond to cache updates after encountering an error in an incremental chunk for a deferred query when `errorPolicy` is `all`", async () => {
     const query = gql`
       query {
         hero {
@@ -8684,7 +8684,7 @@ describe('useSuspenseQuery', () => {
     const client = new ApolloClient({ link, cache });
 
     const { result, renders } = renderSuspenseHook(
-      () => useSuspenseQuery(query, { errorPolicy: 'all' }),
+      () => useSuspenseQuery(query, { errorPolicy: "all" }),
       { client }
     );
 
@@ -8692,10 +8692,10 @@ describe('useSuspenseQuery', () => {
       result: {
         data: {
           hero: {
-            name: 'R2-D2',
+            name: "R2-D2",
             heroFriends: [
-              { id: '1000', name: 'Luke Skywalker' },
-              { id: '1003', name: 'Leia Organa' },
+              { id: "1000", name: "Luke Skywalker" },
+              { id: "1003", name: "Leia Organa" },
             ],
           },
         },
@@ -8708,10 +8708,10 @@ describe('useSuspenseQuery', () => {
         data: {
           hero: {
             heroFriends: [
-              { id: '1000', name: 'Luke Skywalker' },
-              { id: '1003', name: 'Leia Organa' },
+              { id: "1000", name: "Luke Skywalker" },
+              { id: "1003", name: "Leia Organa" },
             ],
-            name: 'R2-D2',
+            name: "R2-D2",
           },
         },
         networkStatus: NetworkStatus.ready,
@@ -8724,11 +8724,11 @@ describe('useSuspenseQuery', () => {
         result: {
           incremental: [
             {
-              path: ['hero', 'heroFriends', 0],
+              path: ["hero", "heroFriends", 0],
               errors: [
                 new GraphQLError(
-                  'homeWorld for character with ID 1000 could not be fetched.',
-                  { path: ['hero', 'heroFriends', 0, 'homeWorld'] }
+                  "homeWorld for character with ID 1000 could not be fetched.",
+                  { path: ["hero", "heroFriends", 0, "homeWorld"] }
                 ),
               ],
               data: {
@@ -8736,9 +8736,9 @@ describe('useSuspenseQuery', () => {
               },
             },
             {
-              path: ['hero', 'heroFriends', 1],
+              path: ["hero", "heroFriends", 1],
               data: {
-                homeWorld: 'Alderaan',
+                homeWorld: "Alderaan",
               },
             },
           ],
@@ -8753,18 +8753,18 @@ describe('useSuspenseQuery', () => {
         data: {
           hero: {
             heroFriends: [
-              { id: '1000', name: 'Luke Skywalker' },
-              { id: '1003', name: 'Leia Organa' },
+              { id: "1000", name: "Luke Skywalker" },
+              { id: "1003", name: "Leia Organa" },
             ],
-            name: 'R2-D2',
+            name: "R2-D2",
           },
         },
         networkStatus: NetworkStatus.error,
         error: new ApolloError({
           graphQLErrors: [
             new GraphQLError(
-              'homeWorld for character with ID 1000 could not be fetched.',
-              { path: ['hero', 'heroFriends', 0, 'homeWorld'] }
+              "homeWorld for character with ID 1000 could not be fetched.",
+              { path: ["hero", "heroFriends", 0, "homeWorld"] }
             ),
           ],
         }),
@@ -8780,10 +8780,10 @@ describe('useSuspenseQuery', () => {
       result: {
         data: {
           hero: {
-            name: 'R2-D2',
+            name: "R2-D2",
             heroFriends: [
-              { id: '1000', name: 'Luke Skywalker' },
-              { id: '1003', name: 'Leia Organa' },
+              { id: "1000", name: "Luke Skywalker" },
+              { id: "1003", name: "Leia Organa" },
             ],
           },
         },
@@ -8796,10 +8796,10 @@ describe('useSuspenseQuery', () => {
         data: {
           hero: {
             heroFriends: [
-              { id: '1000', name: 'Luke Skywalker' },
-              { id: '1003', name: 'Leia Organa' },
+              { id: "1000", name: "Luke Skywalker" },
+              { id: "1003", name: "Leia Organa" },
             ],
-            name: 'R2-D2',
+            name: "R2-D2",
           },
         },
         networkStatus: NetworkStatus.ready,
@@ -8812,15 +8812,15 @@ describe('useSuspenseQuery', () => {
         result: {
           incremental: [
             {
-              path: ['hero', 'heroFriends', 0],
+              path: ["hero", "heroFriends", 0],
               data: {
-                homeWorld: 'Alderaan',
+                homeWorld: "Alderaan",
               },
             },
             {
-              path: ['hero', 'heroFriends', 1],
+              path: ["hero", "heroFriends", 1],
               data: {
-                homeWorld: 'Alderaan',
+                homeWorld: "Alderaan",
               },
             },
           ],
@@ -8835,10 +8835,10 @@ describe('useSuspenseQuery', () => {
         data: {
           hero: {
             heroFriends: [
-              { id: '1000', name: 'Luke Skywalker', homeWorld: 'Alderaan' },
-              { id: '1003', name: 'Leia Organa', homeWorld: 'Alderaan' },
+              { id: "1000", name: "Luke Skywalker", homeWorld: "Alderaan" },
+              { id: "1003", name: "Leia Organa", homeWorld: "Alderaan" },
             ],
-            name: 'R2-D2',
+            name: "R2-D2",
           },
         },
         networkStatus: NetworkStatus.ready,
@@ -8850,10 +8850,10 @@ describe('useSuspenseQuery', () => {
       data: {
         hero: {
           heroFriends: [
-            { id: '1000', name: 'Luke Skywalker', homeWorld: 'Alderaan' },
-            { id: '1003', name: 'Leia Organa', homeWorld: 'Alderaan' },
+            { id: "1000", name: "Luke Skywalker", homeWorld: "Alderaan" },
+            { id: "1003", name: "Leia Organa", homeWorld: "Alderaan" },
           ],
-          name: 'R2-D2',
+          name: "R2-D2",
         },
       },
       loading: false,
@@ -8864,7 +8864,7 @@ describe('useSuspenseQuery', () => {
     cache.updateQuery({ query }, (data) => ({
       hero: {
         ...data.hero,
-        name: 'C3PO',
+        name: "C3PO",
       },
     }));
 
@@ -8873,10 +8873,10 @@ describe('useSuspenseQuery', () => {
         data: {
           hero: {
             heroFriends: [
-              { id: '1000', name: 'Luke Skywalker', homeWorld: 'Alderaan' },
-              { id: '1003', name: 'Leia Organa', homeWorld: 'Alderaan' },
+              { id: "1000", name: "Luke Skywalker", homeWorld: "Alderaan" },
+              { id: "1003", name: "Leia Organa", homeWorld: "Alderaan" },
             ],
-            name: 'C3PO',
+            name: "C3PO",
           },
         },
         networkStatus: NetworkStatus.ready,
@@ -8891,10 +8891,10 @@ describe('useSuspenseQuery', () => {
         data: {
           hero: {
             heroFriends: [
-              { id: '1000', name: 'Luke Skywalker' },
-              { id: '1003', name: 'Leia Organa' },
+              { id: "1000", name: "Luke Skywalker" },
+              { id: "1003", name: "Leia Organa" },
             ],
-            name: 'R2-D2',
+            name: "R2-D2",
           },
         },
         networkStatus: NetworkStatus.ready,
@@ -8904,18 +8904,18 @@ describe('useSuspenseQuery', () => {
         data: {
           hero: {
             heroFriends: [
-              { id: '1000', name: 'Luke Skywalker' },
-              { id: '1003', name: 'Leia Organa' },
+              { id: "1000", name: "Luke Skywalker" },
+              { id: "1003", name: "Leia Organa" },
             ],
-            name: 'R2-D2',
+            name: "R2-D2",
           },
         },
         networkStatus: NetworkStatus.error,
         error: new ApolloError({
           graphQLErrors: [
             new GraphQLError(
-              'homeWorld for character with ID 1000 could not be fetched.',
-              { path: ['hero', 'heroFriends', 0, 'homeWorld'] }
+              "homeWorld for character with ID 1000 could not be fetched.",
+              { path: ["hero", "heroFriends", 0, "homeWorld"] }
             ),
           ],
         }),
@@ -8924,10 +8924,10 @@ describe('useSuspenseQuery', () => {
         data: {
           hero: {
             heroFriends: [
-              { id: '1000', name: 'Luke Skywalker' },
-              { id: '1003', name: 'Leia Organa' },
+              { id: "1000", name: "Luke Skywalker" },
+              { id: "1003", name: "Leia Organa" },
             ],
-            name: 'R2-D2',
+            name: "R2-D2",
           },
         },
         networkStatus: NetworkStatus.ready,
@@ -8937,10 +8937,10 @@ describe('useSuspenseQuery', () => {
         data: {
           hero: {
             heroFriends: [
-              { id: '1000', name: 'Luke Skywalker', homeWorld: 'Alderaan' },
-              { id: '1003', name: 'Leia Organa', homeWorld: 'Alderaan' },
+              { id: "1000", name: "Luke Skywalker", homeWorld: "Alderaan" },
+              { id: "1003", name: "Leia Organa", homeWorld: "Alderaan" },
             ],
-            name: 'R2-D2',
+            name: "R2-D2",
           },
         },
         networkStatus: NetworkStatus.ready,
@@ -8950,10 +8950,10 @@ describe('useSuspenseQuery', () => {
         data: {
           hero: {
             heroFriends: [
-              { id: '1000', name: 'Luke Skywalker', homeWorld: 'Alderaan' },
-              { id: '1003', name: 'Leia Organa', homeWorld: 'Alderaan' },
+              { id: "1000", name: "Luke Skywalker", homeWorld: "Alderaan" },
+              { id: "1003", name: "Leia Organa", homeWorld: "Alderaan" },
             ],
-            name: 'C3PO',
+            name: "C3PO",
           },
         },
         networkStatus: NetworkStatus.ready,
@@ -8962,7 +8962,7 @@ describe('useSuspenseQuery', () => {
     ]);
   });
 
-  it('can subscribe to subscriptions and react to cache updates via `subscribeToMore`', async () => {
+  it("can subscribe to subscriptions and react to cache updates via `subscribeToMore`", async () => {
     interface SubscriptionData {
       greetingUpdated: string;
     }
@@ -8976,7 +8976,7 @@ describe('useSuspenseQuery', () => {
         QueryData | undefined,
         OperationVariables,
         SubscriptionData
-      >['updateQuery']
+      >["updateQuery"]
     >;
 
     const { mocks, query } = useSimpleQueryCase();
@@ -8989,8 +8989,8 @@ describe('useSuspenseQuery', () => {
         const definition = getMainDefinition(query);
 
         return (
-          definition.kind === 'OperationDefinition' &&
-          definition.operation === 'subscription'
+          definition.kind === "OperationDefinition" &&
+          definition.operation === "subscription"
         );
       },
       wsLink,
@@ -8998,12 +8998,12 @@ describe('useSuspenseQuery', () => {
     );
 
     const { result, renders } = renderSuspenseHook(
-      () => useSuspenseQuery(query, { errorPolicy: 'ignore' }),
+      () => useSuspenseQuery(query, { errorPolicy: "ignore" }),
       { link }
     );
 
     await waitFor(() => {
-      expect(result.current.data).toEqual({ greeting: 'Hello' });
+      expect(result.current.data).toEqual({ greeting: "Hello" });
     });
 
     const updateQuery = jest.fn<
@@ -9025,23 +9025,23 @@ describe('useSuspenseQuery', () => {
     wsLink.simulateResult({
       result: {
         data: {
-          greetingUpdated: 'Subscription hello',
+          greetingUpdated: "Subscription hello",
         },
       },
     });
 
     await waitFor(() => {
       expect(result.current.data).toEqual({
-        greeting: 'Subscription hello',
+        greeting: "Subscription hello",
       });
     });
 
     expect(updateQuery).toHaveBeenCalledTimes(1);
     expect(updateQuery).toHaveBeenCalledWith(
-      { greeting: 'Hello' },
+      { greeting: "Hello" },
       {
         subscriptionData: {
-          data: { greetingUpdated: 'Subscription hello' },
+          data: { greetingUpdated: "Subscription hello" },
         },
         variables: {},
       }
@@ -9049,15 +9049,15 @@ describe('useSuspenseQuery', () => {
 
     expect(renders.count).toBe(3);
     expect(renders.frames).toMatchObject([
-      { data: { greeting: 'Hello' }, networkStatus: NetworkStatus.ready },
+      { data: { greeting: "Hello" }, networkStatus: NetworkStatus.ready },
       {
-        data: { greeting: 'Subscription hello' },
+        data: { greeting: "Subscription hello" },
         networkStatus: NetworkStatus.ready,
       },
     ]);
   });
 
-  it('works with useDeferredValue', async () => {
+  it("works with useDeferredValue", async () => {
     const user = userEvent.setup();
 
     interface Variables {
@@ -9093,7 +9093,7 @@ describe('useSuspenseQuery', () => {
     });
 
     function App() {
-      const [query, setValue] = React.useState('');
+      const [query, setValue] = React.useState("");
       const deferredQuery = React.useDeferredValue(query);
 
       return (
@@ -9124,19 +9124,19 @@ describe('useSuspenseQuery', () => {
 
     render(<App />);
 
-    const input = screen.getByLabelText('Search');
+    const input = screen.getByLabelText("Search");
 
-    expect(screen.getByText('Loading')).toBeInTheDocument();
+    expect(screen.getByText("Loading")).toBeInTheDocument();
 
-    expect(await screen.findByTestId('result')).toBeInTheDocument();
+    expect(await screen.findByTestId("result")).toBeInTheDocument();
 
-    await act(() => user.type(input, 'ab'));
+    await act(() => user.type(input, "ab"));
 
     await waitFor(() => {
-      expect(screen.getByTestId('result')).toHaveTextContent('ab');
+      expect(screen.getByTestId("result")).toHaveTextContent("ab");
     });
 
-    await act(() => user.type(input, 'c'));
+    await act(() => user.type(input, "c"));
 
     // useDeferredValue will try rerendering the component with the new value
     // in the background. If it suspends with the new value, React will show the
@@ -9145,17 +9145,17 @@ describe('useSuspenseQuery', () => {
     // Here we should not see the suspense fallback while the component suspends
     // until the search finishes loading. Seeing the suspense fallback is an
     // indication that we are suspending the component too late in the process.
-    expect(screen.queryByText('Loading')).not.toBeInTheDocument();
-    expect(screen.getByTestId('result')).toHaveTextContent('ab');
+    expect(screen.queryByText("Loading")).not.toBeInTheDocument();
+    expect(screen.getByTestId("result")).toHaveTextContent("ab");
 
     // Eventually we should see the updated text content once its done
     // suspending.
     await waitFor(() => {
-      expect(screen.getByTestId('result')).toHaveTextContent('abc');
+      expect(screen.getByTestId("result")).toHaveTextContent("abc");
     });
   });
 
-  it('works with startTransition to change variables', async () => {
+  it("works with startTransition to change variables", async () => {
     type Variables = {
       id: string;
     };
@@ -9181,16 +9181,16 @@ describe('useSuspenseQuery', () => {
 
     const mocks: MockedResponse<Data, Variables>[] = [
       {
-        request: { query, variables: { id: '1' } },
+        request: { query, variables: { id: "1" } },
         result: {
-          data: { todo: { id: '1', name: 'Clean room', completed: false } },
+          data: { todo: { id: "1", name: "Clean room", completed: false } },
         },
         delay: 10,
       },
       {
-        request: { query, variables: { id: '2' } },
+        request: { query, variables: { id: "2" } },
         result: {
-          data: { todo: { id: '2', name: 'Take out trash', completed: true } },
+          data: { todo: { id: "2", name: "Take out trash", completed: true } },
         },
         delay: 10,
       },
@@ -9202,7 +9202,7 @@ describe('useSuspenseQuery', () => {
     });
 
     function App() {
-      const [id, setId] = React.useState('1');
+      const [id, setId] = React.useState("1");
 
       return (
         <ApolloProvider client={client}>
@@ -9233,7 +9233,7 @@ describe('useSuspenseQuery', () => {
           <button
             onClick={() => {
               startTransition(() => {
-                onChange('2');
+                onChange("2");
               });
             }}
           >
@@ -9241,7 +9241,7 @@ describe('useSuspenseQuery', () => {
           </button>
           <div data-testid="todo" aria-busy={isPending}>
             {todo.name}
-            {todo.completed && ' (completed)'}
+            {todo.completed && " (completed)"}
           </div>
         </>
       );
@@ -9249,14 +9249,14 @@ describe('useSuspenseQuery', () => {
 
     render(<App />);
 
-    expect(screen.getByText('Loading')).toBeInTheDocument();
+    expect(screen.getByText("Loading")).toBeInTheDocument();
 
-    expect(await screen.findByTestId('todo')).toBeInTheDocument();
+    expect(await screen.findByTestId("todo")).toBeInTheDocument();
 
-    const todo = screen.getByTestId('todo');
-    const button = screen.getByText('Refresh');
+    const todo = screen.getByTestId("todo");
+    const button = screen.getByText("Refresh");
 
-    expect(todo).toHaveTextContent('Clean room');
+    expect(todo).toHaveTextContent("Clean room");
 
     await act(() => user.click(button));
 
@@ -9267,22 +9267,22 @@ describe('useSuspenseQuery', () => {
     // Here we should not see the suspense fallback while the component suspends
     // until the todo is finished loading. Seeing the suspense fallback is an
     // indication that we are suspending the component too late in the process.
-    expect(screen.queryByText('Loading')).not.toBeInTheDocument();
+    expect(screen.queryByText("Loading")).not.toBeInTheDocument();
 
     // We can ensure this works with isPending from useTransition in the process
-    expect(todo).toHaveAttribute('aria-busy', 'true');
+    expect(todo).toHaveAttribute("aria-busy", "true");
 
     // Ensure we are showing the stale UI until the new todo has loaded
-    expect(todo).toHaveTextContent('Clean room');
+    expect(todo).toHaveTextContent("Clean room");
 
     // Eventually we should see the updated todo content once its done
     // suspending.
     await waitFor(() => {
-      expect(todo).toHaveTextContent('Take out trash (completed)');
+      expect(todo).toHaveTextContent("Take out trash (completed)");
     });
   });
 
-  it('`refetch` works with startTransition to allow React to show stale UI until finished suspending', async () => {
+  it("`refetch` works with startTransition to allow React to show stale UI until finished suspending", async () => {
     type Variables = {
       id: string;
     };
@@ -9308,16 +9308,16 @@ describe('useSuspenseQuery', () => {
 
     const mocks: MockedResponse<Data, Variables>[] = [
       {
-        request: { query, variables: { id: '1' } },
+        request: { query, variables: { id: "1" } },
         result: {
-          data: { todo: { id: '1', name: 'Clean room', completed: false } },
+          data: { todo: { id: "1", name: "Clean room", completed: false } },
         },
         delay: 10,
       },
       {
-        request: { query, variables: { id: '1' } },
+        request: { query, variables: { id: "1" } },
         result: {
-          data: { todo: { id: '1', name: 'Clean room', completed: true } },
+          data: { todo: { id: "1", name: "Clean room", completed: true } },
         },
         delay: 10,
       },
@@ -9360,7 +9360,7 @@ describe('useSuspenseQuery', () => {
           </button>
           <div data-testid="todo" aria-busy={isPending}>
             {todo.name}
-            {todo.completed && ' (completed)'}
+            {todo.completed && " (completed)"}
           </div>
         </>
       );
@@ -9368,14 +9368,14 @@ describe('useSuspenseQuery', () => {
 
     render(<App />);
 
-    expect(screen.getByText('Loading')).toBeInTheDocument();
+    expect(screen.getByText("Loading")).toBeInTheDocument();
 
-    expect(await screen.findByTestId('todo')).toBeInTheDocument();
+    expect(await screen.findByTestId("todo")).toBeInTheDocument();
 
-    const todo = screen.getByTestId('todo');
-    const button = screen.getByText('Refresh');
+    const todo = screen.getByTestId("todo");
+    const button = screen.getByText("Refresh");
 
-    expect(todo).toHaveTextContent('Clean room');
+    expect(todo).toHaveTextContent("Clean room");
 
     await act(() => user.click(button));
 
@@ -9386,28 +9386,28 @@ describe('useSuspenseQuery', () => {
     // Here we should not see the suspense fallback while the component suspends
     // until the todo is finished loading. Seeing the suspense fallback is an
     // indication that we are suspending the component too late in the process.
-    expect(screen.queryByText('Loading')).not.toBeInTheDocument();
+    expect(screen.queryByText("Loading")).not.toBeInTheDocument();
 
     // We can ensure this works with isPending from useTransition in the process
-    expect(todo).toHaveAttribute('aria-busy', 'true');
+    expect(todo).toHaveAttribute("aria-busy", "true");
 
     // Ensure we are showing the stale UI until the new todo has loaded
-    expect(todo).toHaveTextContent('Clean room');
+    expect(todo).toHaveTextContent("Clean room");
 
     // Eventually we should see the updated todo content once its done
     // suspending.
     await waitFor(() => {
-      expect(todo).toHaveTextContent('Clean room (completed)');
+      expect(todo).toHaveTextContent("Clean room (completed)");
     });
   });
 
-  it('`fetchMore` works with startTransition to allow React to show stale UI until finished suspending', async () => {
+  it("`fetchMore` works with startTransition to allow React to show stale UI until finished suspending", async () => {
     type Variables = {
       offset: number;
     };
 
     interface Todo {
-      __typename: 'Todo';
+      __typename: "Todo";
       id: string;
       name: string;
       completed: boolean;
@@ -9435,9 +9435,9 @@ describe('useSuspenseQuery', () => {
           data: {
             todos: [
               {
-                __typename: 'Todo',
-                id: '1',
-                name: 'Clean room',
+                __typename: "Todo",
+                id: "1",
+                name: "Clean room",
                 completed: false,
               },
             ],
@@ -9451,9 +9451,9 @@ describe('useSuspenseQuery', () => {
           data: {
             todos: [
               {
-                __typename: 'Todo',
-                id: '2',
-                name: 'Take out trash',
+                __typename: "Todo",
+                id: "2",
+                name: "Take out trash",
                 completed: true,
               },
             ],
@@ -9512,7 +9512,7 @@ describe('useSuspenseQuery', () => {
             {todos.map((todo) => (
               <div data-testid={`todo:${todo.id}`} key={todo.id}>
                 {todo.name}
-                {todo.completed && ' (completed)'}
+                {todo.completed && " (completed)"}
               </div>
             ))}
           </div>
@@ -9522,13 +9522,13 @@ describe('useSuspenseQuery', () => {
 
     render(<App />);
 
-    expect(screen.getByText('Loading')).toBeInTheDocument();
+    expect(screen.getByText("Loading")).toBeInTheDocument();
 
-    expect(await screen.findByTestId('todos')).toBeInTheDocument();
+    expect(await screen.findByTestId("todos")).toBeInTheDocument();
 
-    const todos = screen.getByTestId('todos');
-    const todo1 = screen.getByTestId('todo:1');
-    const button = screen.getByText('Load more');
+    const todos = screen.getByTestId("todos");
+    const todo1 = screen.getByTestId("todo:1");
+    const button = screen.getByText("Load more");
 
     expect(todo1).toBeInTheDocument();
 
@@ -9541,26 +9541,26 @@ describe('useSuspenseQuery', () => {
     // Here we should not see the suspense fallback while the component suspends
     // until the todo is finished loading. Seeing the suspense fallback is an
     // indication that we are suspending the component too late in the process.
-    expect(screen.queryByText('Loading')).not.toBeInTheDocument();
+    expect(screen.queryByText("Loading")).not.toBeInTheDocument();
 
     // We can ensure this works with isPending from useTransition in the process
-    expect(todos).toHaveAttribute('aria-busy', 'true');
+    expect(todos).toHaveAttribute("aria-busy", "true");
 
     // Ensure we are showing the stale UI until the new todo has loaded
-    expect(todo1).toHaveTextContent('Clean room');
+    expect(todo1).toHaveTextContent("Clean room");
 
     // Eventually we should see the updated todos content once its done
     // suspending.
     await waitFor(() => {
-      expect(screen.getByTestId('todo:2')).toHaveTextContent(
-        'Take out trash (completed)'
+      expect(screen.getByTestId("todo:2")).toHaveTextContent(
+        "Take out trash (completed)"
       );
-      expect(todo1).toHaveTextContent('Clean room');
+      expect(todo1).toHaveTextContent("Clean room");
     });
   });
 
-  describe.skip('type tests', () => {
-    it('returns unknown when TData cannot be inferred', () => {
+  describe.skip("type tests", () => {
+    it("returns unknown when TData cannot be inferred", () => {
       const query = gql`
         query {
           hello
@@ -9572,14 +9572,14 @@ describe('useSuspenseQuery', () => {
       expectTypeOf(data).toEqualTypeOf<unknown>();
     });
 
-    it('disallows wider variables type than specified', () => {
+    it("disallows wider variables type than specified", () => {
       const { query } = useVariablesQueryCase();
 
       // @ts-expect-error should not allow wider TVariables type
-      useSuspenseQuery(query, { variables: { id: '1', foo: 'bar' } });
+      useSuspenseQuery(query, { variables: { id: "1", foo: "bar" } });
     });
 
-    it('returns TData in default case', () => {
+    it("returns TData in default case", () => {
       const { query } = useVariablesQueryCase();
 
       const { data: inferred } = useSuspenseQuery(query);
@@ -9600,7 +9600,7 @@ describe('useSuspenseQuery', () => {
       const { query } = useVariablesQueryCase();
 
       const { data: inferred } = useSuspenseQuery(query, {
-        errorPolicy: 'ignore',
+        errorPolicy: "ignore",
       });
 
       expectTypeOf(inferred).toEqualTypeOf<VariablesCaseData | undefined>();
@@ -9610,7 +9610,7 @@ describe('useSuspenseQuery', () => {
         VariablesCaseData,
         VariablesCaseVariables
       >(query, {
-        errorPolicy: 'ignore',
+        errorPolicy: "ignore",
       });
 
       expectTypeOf(explicit).toEqualTypeOf<VariablesCaseData | undefined>();
@@ -9621,7 +9621,7 @@ describe('useSuspenseQuery', () => {
       const { query } = useVariablesQueryCase();
 
       const { data: inferred } = useSuspenseQuery(query, {
-        errorPolicy: 'all',
+        errorPolicy: "all",
       });
 
       expectTypeOf(inferred).toEqualTypeOf<VariablesCaseData | undefined>();
@@ -9631,7 +9631,7 @@ describe('useSuspenseQuery', () => {
         VariablesCaseData,
         VariablesCaseVariables
       >(query, {
-        errorPolicy: 'all',
+        errorPolicy: "all",
       });
 
       expectTypeOf(explicit).toEqualTypeOf<VariablesCaseData | undefined>();
@@ -9642,7 +9642,7 @@ describe('useSuspenseQuery', () => {
       const { query } = useVariablesQueryCase();
 
       const { data: inferred } = useSuspenseQuery(query, {
-        errorPolicy: 'none',
+        errorPolicy: "none",
       });
 
       expectTypeOf(inferred).toEqualTypeOf<VariablesCaseData>();
@@ -9652,14 +9652,14 @@ describe('useSuspenseQuery', () => {
         VariablesCaseData,
         VariablesCaseVariables
       >(query, {
-        errorPolicy: 'none',
+        errorPolicy: "none",
       });
 
       expectTypeOf(explicit).toEqualTypeOf<VariablesCaseData>();
       expectTypeOf(explicit).not.toEqualTypeOf<VariablesCaseData | undefined>();
     });
 
-    it('returns DeepPartial<TData> with returnPartialData: true', () => {
+    it("returns DeepPartial<TData> with returnPartialData: true", () => {
       const { query } = useVariablesQueryCase();
 
       const { data: inferred } = useSuspenseQuery(query, {
@@ -9680,7 +9680,7 @@ describe('useSuspenseQuery', () => {
       expectTypeOf(explicit).not.toEqualTypeOf<VariablesCaseData>();
     });
 
-    it('returns TData with returnPartialData: false', () => {
+    it("returns TData with returnPartialData: false", () => {
       const { query } = useVariablesQueryCase();
 
       const { data: inferred } = useSuspenseQuery(query, {
@@ -9705,7 +9705,7 @@ describe('useSuspenseQuery', () => {
       >();
     });
 
-    it('returns TData | undefined when skip is present', () => {
+    it("returns TData | undefined when skip is present", () => {
       const { query } = useVariablesQueryCase();
 
       const { data: inferred } = useSuspenseQuery(query, {
@@ -9740,11 +9740,11 @@ describe('useSuspenseQuery', () => {
       expectTypeOf(dynamic).not.toEqualTypeOf<VariablesCaseData>();
     });
 
-    it('returns TData when passing an option that does not affect TData', () => {
+    it("returns TData when passing an option that does not affect TData", () => {
       const { query } = useVariablesQueryCase();
 
       const { data: inferred } = useSuspenseQuery(query, {
-        fetchPolicy: 'no-cache',
+        fetchPolicy: "no-cache",
       });
 
       expectTypeOf(inferred).toEqualTypeOf<VariablesCaseData>();
@@ -9756,7 +9756,7 @@ describe('useSuspenseQuery', () => {
         VariablesCaseData,
         VariablesCaseVariables
       >(query, {
-        fetchPolicy: 'no-cache',
+        fetchPolicy: "no-cache",
       });
 
       expectTypeOf(explicit).toEqualTypeOf<VariablesCaseData>();
@@ -9765,7 +9765,7 @@ describe('useSuspenseQuery', () => {
       >();
     });
 
-    it('handles combinations of options', () => {
+    it("handles combinations of options", () => {
       // TypeScript is too smart and using a `const` or `let` boolean variable
       // for the `skip` option results in a false positive. Using an options
       // object allows us to properly check for a dynamic case which is the
@@ -9778,7 +9778,7 @@ describe('useSuspenseQuery', () => {
 
       const { data: inferredPartialDataIgnore } = useSuspenseQuery(query, {
         returnPartialData: true,
-        errorPolicy: 'ignore',
+        errorPolicy: "ignore",
       });
 
       expectTypeOf(inferredPartialDataIgnore).toEqualTypeOf<
@@ -9793,7 +9793,7 @@ describe('useSuspenseQuery', () => {
         VariablesCaseVariables
       >(query, {
         returnPartialData: true,
-        errorPolicy: 'ignore',
+        errorPolicy: "ignore",
       });
 
       expectTypeOf(explicitPartialDataIgnore).toEqualTypeOf<
@@ -9805,7 +9805,7 @@ describe('useSuspenseQuery', () => {
 
       const { data: inferredPartialDataNone } = useSuspenseQuery(query, {
         returnPartialData: true,
-        errorPolicy: 'none',
+        errorPolicy: "none",
       });
 
       expectTypeOf(inferredPartialDataNone).toEqualTypeOf<
@@ -9820,7 +9820,7 @@ describe('useSuspenseQuery', () => {
         VariablesCaseVariables
       >(query, {
         returnPartialData: true,
-        errorPolicy: 'none',
+        errorPolicy: "none",
       });
 
       expectTypeOf(explicitPartialDataNone).toEqualTypeOf<
@@ -9832,7 +9832,7 @@ describe('useSuspenseQuery', () => {
 
       const { data: inferredSkipIgnore } = useSuspenseQuery(query, {
         skip: options.skip,
-        errorPolicy: 'ignore',
+        errorPolicy: "ignore",
       });
 
       expectTypeOf(inferredSkipIgnore).toEqualTypeOf<
@@ -9847,7 +9847,7 @@ describe('useSuspenseQuery', () => {
         VariablesCaseVariables
       >(query, {
         skip: options.skip,
-        errorPolicy: 'ignore',
+        errorPolicy: "ignore",
       });
 
       expectTypeOf(explicitSkipIgnore).toEqualTypeOf<
@@ -9857,7 +9857,7 @@ describe('useSuspenseQuery', () => {
 
       const { data: inferredSkipNone } = useSuspenseQuery(query, {
         skip: options.skip,
-        errorPolicy: 'none',
+        errorPolicy: "none",
       });
 
       expectTypeOf(inferredSkipNone).toEqualTypeOf<
@@ -9870,7 +9870,7 @@ describe('useSuspenseQuery', () => {
         VariablesCaseVariables
       >(query, {
         skip: options.skip,
-        errorPolicy: 'none',
+        errorPolicy: "none",
       });
 
       expectTypeOf(explicitSkipNone).toEqualTypeOf<
@@ -9881,7 +9881,7 @@ describe('useSuspenseQuery', () => {
       const { data: inferredPartialDataNoneSkip } = useSuspenseQuery(query, {
         skip: options.skip,
         returnPartialData: true,
-        errorPolicy: 'none',
+        errorPolicy: "none",
       });
 
       expectTypeOf(inferredPartialDataNoneSkip).toEqualTypeOf<
@@ -9897,7 +9897,7 @@ describe('useSuspenseQuery', () => {
       >(query, {
         skip: options.skip,
         returnPartialData: true,
-        errorPolicy: 'none',
+        errorPolicy: "none",
       });
 
       expectTypeOf(explicitPartialDataNoneSkip).toEqualTypeOf<
@@ -9908,13 +9908,13 @@ describe('useSuspenseQuery', () => {
       ).not.toEqualTypeOf<VariablesCaseData>();
     });
 
-    it('returns correct TData type when combined options that do not affect TData', () => {
+    it("returns correct TData type when combined options that do not affect TData", () => {
       const { query } = useVariablesQueryCase();
 
       const { data: inferred } = useSuspenseQuery(query, {
-        fetchPolicy: 'no-cache',
+        fetchPolicy: "no-cache",
         returnPartialData: true,
-        errorPolicy: 'none',
+        errorPolicy: "none",
       });
 
       expectTypeOf(inferred).toEqualTypeOf<DeepPartial<VariablesCaseData>>();
@@ -9924,9 +9924,9 @@ describe('useSuspenseQuery', () => {
         VariablesCaseData,
         VariablesCaseVariables
       >(query, {
-        fetchPolicy: 'no-cache',
+        fetchPolicy: "no-cache",
         returnPartialData: true,
-        errorPolicy: 'none',
+        errorPolicy: "none",
       });
 
       expectTypeOf(explicit).toEqualTypeOf<DeepPartial<VariablesCaseData>>();
diff --git a/src/react/hooks/index.ts b/src/react/hooks/index.ts
index 5823e12d7c8..3bc1fa4a14b 100644
--- a/src/react/hooks/index.ts
+++ b/src/react/hooks/index.ts
@@ -1,21 +1,21 @@
-import '../../utilities/globals/index.js';
+import "../../utilities/globals/index.js";
 
-export * from './useApolloClient.js';
-export * from './useLazyQuery.js';
-export * from './useMutation.js';
-export { useQuery } from './useQuery.js';
-export * from './useSubscription.js';
-export * from './useReactiveVar.js';
-export * from './useFragment.js';
+export * from "./useApolloClient.js";
+export * from "./useLazyQuery.js";
+export * from "./useMutation.js";
+export { useQuery } from "./useQuery.js";
+export * from "./useSubscription.js";
+export * from "./useReactiveVar.js";
+export * from "./useFragment.js";
 export {
   useSuspenseQuery,
   UseSuspenseQueryResult,
   FetchMoreFunction,
   RefetchFunction,
   SubscribeToMoreFunction,
-} from './useSuspenseQuery.js';
+} from "./useSuspenseQuery.js";
 export {
   useBackgroundQuery,
   UseBackgroundQueryResult,
-} from './useBackgroundQuery.js';
-export { useReadQuery } from './useReadQuery.js';
+} from "./useBackgroundQuery.js";
+export { useReadQuery } from "./useReadQuery.js";
diff --git a/src/react/hooks/internal/__tests__/useDeepMemo.test.ts b/src/react/hooks/internal/__tests__/useDeepMemo.test.ts
index 2947433b4ed..56c69642b39 100644
--- a/src/react/hooks/internal/__tests__/useDeepMemo.test.ts
+++ b/src/react/hooks/internal/__tests__/useDeepMemo.test.ts
@@ -1,8 +1,8 @@
-import { renderHook } from '@testing-library/react';
-import { useDeepMemo } from '../useDeepMemo';
+import { renderHook } from "@testing-library/react";
+import { useDeepMemo } from "../useDeepMemo";
 
-describe('useDeepMemo', () => {
-  it('ensures the value is initialized', () => {
+describe("useDeepMemo", () => {
+  it("ensures the value is initialized", () => {
     const { result } = renderHook(() =>
       useDeepMemo(() => ({ test: true }), [])
     );
@@ -10,7 +10,7 @@ describe('useDeepMemo', () => {
     expect(result.current).toEqual({ test: true });
   });
 
-  it('returns memoized value when its dependencies are deeply equal', () => {
+  it("returns memoized value when its dependencies are deeply equal", () => {
     const { result, rerender } = renderHook(
       ({ active, items, user }) => {
         useDeepMemo(() => ({ active, items, user }), [items, name, active]);
@@ -19,19 +19,19 @@ describe('useDeepMemo', () => {
         initialProps: {
           active: true,
           items: [1, 2],
-          user: { name: 'John Doe' },
+          user: { name: "John Doe" },
         },
       }
     );
 
     const previousResult = result.current;
 
-    rerender({ active: true, items: [1, 2], user: { name: 'John Doe' } });
+    rerender({ active: true, items: [1, 2], user: { name: "John Doe" } });
 
     expect(result.current).toBe(previousResult);
   });
 
-  it('returns updated value if a dependency changes', () => {
+  it("returns updated value if a dependency changes", () => {
     const { result, rerender } = renderHook(
       ({ items }) => useDeepMemo(() => ({ items }), [items]),
       { initialProps: { items: [1] } }
diff --git a/src/react/hooks/internal/__use.ts b/src/react/hooks/internal/__use.ts
index 0784816fa82..2a49fab9e0c 100644
--- a/src/react/hooks/internal/__use.ts
+++ b/src/react/hooks/internal/__use.ts
@@ -1,11 +1,11 @@
-import { wrapPromiseWithState } from '../../../utilities/index.js';
-import * as React from 'react';
+import { wrapPromiseWithState } from "../../../utilities/index.js";
+import * as React from "react";
 
 type Use = <T>(promise: Promise<T>) => T;
 // Prevent webpack from complaining about our feature detection of the
 // use property of the React namespace, which is expected not
 // to exist when using current stable versions, and that's fine.
-const useKey = 'use' as keyof typeof React;
+const useKey = "use" as keyof typeof React;
 const realHook = React[useKey] as Use | undefined;
 
 // This is named with two underscores to allow this hook to evade typical rules of
@@ -16,11 +16,11 @@ export const __use =
     const statefulPromise = wrapPromiseWithState(promise);
 
     switch (statefulPromise.status) {
-      case 'pending':
+      case "pending":
         throw statefulPromise;
-      case 'rejected':
+      case "rejected":
         throw statefulPromise.reason;
-      case 'fulfilled':
+      case "fulfilled":
         return statefulPromise.value;
     }
   };
diff --git a/src/react/hooks/internal/index.ts b/src/react/hooks/internal/index.ts
index 9b8a8566312..d1c90c41f4a 100644
--- a/src/react/hooks/internal/index.ts
+++ b/src/react/hooks/internal/index.ts
@@ -1,4 +1,4 @@
 // These hooks are used internally and are not exported publicly by the library
-export { useDeepMemo } from './useDeepMemo.js';
-export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
-export { __use } from './__use.js';
+export { useDeepMemo } from "./useDeepMemo.js";
+export { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
+export { __use } from "./__use.js";
diff --git a/src/react/hooks/internal/useDeepMemo.ts b/src/react/hooks/internal/useDeepMemo.ts
index ac96206ce9b..5a49115a49b 100644
--- a/src/react/hooks/internal/useDeepMemo.ts
+++ b/src/react/hooks/internal/useDeepMemo.ts
@@ -1,6 +1,6 @@
-import type { DependencyList } from 'react';
-import * as React from 'react';
-import { equal } from '@wry/equality';
+import type { DependencyList } from "react";
+import * as React from "react";
+import { equal } from "@wry/equality";
 
 export function useDeepMemo<TValue>(
   memoFn: () => TValue,
diff --git a/src/react/hooks/internal/useIsomorphicLayoutEffect.ts b/src/react/hooks/internal/useIsomorphicLayoutEffect.ts
index 7d4acd9b4d7..f5380a88fdd 100644
--- a/src/react/hooks/internal/useIsomorphicLayoutEffect.ts
+++ b/src/react/hooks/internal/useIsomorphicLayoutEffect.ts
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { canUseDOM } from '../../../utilities/index.js';
+import * as React from "react";
+import { canUseDOM } from "../../../utilities/index.js";
 
 // use canUseDOM here instead of canUseLayoutEffect because we want to be able
 // to use useLayoutEffect in our jest tests. useLayoutEffect seems to work fine
diff --git a/src/react/hooks/useApolloClient.ts b/src/react/hooks/useApolloClient.ts
index b232af082f9..c9e81a8551c 100644
--- a/src/react/hooks/useApolloClient.ts
+++ b/src/react/hooks/useApolloClient.ts
@@ -1,18 +1,18 @@
-import { invariant } from '../../utilities/globals/index.js';
-import * as React from 'react';
-import type { ApolloClient } from '../../core/index.js';
-import { getApolloContext } from '../context/index.js';
+import { invariant } from "../../utilities/globals/index.js";
+import * as React from "react";
+import type { ApolloClient } from "../../core/index.js";
+import { getApolloContext } from "../context/index.js";
 
 export function useApolloClient(
-  override?: ApolloClient<object>,
+  override?: ApolloClient<object>
 ): ApolloClient<object> {
   const context = React.useContext(getApolloContext());
   const client = override || context.client;
   invariant(
     !!client,
     'Could not find "client" in the context or passed in as an option. ' +
-    'Wrap the root component in an <ApolloProvider>, or pass an ApolloClient ' +
-    'instance in via options.',
+      "Wrap the root component in an <ApolloProvider>, or pass an ApolloClient " +
+      "instance in via options."
   );
 
   return client;
diff --git a/src/react/hooks/useBackgroundQuery.ts b/src/react/hooks/useBackgroundQuery.ts
index 24c3e7f3f2e..eb0a9002a4e 100644
--- a/src/react/hooks/useBackgroundQuery.ts
+++ b/src/react/hooks/useBackgroundQuery.ts
@@ -1,56 +1,56 @@
-import * as React from 'react';
+import * as React from "react";
 import type {
   DocumentNode,
   OperationVariables,
   TypedDocumentNode,
-} from '../../core/index.js';
-import { useApolloClient } from './useApolloClient.js';
+} from "../../core/index.js";
+import { useApolloClient } from "./useApolloClient.js";
 import {
   QUERY_REFERENCE_SYMBOL,
   type QueryReference,
-} from '../cache/QueryReference.js';
-import type { BackgroundQueryHookOptions, NoInfer } from '../types/types.js';
-import { __use } from './internal/index.js';
-import { getSuspenseCache } from '../cache/index.js';
-import { useWatchQueryOptions } from './useSuspenseQuery.js';
-import type { FetchMoreFunction, RefetchFunction } from './useSuspenseQuery.js';
-import { canonicalStringify } from '../../cache/index.js';
-import type { DeepPartial } from '../../utilities/index.js';
-import type { CacheKey } from '../cache/types.js';
+} from "../cache/QueryReference.js";
+import type { BackgroundQueryHookOptions, NoInfer } from "../types/types.js";
+import { __use } from "./internal/index.js";
+import { getSuspenseCache } from "../cache/index.js";
+import { useWatchQueryOptions } from "./useSuspenseQuery.js";
+import type { FetchMoreFunction, RefetchFunction } from "./useSuspenseQuery.js";
+import { canonicalStringify } from "../../cache/index.js";
+import type { DeepPartial } from "../../utilities/index.js";
+import type { CacheKey } from "../cache/types.js";
 
 export type UseBackgroundQueryResult<
   TData = unknown,
-  TVariables extends OperationVariables = OperationVariables
+  TVariables extends OperationVariables = OperationVariables,
 > = [
   QueryReference<TData>,
   {
     fetchMore: FetchMoreFunction<TData, TVariables>;
     refetch: RefetchFunction<TData, TVariables>;
-  }
+  },
 ];
 
 type BackgroundQueryHookOptionsNoInfer<
   TData,
-  TVariables extends OperationVariables
+  TVariables extends OperationVariables,
 > = BackgroundQueryHookOptions<NoInfer<TData>, NoInfer<TVariables>>;
 
 export function useBackgroundQuery<
   TData,
   TVariables extends OperationVariables,
-  TOptions extends Omit<BackgroundQueryHookOptions<TData>, 'variables'>
+  TOptions extends Omit<BackgroundQueryHookOptions<TData>, "variables">,
 >(
   query: DocumentNode | TypedDocumentNode<TData, TVariables>,
   options?: BackgroundQueryHookOptionsNoInfer<TData, TVariables> & TOptions
 ): UseBackgroundQueryResult<
-  TOptions['errorPolicy'] extends 'ignore' | 'all'
-    ? TOptions['returnPartialData'] extends true
+  TOptions["errorPolicy"] extends "ignore" | "all"
+    ? TOptions["returnPartialData"] extends true
       ? DeepPartial<TData> | undefined
       : TData | undefined
-    : TOptions['returnPartialData'] extends true
-    ? TOptions['skip'] extends boolean
+    : TOptions["returnPartialData"] extends true
+    ? TOptions["skip"] extends boolean
       ? DeepPartial<TData> | undefined
       : DeepPartial<TData>
-    : TOptions['skip'] extends boolean
+    : TOptions["skip"] extends boolean
     ? TData | undefined
     : TData,
   TVariables
@@ -58,28 +58,28 @@ export function useBackgroundQuery<
 
 export function useBackgroundQuery<
   TData = unknown,
-  TVariables extends OperationVariables = OperationVariables
+  TVariables extends OperationVariables = OperationVariables,
 >(
   query: DocumentNode | TypedDocumentNode<TData, TVariables>,
   options: BackgroundQueryHookOptionsNoInfer<TData, TVariables> & {
     returnPartialData: true;
-    errorPolicy: 'ignore' | 'all';
+    errorPolicy: "ignore" | "all";
   }
 ): UseBackgroundQueryResult<DeepPartial<TData> | undefined, TVariables>;
 
 export function useBackgroundQuery<
   TData = unknown,
-  TVariables extends OperationVariables = OperationVariables
+  TVariables extends OperationVariables = OperationVariables,
 >(
   query: DocumentNode | TypedDocumentNode<TData, TVariables>,
   options: BackgroundQueryHookOptionsNoInfer<TData, TVariables> & {
-    errorPolicy: 'ignore' | 'all';
+    errorPolicy: "ignore" | "all";
   }
 ): UseBackgroundQueryResult<TData | undefined, TVariables>;
 
 export function useBackgroundQuery<
   TData = unknown,
-  TVariables extends OperationVariables = OperationVariables
+  TVariables extends OperationVariables = OperationVariables,
 >(
   query: DocumentNode | TypedDocumentNode<TData, TVariables>,
   options: BackgroundQueryHookOptionsNoInfer<TData, TVariables> & {
@@ -90,7 +90,7 @@ export function useBackgroundQuery<
 
 export function useBackgroundQuery<
   TData = unknown,
-  TVariables extends OperationVariables = OperationVariables
+  TVariables extends OperationVariables = OperationVariables,
 >(
   query: DocumentNode | TypedDocumentNode<TData, TVariables>,
   options: BackgroundQueryHookOptionsNoInfer<TData, TVariables> & {
@@ -100,7 +100,7 @@ export function useBackgroundQuery<
 
 export function useBackgroundQuery<
   TData = unknown,
-  TVariables extends OperationVariables = OperationVariables
+  TVariables extends OperationVariables = OperationVariables,
 >(
   query: DocumentNode | TypedDocumentNode<TData, TVariables>,
   options: BackgroundQueryHookOptionsNoInfer<TData, TVariables> & {
@@ -110,7 +110,7 @@ export function useBackgroundQuery<
 
 export function useBackgroundQuery<
   TData = unknown,
-  TVariables extends OperationVariables = OperationVariables
+  TVariables extends OperationVariables = OperationVariables,
 >(
   query: DocumentNode | TypedDocumentNode<TData, TVariables>,
   options?: BackgroundQueryHookOptionsNoInfer<TData, TVariables>
@@ -118,7 +118,7 @@ export function useBackgroundQuery<
 
 export function useBackgroundQuery<
   TData = unknown,
-  TVariables extends OperationVariables = OperationVariables
+  TVariables extends OperationVariables = OperationVariables,
 >(
   query: DocumentNode | TypedDocumentNode<TData, TVariables>,
   options: BackgroundQueryHookOptionsNoInfer<TData, TVariables> = Object.create(
diff --git a/src/react/hooks/useFragment.ts b/src/react/hooks/useFragment.ts
index 71d9f012466..debd1bd02eb 100644
--- a/src/react/hooks/useFragment.ts
+++ b/src/react/hooks/useFragment.ts
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { equal } from "@wry/equality";
 
-import type { DeepPartial} from "../../utilities/index.js";
+import type { DeepPartial } from "../../utilities/index.js";
 import { mergeDeepArray } from "../../utilities/index.js";
 import type {
   Cache,
@@ -16,18 +16,14 @@ import type { OperationVariables } from "../../core/index.js";
 import type { NoInfer } from "../types/types.js";
 
 export interface UseFragmentOptions<TData, TVars>
-extends Omit<
-  Cache.DiffOptions<NoInfer<TData>, NoInfer<TVars>>,
-  | "id"
-  | "query"
-  | "optimistic"
-  | "previousResult"
-  | "returnPartialData"
->, Omit<Cache.ReadFragmentOptions<TData, TVars>,
-  | "id"
-  | "variables"
-  | "returnPartialData"
-> {
+  extends Omit<
+      Cache.DiffOptions<NoInfer<TData>, NoInfer<TVars>>,
+      "id" | "query" | "optimistic" | "previousResult" | "returnPartialData"
+    >,
+    Omit<
+      Cache.ReadFragmentOptions<TData, TVars>,
+      "id" | "variables" | "returnPartialData"
+    > {
   from: StoreObject | Reference | string;
   // Override this field to make it optional (default: true).
   optimistic?: boolean;
@@ -45,28 +41,19 @@ export type UseFragmentResult<TData> =
       missing?: MissingTree;
     };
 
-export function useFragment<
-  TData = any,
-  TVars = OperationVariables
->(
-  options: UseFragmentOptions<TData, TVars>,
+export function useFragment<TData = any, TVars = OperationVariables>(
+  options: UseFragmentOptions<TData, TVars>
 ): UseFragmentResult<TData> {
   const { cache } = useApolloClient();
 
-  const {
-    fragment,
-    fragmentName,
-    from,
-    optimistic = true,
-    ...rest
-  } = options;
+  const { fragment, fragmentName, from, optimistic = true, ...rest } = options;
 
   const diffOptions: Cache.DiffOptions<TData, TVars> = {
     ...rest,
     returnPartialData: true,
     id: typeof from === "string" ? from : cache.identify(from),
     query: cache["getFragmentDoc"](fragment, fragmentName),
-    optimistic
+    optimistic,
   };
 
   const resultRef = React.useRef<UseFragmentResult<TData>>();
@@ -97,7 +84,7 @@ export function useFragment<
       return () => {
         unsubcribe();
         clearTimeout(lastTimeout);
-      }
+      };
     },
     getSnapshot,
     getSnapshot
@@ -105,7 +92,7 @@ export function useFragment<
 }
 
 function diffToResult<TData>(
-  diff: Cache.DiffResult<TData>,
+  diff: Cache.DiffResult<TData>
 ): UseFragmentResult<TData> {
   const result = {
     data: diff.result!,
@@ -113,9 +100,7 @@ function diffToResult<TData>(
   } as UseFragmentResult<TData>;
 
   if (diff.missing) {
-    result.missing = mergeDeepArray(
-      diff.missing.map(error => error.missing),
-    );
+    result.missing = mergeDeepArray(diff.missing.map((error) => error.missing));
   }
 
   return result;
diff --git a/src/react/hooks/useLazyQuery.ts b/src/react/hooks/useLazyQuery.ts
index 7f3c06ef0a7..535b9b4ceb2 100644
--- a/src/react/hooks/useLazyQuery.ts
+++ b/src/react/hooks/useLazyQuery.ts
@@ -1,37 +1,43 @@
-import type { DocumentNode } from 'graphql';
-import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
-import * as React from 'react';
+import type { DocumentNode } from "graphql";
+import type { TypedDocumentNode } from "@graphql-typed-document-node/core";
+import * as React from "react";
 
-import type { OperationVariables } from '../../core/index.js';
-import { mergeOptions } from '../../utilities/index.js';
+import type { OperationVariables } from "../../core/index.js";
+import { mergeOptions } from "../../utilities/index.js";
 import type {
   LazyQueryHookExecOptions,
   LazyQueryHookOptions,
   LazyQueryResultTuple,
   NoInfer,
   QueryResult,
-} from '../types/types.js';
-import { useInternalState } from './useQuery.js';
-import { useApolloClient } from './useApolloClient.js';
+} from "../types/types.js";
+import { useInternalState } from "./useQuery.js";
+import { useApolloClient } from "./useApolloClient.js";
 
 // The following methods, when called will execute the query, regardless of
 // whether the useLazyQuery execute function was called before.
 const EAGER_METHODS = [
-  'refetch',
-  'reobserve',
-  'fetchMore',
-  'updateQuery',
-  'startPolling',
-  'subscribeToMore',
+  "refetch",
+  "reobserve",
+  "fetchMore",
+  "updateQuery",
+  "startPolling",
+  "subscribeToMore",
 ] as const;
 
-export function useLazyQuery<TData = any, TVariables extends OperationVariables = OperationVariables>(
+export function useLazyQuery<
+  TData = any,
+  TVariables extends OperationVariables = OperationVariables,
+>(
   query: DocumentNode | TypedDocumentNode<TData, TVariables>,
   options?: LazyQueryHookOptions<NoInfer<TData>, NoInfer<TVariables>>
 ): LazyQueryResultTuple<TData, TVariables> {
-  const execOptionsRef = React.useRef<Partial<LazyQueryHookExecOptions<TData, TVariables>>>();
+  const execOptionsRef =
+    React.useRef<Partial<LazyQueryHookExecOptions<TData, TVariables>>>();
   const optionsRef = React.useRef<LazyQueryHookOptions<TData, TVariables>>();
-  const queryRef = React.useRef<DocumentNode | TypedDocumentNode<TData, TVariables>>();
+  const queryRef = React.useRef<
+    DocumentNode | TypedDocumentNode<TData, TVariables>
+  >();
   const merged = mergeOptions(options, execOptionsRef.current || {});
   const document = merged?.query ?? query;
 
@@ -54,10 +60,9 @@ export function useLazyQuery<TData = any, TVariables extends OperationVariables
     useQueryResult.observable.options.initialFetchPolicy ||
     internalState.getDefaultFetchPolicy();
 
-  const result: QueryResult<TData, TVariables> =
-    Object.assign(useQueryResult, {
-      called: !!execOptionsRef.current,
-    });
+  const result: QueryResult<TData, TVariables> = Object.assign(useQueryResult, {
+    called: !!execOptionsRef.current,
+  });
 
   // We use useMemo here to make sure the eager methods have a stable identity.
   const eagerMethods = React.useMemo(() => {
@@ -79,31 +84,34 @@ export function useLazyQuery<TData = any, TVariables extends OperationVariables
 
   Object.assign(result, eagerMethods);
 
-  const execute = React.useCallback<
-    LazyQueryResultTuple<TData, TVariables>[0]
-  >(executeOptions => {
-    execOptionsRef.current = executeOptions ? {
-      ...executeOptions,
-      fetchPolicy: executeOptions.fetchPolicy || initialFetchPolicy,
-    } : {
-      fetchPolicy: initialFetchPolicy,
-    };
-
-    const options = mergeOptions(optionsRef.current, {
-      query: queryRef.current,
-      ...execOptionsRef.current,
-    })
-
-    const promise = internalState
-      .executeQuery({ ...options, skip: false })
-      .then((queryResult) => Object.assign(queryResult, eagerMethods));
-
-    // Because the return value of `useLazyQuery` is usually floated, we need
-    // to catch the promise to prevent unhandled rejections.
-    promise.catch(() => {});
-
-    return promise;
-  }, []);
+  const execute = React.useCallback<LazyQueryResultTuple<TData, TVariables>[0]>(
+    (executeOptions) => {
+      execOptionsRef.current = executeOptions
+        ? {
+            ...executeOptions,
+            fetchPolicy: executeOptions.fetchPolicy || initialFetchPolicy,
+          }
+        : {
+            fetchPolicy: initialFetchPolicy,
+          };
+
+      const options = mergeOptions(optionsRef.current, {
+        query: queryRef.current,
+        ...execOptionsRef.current,
+      });
+
+      const promise = internalState
+        .executeQuery({ ...options, skip: false })
+        .then((queryResult) => Object.assign(queryResult, eagerMethods));
+
+      // Because the return value of `useLazyQuery` is usually floated, we need
+      // to catch the promise to prevent unhandled rejections.
+      promise.catch(() => {});
+
+      return promise;
+    },
+    []
+  );
 
   return [execute, result];
 }
diff --git a/src/react/hooks/useMutation.ts b/src/react/hooks/useMutation.ts
index f2ecd587b7e..f3c2b233abd 100644
--- a/src/react/hooks/useMutation.ts
+++ b/src/react/hooks/useMutation.ts
@@ -1,25 +1,24 @@
-import * as React from 'react';
-import type { DocumentNode } from 'graphql';
-import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
+import * as React from "react";
+import type { DocumentNode } from "graphql";
+import type { TypedDocumentNode } from "@graphql-typed-document-node/core";
 import type {
   MutationFunctionOptions,
   MutationHookOptions,
   MutationResult,
   MutationTuple,
   NoInfer,
-} from '../types/types.js';
+} from "../types/types.js";
 
 import type {
   ApolloCache,
   DefaultContext,
-  OperationVariables} from '../../core/index.js';
-import {
-  mergeOptions
-} from '../../utilities/index.js';
-import { equal } from '@wry/equality';
-import { DocumentType, verifyDocumentType } from '../parser/index.js';
-import { ApolloError } from '../../errors/index.js';
-import { useApolloClient } from './useApolloClient.js';
+  OperationVariables,
+} from "../../core/index.js";
+import { mergeOptions } from "../../utilities/index.js";
+import { equal } from "@wry/equality";
+import { DocumentType, verifyDocumentType } from "../parser/index.js";
+import { ApolloError } from "../../errors/index.js";
+import { useApolloClient } from "./useApolloClient.js";
 
 export function useMutation<
   TData = any,
@@ -28,11 +27,16 @@ export function useMutation<
   TCache extends ApolloCache<any> = ApolloCache<any>,
 >(
   mutation: DocumentNode | TypedDocumentNode<TData, TVariables>,
-  options?: MutationHookOptions<NoInfer<TData>, NoInfer<TVariables>, TContext, TCache>,
+  options?: MutationHookOptions<
+    NoInfer<TData>,
+    NoInfer<TVariables>,
+    TContext,
+    TCache
+  >
 ): MutationTuple<TData, TVariables, TContext, TCache> {
   const client = useApolloClient(options?.client);
   verifyDocumentType(mutation, DocumentType.Mutation);
-  const [result, setResult] = React.useState<Omit<MutationResult, 'reset'>>({
+  const [result, setResult] = React.useState<Omit<MutationResult, "reset">>({
     called: false,
     loading: false,
     client,
@@ -53,101 +57,110 @@ export function useMutation<
     Object.assign(ref.current, { client, options, mutation });
   }
 
-  const execute = React.useCallback((
-    executeOptions: MutationFunctionOptions<
-      TData,
-      TVariables,
-      TContext,
-      TCache
-    > = {}
-  ) => {
-    const {options, mutation} = ref.current;
-    const baseOptions = { ...options, mutation };
-    const client = executeOptions.client || ref.current.client;
-
-    if (!ref.current.result.loading && !baseOptions.ignoreResults && ref.current.isMounted) {
-      setResult(ref.current.result = {
-        loading: true,
-        error: void 0,
-        data: void 0,
-        called: true,
-        client,
-      });
-    }
-
-    const mutationId = ++ref.current.mutationId;
-    const clientOptions = mergeOptions(
-      baseOptions,
-      executeOptions as any,
-    );
-
-    return client.mutate(clientOptions).then((response) => {
-      const { data, errors } = response;
-      const error =
-        errors && errors.length > 0
-          ? new ApolloError({ graphQLErrors: errors })
-          : void 0;
-
-      const onError = executeOptions.onError || ref.current.options?.onError
-
-      if (error && onError) {
-        onError(error, clientOptions);
-      }
-
-      if (
-        mutationId === ref.current.mutationId &&
-        !clientOptions.ignoreResults
-      ) {
-        const result = {
-          called: true,
-          loading: false,
-          data,
-          error,
-          client,
-        };
-
-        if (ref.current.isMounted && !equal(ref.current.result, result)) {
-          setResult(ref.current.result = result);
-        }
-      }
-
-      const onCompleted = executeOptions.onCompleted || ref.current.options?.onCompleted
+  const execute = React.useCallback(
+    (
+      executeOptions: MutationFunctionOptions<
+        TData,
+        TVariables,
+        TContext,
+        TCache
+      > = {}
+    ) => {
+      const { options, mutation } = ref.current;
+      const baseOptions = { ...options, mutation };
+      const client = executeOptions.client || ref.current.client;
 
-      if (!error) {
-        onCompleted?.(response.data!, clientOptions);
-      }
-
-      return response;
-    }).catch((error) => {
       if (
-        mutationId === ref.current.mutationId &&
+        !ref.current.result.loading &&
+        !baseOptions.ignoreResults &&
         ref.current.isMounted
       ) {
-        const result = {
-          loading: false,
-          error,
-          data: void 0,
-          called: true,
-          client,
-        };
-
-        if (!equal(ref.current.result, result)) {
-          setResult(ref.current.result = result);
-        }
+        setResult(
+          (ref.current.result = {
+            loading: true,
+            error: void 0,
+            data: void 0,
+            called: true,
+            client,
+          })
+        );
       }
 
-      const onError = executeOptions.onError || ref.current.options?.onError
-
-      if (onError) {
-        onError(error, clientOptions);
-
-        // TODO(brian): why are we returning this here???
-        return { data: void 0, errors: error };
-      }
-
-      throw error;
-    });
-  }, []);
+      const mutationId = ++ref.current.mutationId;
+      const clientOptions = mergeOptions(baseOptions, executeOptions as any);
+
+      return client
+        .mutate(clientOptions)
+        .then((response) => {
+          const { data, errors } = response;
+          const error =
+            errors && errors.length > 0
+              ? new ApolloError({ graphQLErrors: errors })
+              : void 0;
+
+          const onError =
+            executeOptions.onError || ref.current.options?.onError;
+
+          if (error && onError) {
+            onError(error, clientOptions);
+          }
+
+          if (
+            mutationId === ref.current.mutationId &&
+            !clientOptions.ignoreResults
+          ) {
+            const result = {
+              called: true,
+              loading: false,
+              data,
+              error,
+              client,
+            };
+
+            if (ref.current.isMounted && !equal(ref.current.result, result)) {
+              setResult((ref.current.result = result));
+            }
+          }
+
+          const onCompleted =
+            executeOptions.onCompleted || ref.current.options?.onCompleted;
+
+          if (!error) {
+            onCompleted?.(response.data!, clientOptions);
+          }
+
+          return response;
+        })
+        .catch((error) => {
+          if (mutationId === ref.current.mutationId && ref.current.isMounted) {
+            const result = {
+              loading: false,
+              error,
+              data: void 0,
+              called: true,
+              client,
+            };
+
+            if (!equal(ref.current.result, result)) {
+              setResult((ref.current.result = result));
+            }
+          }
+
+          const onError =
+            executeOptions.onError || ref.current.options?.onError;
+
+          if (onError) {
+            onError(error, clientOptions);
+
+            // TODO(brian): why are we returning this here???
+            return { data: void 0, errors: error };
+          }
+
+          throw error;
+        });
+    },
+    []
+  );
 
   const reset = React.useCallback(() => {
     if (ref.current.isMounted) {
diff --git a/src/react/hooks/useQuery.ts b/src/react/hooks/useQuery.ts
index 1d518d216a9..755d71b1ddf 100644
--- a/src/react/hooks/useQuery.ts
+++ b/src/react/hooks/useQuery.ts
@@ -1,39 +1,44 @@
-import { invariant } from '../../utilities/globals/index.js';
+import { invariant } from "../../utilities/globals/index.js";
 
-import * as React from 'react';
-import { useSyncExternalStore } from './useSyncExternalStore.js';
-import { equal } from '@wry/equality';
+import * as React from "react";
+import { useSyncExternalStore } from "./useSyncExternalStore.js";
+import { equal } from "@wry/equality";
 
-import type { OperationVariables, WatchQueryFetchPolicy } from '../../core/index.js';
-import { mergeOptions } from '../../utilities/index.js';
-import type { ApolloContextValue} from '../context/index.js';
-import { getApolloContext } from '../context/index.js';
-import { ApolloError } from '../../errors/index.js';
+import type {
+  OperationVariables,
+  WatchQueryFetchPolicy,
+} from "../../core/index.js";
+import { mergeOptions } from "../../utilities/index.js";
+import type { ApolloContextValue } from "../context/index.js";
+import { getApolloContext } from "../context/index.js";
+import { ApolloError } from "../../errors/index.js";
 import type {
   ApolloClient,
   ApolloQueryResult,
   ObservableQuery,
   DocumentNode,
   TypedDocumentNode,
-  WatchQueryOptions} from '../../core/index.js';
-import {
-  NetworkStatus
-} from '../../core/index.js';
+  WatchQueryOptions,
+} from "../../core/index.js";
+import { NetworkStatus } from "../../core/index.js";
 import type {
   QueryHookOptions,
   QueryResult,
   ObservableQueryFields,
   NoInfer,
-} from '../types/types.js';
+} from "../types/types.js";
 
-import { DocumentType, verifyDocumentType } from '../parser/index.js';
-import { useApolloClient } from './useApolloClient.js';
-import { canUseWeakMap, compact, isNonEmptyArray, maybeDeepFreeze } from '../../utilities/index.js';
+import { DocumentType, verifyDocumentType } from "../parser/index.js";
+import { useApolloClient } from "./useApolloClient.js";
+import {
+  canUseWeakMap,
+  compact,
+  isNonEmptyArray,
+  maybeDeepFreeze,
+} from "../../utilities/index.js";
 
 const {
-  prototype: {
-    hasOwnProperty,
-  },
+  prototype: { hasOwnProperty },
 } = Object;
 
 export function useQuery<
@@ -41,17 +46,19 @@ export function useQuery<
   TVariables extends OperationVariables = OperationVariables,
 >(
   query: DocumentNode | TypedDocumentNode<TData, TVariables>,
-  options: QueryHookOptions<NoInfer<TData>, NoInfer<TVariables>> = Object.create(null),
+  options: QueryHookOptions<
+    NoInfer<TData>,
+    NoInfer<TVariables>
+  > = Object.create(null)
 ): QueryResult<TData, TVariables> {
-  return useInternalState(
-    useApolloClient(options.client),
-    query,
-  ).useQuery(options);
+  return useInternalState(useApolloClient(options.client), query).useQuery(
+    options
+  );
 }
 
 export function useInternalState<TData, TVariables extends OperationVariables>(
   client: ApolloClient<any>,
-  query: DocumentNode | TypedDocumentNode<TData, TVariables>,
+  query: DocumentNode | TypedDocumentNode<TData, TVariables>
 ): InternalState<TData, TVariables> {
   const stateRef = React.useRef<InternalState<TData, TVariables>>();
   if (
@@ -69,7 +76,7 @@ export function useInternalState<TData, TVariables extends OperationVariables>(
   // setTick function. Updating this state by calling state.forceUpdate is the
   // only way we trigger React component updates (no other useState calls within
   // the InternalState class).
-  state.forceUpdateState = React.useReducer(tick => tick + 1, 0)[1];
+  state.forceUpdateState = React.useReducer((tick) => tick + 1, 0)[1];
 
   return state;
 }
@@ -78,7 +85,7 @@ class InternalState<TData, TVariables extends OperationVariables> {
   constructor(
     public readonly client: ReturnType<typeof useApolloClient>,
     public readonly query: DocumentNode | TypedDocumentNode<TData, TVariables>,
-    previous?: InternalState<TData, TVariables>,
+    previous?: InternalState<TData, TVariables>
   ) {
     verifyDocumentType(query, DocumentType.Query);
 
@@ -100,7 +107,9 @@ class InternalState<TData, TVariables extends OperationVariables> {
    *  */
   forceUpdateState() {
     // Replaced (in useInternalState) with a method that triggers an update.
-    invariant.warn("Calling default no-op implementation of InternalState#forceUpdate");
+    invariant.warn(
+      "Calling default no-op implementation of InternalState#forceUpdate"
+    );
   }
 
   /**
@@ -109,15 +118,17 @@ class InternalState<TData, TVariables extends OperationVariables> {
    */
   forceUpdate = () => this.forceUpdateState();
 
-  executeQuery(options: QueryHookOptions<TData, TVariables> & {
-    query?: DocumentNode;
-  }) {
+  executeQuery(
+    options: QueryHookOptions<TData, TVariables> & {
+      query?: DocumentNode;
+    }
+  ) {
     if (options.query) {
-      Object.assign(this, { query: options.query })
+      Object.assign(this, { query: options.query });
     }
 
     this.watchQueryOptions = this.createWatchQueryOptions(
-      this.queryHookOptions = options,
+      (this.queryHookOptions = options)
     );
 
     const concast = this.observable.reobserveAsConcast(
@@ -147,7 +158,7 @@ class InternalState<TData, TVariables extends OperationVariables> {
         },
         complete: () => {
           resolve(this.toQueryResult(result));
-        }
+        },
       });
     });
   }
@@ -170,93 +181,96 @@ class InternalState<TData, TVariables extends OperationVariables> {
     const obsQuery = this.useObservableQuery();
 
     const result = useSyncExternalStore(
-      React.useCallback((handleStoreChange) => {
-        if (this.renderPromises) {
-          return () => {};
-        }
-
-        this.forceUpdate = handleStoreChange;
-
-        const onNext = () => {
-          const previousResult = this.result;
-          // We use `getCurrentResult()` instead of the onNext argument because
-          // the values differ slightly. Specifically, loading results will have
-          // an empty object for data instead of `undefined` for some reason.
-          const result = obsQuery.getCurrentResult();
-          // Make sure we're not attempting to re-render similar results
-          if (
-            previousResult &&
-            previousResult.loading === result.loading &&
-            previousResult.networkStatus === result.networkStatus &&
-            equal(previousResult.data, result.data)
-          ) {
-            return;
-          }
-
-          this.setResult(result);
-        };
-
-        const onError = (error: Error) => {
-          const last = obsQuery["last"];
-          subscription.unsubscribe();
-          // Unfortunately, if `lastError` is set in the current
-          // `observableQuery` when the subscription is re-created,
-          // the subscription will immediately receive the error, which will
-          // cause it to terminate again. To avoid this, we first clear
-          // the last error/result from the `observableQuery` before re-starting
-          // the subscription, and restore it afterwards (so the subscription
-          // has a chance to stay open).
-          try {
-            obsQuery.resetLastResults();
-            subscription = obsQuery.subscribe(onNext, onError);
-          } finally {
-            obsQuery["last"] = last;
+      React.useCallback(
+        (handleStoreChange) => {
+          if (this.renderPromises) {
+            return () => {};
           }
 
-          if (!hasOwnProperty.call(error, 'graphQLErrors')) {
-            // The error is not a GraphQL error
-            throw error;
-          }
-
-          const previousResult = this.result;
-          if (
-            !previousResult ||
-            (previousResult && previousResult.loading) ||
-            !equal(error, previousResult.error)
-          ) {
-            this.setResult({
-              data: (previousResult && previousResult.data) as TData,
-              error: error as ApolloError,
-              loading: false,
-              networkStatus: NetworkStatus.error,
-            });
-          }
-        };
-
-        let subscription = obsQuery.subscribe(onNext, onError);
-
-        // Do the "unsubscribe" with a short delay.
-        // This way, an existing subscription can be reused without an additional
-        // request if "unsubscribe"  and "resubscribe" to the same ObservableQuery
-        // happen in very fast succession.
-        return () => {
-          setTimeout(() => subscription.unsubscribe());
-          this.forceUpdate = () => this.forceUpdateState();
-        };
-      }, [
-        // We memoize the subscribe function using useCallback and the following
-        // dependency keys, because the subscribe function reference is all that
-        // useSyncExternalStore uses internally as a dependency key for the
-        // useEffect ultimately responsible for the subscription, so we are
-        // effectively passing this dependency array to that useEffect buried
-        // inside useSyncExternalStore, as desired.
-        obsQuery,
-        this.renderPromises,
-        this.client.disableNetworkFetches,
-      ]),
+          this.forceUpdate = handleStoreChange;
+
+          const onNext = () => {
+            const previousResult = this.result;
+            // We use `getCurrentResult()` instead of the onNext argument because
+            // the values differ slightly. Specifically, loading results will have
+            // an empty object for data instead of `undefined` for some reason.
+            const result = obsQuery.getCurrentResult();
+            // Make sure we're not attempting to re-render similar results
+            if (
+              previousResult &&
+              previousResult.loading === result.loading &&
+              previousResult.networkStatus === result.networkStatus &&
+              equal(previousResult.data, result.data)
+            ) {
+              return;
+            }
+
+            this.setResult(result);
+          };
+
+          const onError = (error: Error) => {
+            const last = obsQuery["last"];
+            subscription.unsubscribe();
+            // Unfortunately, if `lastError` is set in the current
+            // `observableQuery` when the subscription is re-created,
+            // the subscription will immediately receive the error, which will
+            // cause it to terminate again. To avoid this, we first clear
+            // the last error/result from the `observableQuery` before re-starting
+            // the subscription, and restore it afterwards (so the subscription
+            // has a chance to stay open).
+            try {
+              obsQuery.resetLastResults();
+              subscription = obsQuery.subscribe(onNext, onError);
+            } finally {
+              obsQuery["last"] = last;
+            }
+
+            if (!hasOwnProperty.call(error, "graphQLErrors")) {
+              // The error is not a GraphQL error
+              throw error;
+            }
+
+            const previousResult = this.result;
+            if (
+              !previousResult ||
+              (previousResult && previousResult.loading) ||
+              !equal(error, previousResult.error)
+            ) {
+              this.setResult({
+                data: (previousResult && previousResult.data) as TData,
+                error: error as ApolloError,
+                loading: false,
+                networkStatus: NetworkStatus.error,
+              });
+            }
+          };
+
+          let subscription = obsQuery.subscribe(onNext, onError);
+
+          // Do the "unsubscribe" with a short delay.
+          // This way, an existing subscription can be reused without an additional
+          // request if "unsubscribe"  and "resubscribe" to the same ObservableQuery
+          // happen in very fast succession.
+          return () => {
+            setTimeout(() => subscription.unsubscribe());
+            this.forceUpdate = () => this.forceUpdateState();
+          };
+        },
+        [
+          // We memoize the subscribe function using useCallback and the following
+          // dependency keys, because the subscribe function reference is all that
+          // useSyncExternalStore uses internally as a dependency key for the
+          // useEffect ultimately responsible for the subscription, so we are
+          // effectively passing this dependency array to that useEffect buried
+          // inside useSyncExternalStore, as desired.
+          obsQuery,
+          this.renderPromises,
+          this.client.disableNetworkFetches,
+        ]
+      ),
 
       () => this.getCurrentResult(),
-      () => this.getCurrentResult(),
+      () => this.getCurrentResult()
     );
 
     // TODO Remove this method when we remove support for options.partialRefetch.
@@ -273,11 +287,9 @@ class InternalState<TData, TVariables extends OperationVariables> {
   private queryHookOptions: QueryHookOptions<TData, TVariables>;
   private watchQueryOptions: WatchQueryOptions<TVariables, TData>;
 
-  private useOptions(
-    options: QueryHookOptions<TData, TVariables>,
-  ) {
+  private useOptions(options: QueryHookOptions<TData, TVariables>) {
     const watchQueryOptions = this.createWatchQueryOptions(
-      this.queryHookOptions = options,
+      (this.queryHookOptions = options)
     );
 
     // Update this.watchQueryOptions, but only when they have changed, which
@@ -313,7 +325,8 @@ class InternalState<TData, TVariables extends OperationVariables> {
     // Like the forceUpdate method, the versions of these methods inherited from
     // InternalState.prototype are empty no-ops, but we can override them on the
     // base state object (without modifying the prototype).
-    this.onCompleted = options.onCompleted || InternalState.prototype.onCompleted;
+    this.onCompleted =
+      options.onCompleted || InternalState.prototype.onCompleted;
     this.onError = options.onError || InternalState.prototype.onError;
 
     if (
@@ -326,7 +339,7 @@ class InternalState<TData, TVariables extends OperationVariables> {
       this.result = this.ssrDisabledResult;
     } else if (
       this.queryHookOptions.skip ||
-      this.watchQueryOptions.fetchPolicy === 'standby'
+      this.watchQueryOptions.fetchPolicy === "standby"
     ) {
       // When skipping a query (ie. we're not querying for data but still want to
       // render children), make sure the `data` is cleared out and `loading` is
@@ -348,9 +361,7 @@ class InternalState<TData, TVariables extends OperationVariables> {
   }
 
   private getObsQueryOptions(): WatchQueryOptions<TVariables, TData> {
-    const toMerge: Array<
-      Partial<WatchQueryOptions<TVariables, TData>>
-    > = [];
+    const toMerge: Array<Partial<WatchQueryOptions<TVariables, TData>>> = [];
 
     const globalDefaults = this.client.defaultOptions.watchQuery;
     if (globalDefaults) toMerge.push(globalDefaults);
@@ -369,14 +380,14 @@ class InternalState<TData, TVariables extends OperationVariables> {
     // (if provided) should be merged, to ensure individual defaulted
     // variables always have values, if not otherwise defined in
     // observable.options or watchQueryOptions.
-    toMerge.push(compact(
-      this.observable && this.observable.options,
-      this.watchQueryOptions,
-    ));
-
-    return toMerge.reduce(
-      mergeOptions
-    ) as WatchQueryOptions<TVariables, TData>;
+    toMerge.push(
+      compact(
+        this.observable && this.observable.options,
+        this.watchQueryOptions
+      )
+    );
+
+    return toMerge.reduce(mergeOptions) as WatchQueryOptions<TVariables, TData>;
   }
 
   private ssrDisabledResult = maybeDeepFreeze({
@@ -404,7 +415,10 @@ class InternalState<TData, TVariables extends OperationVariables> {
     // makes otherOptions almost a WatchQueryOptions object, except for the
     // query property that we add below.
     ...otherOptions
-  }: QueryHookOptions<TData, TVariables> = {}): WatchQueryOptions<TVariables, TData> {
+  }: QueryHookOptions<TData, TVariables> = {}): WatchQueryOptions<
+    TVariables,
+    TData
+  > {
     // This Object.assign is safe because otherOptions is a fresh ...rest object
     // that did not exist until just now, so modifications are still allowed.
     const watchQueryOptions: WatchQueryOptions<TVariables, TData> =
@@ -412,14 +426,12 @@ class InternalState<TData, TVariables extends OperationVariables> {
 
     if (
       this.renderPromises &&
-      (
-        watchQueryOptions.fetchPolicy === 'network-only' ||
-        watchQueryOptions.fetchPolicy === 'cache-and-network'
-      )
+      (watchQueryOptions.fetchPolicy === "network-only" ||
+        watchQueryOptions.fetchPolicy === "cache-and-network")
     ) {
       // this behavior was added to react-apollo without explanation in this PR
       // https://github.com/apollographql/react-apollo/pull/1579
-      watchQueryOptions.fetchPolicy = 'cache-first';
+      watchQueryOptions.fetchPolicy = "cache-first";
     }
 
     if (!watchQueryOptions.variables) {
@@ -437,7 +449,7 @@ class InternalState<TData, TVariables extends OperationVariables> {
       // fetchPolicy that would have been used if not skipping.
       Object.assign(watchQueryOptions, {
         initialFetchPolicy,
-        fetchPolicy: 'standby',
+        fetchPolicy: "standby",
       });
     } else if (!watchQueryOptions.fetchPolicy) {
       watchQueryOptions.fetchPolicy =
@@ -472,25 +484,27 @@ class InternalState<TData, TVariables extends OperationVariables> {
     // See if there is an existing observable that was used to fetch the same
     // data and if so, use it instead since it will contain the proper queryId
     // to fetch the result set. This is used during SSR.
-    const obsQuery = this.observable =
-      this.renderPromises
-        && this.renderPromises.getSSRObservable(this.watchQueryOptions)
-        || this.observable // Reuse this.observable if possible (and not SSR)
-        || this.client.watchQuery(this.getObsQueryOptions());
-
-    this.obsQueryFields = React.useMemo(() => ({
-      refetch: obsQuery.refetch.bind(obsQuery),
-      reobserve: obsQuery.reobserve.bind(obsQuery),
-      fetchMore: obsQuery.fetchMore.bind(obsQuery),
-      updateQuery: obsQuery.updateQuery.bind(obsQuery),
-      startPolling: obsQuery.startPolling.bind(obsQuery),
-      stopPolling: obsQuery.stopPolling.bind(obsQuery),
-      subscribeToMore: obsQuery.subscribeToMore.bind(obsQuery),
-    }), [obsQuery]);
+    const obsQuery = (this.observable =
+      (this.renderPromises &&
+        this.renderPromises.getSSRObservable(this.watchQueryOptions)) ||
+      this.observable || // Reuse this.observable if possible (and not SSR)
+      this.client.watchQuery(this.getObsQueryOptions()));
+
+    this.obsQueryFields = React.useMemo(
+      () => ({
+        refetch: obsQuery.refetch.bind(obsQuery),
+        reobserve: obsQuery.reobserve.bind(obsQuery),
+        fetchMore: obsQuery.fetchMore.bind(obsQuery),
+        updateQuery: obsQuery.updateQuery.bind(obsQuery),
+        startPolling: obsQuery.startPolling.bind(obsQuery),
+        stopPolling: obsQuery.stopPolling.bind(obsQuery),
+        subscribeToMore: obsQuery.subscribeToMore.bind(obsQuery),
+      }),
+      [obsQuery]
+    );
 
     const ssrAllowed = !(
-      this.queryHookOptions.ssr === false ||
-      this.queryHookOptions.skip
+      this.queryHookOptions.ssr === false || this.queryHookOptions.skip
     );
 
     if (this.renderPromises && ssrAllowed) {
@@ -530,26 +544,30 @@ class InternalState<TData, TVariables extends OperationVariables> {
       const error = this.toApolloError(result);
 
       // wait a tick in case we are in the middle of rendering a component
-      Promise.resolve().then(() => {
-        if (error) {
-          this.onError(error);
-        } else if (
-          result.data &&
-          previousResult?.networkStatus !== result.networkStatus &&
-          result.networkStatus === NetworkStatus.ready
-        ) {
-          this.onCompleted(result.data);
-        }
-      }).catch(error => {
-        invariant.warn(error);
-      });
+      Promise.resolve()
+        .then(() => {
+          if (error) {
+            this.onError(error);
+          } else if (
+            result.data &&
+            previousResult?.networkStatus !== result.networkStatus &&
+            result.networkStatus === NetworkStatus.ready
+          ) {
+            this.onCompleted(result.data);
+          }
+        })
+        .catch((error) => {
+          invariant.warn(error);
+        });
     }
   }
 
-  private toApolloError(result: ApolloQueryResult<TData>): ApolloError | undefined {
+  private toApolloError(
+    result: ApolloQueryResult<TData>
+  ): ApolloError | undefined {
     return isNonEmptyArray(result.errors)
       ? new ApolloError({ graphQLErrors: result.errors })
-      : result.error
+      : result.error;
   }
 
   private getCurrentResult(): ApolloQueryResult<TData> {
@@ -558,7 +576,7 @@ class InternalState<TData, TVariables extends OperationVariables> {
     // we're doing server rendering and therefore override the result below.
     if (!this.result) {
       this.handleErrorOrCompleted(
-        this.result = this.observable.getCurrentResult()
+        (this.result = this.observable.getCurrentResult())
       );
     }
     return this.result;
@@ -573,22 +591,25 @@ class InternalState<TData, TVariables extends OperationVariables> {
   >();
 
   toQueryResult(
-    result: ApolloQueryResult<TData>,
+    result: ApolloQueryResult<TData>
   ): QueryResult<TData, TVariables> {
     let queryResult = this.toQueryResultCache.get(result);
     if (queryResult) return queryResult;
 
     const { data, partial, ...resultWithoutPartial } = result;
-    this.toQueryResultCache.set(result, queryResult = {
-      data, // Ensure always defined, even if result.data is missing.
-      ...resultWithoutPartial,
-      ...this.obsQueryFields,
-      client: this.client,
-      observable: this.observable,
-      variables: this.observable.variables,
-      called: !this.queryHookOptions.skip,
-      previousData: this.previousData,
-    });
+    this.toQueryResultCache.set(
+      result,
+      (queryResult = {
+        data, // Ensure always defined, even if result.data is missing.
+        ...resultWithoutPartial,
+        ...this.obsQueryFields,
+        client: this.client,
+        observable: this.observable,
+        variables: this.observable.variables,
+        called: !this.queryHookOptions.skip,
+        previousData: this.previousData,
+      })
+    );
 
     if (!queryResult.error && isNonEmptyArray(result.errors)) {
       // Until a set naming convention for networkError and graphQLErrors is
@@ -612,7 +633,7 @@ class InternalState<TData, TVariables extends OperationVariables> {
       this.queryHookOptions.partialRefetch &&
       !result.loading &&
       (!result.data || Object.keys(result.data).length === 0) &&
-      this.observable.options.fetchPolicy !== 'cache-only'
+      this.observable.options.fetchPolicy !== "cache-only"
     ) {
       Object.assign(result, {
         loading: true,
diff --git a/src/react/hooks/useReactiveVar.ts b/src/react/hooks/useReactiveVar.ts
index f92aba79f68..a7ea777d9fe 100644
--- a/src/react/hooks/useReactiveVar.ts
+++ b/src/react/hooks/useReactiveVar.ts
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import type { ReactiveVar } from '../../core/index.js';
+import * as React from "react";
+import type { ReactiveVar } from "../../core/index.js";
 
 export function useReactiveVar<T>(rv: ReactiveVar<T>): T {
   const value = rv();
diff --git a/src/react/hooks/useReadQuery.ts b/src/react/hooks/useReadQuery.ts
index 4dba00b24fe..26552badb66 100644
--- a/src/react/hooks/useReadQuery.ts
+++ b/src/react/hooks/useReadQuery.ts
@@ -1,7 +1,10 @@
 import * as React from "react";
 import invariant from "ts-invariant";
 import { NetworkStatus } from "../../core/index.js";
-import { QUERY_REFERENCE_SYMBOL, type QueryReference } from "../cache/QueryReference.js";
+import {
+  QUERY_REFERENCE_SYMBOL,
+  type QueryReference,
+} from "../cache/QueryReference.js";
 import { __use } from "./internal/index.js";
 import { toApolloError } from "./useSuspenseQuery.js";
 
@@ -10,9 +13,9 @@ export function useReadQuery<TData>(queryRef: QueryReference<TData>) {
   const internalQueryRef = queryRef[QUERY_REFERENCE_SYMBOL];
   invariant(
     internalQueryRef.promiseCache,
-    'It appears that `useReadQuery` was used outside of `useBackgroundQuery`. ' +
-      '`useReadQuery` is only supported for use with `useBackgroundQuery`. ' +
-      'Please ensure you are passing the `queryRef` returned from `useBackgroundQuery`.'
+    "It appears that `useReadQuery` was used outside of `useBackgroundQuery`. " +
+      "`useReadQuery` is only supported for use with `useBackgroundQuery`. " +
+      "Please ensure you are passing the `queryRef` returned from `useBackgroundQuery`."
   );
 
   const skipResult = React.useMemo(() => {
@@ -41,7 +44,7 @@ export function useReadQuery<TData>(queryRef: QueryReference<TData>) {
   }, [queryRef]);
 
   const result =
-    internalQueryRef.watchQueryOptions.fetchPolicy === 'standby'
+    internalQueryRef.watchQueryOptions.fetchPolicy === "standby"
       ? skipResult
       : __use(promise);
 
diff --git a/src/react/hooks/useSubscription.ts b/src/react/hooks/useSubscription.ts
index 100fec0f388..764879810da 100644
--- a/src/react/hooks/useSubscription.ts
+++ b/src/react/hooks/useSubscription.ts
@@ -1,26 +1,31 @@
-import { invariant } from '../../utilities/globals/index.js';
-import * as React from 'react';
-import type { DocumentNode } from 'graphql';
-import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
-import { equal } from '@wry/equality';
+import { invariant } from "../../utilities/globals/index.js";
+import * as React from "react";
+import type { DocumentNode } from "graphql";
+import type { TypedDocumentNode } from "@graphql-typed-document-node/core";
+import { equal } from "@wry/equality";
 
-import { DocumentType, verifyDocumentType } from '../parser/index.js';
+import { DocumentType, verifyDocumentType } from "../parser/index.js";
 import type {
   NoInfer,
   SubscriptionHookOptions,
-  SubscriptionResult
-} from '../types/types.js';
-import type { OperationVariables } from '../../core/index.js';
-import { useApolloClient } from './useApolloClient.js';
-
-export function useSubscription<TData = any, TVariables extends OperationVariables = OperationVariables>(
+  SubscriptionResult,
+} from "../types/types.js";
+import type { OperationVariables } from "../../core/index.js";
+import { useApolloClient } from "./useApolloClient.js";
+
+export function useSubscription<
+  TData = any,
+  TVariables extends OperationVariables = OperationVariables,
+>(
   subscription: DocumentNode | TypedDocumentNode<TData, TVariables>,
-  options?: SubscriptionHookOptions<NoInfer<TData>, NoInfer<TVariables>>,
+  options?: SubscriptionHookOptions<NoInfer<TData>, NoInfer<TVariables>>
 ) {
   const hasIssuedDeprecationWarningRef = React.useRef(false);
   const client = useApolloClient(options?.client);
   verifyDocumentType(subscription, DocumentType.Subscription);
-  const [result, setResult] = React.useState<SubscriptionResult<TData, TVariables>>({
+  const [result, setResult] = React.useState<
+    SubscriptionResult<TData, TVariables>
+  >({
     loading: !options?.skip,
     error: void 0,
     data: void 0,
@@ -70,12 +75,15 @@ export function useSubscription<TData = any, TVariables extends OperationVariabl
   const ref = React.useRef({ client, subscription, options });
   React.useEffect(() => {
     let shouldResubscribe = options?.shouldResubscribe;
-    if (typeof shouldResubscribe === 'function') {
+    if (typeof shouldResubscribe === "function") {
       shouldResubscribe = !!shouldResubscribe(options!);
     }
 
     if (options?.skip) {
-      if (!options?.skip !== !ref.current.options?.skip || canResetObservableRef.current) {
+      if (
+        !options?.skip !== !ref.current.options?.skip ||
+        canResetObservableRef.current
+      ) {
         setResult({
           loading: false,
           data: void 0,
@@ -100,12 +108,14 @@ export function useSubscription<TData = any, TVariables extends OperationVariabl
         error: void 0,
         variables: options?.variables,
       });
-      setObservable(client.subscribe({
-        query: subscription,
-        variables: options?.variables,
-        fetchPolicy: options?.fetchPolicy,
-        context: options?.context,
-      }));
+      setObservable(
+        client.subscribe({
+          query: subscription,
+          variables: options?.variables,
+          fetchPolicy: options?.fetchPolicy,
+          context: options?.context,
+        })
+      );
       canResetObservableRef.current = false;
     }
 
@@ -137,12 +147,12 @@ export function useSubscription<TData = any, TVariables extends OperationVariabl
         if (ref.current.options?.onData) {
           ref.current.options.onData({
             client,
-            data: result
+            data: result,
           });
         } else if (ref.current.options?.onSubscriptionData) {
           ref.current.options.onSubscriptionData({
             client,
-            subscriptionData: result
+            subscriptionData: result,
           });
         }
       },
@@ -155,7 +165,7 @@ export function useSubscription<TData = any, TVariables extends OperationVariabl
             variables: options?.variables,
           });
           ref.current.options?.onError?.(error);
-        };
+        }
       },
       complete() {
         if (!subscriptionStopped) {
diff --git a/src/react/hooks/useSuspenseQuery.ts b/src/react/hooks/useSuspenseQuery.ts
index 5d27ad39823..78d80acb3f0 100644
--- a/src/react/hooks/useSuspenseQuery.ts
+++ b/src/react/hooks/useSuspenseQuery.ts
@@ -1,5 +1,5 @@
-import { invariant } from '../../utilities/globals/index.js';
-import * as React from 'react';
+import { invariant } from "../../utilities/globals/index.js";
+import * as React from "react";
 import type {
   ApolloClient,
   ApolloQueryResult,
@@ -9,25 +9,25 @@ import type {
   WatchQueryOptions,
   WatchQueryFetchPolicy,
   FetchMoreQueryOptions,
-} from '../../core/index.js';
-import { ApolloError, NetworkStatus } from '../../core/index.js';
-import type { DeepPartial } from '../../utilities/index.js';
-import { isNonEmptyArray } from '../../utilities/index.js';
-import { useApolloClient } from './useApolloClient.js';
-import { DocumentType, verifyDocumentType } from '../parser/index.js';
+} from "../../core/index.js";
+import { ApolloError, NetworkStatus } from "../../core/index.js";
+import type { DeepPartial } from "../../utilities/index.js";
+import { isNonEmptyArray } from "../../utilities/index.js";
+import { useApolloClient } from "./useApolloClient.js";
+import { DocumentType, verifyDocumentType } from "../parser/index.js";
 import type {
   SuspenseQueryHookOptions,
   ObservableQueryFields,
   NoInfer,
-} from '../types/types.js';
-import { useDeepMemo, __use } from './internal/index.js';
-import { getSuspenseCache } from '../cache/index.js';
-import { canonicalStringify } from '../../cache/index.js';
-import type { CacheKey } from '../cache/types.js';
+} from "../types/types.js";
+import { useDeepMemo, __use } from "./internal/index.js";
+import { getSuspenseCache } from "../cache/index.js";
+import { canonicalStringify } from "../../cache/index.js";
+import type { CacheKey } from "../cache/types.js";
 
 export interface UseSuspenseQueryResult<
   TData = unknown,
-  TVariables extends OperationVariables = OperationVariables
+  TVariables extends OperationVariables = OperationVariables,
 > {
   client: ApolloClient<any>;
   data: TData;
@@ -52,32 +52,32 @@ export type FetchMoreFunction<TData, TVariables extends OperationVariables> = (
 
 export type RefetchFunction<
   TData,
-  TVariables extends OperationVariables
-> = ObservableQueryFields<TData, TVariables>['refetch'];
+  TVariables extends OperationVariables,
+> = ObservableQueryFields<TData, TVariables>["refetch"];
 
 export type SubscribeToMoreFunction<
   TData,
-  TVariables extends OperationVariables
-> = ObservableQueryFields<TData, TVariables>['subscribeToMore'];
+  TVariables extends OperationVariables,
+> = ObservableQueryFields<TData, TVariables>["subscribeToMore"];
 
 export function useSuspenseQuery<
   TData,
   TVariables extends OperationVariables,
-  TOptions extends Omit<SuspenseQueryHookOptions<TData>, 'variables'>
+  TOptions extends Omit<SuspenseQueryHookOptions<TData>, "variables">,
 >(
   query: DocumentNode | TypedDocumentNode<TData, TVariables>,
   options?: SuspenseQueryHookOptions<NoInfer<TData>, NoInfer<TVariables>> &
     TOptions
 ): UseSuspenseQueryResult<
-  TOptions['errorPolicy'] extends 'ignore' | 'all'
-    ? TOptions['returnPartialData'] extends true
+  TOptions["errorPolicy"] extends "ignore" | "all"
+    ? TOptions["returnPartialData"] extends true
       ? DeepPartial<TData> | undefined
       : TData | undefined
-    : TOptions['returnPartialData'] extends true
-    ? TOptions['skip'] extends boolean
+    : TOptions["returnPartialData"] extends true
+    ? TOptions["skip"] extends boolean
       ? DeepPartial<TData> | undefined
       : DeepPartial<TData>
-    : TOptions['skip'] extends boolean
+    : TOptions["skip"] extends boolean
     ? TData | undefined
     : TData,
   TVariables
@@ -85,28 +85,28 @@ export function useSuspenseQuery<
 
 export function useSuspenseQuery<
   TData = unknown,
-  TVariables extends OperationVariables = OperationVariables
+  TVariables extends OperationVariables = OperationVariables,
 >(
   query: DocumentNode | TypedDocumentNode<TData, TVariables>,
   options: SuspenseQueryHookOptions<NoInfer<TData>, NoInfer<TVariables>> & {
     returnPartialData: true;
-    errorPolicy: 'ignore' | 'all';
+    errorPolicy: "ignore" | "all";
   }
 ): UseSuspenseQueryResult<DeepPartial<TData> | undefined, TVariables>;
 
 export function useSuspenseQuery<
   TData = unknown,
-  TVariables extends OperationVariables = OperationVariables
+  TVariables extends OperationVariables = OperationVariables,
 >(
   query: DocumentNode | TypedDocumentNode<TData, TVariables>,
   options: SuspenseQueryHookOptions<NoInfer<TData>, NoInfer<TVariables>> & {
-    errorPolicy: 'ignore' | 'all';
+    errorPolicy: "ignore" | "all";
   }
 ): UseSuspenseQueryResult<TData | undefined, TVariables>;
 
 export function useSuspenseQuery<
   TData = unknown,
-  TVariables extends OperationVariables = OperationVariables
+  TVariables extends OperationVariables = OperationVariables,
 >(
   query: DocumentNode | TypedDocumentNode<TData, TVariables>,
   options: SuspenseQueryHookOptions<NoInfer<TData>, NoInfer<TVariables>> & {
@@ -117,7 +117,7 @@ export function useSuspenseQuery<
 
 export function useSuspenseQuery<
   TData = unknown,
-  TVariables extends OperationVariables = OperationVariables
+  TVariables extends OperationVariables = OperationVariables,
 >(
   query: DocumentNode | TypedDocumentNode<TData, TVariables>,
   options: SuspenseQueryHookOptions<NoInfer<TData>, NoInfer<TVariables>> & {
@@ -127,7 +127,7 @@ export function useSuspenseQuery<
 
 export function useSuspenseQuery<
   TData = unknown,
-  TVariables extends OperationVariables = OperationVariables
+  TVariables extends OperationVariables = OperationVariables,
 >(
   query: DocumentNode | TypedDocumentNode<TData, TVariables>,
   options: SuspenseQueryHookOptions<NoInfer<TData>, NoInfer<TVariables>> & {
@@ -137,7 +137,7 @@ export function useSuspenseQuery<
 
 export function useSuspenseQuery<
   TData = unknown,
-  TVariables extends OperationVariables = OperationVariables
+  TVariables extends OperationVariables = OperationVariables,
 >(
   query: DocumentNode | TypedDocumentNode<TData, TVariables>,
   options?: SuspenseQueryHookOptions<NoInfer<TData>, NoInfer<TVariables>>
@@ -145,7 +145,7 @@ export function useSuspenseQuery<
 
 export function useSuspenseQuery<
   TData = unknown,
-  TVariables extends OperationVariables = OperationVariables
+  TVariables extends OperationVariables = OperationVariables,
 >(
   query: DocumentNode | TypedDocumentNode<TData, TVariables>,
   options: SuspenseQueryHookOptions<
@@ -211,7 +211,7 @@ export function useSuspenseQuery<
     };
   }, [queryRef.result]);
 
-  const result = fetchPolicy === 'standby' ? skipResult : __use(promise);
+  const result = fetchPolicy === "standby" ? skipResult : __use(promise);
 
   const fetchMore: FetchMoreFunction<TData, TVariables> = React.useCallback(
     (options) => {
@@ -267,13 +267,13 @@ function validateOptions(options: WatchQueryOptions) {
 }
 
 function validateFetchPolicy(
-  fetchPolicy: WatchQueryFetchPolicy = 'cache-first'
+  fetchPolicy: WatchQueryFetchPolicy = "cache-first"
 ) {
   const supportedFetchPolicies: WatchQueryFetchPolicy[] = [
-    'cache-first',
-    'network-only',
-    'no-cache',
-    'cache-and-network',
+    "cache-first",
+    "network-only",
+    "no-cache",
+    "cache-and-network",
   ];
 
   invariant(
@@ -287,9 +287,9 @@ function validatePartialDataReturn(
   fetchPolicy: WatchQueryFetchPolicy | undefined,
   returnPartialData: boolean | undefined
 ) {
-  if (fetchPolicy === 'no-cache' && returnPartialData) {
+  if (fetchPolicy === "no-cache" && returnPartialData) {
     invariant.warn(
-      'Using `returnPartialData` with a `no-cache` fetch policy has no effect. To read partial data from the cache, consider using an alternate fetch policy.'
+      "Using `returnPartialData` with a `no-cache` fetch policy has no effect. To read partial data from the cache, consider using an alternate fetch policy."
     );
   }
 }
@@ -302,7 +302,7 @@ export function toApolloError(result: ApolloQueryResult<any>) {
 
 interface UseWatchQueryOptionsHookOptions<
   TData,
-  TVariables extends OperationVariables
+  TVariables extends OperationVariables,
 > {
   client: ApolloClient<unknown>;
   query: DocumentNode | TypedDocumentNode<TData, TVariables>;
@@ -311,7 +311,7 @@ interface UseWatchQueryOptionsHookOptions<
 
 export function useWatchQueryOptions<
   TData,
-  TVariables extends OperationVariables
+  TVariables extends OperationVariables,
 >({
   client,
   query,
@@ -324,7 +324,7 @@ export function useWatchQueryOptions<
     const fetchPolicy =
       options.fetchPolicy ||
       client.defaultOptions.watchQuery?.fetchPolicy ||
-      'cache-first';
+      "cache-first";
 
     const watchQueryOptions = {
       ...options,
@@ -341,7 +341,7 @@ export function useWatchQueryOptions<
     // Assign the updated fetch policy after our validation since `standby` is
     // not a supported fetch policy on its own without the use of `skip`.
     if (options.skip) {
-      watchQueryOptions.fetchPolicy = 'standby';
+      watchQueryOptions.fetchPolicy = "standby";
     }
 
     return watchQueryOptions;
diff --git a/src/react/hooks/useSyncExternalStore.ts b/src/react/hooks/useSyncExternalStore.ts
index 4156f949798..0ae0a84d793 100644
--- a/src/react/hooks/useSyncExternalStore.ts
+++ b/src/react/hooks/useSyncExternalStore.ts
@@ -1,7 +1,7 @@
-import { invariant } from '../../utilities/globals/index.js';
-import * as React from 'react';
+import { invariant } from "../../utilities/globals/index.js";
+import * as React from "react";
 
-import { canUseLayoutEffect } from '../../utilities/index.js';
+import { canUseLayoutEffect } from "../../utilities/index.js";
 
 let didWarnUncachedGetSnapshot = false;
 
@@ -22,96 +22,96 @@ const realHook = React[uSESKey] as RealUseSESHookType | undefined;
 // Apollo Client deviations called out by "// DEVIATION ..." comments.
 
 // When/if React.useSyncExternalStore is defined, delegate fully to it.
-export const useSyncExternalStore: RealUseSESHookType = realHook || ((
-  subscribe,
-  getSnapshot,
-  getServerSnapshot,
-) => {
-  // Read the current snapshot from the store on every render. Again, this
-  // breaks the rules of React, and only works here because of specific
-  // implementation details, most importantly that updates are
-  // always synchronous.
-  const value = getSnapshot();
-  if (
-    // DEVIATION: Using __DEV__
-    __DEV__ &&
-    !didWarnUncachedGetSnapshot &&
-    // DEVIATION: Not using Object.is because we know our snapshots will never
-    // be exotic primitive values like NaN, which is !== itself.
-    value !== getSnapshot()
-  ) {
-    didWarnUncachedGetSnapshot = true;
-    // DEVIATION: Using invariant.error instead of console.error directly.
-    invariant.error(
-      'The result of getSnapshot should be cached to avoid an infinite loop',
-    );
-  }
+export const useSyncExternalStore: RealUseSESHookType =
+  realHook ||
+  ((subscribe, getSnapshot, getServerSnapshot) => {
+    // Read the current snapshot from the store on every render. Again, this
+    // breaks the rules of React, and only works here because of specific
+    // implementation details, most importantly that updates are
+    // always synchronous.
+    const value = getSnapshot();
+    if (
+      // DEVIATION: Using __DEV__
+      __DEV__ &&
+      !didWarnUncachedGetSnapshot &&
+      // DEVIATION: Not using Object.is because we know our snapshots will never
+      // be exotic primitive values like NaN, which is !== itself.
+      value !== getSnapshot()
+    ) {
+      didWarnUncachedGetSnapshot = true;
+      // DEVIATION: Using invariant.error instead of console.error directly.
+      invariant.error(
+        "The result of getSnapshot should be cached to avoid an infinite loop"
+      );
+    }
 
-  // Because updates are synchronous, we don't queue them. Instead we force a
-  // re-render whenever the subscribed state changes by updating an some
-  // arbitrary useState hook. Then, during render, we call getSnapshot to read
-  // the current value.
-  //
-  // Because we don't actually use the state returned by the useState hook, we
-  // can save a bit of memory by storing other stuff in that slot.
-  //
-  // To implement the early bailout, we need to track some things on a mutable
-  // object. Usually, we would put that in a useRef hook, but we can stash it in
-  // our useState hook instead.
-  //
-  // To force a re-render, we call forceUpdate({inst}). That works because the
-  // new object always fails an equality check.
-  const [{inst}, forceUpdate] = React.useState({inst: {value, getSnapshot}});
+    // Because updates are synchronous, we don't queue them. Instead we force a
+    // re-render whenever the subscribed state changes by updating an some
+    // arbitrary useState hook. Then, during render, we call getSnapshot to read
+    // the current value.
+    //
+    // Because we don't actually use the state returned by the useState hook, we
+    // can save a bit of memory by storing other stuff in that slot.
+    //
+    // To implement the early bailout, we need to track some things on a mutable
+    // object. Usually, we would put that in a useRef hook, but we can stash it in
+    // our useState hook instead.
+    //
+    // To force a re-render, we call forceUpdate({inst}). That works because the
+    // new object always fails an equality check.
+    const [{ inst }, forceUpdate] = React.useState({
+      inst: { value, getSnapshot },
+    });
 
-  // Track the latest getSnapshot function with a ref. This needs to be updated
-  // in the layout phase so we can access it during the tearing check that
-  // happens on subscribe.
-  if (canUseLayoutEffect) {
-    // DEVIATION: We avoid calling useLayoutEffect when !canUseLayoutEffect,
-    // which may seem like a conditional hook, but this code ends up behaving
-    // unconditionally (one way or the other) because canUseLayoutEffect is
-    // constant.
-    React.useLayoutEffect(() => {
+    // Track the latest getSnapshot function with a ref. This needs to be updated
+    // in the layout phase so we can access it during the tearing check that
+    // happens on subscribe.
+    if (canUseLayoutEffect) {
+      // DEVIATION: We avoid calling useLayoutEffect when !canUseLayoutEffect,
+      // which may seem like a conditional hook, but this code ends up behaving
+      // unconditionally (one way or the other) because canUseLayoutEffect is
+      // constant.
+      React.useLayoutEffect(() => {
+        Object.assign(inst, { value, getSnapshot });
+        // Whenever getSnapshot or subscribe changes, we need to check in the
+        // commit phase if there was an interleaved mutation. In concurrent mode
+        // this can happen all the time, but even in synchronous mode, an earlier
+        // effect may have mutated the store.
+        if (checkIfSnapshotChanged(inst)) {
+          // Force a re-render.
+          forceUpdate({ inst });
+        }
+      }, [subscribe, value, getSnapshot]);
+    } else {
       Object.assign(inst, { value, getSnapshot });
-      // Whenever getSnapshot or subscribe changes, we need to check in the
-      // commit phase if there was an interleaved mutation. In concurrent mode
-      // this can happen all the time, but even in synchronous mode, an earlier
-      // effect may have mutated the store.
-      if (checkIfSnapshotChanged(inst)) {
-        // Force a re-render.
-        forceUpdate({inst});
-      }
-    }, [subscribe, value, getSnapshot]);
-  } else {
-    Object.assign(inst, { value, getSnapshot });
-  }
-
-  React.useEffect(() => {
-    // Check for changes right before subscribing. Subsequent changes will be
-    // detected in the subscription handler.
-    if (checkIfSnapshotChanged(inst)) {
-      // Force a re-render.
-      forceUpdate({inst});
     }
 
-    // Subscribe to the store and return a clean-up function.
-    return subscribe(function handleStoreChange() {
-      // TODO: Because there is no cross-renderer API for batching updates, it's
-      // up to the consumer of this library to wrap their subscription event
-      // with unstable_batchedUpdates. Should we try to detect when this isn't
-      // the case and print a warning in development?
-
-      // The store changed. Check if the snapshot changed since the last time we
-      // read from the store.
+    React.useEffect(() => {
+      // Check for changes right before subscribing. Subsequent changes will be
+      // detected in the subscription handler.
       if (checkIfSnapshotChanged(inst)) {
         // Force a re-render.
-        forceUpdate({inst});
+        forceUpdate({ inst });
       }
-    });
-  }, [subscribe]);
 
-  return value;
-});
+      // Subscribe to the store and return a clean-up function.
+      return subscribe(function handleStoreChange() {
+        // TODO: Because there is no cross-renderer API for batching updates, it's
+        // up to the consumer of this library to wrap their subscription event
+        // with unstable_batchedUpdates. Should we try to detect when this isn't
+        // the case and print a warning in development?
+
+        // The store changed. Check if the snapshot changed since the last time we
+        // read from the store.
+        if (checkIfSnapshotChanged(inst)) {
+          // Force a re-render.
+          forceUpdate({ inst });
+        }
+      });
+    }, [subscribe]);
+
+    return value;
+  });
 
 function checkIfSnapshotChanged<Snapshot>({
   value,
diff --git a/src/react/index.ts b/src/react/index.ts
index ff6622eef30..e209496e83c 100644
--- a/src/react/index.ts
+++ b/src/react/index.ts
@@ -1,22 +1,22 @@
-import '../utilities/globals/index.js';
+import "../utilities/globals/index.js";
 
 export {
   ApolloProvider,
   ApolloConsumer,
   getApolloContext,
   resetApolloContext,
-  ApolloContextValue
-} from './context/index.js';
+  ApolloContextValue,
+} from "./context/index.js";
 
-export * from './hooks/index.js';
+export * from "./hooks/index.js";
 // TODO: remove export with release 3.8
-export { SuspenseCache } from './cache/index.js';
+export { SuspenseCache } from "./cache/index.js";
 
 export {
   DocumentType,
   IDocumentDefinition,
   operationName,
-  parser
-} from './parser/index.js';
+  parser,
+} from "./parser/index.js";
 
-export * from './types/types.js';
+export * from "./types/types.js";
diff --git a/src/react/parser/__tests__/parser.test.ts b/src/react/parser/__tests__/parser.test.ts
index 3ce3501b2c0..9b8f38c4faf 100644
--- a/src/react/parser/__tests__/parser.test.ts
+++ b/src/react/parser/__tests__/parser.test.ts
@@ -1,11 +1,11 @@
-import gql from 'graphql-tag';
+import gql from "graphql-tag";
 
-import { parser, DocumentType } from '..';
+import { parser, DocumentType } from "..";
 
 type OperationDefinition = any;
 
-describe('parser', () => {
-  it('should error if both a query and a mutation is present', () => {
+describe("parser", () => {
+  it("should error if both a query and a mutation is present", () => {
     const query = gql`
       query {
         user {
@@ -13,7 +13,7 @@ describe('parser', () => {
         }
       }
 
-      mutation($t: String) {
+      mutation ($t: String) {
         addT(t: $t) {
           user {
             name
@@ -25,7 +25,7 @@ describe('parser', () => {
     expect(parser.bind(null, query)).toThrowError(/react-apollo only supports/);
   });
 
-  it('should error if multiple operations are present', () => {
+  it("should error if multiple operations are present", () => {
     const query = gql`
       query One {
         user {
@@ -43,7 +43,7 @@ describe('parser', () => {
     expect(parser.bind(null, query)).toThrowError(/react-apollo only supports/);
   });
 
-  it('should error if not a DocumentNode', () => {
+  it("should error if not a DocumentNode", () => {
     const query = `
       query One { user { name } }
     `;
@@ -52,7 +52,7 @@ describe('parser', () => {
     );
   });
 
-  it('should return the name of the operation', () => {
+  it("should return the name of the operation", () => {
     const query = gql`
       query One {
         user {
@@ -60,7 +60,7 @@ describe('parser', () => {
         }
       }
     `;
-    expect(parser(query).name).toBe('One');
+    expect(parser(query).name).toBe("One");
 
     const mutation = gql`
       mutation One {
@@ -69,7 +69,7 @@ describe('parser', () => {
         }
       }
     `;
-    expect(parser(mutation).name).toBe('One');
+    expect(parser(mutation).name).toBe("One");
 
     const subscription = gql`
       subscription One {
@@ -78,10 +78,10 @@ describe('parser', () => {
         }
       }
     `;
-    expect(parser(subscription).name).toBe('One');
+    expect(parser(subscription).name).toBe("One");
   });
 
-  it('should return data as the name of the operation if not named', () => {
+  it("should return data as the name of the operation if not named", () => {
     const query = gql`
       query {
         user {
@@ -89,7 +89,7 @@ describe('parser', () => {
         }
       }
     `;
-    expect(parser(query).name).toBe('data');
+    expect(parser(query).name).toBe("data");
 
     const unnamedQuery = gql`
       {
@@ -98,7 +98,7 @@ describe('parser', () => {
         }
       }
     `;
-    expect(parser(unnamedQuery).name).toBe('data');
+    expect(parser(unnamedQuery).name).toBe("data");
 
     const mutation = gql`
       mutation {
@@ -107,7 +107,7 @@ describe('parser', () => {
         }
       }
     `;
-    expect(parser(mutation).name).toBe('data');
+    expect(parser(mutation).name).toBe("data");
 
     const subscription = gql`
       subscription {
@@ -116,10 +116,10 @@ describe('parser', () => {
         }
       }
     `;
-    expect(parser(subscription).name).toBe('data');
+    expect(parser(subscription).name).toBe("data");
   });
 
-  it('should return the type of operation', () => {
+  it("should return the type of operation", () => {
     const query = gql`
       query One {
         user {
@@ -157,7 +157,7 @@ describe('parser', () => {
     expect(parser(subscription).type).toBe(DocumentType.Subscription);
   });
 
-  it('should return the variable definitions of the operation', () => {
+  it("should return the variable definitions of the operation", () => {
     const query = gql`
       query One($t: String!) {
         user(t: $t) {
@@ -191,7 +191,7 @@ describe('parser', () => {
     );
   });
 
-  it('should not error if the operation has no variables', () => {
+  it("should not error if the operation has no variables", () => {
     const query = gql`
       query {
         user(t: $t) {
diff --git a/src/react/parser/index.ts b/src/react/parser/index.ts
index 74d6d73258c..984b491142f 100644
--- a/src/react/parser/index.ts
+++ b/src/react/parser/index.ts
@@ -1,16 +1,16 @@
-import { invariant } from '../../utilities/globals/index.js';
+import { invariant } from "../../utilities/globals/index.js";
 
 import type {
   DocumentNode,
   DefinitionNode,
   VariableDefinitionNode,
-  OperationDefinitionNode
-} from 'graphql';
+  OperationDefinitionNode,
+} from "graphql";
 
 export enum DocumentType {
   Query,
   Mutation,
-  Subscription
+  Subscription,
 }
 
 export interface IDocumentDefinition {
@@ -25,13 +25,13 @@ export function operationName(type: DocumentType) {
   let name;
   switch (type) {
     case DocumentType.Query:
-      name = 'Query';
+      name = "Query";
       break;
     case DocumentType.Mutation:
-      name = 'Mutation';
+      name = "Mutation";
       break;
     case DocumentType.Subscription:
-      name = 'Subscription';
+      name = "Subscription";
       break;
   }
   return name;
@@ -49,29 +49,29 @@ export function parser(document: DocumentNode): IDocumentDefinition {
     `Argument of %s passed to parser was not a valid GraphQL ` +
       `DocumentNode. You may need to use 'graphql-tag' or another method ` +
       `to convert your operation into a document`,
-      document
+    document
   );
 
-  const fragments: DefinitionNode[] = []
-  const queries: DefinitionNode[] = []
-  const mutations: DefinitionNode[] = []
-  const subscriptions: DefinitionNode[] = []
+  const fragments: DefinitionNode[] = [];
+  const queries: DefinitionNode[] = [];
+  const mutations: DefinitionNode[] = [];
+  const subscriptions: DefinitionNode[] = [];
 
   for (const x of document.definitions) {
-    if (x.kind === 'FragmentDefinition') {
+    if (x.kind === "FragmentDefinition") {
       fragments.push(x);
-      continue
+      continue;
     }
 
-    if (x.kind === 'OperationDefinition') {
+    if (x.kind === "OperationDefinition") {
       switch (x.operation) {
-        case 'query':
+        case "query":
           queries.push(x);
           break;
-        case 'mutation':
+        case "mutation":
           mutations.push(x);
           break;
-        case 'subscription':
+        case "subscription":
           subscriptions.push(x);
           break;
       }
@@ -80,7 +80,9 @@ export function parser(document: DocumentNode): IDocumentDefinition {
 
   invariant(
     !fragments.length ||
-      (queries.length || mutations.length || subscriptions.length),
+      queries.length ||
+      mutations.length ||
+      subscriptions.length,
     `Passing only a fragment to 'graphql' is not yet supported. ` +
       `You must include a query, subscription or mutation as well`
   );
@@ -91,10 +93,10 @@ export function parser(document: DocumentNode): IDocumentDefinition {
       `%s had %s queries, %s ` +
       `subscriptions and %s mutations. ` +
       `You can use 'compose' to join multiple operation types to a component`,
-      document,
-      queries.length,
-      subscriptions.length,
-      mutations.length
+    document,
+    queries.length,
+    subscriptions.length,
+    mutations.length
   );
 
   type = queries.length ? DocumentType.Query : DocumentType.Mutation;
@@ -111,17 +113,17 @@ export function parser(document: DocumentNode): IDocumentDefinition {
     `react-apollo only supports one definition per HOC. %s had ` +
       `%s definitions. ` +
       `You can use 'compose' to join multiple operation types to a component`,
-      document,
-      definitions.length
+    document,
+    definitions.length
   );
 
   const definition = definitions[0] as OperationDefinitionNode;
   variables = definition.variableDefinitions || [];
 
-  if (definition.name && definition.name.kind === 'Name') {
+  if (definition.name && definition.name.kind === "Name") {
     name = definition.name.value;
   } else {
-    name = 'data'; // fallback to using data if no name
+    name = "data"; // fallback to using data if no name
   }
 
   const payload = { name, type, variables };
@@ -135,11 +137,9 @@ export function verifyDocumentType(document: DocumentNode, type: DocumentType) {
   const usedOperationName = operationName(operation.type);
   invariant(
     operation.type === type,
-    `Running a %s requires a graphql ` +
-      `%s, but a %s was used instead.`,
-      requiredOperationName,
-      requiredOperationName,
-      usedOperationName
+    `Running a %s requires a graphql ` + `%s, but a %s was used instead.`,
+    requiredOperationName,
+    requiredOperationName,
+    usedOperationName
   );
 }
-
diff --git a/src/react/ssr/RenderPromises.ts b/src/react/ssr/RenderPromises.ts
index 733a0e0c9eb..d72574bd6c1 100644
--- a/src/react/ssr/RenderPromises.ts
+++ b/src/react/ssr/RenderPromises.ts
@@ -1,7 +1,7 @@
-import type { DocumentNode } from 'graphql';
+import type { DocumentNode } from "graphql";
 
-import type { ObservableQuery, OperationVariables } from '../../core/index.js';
-import type { QueryDataOptions } from '../types/types.js';
+import type { ObservableQuery, OperationVariables } from "../../core/index.js";
+import type { QueryDataOptions } from "../types/types.js";
 
 // TODO: A vestigial interface from when hooks were implemented with utility
 // classes, which should be deleted in the future.
@@ -18,7 +18,7 @@ type QueryInfo = {
 function makeDefaultQueryInfo(): QueryInfo {
   return {
     seen: false,
-    observable: null
+    observable: null,
   };
 }
 
@@ -43,7 +43,7 @@ export class RenderPromises {
 
   // Registers the server side rendered observable.
   public registerSSRObservable<TData, TVariables extends OperationVariables>(
-    observable: ObservableQuery<any, TVariables>,
+    observable: ObservableQuery<any, TVariables>
   ) {
     if (this.stopped) return;
     this.lookupQueryInfo(observable.options).observable = observable;
@@ -58,14 +58,14 @@ export class RenderPromises {
 
   public addQueryPromise(
     queryInstance: QueryData,
-    finish?: () => React.ReactNode,
+    finish?: () => React.ReactNode
   ): React.ReactNode {
     if (!this.stopped) {
       const info = this.lookupQueryInfo(queryInstance.getOptions());
       if (!info.seen) {
         this.queryPromises.set(
           queryInstance.getOptions(),
-          new Promise(resolve => {
+          new Promise((resolve) => {
             resolve(queryInstance.fetchData());
           })
         );
@@ -77,30 +77,32 @@ export class RenderPromises {
     return finish ? finish() : null;
   }
 
-  public addObservableQueryPromise<TData, TVariables extends OperationVariables>(
-    obsQuery: ObservableQuery<TData, TVariables>,
-  ) {
+  public addObservableQueryPromise<
+    TData,
+    TVariables extends OperationVariables,
+  >(obsQuery: ObservableQuery<TData, TVariables>) {
     return this.addQueryPromise({
       // The only options which seem to actually be used by the
       // RenderPromises class are query and variables.
       getOptions: () => obsQuery.options,
-      fetchData: () => new Promise<void>((resolve) => {
-        const sub = obsQuery.subscribe({
-          next(result) {
-            if (!result.loading) {
-              resolve()
+      fetchData: () =>
+        new Promise<void>((resolve) => {
+          const sub = obsQuery.subscribe({
+            next(result) {
+              if (!result.loading) {
+                resolve();
+                sub.unsubscribe();
+              }
+            },
+            error() {
+              resolve();
               sub.unsubscribe();
-            }
-          },
-          error() {
-            resolve();
-            sub.unsubscribe();
-          },
-          complete() {
-            resolve();
-          },
-        });
-      }),
+            },
+            complete() {
+              resolve();
+            },
+          });
+        }),
     });
   }
 
diff --git a/src/react/ssr/__tests__/useLazyQuery.test.tsx b/src/react/ssr/__tests__/useLazyQuery.test.tsx
index 963f9726777..c558acf9446 100644
--- a/src/react/ssr/__tests__/useLazyQuery.test.tsx
+++ b/src/react/ssr/__tests__/useLazyQuery.test.tsx
@@ -1,15 +1,15 @@
 /** @jest-environment node */
-import React from 'react';
-import { DocumentNode } from 'graphql';
-import gql from 'graphql-tag';
-import { mockSingleLink } from '../../../testing';
-import { ApolloClient } from '../../../core';
-import { InMemoryCache } from '../../../cache';
-import { ApolloProvider } from '../../context';
-import { useLazyQuery } from '../../hooks';
-import { renderToStringWithData } from '../../ssr';
+import React from "react";
+import { DocumentNode } from "graphql";
+import gql from "graphql-tag";
+import { mockSingleLink } from "../../../testing";
+import { ApolloClient } from "../../../core";
+import { InMemoryCache } from "../../../cache";
+import { ApolloProvider } from "../../context";
+import { useLazyQuery } from "../../hooks";
+import { renderToStringWithData } from "../../ssr";
 
-describe('useLazyQuery Hook SSR', () => {
+describe("useLazyQuery Hook SSR", () => {
   const CAR_QUERY: DocumentNode = gql`
     query {
       cars {
@@ -23,24 +23,24 @@ describe('useLazyQuery Hook SSR', () => {
   const CAR_RESULT_DATA = {
     cars: [
       {
-        make: 'Audi',
-        model: 'RS8',
-        vin: 'DOLLADOLLABILL',
-        __typename: 'Car'
-      }
-    ]
+        make: "Audi",
+        model: "RS8",
+        vin: "DOLLADOLLABILL",
+        __typename: "Car",
+      },
+    ],
   };
 
-  it('should run query only after calling the lazy mode execute function', () => {
+  it("should run query only after calling the lazy mode execute function", () => {
     const link = mockSingleLink({
       request: { query: CAR_QUERY },
-      result: { data: CAR_RESULT_DATA }
+      result: { data: CAR_RESULT_DATA },
     });
 
     const client = new ApolloClient({
       cache: new InMemoryCache(),
       link,
-      ssrMode: true
+      ssrMode: true,
     });
 
     const Component = () => {
@@ -66,7 +66,7 @@ describe('useLazyQuery Hook SSR', () => {
       </ApolloProvider>
     );
 
-    return renderToStringWithData(app).then(markup => {
+    return renderToStringWithData(app).then((markup) => {
       expect(markup).toMatch(/Audi/);
     });
   });
diff --git a/src/react/ssr/__tests__/useQuery.test.tsx b/src/react/ssr/__tests__/useQuery.test.tsx
index 6fb118a839b..3810f568575 100644
--- a/src/react/ssr/__tests__/useQuery.test.tsx
+++ b/src/react/ssr/__tests__/useQuery.test.tsx
@@ -1,15 +1,15 @@
 /** @jest-environment node */
-import React from 'react';
-import { DocumentNode } from 'graphql';
-import gql from 'graphql-tag';
-import { MockedProvider, mockSingleLink } from '../../../testing';
-import { ApolloClient } from '../../../core';
-import { InMemoryCache } from '../../../cache';
-import { ApolloProvider } from '../../context';
-import { useApolloClient, useQuery } from '../../hooks';
-import { renderToStringWithData } from '..';
-
-describe('useQuery Hook SSR', () => {
+import React from "react";
+import { DocumentNode } from "graphql";
+import gql from "graphql-tag";
+import { MockedProvider, mockSingleLink } from "../../../testing";
+import { ApolloClient } from "../../../core";
+import { InMemoryCache } from "../../../cache";
+import { ApolloProvider } from "../../context";
+import { useApolloClient, useQuery } from "../../hooks";
+import { renderToStringWithData } from "..";
+
+describe("useQuery Hook SSR", () => {
   const CAR_QUERY: DocumentNode = gql`
     query {
       cars {
@@ -23,24 +23,24 @@ describe('useQuery Hook SSR', () => {
   const CAR_RESULT_DATA = {
     cars: [
       {
-        make: 'Audi',
-        model: 'RS8',
-        vin: 'DOLLADOLLABILL',
-        __typename: 'Car'
-      }
-    ]
+        make: "Audi",
+        model: "RS8",
+        vin: "DOLLADOLLABILL",
+        __typename: "Car",
+      },
+    ],
   };
 
   const CAR_MOCKS = [
     {
       request: {
-        query: CAR_QUERY
+        query: CAR_QUERY,
       },
-      result: { data: CAR_RESULT_DATA }
-    }
+      result: { data: CAR_RESULT_DATA },
+    },
   ];
 
-  it('should support SSR', () => {
+  it("should support SSR", () => {
     const Component = () => {
       const { loading, data } = useQuery(CAR_QUERY);
       if (!loading) {
@@ -61,12 +61,12 @@ describe('useQuery Hook SSR', () => {
       </MockedProvider>
     );
 
-    return renderToStringWithData(app).then(markup => {
+    return renderToStringWithData(app).then((markup) => {
       expect(markup).toMatch(/Audi/);
     });
   });
 
-  it('should initialize data as `undefined` when loading', () => {
+  it("should initialize data as `undefined` when loading", () => {
     const Component = () => {
       const { data, loading } = useQuery(CAR_QUERY);
       if (loading) {
@@ -84,7 +84,7 @@ describe('useQuery Hook SSR', () => {
     return renderToStringWithData(app);
   });
 
-  it('should skip SSR tree rendering and return a loading state if `ssr` option is `false`', async () => {
+  it("should skip SSR tree rendering and return a loading state if `ssr` option is `false`", async () => {
     let renderCount = 0;
     const Component = () => {
       const { data, loading } = useQuery(CAR_QUERY, { ssr: false });
@@ -105,13 +105,13 @@ describe('useQuery Hook SSR', () => {
       </MockedProvider>
     );
 
-    return renderToStringWithData(app).then(result => {
+    return renderToStringWithData(app).then((result) => {
       expect(renderCount).toBe(1);
-      expect(result).toEqual('');
+      expect(result).toEqual("");
     });
   });
 
-  it('should skip SSR tree rendering and not return a loading state loading if `ssr` option is `false` and `skip` is `true`', async () => {
+  it("should skip SSR tree rendering and not return a loading state loading if `ssr` option is `false` and `skip` is `true`", async () => {
     let renderCount = 0;
     const Component = () => {
       const { data, loading } = useQuery(CAR_QUERY, { ssr: false, skip: true });
@@ -129,67 +129,63 @@ describe('useQuery Hook SSR', () => {
       </MockedProvider>
     );
 
-    return renderToStringWithData(app).then(result => {
+    return renderToStringWithData(app).then((result) => {
       expect(renderCount).toBe(1);
-      expect(result).toEqual('');
+      expect(result).toEqual("");
     });
   });
 
-  it('should skip both SSR tree rendering and SSR component rendering if `ssr` option is `false` and `ssrMode` is `true`',
-    async () => {
-      const link = mockSingleLink({
-        request: { query: CAR_QUERY },
-        result: { data: CAR_RESULT_DATA }
-      });
+  it("should skip both SSR tree rendering and SSR component rendering if `ssr` option is `false` and `ssrMode` is `true`", async () => {
+    const link = mockSingleLink({
+      request: { query: CAR_QUERY },
+      result: { data: CAR_RESULT_DATA },
+    });
 
-      const client = new ApolloClient({
-        cache: new InMemoryCache(),
-        link,
-        ssrMode: true
-      });
+    const client = new ApolloClient({
+      cache: new InMemoryCache(),
+      link,
+      ssrMode: true,
+    });
 
-      let renderCount = 0;
-      const Component = () => {
-        const { data, loading } = useQuery(CAR_QUERY, { ssr: false });
-
-        let content = null;
-        switch (renderCount) {
-          case 0:
-            expect(loading).toBeTruthy();
-            expect(data).toBeUndefined();
-            break;
-          case 1: // FAIL; should not render a second time
-          default:
-            throw new Error("Duplicate render");
-        }
+    let renderCount = 0;
+    const Component = () => {
+      const { data, loading } = useQuery(CAR_QUERY, { ssr: false });
 
-        renderCount += 1;
-        return content;
-      };
+      let content = null;
+      switch (renderCount) {
+        case 0:
+          expect(loading).toBeTruthy();
+          expect(data).toBeUndefined();
+          break;
+        case 1: // FAIL; should not render a second time
+        default:
+          throw new Error("Duplicate render");
+      }
 
-      const app = (
-        <ApolloProvider client={client}>
-          <Component />
-        </ApolloProvider>
-      );
+      renderCount += 1;
+      return content;
+    };
 
-      const view = await renderToStringWithData(app);
-      expect(renderCount).toBe(1);
-      expect(view).toEqual('');
-      await new Promise((resolve) => setTimeout(resolve, 20));
-      expect(renderCount).toBe(1);
-      expect(view).toEqual('');
-    }
-  );
+    const app = (
+      <ApolloProvider client={client}>
+        <Component />
+      </ApolloProvider>
+    );
 
-  it('should skip SSR tree rendering if `skip` option is `true`', async () => {
+    const view = await renderToStringWithData(app);
+    expect(renderCount).toBe(1);
+    expect(view).toEqual("");
+    await new Promise((resolve) => setTimeout(resolve, 20));
+    expect(renderCount).toBe(1);
+    expect(view).toEqual("");
+  });
+
+  it("should skip SSR tree rendering if `skip` option is `true`", async () => {
     let renderCount = 0;
     const Component = () => {
-      const {
-        loading,
-        networkStatus,
-        data,
-      } = useQuery(CAR_QUERY, { skip: true });
+      const { loading, networkStatus, data } = useQuery(CAR_QUERY, {
+        skip: true,
+      });
       renderCount += 1;
 
       expect(loading).toBeFalsy();
@@ -205,20 +201,17 @@ describe('useQuery Hook SSR', () => {
       </MockedProvider>
     );
 
-    return renderToStringWithData(app).then(result => {
+    return renderToStringWithData(app).then((result) => {
       expect(renderCount).toBe(1);
-      expect(result).toBe('');
+      expect(result).toBe("");
     });
   });
 
-  it('should render SSR tree rendering if `skip` option is `true` for only one instance of the query', async () => {
+  it("should render SSR tree rendering if `skip` option is `true` for only one instance of the query", async () => {
     let renderCount = 0;
 
     const AnotherComponent = () => {
-      const {
-        loading,
-        data,
-      } = useQuery(CAR_QUERY, { skip: false });
+      const { loading, data } = useQuery(CAR_QUERY, { skip: false });
 
       renderCount += 1;
 
@@ -236,10 +229,7 @@ describe('useQuery Hook SSR', () => {
     };
 
     const Component = () => {
-      const {
-        loading,
-        data,
-      } = useQuery(CAR_QUERY, { skip: true });
+      const { loading, data } = useQuery(CAR_QUERY, { skip: true });
       renderCount += 1;
 
       expect(loading).toBeFalsy();
@@ -254,14 +244,14 @@ describe('useQuery Hook SSR', () => {
       </MockedProvider>
     );
 
-    return renderToStringWithData(app).then(result => {
+    return renderToStringWithData(app).then((result) => {
       expect(renderCount).toBe(4);
       expect(result).toMatch(/Audi/);
       expect(result).toMatch(/RS8/);
     });
   });
 
-  it('should return data written previously to cache during SSR pass if using cache-only fetchPolicy', async () => {
+  it("should return data written previously to cache during SSR pass if using cache-only fetchPolicy", async () => {
     const cache = new InMemoryCache({
       typePolicies: {
         Order: {
@@ -290,11 +280,11 @@ describe('useQuery Hook SSR', () => {
 
     const initialData = {
       getSearchResults: {
-        __typename: 'SearchResults',
-        locale: 'en-US',
+        __typename: "SearchResults",
+        locale: "en-US",
         order: {
-          __typename: 'Order',
-          selection: 'RELEVANCE',
+          __typename: "Order",
+          selection: "RELEVANCE",
         },
         pagination: {
           pageLimit: 3,
@@ -310,10 +300,10 @@ describe('useQuery Hook SSR', () => {
     const spy = jest.fn();
 
     const Component = () => {
-      useApolloClient().writeQuery({ query, data: initialData });;
+      useApolloClient().writeQuery({ query, data: initialData });
 
       const { loading, data } = useQuery(query, {
-        fetchPolicy: 'cache-only',
+        fetchPolicy: "cache-only",
       });
 
       spy(loading);
@@ -323,30 +313,21 @@ describe('useQuery Hook SSR', () => {
 
         const {
           getSearchResults: {
-            pagination: {
-              pageLimit,
-            },
+            pagination: { pageLimit },
           },
         } = data;
-        return (
-          <div>
-            {pageLimit}
-          </div>
-        );
+        return <div>{pageLimit}</div>;
       }
       return null;
     };
 
     const app = (
-      <MockedProvider
-        addTypename
-        cache={cache}
-      >
+      <MockedProvider addTypename cache={cache}>
         <Component />
       </MockedProvider>
     );
 
-    return renderToStringWithData(app).then(markup => {
+    return renderToStringWithData(app).then((markup) => {
       expect(spy).toHaveBeenNthCalledWith(1, false);
       expect(markup).toMatch(/<div.*>3<\/div>/);
       expect(cache.extract()).toMatchSnapshot();
diff --git a/src/react/ssr/__tests__/useReactiveVar.test.tsx b/src/react/ssr/__tests__/useReactiveVar.test.tsx
index cf00377cafa..34a74026915 100644
--- a/src/react/ssr/__tests__/useReactiveVar.test.tsx
+++ b/src/react/ssr/__tests__/useReactiveVar.test.tsx
@@ -1,13 +1,13 @@
 /** @jest-environment node */
-import React from 'react';
-import { makeVar } from '../../../core';
-import { useReactiveVar } from '../../hooks';
+import React from "react";
+import { makeVar } from "../../../core";
+import { useReactiveVar } from "../../hooks";
 import { itAsync } from "../../../testing";
-import { renderToStringWithData } from '../';
+import { renderToStringWithData } from "../";
 
-describe('useReactiveVar Hook SSR', () => {
+describe("useReactiveVar Hook SSR", () => {
   itAsync("does not cause warnings", (resolve, reject) => {
-    const mock = jest.spyOn(console, 'error');
+    const mock = jest.spyOn(console, "error");
     const counterVar = makeVar(0);
     function Component() {
       const count = useReactiveVar(counterVar);
@@ -16,11 +16,14 @@ describe('useReactiveVar Hook SSR', () => {
       return <div>{count}</div>;
     }
 
-    renderToStringWithData(<Component />).then((value) => {
-      expect(value).toEqual('<div>0</div>');
-      expect(mock).toHaveBeenCalledTimes(0);
-    }).finally(() => {
-      mock.mockRestore();
-    }).then(resolve, reject);
+    renderToStringWithData(<Component />)
+      .then((value) => {
+        expect(value).toEqual("<div>0</div>");
+        expect(mock).toHaveBeenCalledTimes(0);
+      })
+      .finally(() => {
+        mock.mockRestore();
+      })
+      .then(resolve, reject);
   });
 });
diff --git a/src/react/ssr/getDataFromTree.ts b/src/react/ssr/getDataFromTree.ts
index 39ff5d7a261..49d706934c6 100644
--- a/src/react/ssr/getDataFromTree.ts
+++ b/src/react/ssr/getDataFromTree.ts
@@ -1,7 +1,7 @@
-import * as React from 'react';
-import { getApolloContext } from '../context/index.js';
-import { RenderPromises } from './RenderPromises.js';
-import { renderToStaticMarkup } from 'react-dom/server';
+import * as React from "react";
+import { getApolloContext } from "../context/index.js";
+import { RenderPromises } from "./RenderPromises.js";
+import { renderToStaticMarkup } from "react-dom/server";
 
 export function getDataFromTree(
   tree: React.ReactNode,
@@ -12,7 +12,7 @@ export function getDataFromTree(
     context,
     // If you need to configure this renderFunction, call getMarkupFromTree
     // directly instead of getDataFromTree.
-    renderFunction: renderToStaticMarkup
+    renderFunction: renderToStaticMarkup,
   });
 }
 
@@ -20,7 +20,7 @@ export type GetMarkupFromTreeOptions = {
   tree: React.ReactNode;
   context?: { [key: string]: any };
   renderFunction?: (
-    tree: React.ReactElement<any>,
+    tree: React.ReactElement<any>
   ) => string | PromiseLike<string>;
 };
 
@@ -30,7 +30,7 @@ export function getMarkupFromTree({
   // The rendering function is configurable! We use renderToStaticMarkup as
   // the default, because it's a little less expensive than renderToString,
   // and legacy usage of getDataFromTree ignores the return value anyway.
-  renderFunction = renderToStaticMarkup
+  renderFunction = renderToStaticMarkup,
 }: GetMarkupFromTreeOptions): Promise<string> {
   const renderPromises = new RenderPromises();
 
@@ -42,20 +42,22 @@ export function getMarkupFromTree({
     // elements) for a subtree of the original component tree.
     const ApolloContext = getApolloContext();
 
-    return new Promise<string>(resolve => {
+    return new Promise<string>((resolve) => {
       const element = React.createElement(
         ApolloContext.Provider,
-        { value: { ...context, renderPromises }},
-        tree,
+        { value: { ...context, renderPromises } },
+        tree
       );
       resolve(renderFunction(element));
-    }).then(html => {
-      return renderPromises.hasPromises()
-        ? renderPromises.consumeAndAwaitPromises().then(process)
-        : html;
-    }).finally(() => {
-      renderPromises.stop();
-    });
+    })
+      .then((html) => {
+        return renderPromises.hasPromises()
+          ? renderPromises.consumeAndAwaitPromises().then(process)
+          : html;
+      })
+      .finally(() => {
+        renderPromises.stop();
+      });
   }
 
   return Promise.resolve().then(process);
diff --git a/src/react/ssr/index.ts b/src/react/ssr/index.ts
index 6a8512ea631..33e297c00fe 100644
--- a/src/react/ssr/index.ts
+++ b/src/react/ssr/index.ts
@@ -1,3 +1,3 @@
-export { getMarkupFromTree, getDataFromTree } from './getDataFromTree.js';
-export { renderToStringWithData } from './renderToStringWithData.js';
-export { RenderPromises } from './RenderPromises.js';
+export { getMarkupFromTree, getDataFromTree } from "./getDataFromTree.js";
+export { renderToStringWithData } from "./renderToStringWithData.js";
+export { RenderPromises } from "./RenderPromises.js";
diff --git a/src/react/ssr/renderToStringWithData.ts b/src/react/ssr/renderToStringWithData.ts
index c848305d680..0e3944344a2 100644
--- a/src/react/ssr/renderToStringWithData.ts
+++ b/src/react/ssr/renderToStringWithData.ts
@@ -1,12 +1,12 @@
-import type { ReactElement } from 'react';
-import { getMarkupFromTree } from './getDataFromTree.js';
-import { renderToString } from 'react-dom/server';
+import type { ReactElement } from "react";
+import { getMarkupFromTree } from "./getDataFromTree.js";
+import { renderToString } from "react-dom/server";
 
 export function renderToStringWithData(
   component: ReactElement<any>
 ): Promise<string> {
   return getMarkupFromTree({
     tree: component,
-    renderFunction: renderToString
+    renderFunction: renderToString,
   });
 }
diff --git a/src/react/types/types.ts b/src/react/types/types.ts
index 007faecccd4..57b4df16034 100644
--- a/src/react/types/types.ts
+++ b/src/react/types/types.ts
@@ -1,10 +1,13 @@
-import type { ReactNode } from 'react';
-import type { DocumentNode } from 'graphql';
-import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
+import type { ReactNode } from "react";
+import type { DocumentNode } from "graphql";
+import type { TypedDocumentNode } from "@graphql-typed-document-node/core";
 
-import type { Observable, ObservableSubscription } from '../../utilities/index.js';
-import type { FetchResult } from '../../link/core/index.js';
-import type { ApolloError } from '../../errors/index.js';
+import type {
+  Observable,
+  ObservableSubscription,
+} from "../../utilities/index.js";
+import type { FetchResult } from "../../link/core/index.js";
+import type { ApolloError } from "../../errors/index.js";
 import type {
   ApolloCache,
   ApolloClient,
@@ -17,12 +20,12 @@ import type {
   InternalRefetchQueriesInclude,
   WatchQueryOptions,
   WatchQueryFetchPolicy,
-} from '../../core/index.js';
-import type { SuspenseCache } from '../cache/index.js';
+} from "../../core/index.js";
+import type { SuspenseCache } from "../cache/index.js";
 
 /* QueryReference type */
 
-export type { QueryReference } from '../cache/QueryReference.js';
+export type { QueryReference } from "../cache/QueryReference.js";
 
 /* Common types */
 
@@ -34,8 +37,9 @@ export type CommonOptions<TOptions> = TOptions & {
 
 /* Query types */
 
-export interface BaseQueryOptions<TVariables extends OperationVariables = OperationVariables>
-extends Omit<WatchQueryOptions<TVariables>, "query"> {
+export interface BaseQueryOptions<
+  TVariables extends OperationVariables = OperationVariables,
+> extends Omit<WatchQueryOptions<TVariables>, "query"> {
   ssr?: boolean;
   client?: ApolloClient<any>;
   context?: DefaultContext;
@@ -43,7 +47,7 @@ extends Omit<WatchQueryOptions<TVariables>, "query"> {
 
 export interface QueryFunctionOptions<
   TData = any,
-  TVariables extends OperationVariables = OperationVariables
+  TVariables extends OperationVariables = OperationVariables,
 > extends BaseQueryOptions<TVariables> {
   skip?: boolean;
   onCompleted?: (data: TData) => void;
@@ -57,20 +61,25 @@ export interface QueryFunctionOptions<
   defaultOptions?: Partial<WatchQueryOptions<TVariables, TData>>;
 }
 
-export type ObservableQueryFields<TData, TVariables extends OperationVariables> = Pick<
+export type ObservableQueryFields<
+  TData,
+  TVariables extends OperationVariables,
+> = Pick<
   ObservableQuery<TData, TVariables>,
-  | 'startPolling'
-  | 'stopPolling'
-  | 'subscribeToMore'
-  | 'updateQuery'
-  | 'refetch'
-  | 'reobserve'
-  | 'variables'
-  | 'fetchMore'
+  | "startPolling"
+  | "stopPolling"
+  | "subscribeToMore"
+  | "updateQuery"
+  | "refetch"
+  | "reobserve"
+  | "variables"
+  | "fetchMore"
 >;
 
-export interface QueryResult<TData = any, TVariables extends OperationVariables = OperationVariables>
-  extends ObservableQueryFields<TData, TVariables> {
+export interface QueryResult<
+  TData = any,
+  TVariables extends OperationVariables = OperationVariables,
+> extends ObservableQueryFields<TData, TVariables> {
   client: ApolloClient<any>;
   observable: ObservableQuery<TData, TVariables>;
   data: TData | undefined;
@@ -81,51 +90,50 @@ export interface QueryResult<TData = any, TVariables extends OperationVariables
   called: boolean;
 }
 
-export interface QueryDataOptions<TData = any, TVariables extends OperationVariables = OperationVariables>
-  extends QueryFunctionOptions<TData, TVariables> {
+export interface QueryDataOptions<
+  TData = any,
+  TVariables extends OperationVariables = OperationVariables,
+> extends QueryFunctionOptions<TData, TVariables> {
   children?: (result: QueryResult<TData, TVariables>) => ReactNode;
   query: DocumentNode | TypedDocumentNode<TData, TVariables>;
 }
 
-export interface QueryHookOptions<TData = any, TVariables extends OperationVariables = OperationVariables>
-  extends QueryFunctionOptions<TData, TVariables> {
-}
+export interface QueryHookOptions<
+  TData = any,
+  TVariables extends OperationVariables = OperationVariables,
+> extends QueryFunctionOptions<TData, TVariables> {}
 
 export interface LazyQueryHookOptions<
   TData = any,
-  TVariables extends OperationVariables = OperationVariables
-> extends Omit<QueryHookOptions<TData, TVariables>, 'skip'> {
-}
+  TVariables extends OperationVariables = OperationVariables,
+> extends Omit<QueryHookOptions<TData, TVariables>, "skip"> {}
 
 export interface LazyQueryHookExecOptions<
   TData = any,
-  TVariables extends OperationVariables = OperationVariables
+  TVariables extends OperationVariables = OperationVariables,
 > extends LazyQueryHookOptions<TData, TVariables> {
   query?: DocumentNode | TypedDocumentNode<TData, TVariables>;
 }
 
 export type SuspenseQueryHookFetchPolicy = Extract<
   WatchQueryFetchPolicy,
-  | 'cache-first'
-  | 'network-only'
-  | 'no-cache'
-  | 'cache-and-network'
+  "cache-first" | "network-only" | "no-cache" | "cache-and-network"
 >;
 
 export interface SuspenseQueryHookOptions<
   TData = unknown,
-  TVariables extends OperationVariables = OperationVariables
+  TVariables extends OperationVariables = OperationVariables,
 > extends Pick<
-  QueryHookOptions<TData, TVariables>,
-  | 'client'
-  | 'variables'
-  | 'errorPolicy'
-  | 'context'
-  | 'canonizeResults'
-  | 'returnPartialData'
-  | 'refetchWritePolicy'
-  | 'skip'
-> {
+    QueryHookOptions<TData, TVariables>,
+    | "client"
+    | "variables"
+    | "errorPolicy"
+    | "context"
+    | "canonizeResults"
+    | "returnPartialData"
+    | "refetchWritePolicy"
+    | "skip"
+  > {
   fetchPolicy?: SuspenseQueryHookFetchPolicy;
   suspenseCache?: SuspenseCache;
   queryKey?: string | number | any[];
@@ -133,26 +141,23 @@ export interface SuspenseQueryHookOptions<
 
 export type BackgroundQueryHookFetchPolicy = Extract<
   WatchQueryFetchPolicy,
-  | 'cache-first'
-  | 'network-only'
-  | 'no-cache'
-  | 'cache-and-network'
+  "cache-first" | "network-only" | "no-cache" | "cache-and-network"
 >;
 
 export interface BackgroundQueryHookOptions<
   TData = unknown,
-  TVariables extends OperationVariables = OperationVariables
+  TVariables extends OperationVariables = OperationVariables,
 > extends Pick<
-  QueryHookOptions<TData, TVariables>,
-  | 'client'
-  | 'variables'
-  | 'errorPolicy'
-  | 'context'
-  | 'canonizeResults'
-  | 'returnPartialData'
-  | 'refetchWritePolicy'
-  | 'skip'
-> {
+    QueryHookOptions<TData, TVariables>,
+    | "client"
+    | "variables"
+    | "errorPolicy"
+    | "context"
+    | "canonizeResults"
+    | "returnPartialData"
+    | "refetchWritePolicy"
+    | "skip"
+  > {
   fetchPolicy?: BackgroundQueryHookFetchPolicy;
   suspenseCache?: SuspenseCache;
   queryKey?: string | number | any[];
@@ -169,22 +174,30 @@ export interface QueryLazyOptions<TVariables> {
 /**
  * @deprecated TODO Delete this unused type alias.
  */
-export type LazyQueryResult<TData, TVariables extends OperationVariables> = QueryResult<TData, TVariables>;
+export type LazyQueryResult<
+  TData,
+  TVariables extends OperationVariables,
+> = QueryResult<TData, TVariables>;
 
 /**
  * @deprecated TODO Delete this unused type alias.
  */
-export type QueryTuple<TData, TVariables extends OperationVariables> =
-  LazyQueryResultTuple<TData, TVariables>;
+export type QueryTuple<
+  TData,
+  TVariables extends OperationVariables,
+> = LazyQueryResultTuple<TData, TVariables>;
 
-export type LazyQueryExecFunction<TData, TVariables extends OperationVariables> = (
-  options?: Partial<LazyQueryHookExecOptions<TData, TVariables>>,
+export type LazyQueryExecFunction<
+  TData,
+  TVariables extends OperationVariables,
+> = (
+  options?: Partial<LazyQueryHookExecOptions<TData, TVariables>>
 ) => Promise<QueryResult<TData, TVariables>>;
 
-export type LazyQueryResultTuple<TData, TVariables extends OperationVariables> = [
-  LazyQueryExecFunction<TData, TVariables>,
-  QueryResult<TData, TVariables>,
-];
+export type LazyQueryResultTuple<
+  TData,
+  TVariables extends OperationVariables,
+> = [LazyQueryExecFunction<TData, TVariables>, QueryResult<TData, TVariables>];
 
 /* Mutation types */
 
@@ -196,11 +209,11 @@ export interface BaseMutationOptions<
   TData = any,
   TVariables = OperationVariables,
   TContext = DefaultContext,
-  TCache extends ApolloCache<any> = ApolloCache<any>
+  TCache extends ApolloCache<any> = ApolloCache<any>,
 > extends Omit<
-  MutationOptions<TData, TVariables, TContext, TCache>,
-  | "mutation"
-> {
+    MutationOptions<TData, TVariables, TContext, TCache>,
+    "mutation"
+  > {
   client?: ApolloClient<object>;
   notifyOnNetworkStatusChange?: boolean;
   onCompleted?: (data: TData, clientOptions?: BaseMutationOptions) => void;
@@ -240,8 +253,7 @@ export interface MutationHookOptions<
   TVariables = OperationVariables,
   TContext = DefaultContext,
   TCache extends ApolloCache<any> = ApolloCache<any>,
-> extends BaseMutationOptions<TData, TVariables, TContext, TCache> {
-}
+> extends BaseMutationOptions<TData, TVariables, TContext, TCache> {}
 
 export interface MutationDataOptions<
   TData = any,
@@ -280,7 +292,7 @@ export interface OnSubscriptionDataOptions<TData = any> {
 
 export interface BaseSubscriptionOptions<
   TData = any,
-  TVariables extends OperationVariables = OperationVariables
+  TVariables extends OperationVariables = OperationVariables,
 > {
   variables?: TVariables;
   fetchPolicy?: FetchPolicy;
@@ -293,13 +305,13 @@ export interface BaseSubscriptionOptions<
   onComplete?: () => void;
   onData?: (options: OnDataOptions<TData>) => any;
   /**
-  * @deprecated Use onData instead
-  */
+   * @deprecated Use onData instead
+   */
   onSubscriptionData?: (options: OnSubscriptionDataOptions<TData>) => any;
   onError?: (error: ApolloError) => void;
   /**
-  * @deprecated Use onComplete instead
-  */
+   * @deprecated Use onComplete instead
+   */
   onSubscriptionComplete?: () => void;
 }
 
@@ -314,13 +326,12 @@ export interface SubscriptionResult<TData = any, TVariables = any> {
 
 export interface SubscriptionHookOptions<
   TData = any,
-  TVariables extends OperationVariables = OperationVariables
-> extends BaseSubscriptionOptions<TData, TVariables> {
-}
+  TVariables extends OperationVariables = OperationVariables,
+> extends BaseSubscriptionOptions<TData, TVariables> {}
 
 export interface SubscriptionDataOptions<
   TData = any,
-  TVariables extends OperationVariables = OperationVariables
+  TVariables extends OperationVariables = OperationVariables,
 > extends BaseSubscriptionOptions<TData, TVariables> {
   subscription: DocumentNode | TypedDocumentNode<TData, TVariables>;
   children?: null | ((result: SubscriptionResult<TData>) => JSX.Element | null);
@@ -356,4 +367,4 @@ const { variables } = useQuery(typedNode, { variables: { bar: 4, nonExistingVari
 Without the use of `NoInfer`, `variables` would now be of the type `{ bar: number, nonExistingVariable: "string" }`.
 With `NoInfer`, it will instead give an error on `nonExistingVariable`.
  */
-export type NoInfer<T> = [T][T extends any ? 0 : never]
+export type NoInfer<T> = [T][T extends any ? 0 : never];
diff --git a/src/testing/matchers/index.d.ts b/src/testing/matchers/index.d.ts
index e0e5505722d..a229e13682d 100644
--- a/src/testing/matchers/index.d.ts
+++ b/src/testing/matchers/index.d.ts
@@ -2,7 +2,7 @@ import type {
   ApolloClient,
   DocumentNode,
   OperationVariables,
-} from '../../core/index.js';
+} from "../../core/index.js";
 
 interface ApolloCustomMatchers<R = void, T = {}> {
   /**
@@ -14,13 +14,15 @@ interface ApolloCustomMatchers<R = void, T = {}> {
   /**
    * Used to determine if the Suspense cache has a cache entry.
    */
-  toHaveSuspenseCacheEntryUsing: T extends ApolloClient<any> ? ((
-    query: DocumentNode,
-    options?: {
-      variables?: OperationVariables;
-      queryKey?: string | number | any[];
-    }
-  ) => R) : { error: "matcher needs to be called on an ApolloClient instance" };
+  toHaveSuspenseCacheEntryUsing: T extends ApolloClient<any>
+    ? (
+        query: DocumentNode,
+        options?: {
+          variables?: OperationVariables;
+          queryKey?: string | number | any[];
+        }
+      ) => R
+    : { error: "matcher needs to be called on an ApolloClient instance" };
 }
 
 declare global {
diff --git a/src/testing/matchers/index.ts b/src/testing/matchers/index.ts
index a6f545ed399..87672a8b81c 100644
--- a/src/testing/matchers/index.ts
+++ b/src/testing/matchers/index.ts
@@ -1,6 +1,6 @@
-import { expect } from '@jest/globals';
-import { toMatchDocument } from './toMatchDocument.js';
-import { toHaveSuspenseCacheEntryUsing } from './toHaveSuspenseCacheEntryUsing.js';
+import { expect } from "@jest/globals";
+import { toMatchDocument } from "./toMatchDocument.js";
+import { toHaveSuspenseCacheEntryUsing } from "./toHaveSuspenseCacheEntryUsing.js";
 
 expect.extend({
   toHaveSuspenseCacheEntryUsing,
diff --git a/src/testing/matchers/toHaveSuspenseCacheEntryUsing.ts b/src/testing/matchers/toHaveSuspenseCacheEntryUsing.ts
index 1bc6dbae331..7244952fed6 100644
--- a/src/testing/matchers/toHaveSuspenseCacheEntryUsing.ts
+++ b/src/testing/matchers/toHaveSuspenseCacheEntryUsing.ts
@@ -1,10 +1,10 @@
-import type { MatcherFunction } from 'expect';
-import type { DocumentNode } from 'graphql';
-import type { OperationVariables } from '../../core/index.js';
-import { ApolloClient } from '../../core/index.js';
-import { canonicalStringify } from '../../cache/index.js';
-import { getSuspenseCache } from '../../react/cache/index.js';
-import type { CacheKey } from '../../react/cache/types.js';
+import type { MatcherFunction } from "expect";
+import type { DocumentNode } from "graphql";
+import type { OperationVariables } from "../../core/index.js";
+import { ApolloClient } from "../../core/index.js";
+import { canonicalStringify } from "../../cache/index.js";
+import { getSuspenseCache } from "../../react/cache/index.js";
+import type { CacheKey } from "../../react/cache/types.js";
 
 export const toHaveSuspenseCacheEntryUsing: MatcherFunction<
   [
@@ -12,7 +12,7 @@ export const toHaveSuspenseCacheEntryUsing: MatcherFunction<
     options: {
       variables?: OperationVariables;
       queryKey?: string | number | any[];
-    }
+    },
   ]
 > = function (
   client,
@@ -20,7 +20,7 @@ export const toHaveSuspenseCacheEntryUsing: MatcherFunction<
   { variables, queryKey = [] } = Object.create(null)
 ) {
   if (!(client instanceof ApolloClient)) {
-    throw new Error('Actual must be an instance of `ApolloClient`');
+    throw new Error("Actual must be an instance of `ApolloClient`");
   }
 
   const suspenseCache = getSuspenseCache(client);
@@ -30,13 +30,13 @@ export const toHaveSuspenseCacheEntryUsing: MatcherFunction<
     canonicalStringify(variables),
     ...([] as any[]).concat(queryKey),
   ];
-  const queryRef = suspenseCache['queryRefs'].lookupArray(cacheKey)?.current;
+  const queryRef = suspenseCache["queryRefs"].lookupArray(cacheKey)?.current;
 
   return {
     pass: !!queryRef,
     message: () => {
       return `Expected suspense cache ${
-        queryRef ? 'not ' : ''
+        queryRef ? "not " : ""
       }to have cache entry using key`;
     },
   };
diff --git a/src/testing/matchers/toMatchDocument.ts b/src/testing/matchers/toMatchDocument.ts
index c338e4d022a..056946e2d74 100644
--- a/src/testing/matchers/toMatchDocument.ts
+++ b/src/testing/matchers/toMatchDocument.ts
@@ -1,16 +1,16 @@
-import { checkDocument, print } from '../../utilities/index.js';
-import type { DocumentNode } from '../../core/index.js';
-import type { MatcherFunction } from 'expect';
+import { checkDocument, print } from "../../utilities/index.js";
+import type { DocumentNode } from "../../core/index.js";
+import type { MatcherFunction } from "expect";
 
 export const toMatchDocument: MatcherFunction<[document: DocumentNode]> =
   function (actual, document) {
-    const hint = this.utils.matcherHint('toMatchDocument');
+    const hint = this.utils.matcherHint("toMatchDocument");
     const actualDocument = print(
       validateDocument(
         actual,
         hint +
           `\n\n${this.utils.RECEIVED_COLOR(
-            'received'
+            "received"
           )} document must be a parsed document.`
       )
     );
@@ -19,7 +19,7 @@ export const toMatchDocument: MatcherFunction<[document: DocumentNode]> =
         document,
         hint +
           `\n\n${this.utils.EXPECTED_COLOR(
-            'expected'
+            "expected"
           )} document must be a parsed document.`
       )
     );
@@ -30,7 +30,7 @@ export const toMatchDocument: MatcherFunction<[document: DocumentNode]> =
       pass,
       message: () => {
         const hint = this.utils.matcherHint(
-          'toMatchDocument',
+          "toMatchDocument",
           undefined,
           undefined,
           { isNot: this.isNot }
@@ -39,14 +39,14 @@ export const toMatchDocument: MatcherFunction<[document: DocumentNode]> =
         if (pass) {
           return (
             hint +
-            '\n\n' +
-            'Received:\n\n' +
+            "\n\n" +
+            "Received:\n\n" +
             this.utils.RECEIVED_COLOR(actualDocument)
           );
         }
 
         return (
-          hint + '\n\n' + this.utils.diff(expectedDocument, actualDocument)
+          hint + "\n\n" + this.utils.diff(expectedDocument, actualDocument)
         );
       },
     };
diff --git a/src/utilities/common/__tests__/omitDeep.ts b/src/utilities/common/__tests__/omitDeep.ts
index 1eeec248fca..1fcbcd18608 100644
--- a/src/utilities/common/__tests__/omitDeep.ts
+++ b/src/utilities/common/__tests__/omitDeep.ts
@@ -1,112 +1,112 @@
-import { omitDeep } from '../omitDeep';
+import { omitDeep } from "../omitDeep";
 
-test('omits the key from a shallow object', () => {
-  expect(omitDeep({ omit: 'a', keep: 'b', other: 'c' }, 'omit')).toEqual({
-    keep: 'b',
-    other: 'c',
+test("omits the key from a shallow object", () => {
+  expect(omitDeep({ omit: "a", keep: "b", other: "c" }, "omit")).toEqual({
+    keep: "b",
+    other: "c",
   });
 });
 
-test('omits the key from arbitrarily nested object', () => {
+test("omits the key from arbitrarily nested object", () => {
   expect(
     omitDeep(
       {
-        omit: 'a',
+        omit: "a",
         keep: {
-          omit: 'a',
-          keep: 'b',
-          other: { omit: 'a', keep: 'b', other: 'c' },
+          omit: "a",
+          keep: "b",
+          other: { omit: "a", keep: "b", other: "c" },
         },
       },
-      'omit'
+      "omit"
     )
   ).toEqual({
     keep: {
-      keep: 'b',
-      other: { keep: 'b', other: 'c' },
+      keep: "b",
+      other: { keep: "b", other: "c" },
     },
   });
 });
 
-test('omits the key from arrays', () => {
+test("omits the key from arrays", () => {
   expect(
     omitDeep(
       [
-        { omit: 'a', keep: 'b', other: 'c' },
-        { omit: 'a', keep: 'b', other: 'c' },
+        { omit: "a", keep: "b", other: "c" },
+        { omit: "a", keep: "b", other: "c" },
       ],
-      'omit'
+      "omit"
     )
   ).toEqual([
-    { keep: 'b', other: 'c' },
-    { keep: 'b', other: 'c' },
+    { keep: "b", other: "c" },
+    { keep: "b", other: "c" },
   ]);
 });
 
-test('omits the key from arbitrarily nested arrays', () => {
+test("omits the key from arbitrarily nested arrays", () => {
   expect(
     omitDeep(
       [
-        [{ omit: 'a', keep: 'b', other: 'c' }],
+        [{ omit: "a", keep: "b", other: "c" }],
         [
-          { omit: 'a', keep: 'b', other: 'c' },
-          [{ omit: 'a', keep: 'b', other: 'c' }],
+          { omit: "a", keep: "b", other: "c" },
+          [{ omit: "a", keep: "b", other: "c" }],
         ],
       ],
-      'omit'
+      "omit"
     )
   ).toEqual([
-    [{ keep: 'b', other: 'c' }],
-    [{ keep: 'b', other: 'c' }, [{ keep: 'b', other: 'c' }]],
+    [{ keep: "b", other: "c" }],
+    [{ keep: "b", other: "c" }, [{ keep: "b", other: "c" }]],
   ]);
 });
 
-test('returns primitives unchanged', () => {
-  expect(omitDeep('a', 'ignored')).toBe('a');
-  expect(omitDeep(1, 'ignored')).toBe(1);
-  expect(omitDeep(true, 'ignored')).toBe(true);
-  expect(omitDeep(null, 'ignored')).toBe(null);
-  expect(omitDeep(undefined, 'ignored')).toBe(undefined);
-  expect(omitDeep(Symbol.for('foo'), 'ignored')).toBe(Symbol.for('foo'));
+test("returns primitives unchanged", () => {
+  expect(omitDeep("a", "ignored")).toBe("a");
+  expect(omitDeep(1, "ignored")).toBe(1);
+  expect(omitDeep(true, "ignored")).toBe(true);
+  expect(omitDeep(null, "ignored")).toBe(null);
+  expect(omitDeep(undefined, "ignored")).toBe(undefined);
+  expect(omitDeep(Symbol.for("foo"), "ignored")).toBe(Symbol.for("foo"));
 });
 
-test('handles circular references', () => {
+test("handles circular references", () => {
   let b: any;
-  const a = { omit: 'foo', b };
-  b = { a, omit: 'foo' };
+  const a = { omit: "foo", b };
+  b = { a, omit: "foo" };
   a.b = b;
 
-  const variables = { a, b, omit: 'foo' };
+  const variables = { a, b, omit: "foo" };
 
-  const result = omitDeep(variables, 'omit');
+  const result = omitDeep(variables, "omit");
 
-  expect(result).not.toHaveProperty('omit');
-  expect(result.a).not.toHaveProperty('omit');
-  expect(result.b).not.toHaveProperty('omit');
+  expect(result).not.toHaveProperty("omit");
+  expect(result.a).not.toHaveProperty("omit");
+  expect(result.b).not.toHaveProperty("omit");
 });
 
-test('returns same object unmodified if key is not found', () => {
+test("returns same object unmodified if key is not found", () => {
   const obj = {
-    a: 'a',
-    b: 'b',
-    c: { d: 'd', e: 'e' },
+    a: "a",
+    b: "b",
+    c: { d: "d", e: "e" },
   };
 
-  const arr = [{ a: 'a', b: 'b', c: 'c' }, { foo: 'bar' }];
+  const arr = [{ a: "a", b: "b", c: "c" }, { foo: "bar" }];
 
-  expect(omitDeep(obj, 'omit')).toBe(obj);
-  expect(omitDeep(arr, 'omit')).toBe(arr);
+  expect(omitDeep(obj, "omit")).toBe(obj);
+  expect(omitDeep(arr, "omit")).toBe(arr);
 });
 
-test('returns unmodified subtrees for subtrees that do not contain the key', () => {
+test("returns unmodified subtrees for subtrees that do not contain the key", () => {
   const original = {
-    a: 'a',
-    foo: { bar: 'true' },
-    baz: [{ foo: 'bar' }],
-    omitOne: [{ foo: 'bar', omit: true }, { foo: 'bar' }],
+    a: "a",
+    foo: { bar: "true" },
+    baz: [{ foo: "bar" }],
+    omitOne: [{ foo: "bar", omit: true }, { foo: "bar" }],
   };
 
-  const result = omitDeep(original, 'omit');
+  const result = omitDeep(original, "omit");
 
   expect(result).not.toBe(original);
   expect(result.foo).toBe(original.foo);
@@ -116,22 +116,22 @@ test('returns unmodified subtrees for subtrees that do not contain the key', ()
   expect(result.omitOne[1]).toBe(original.omitOne[1]);
 });
 
-test('only considers plain objects and ignores class instances when omitting properties', () => {
+test("only considers plain objects and ignores class instances when omitting properties", () => {
   class Thing {
-    foo = 'bar';
+    foo = "bar";
     omit = false;
   }
 
   const thing = new Thing();
   const original = { thing };
 
-  const result = omitDeep(original, 'omit');
+  const result = omitDeep(original, "omit");
 
   expect(result.thing).toBe(thing);
-  expect(result.thing).toHaveProperty('omit', false);
+  expect(result.thing).toHaveProperty("omit", false);
 
-  const modifiedThing = omitDeep(thing, 'omit');
+  const modifiedThing = omitDeep(thing, "omit");
 
   expect(modifiedThing).toBe(thing);
-  expect(modifiedThing).toHaveProperty('omit', false);
+  expect(modifiedThing).toHaveProperty("omit", false);
 });
diff --git a/src/utilities/common/__tests__/stripTypename.ts b/src/utilities/common/__tests__/stripTypename.ts
index 6475c986754..7995a82268a 100644
--- a/src/utilities/common/__tests__/stripTypename.ts
+++ b/src/utilities/common/__tests__/stripTypename.ts
@@ -1,58 +1,58 @@
-import { stripTypename } from '../stripTypename';
+import { stripTypename } from "../stripTypename";
 
-test('omits __typename from a shallow object', () => {
+test("omits __typename from a shallow object", () => {
   expect(
-    stripTypename({ __typename: 'Person', firstName: 'Foo', lastName: 'Bar' })
-  ).toEqual({ firstName: 'Foo', lastName: 'Bar' });
+    stripTypename({ __typename: "Person", firstName: "Foo", lastName: "Bar" })
+  ).toEqual({ firstName: "Foo", lastName: "Bar" });
 });
 
-test('omits __typename from arbitrarily nested object', () => {
+test("omits __typename from arbitrarily nested object", () => {
   expect(
     stripTypename({
-      __typename: 'Profile',
+      __typename: "Profile",
       user: {
-        __typename: 'User',
-        firstName: 'Foo',
-        lastName: 'Bar',
+        __typename: "User",
+        firstName: "Foo",
+        lastName: "Bar",
         location: {
-          __typename: 'Location',
-          city: 'Denver',
-          country: 'USA',
+          __typename: "Location",
+          city: "Denver",
+          country: "USA",
         },
       },
     })
   ).toEqual({
     user: {
-      firstName: 'Foo',
-      lastName: 'Bar',
+      firstName: "Foo",
+      lastName: "Bar",
       location: {
-        city: 'Denver',
-        country: 'USA',
+        city: "Denver",
+        country: "USA",
       },
     },
   });
 });
 
-test('omits the __typename from arrays', () => {
+test("omits the __typename from arrays", () => {
   expect(
     stripTypename([
-      { __typename: 'Todo', name: 'Take out trash' },
-      { __typename: 'Todo', name: 'Clean room' },
+      { __typename: "Todo", name: "Take out trash" },
+      { __typename: "Todo", name: "Clean room" },
     ])
-  ).toEqual([{ name: 'Take out trash' }, { name: 'Clean room' }]);
+  ).toEqual([{ name: "Take out trash" }, { name: "Clean room" }]);
 });
 
-test('omits __typename from arbitrarily nested arrays', () => {
+test("omits __typename from arbitrarily nested arrays", () => {
   expect(
     stripTypename([
-      [{ __typename: 'Foo', foo: 'foo' }],
-      [{ __typename: 'Bar', bar: 'bar' }, [{ __typename: 'Baz', baz: 'baz' }]],
+      [{ __typename: "Foo", foo: "foo" }],
+      [{ __typename: "Bar", bar: "bar" }, [{ __typename: "Baz", baz: "baz" }]],
     ])
-  ).toEqual([[{ foo: 'foo' }], [{ bar: 'bar' }, [{ baz: 'baz' }]]]);
+  ).toEqual([[{ foo: "foo" }], [{ bar: "bar" }, [{ baz: "baz" }]]]);
 });
 
-test('returns primitives unchanged', () => {
-  expect(stripTypename('a')).toBe('a');
+test("returns primitives unchanged", () => {
+  expect(stripTypename("a")).toBe("a");
   expect(stripTypename(1)).toBe(1);
   expect(stripTypename(true)).toBe(true);
   expect(stripTypename(null)).toBe(null);
diff --git a/src/utilities/common/omitDeep.ts b/src/utilities/common/omitDeep.ts
index 0f56a48c901..f1385dbe1e2 100644
--- a/src/utilities/common/omitDeep.ts
+++ b/src/utilities/common/omitDeep.ts
@@ -1,5 +1,5 @@
-import type { DeepOmit } from '../types/DeepOmit.js';
-import { isPlainObject } from './objects.js';
+import type { DeepOmit } from "../types/DeepOmit.js";
+import { isPlainObject } from "./objects.js";
 
 export function omitDeep<T, K extends string>(value: T, key: K) {
   return __omitDeep(value, key);
diff --git a/src/utilities/common/stripTypename.ts b/src/utilities/common/stripTypename.ts
index 9d4e3c6a1c4..e990c22e525 100644
--- a/src/utilities/common/stripTypename.ts
+++ b/src/utilities/common/stripTypename.ts
@@ -1,5 +1,5 @@
-import { omitDeep } from './omitDeep.js';
+import { omitDeep } from "./omitDeep.js";
 
 export function stripTypename<T>(value: T) {
-  return omitDeep(value, '__typename');
+  return omitDeep(value, "__typename");
 }
diff --git a/src/utilities/globals/invariantWrappers.ts b/src/utilities/globals/invariantWrappers.ts
index 0099d4fdd24..e990b110a37 100644
--- a/src/utilities/globals/invariantWrappers.ts
+++ b/src/utilities/globals/invariantWrappers.ts
@@ -1,12 +1,12 @@
-import { invariant as originalInvariant, InvariantError } from 'ts-invariant';
-import { version } from '../../version.js';
-import global from './global.js';
-import type { ErrorCodes } from '../../invariantErrorCodes.js';
-import { stringifyForDisplay } from '../common/stringifyForDisplay.js';
+import { invariant as originalInvariant, InvariantError } from "ts-invariant";
+import { version } from "../../version.js";
+import global from "./global.js";
+import type { ErrorCodes } from "../../invariantErrorCodes.js";
+import { stringifyForDisplay } from "../common/stringifyForDisplay.js";
 
 function wrap(fn: (msg?: string, ...args: any[]) => void) {
   return function (message: string | number, ...args: any[]) {
-    fn(typeof message === 'number' ? getErrorMsg(message) : message, ...args);
+    fn(typeof message === "number" ? getErrorMsg(message) : message, ...args);
   };
 }
 
@@ -92,7 +92,7 @@ function newInvariantError(
 }
 
 const ApolloErrorMessageHandler = Symbol.for(
-  'ApolloErrorMessageHandler_' + version
+  "ApolloErrorMessageHandler_" + version
 );
 declare global {
   interface Window {
@@ -105,7 +105,7 @@ declare global {
 function getErrorMsg(message?: string | number, messageArgs: unknown[] = []) {
   if (!message) return;
   const args = messageArgs.map((arg) =>
-    typeof arg == 'string' ? arg : stringifyForDisplay(arg, 2).slice(0, 1000)
+    typeof arg == "string" ? arg : stringifyForDisplay(arg, 2).slice(0, 1000)
   );
   return (
     (global[ApolloErrorMessageHandler] &&
diff --git a/src/utilities/graphql/DocumentTransform.ts b/src/utilities/graphql/DocumentTransform.ts
index 79682e6aafe..0a614df4190 100644
--- a/src/utilities/graphql/DocumentTransform.ts
+++ b/src/utilities/graphql/DocumentTransform.ts
@@ -1,8 +1,8 @@
-import { Trie } from '@wry/trie';
-import { canUseWeakMap, canUseWeakSet } from '../common/canUse.js';
-import { checkDocument } from './getFromAST.js';
-import { invariant } from '../globals/index.js';
-import type { DocumentNode } from 'graphql';
+import { Trie } from "@wry/trie";
+import { canUseWeakMap, canUseWeakSet } from "../common/canUse.js";
+import { checkDocument } from "./getFromAST.js";
+import { invariant } from "../globals/index.js";
+import type { DocumentNode } from "graphql";
 
 export type DocumentTransformCacheKey = ReadonlyArray<unknown>;
 
@@ -124,7 +124,7 @@ export class DocumentTransform {
     if (cacheKeys) {
       invariant(
         Array.isArray(cacheKeys),
-        '`getCacheKey` must return an array or undefined'
+        "`getCacheKey` must return an array or undefined"
       );
       return this.stableCacheKeys.lookupArray(cacheKeys);
     }
diff --git a/src/utilities/graphql/__tests__/DocumentTransform.ts b/src/utilities/graphql/__tests__/DocumentTransform.ts
index 1af87f4fabd..5f96ffa4e21 100644
--- a/src/utilities/graphql/__tests__/DocumentTransform.ts
+++ b/src/utilities/graphql/__tests__/DocumentTransform.ts
@@ -1,8 +1,8 @@
-import { DocumentTransform } from '../DocumentTransform';
-import { isMutationOperation, isQueryOperation } from '../operations';
-import { removeDirectivesFromDocument } from '../transform';
-import { gql } from 'graphql-tag';
-import { DocumentNode, visit, Kind } from 'graphql';
+import { DocumentTransform } from "../DocumentTransform";
+import { isMutationOperation, isQueryOperation } from "../operations";
+import { removeDirectivesFromDocument } from "../transform";
+import { gql } from "graphql-tag";
+import { DocumentNode, visit, Kind } from "graphql";
 
 function stripDirective(directive: string) {
   return (document: DocumentNode) => {
@@ -36,7 +36,7 @@ function addClientDirectiveToField(fieldName: string) {
               directives: [
                 {
                   kind: Kind.DIRECTIVE,
-                  name: { kind: Kind.NAME, value: 'client' },
+                  name: { kind: Kind.NAME, value: "client" },
                 },
               ],
             };
@@ -47,7 +47,7 @@ function addClientDirectiveToField(fieldName: string) {
   };
 }
 
-test('can transform a document', () => {
+test("can transform a document", () => {
   const query = gql`
     query TestQuery {
       user {
@@ -57,7 +57,7 @@ test('can transform a document', () => {
     }
   `;
 
-  const transform = new DocumentTransform(stripDirective('client'));
+  const transform = new DocumentTransform(stripDirective("client"));
 
   const result = transform.transformDocument(query);
 
@@ -71,7 +71,7 @@ test('can transform a document', () => {
   `);
 });
 
-test('returns unmodified document if trying to transform an already computed result', () => {
+test("returns unmodified document if trying to transform an already computed result", () => {
   const query = gql`
     query TestQuery {
       user {
@@ -81,8 +81,8 @@ test('returns unmodified document if trying to transform an already computed res
     }
   `;
 
-  const cachedTransform = new DocumentTransform(stripDirective('client'));
-  const uncachedTransform = new DocumentTransform(stripDirective('custom'), {
+  const cachedTransform = new DocumentTransform(stripDirective("client"));
+  const uncachedTransform = new DocumentTransform(stripDirective("custom"), {
     cache: false,
   });
 
@@ -96,7 +96,7 @@ test('returns unmodified document if trying to transform an already computed res
   );
 });
 
-test('caches the result of the transform by default', () => {
+test("caches the result of the transform by default", () => {
   const query = gql`
     query TestQuery {
       user {
@@ -115,7 +115,7 @@ test('caches the result of the transform by default', () => {
     }
   `;
 
-  const transform = jest.fn(stripDirective('client'));
+  const transform = jest.fn(stripDirective("client"));
   const documentTransform = new DocumentTransform(transform);
 
   const result1 = documentTransform.transformDocument(query);
@@ -129,7 +129,7 @@ test('caches the result of the transform by default', () => {
   expect(transform).toHaveBeenCalledTimes(1);
 });
 
-test('allows custom cache keys to be defined', () => {
+test("allows custom cache keys to be defined", () => {
   const query = gql`
     query TestQuery {
       user @network {
@@ -156,9 +156,9 @@ test('allows custom cache keys to be defined', () => {
 
   let online = true;
 
-  const onlineTransform = new DocumentTransform(stripDirective('network'));
+  const onlineTransform = new DocumentTransform(stripDirective("network"));
   const offlineTransform = new DocumentTransform(
-    renameDirective('network', 'client')
+    renameDirective("network", "client")
   );
 
   const transform = jest.fn((document: DocumentNode) => {
@@ -198,7 +198,7 @@ test('allows custom cache keys to be defined', () => {
   expect(transform).toHaveBeenCalledTimes(2);
 });
 
-test('can disable caching the result output', () => {
+test("can disable caching the result output", () => {
   const query = gql`
     query {
       user {
@@ -217,7 +217,7 @@ test('can disable caching the result output', () => {
     }
   `;
 
-  const transform = jest.fn(stripDirective('client'));
+  const transform = jest.fn(stripDirective("client"));
   const documentTransform = new DocumentTransform(transform, { cache: false });
 
   const result1 = documentTransform.transformDocument(query);
@@ -231,7 +231,7 @@ test('can disable caching the result output', () => {
   expect(transform).toHaveBeenCalledTimes(2);
 });
 
-test('can combine 2 transforms with `concat`', async () => {
+test("can combine 2 transforms with `concat`", async () => {
   const query = gql`
     query TestQuery {
       user @nonreactive {
@@ -241,8 +241,8 @@ test('can combine 2 transforms with `concat`', async () => {
     }
   `;
 
-  const stripClient = new DocumentTransform(stripDirective('client'));
-  const stripNonReactive = new DocumentTransform(stripDirective('nonreactive'));
+  const stripClient = new DocumentTransform(stripDirective("client"));
+  const stripNonReactive = new DocumentTransform(stripDirective("nonreactive"));
   const documentTransform = stripClient.concat(stripNonReactive);
 
   const result = documentTransform.transformDocument(query);
@@ -257,7 +257,7 @@ test('can combine 2 transforms with `concat`', async () => {
   `);
 });
 
-test('runs concatenated transform after original transform', () => {
+test("runs concatenated transform after original transform", () => {
   const query = gql`
     query TestQuery {
       user {
@@ -277,7 +277,7 @@ test('runs concatenated transform after original transform', () => {
   `;
 
   const addClientDirectiveToName = new DocumentTransform(
-    addClientDirectiveToField('name')
+    addClientDirectiveToField("name")
   );
 
   expect(addClientDirectiveToName.transformDocument(query)).toMatchDocument(gql`
@@ -289,7 +289,7 @@ test('runs concatenated transform after original transform', () => {
     }
   `);
 
-  const stripClient = new DocumentTransform(stripDirective('client'));
+  const stripClient = new DocumentTransform(stripDirective("client"));
   const documentTransform = addClientDirectiveToName.concat(stripClient);
 
   const result = documentTransform.transformDocument(query);
@@ -297,7 +297,7 @@ test('runs concatenated transform after original transform', () => {
   expect(result).toMatchDocument(expected);
 });
 
-test('can combine multiple transforms with `concat`', async () => {
+test("can combine multiple transforms with `concat`", async () => {
   const query = gql`
     query TestQuery {
       user @nonreactive {
@@ -307,9 +307,9 @@ test('can combine multiple transforms with `concat`', async () => {
     }
   `;
 
-  const stripClient = new DocumentTransform(stripDirective('client'));
-  const stripNonReactive = new DocumentTransform(stripDirective('nonreactive'));
-  const stripConnection = new DocumentTransform(stripDirective('connection'));
+  const stripClient = new DocumentTransform(stripDirective("client"));
+  const stripNonReactive = new DocumentTransform(stripDirective("nonreactive"));
+  const stripConnection = new DocumentTransform(stripDirective("connection"));
   const documentTransform = stripClient
     .concat(stripNonReactive)
     .concat(stripConnection);
@@ -326,7 +326,7 @@ test('can combine multiple transforms with `concat`', async () => {
   `);
 });
 
-test('caches the result output from a combined transform when both transforms are cached', async () => {
+test("caches the result output from a combined transform when both transforms are cached", async () => {
   const query = gql`
     query TestQuery {
       user @nonreactive {
@@ -345,8 +345,8 @@ test('caches the result output from a combined transform when both transforms ar
     }
   `;
 
-  const stripClient = jest.fn(stripDirective('client'));
-  const stripNonReactive = jest.fn(stripDirective('nonreactive'));
+  const stripClient = jest.fn(stripDirective("client"));
+  const stripNonReactive = jest.fn(stripDirective("nonreactive"));
 
   const stripClientTransform = new DocumentTransform(stripClient);
   const stripNonReactiveTransform = new DocumentTransform(stripNonReactive);
@@ -367,7 +367,7 @@ test('caches the result output from a combined transform when both transforms ar
   expect(stripNonReactive).toHaveBeenCalledTimes(1);
 });
 
-test('allows non cached transforms to be run when concatenated', async () => {
+test("allows non cached transforms to be run when concatenated", async () => {
   const query = gql`
     query TestQuery {
       user @nonreactive {
@@ -386,8 +386,8 @@ test('allows non cached transforms to be run when concatenated', async () => {
     }
   `;
 
-  const stripClient = jest.fn(stripDirective('client'));
-  const stripNonReactive = jest.fn(stripDirective('nonreactive'));
+  const stripClient = jest.fn(stripDirective("client"));
+  const stripNonReactive = jest.fn(stripDirective("nonreactive"));
 
   const stripClientTransform = new DocumentTransform(stripClient, {
     cache: true,
@@ -438,7 +438,7 @@ test('allows non cached transforms to be run when concatenated', async () => {
   expect(stripNonReactive).toHaveBeenCalledTimes(2);
 });
 
-test('can conditionally run transforms using `DocumentTransform.split`', () => {
+test("can conditionally run transforms using `DocumentTransform.split`", () => {
   const mutation = gql`
     mutation TestMutation {
       incrementCounter @client {
@@ -458,7 +458,7 @@ test('can conditionally run transforms using `DocumentTransform.split`', () => {
 
   const documentTransform = DocumentTransform.split(
     isQueryOperation,
-    new DocumentTransform(stripDirective('client'))
+    new DocumentTransform(stripDirective("client"))
   );
 
   const queryResult = documentTransform.transformDocument(query);
@@ -476,7 +476,7 @@ test('can conditionally run transforms using `DocumentTransform.split`', () => {
   expect(mutationResult).toMatchDocument(mutation);
 });
 
-test('properly caches the result of `filter` when the original transform is cached', () => {
+test("properly caches the result of `filter` when the original transform is cached", () => {
   const query = gql`
     query TestQuery {
       user {
@@ -495,7 +495,7 @@ test('properly caches the result of `filter` when the original transform is cach
     }
   `;
 
-  const transform = jest.fn(stripDirective('client'));
+  const transform = jest.fn(stripDirective("client"));
   const documentTransform = DocumentTransform.split(
     isQueryOperation,
     new DocumentTransform(transform, { cache: true })
@@ -512,7 +512,7 @@ test('properly caches the result of `filter` when the original transform is cach
   expect(transform).toHaveBeenCalledTimes(1);
 });
 
-test('reruns transform returned from `DocumentTransform.split` when the original transform is not cached', () => {
+test("reruns transform returned from `DocumentTransform.split` when the original transform is not cached", () => {
   const query = gql`
     query TestQuery {
       user {
@@ -531,7 +531,7 @@ test('reruns transform returned from `DocumentTransform.split` when the original
     }
   `;
 
-  const transform = jest.fn(stripDirective('client'));
+  const transform = jest.fn(stripDirective("client"));
   const documentTransform = DocumentTransform.split(
     isQueryOperation,
     new DocumentTransform(transform, { cache: false })
@@ -548,7 +548,7 @@ test('reruns transform returned from `DocumentTransform.split` when the original
   expect(transform).toHaveBeenCalledTimes(2);
 });
 
-test('properly handles combinations of `DocumentTransform.split` and `filter`', () => {
+test("properly handles combinations of `DocumentTransform.split` and `filter`", () => {
   const mutation = gql`
     mutation TestMutation {
       incrementCounter @client {
@@ -566,8 +566,8 @@ test('properly handles combinations of `DocumentTransform.split` and `filter`',
     }
   `;
 
-  const stripClient = new DocumentTransform(stripDirective('client'));
-  const stripNonReactive = new DocumentTransform(stripDirective('nonreactive'));
+  const stripClient = new DocumentTransform(stripDirective("client"));
+  const stripNonReactive = new DocumentTransform(stripDirective("nonreactive"));
 
   // Strip both @client and @nonreactive but only on query types
   const queryOnlyTransform = DocumentTransform.split(
@@ -612,7 +612,7 @@ test('properly handles combinations of `DocumentTransform.split` and `filter`',
   `);
 });
 
-test('executes other transform when using `DocumentTransform.split` when condition is false', () => {
+test("executes other transform when using `DocumentTransform.split` when condition is false", () => {
   const mutation = gql`
     mutation TestMutation {
       incrementCounter @client {
@@ -630,8 +630,8 @@ test('executes other transform when using `DocumentTransform.split` when conditi
     }
   `;
 
-  const stripClient = new DocumentTransform(stripDirective('client'));
-  const stripNonReactive = new DocumentTransform(stripDirective('nonreactive'));
+  const stripClient = new DocumentTransform(stripDirective("client"));
+  const stripNonReactive = new DocumentTransform(stripDirective("nonreactive"));
 
   // strip both directives for queries, but only @nonreactive for mutations
   const documentTransform = DocumentTransform.split(
@@ -658,7 +658,7 @@ test('executes other transform when using `DocumentTransform.split` when conditi
   `);
 });
 
-test('errors when passing a document that has not been parsed with `gql`', () => {
+test("errors when passing a document that has not been parsed with `gql`", () => {
   const query = `
     query TestQuery {
       user {
diff --git a/src/utilities/graphql/operations.ts b/src/utilities/graphql/operations.ts
index 680991d0e6a..44f5eb14afe 100644
--- a/src/utilities/graphql/operations.ts
+++ b/src/utilities/graphql/operations.ts
@@ -1,21 +1,21 @@
-import type { DocumentNode } from '../../core/index.js';
-import { getOperationDefinition } from './getFromAST.js';
+import type { DocumentNode } from "../../core/index.js";
+import { getOperationDefinition } from "./getFromAST.js";
 
 function isOperation(
   document: DocumentNode,
-  operation: 'query' | 'mutation' | 'subscription'
+  operation: "query" | "mutation" | "subscription"
 ) {
   return getOperationDefinition(document)?.operation === operation;
 }
 
 export function isMutationOperation(document: DocumentNode) {
-  return isOperation(document, 'mutation');
+  return isOperation(document, "mutation");
 }
 
 export function isQueryOperation(document: DocumentNode) {
-  return isOperation(document, 'query');
+  return isOperation(document, "query");
 }
 
 export function isSubscriptionOperation(document: DocumentNode) {
-  return isOperation(document, 'subscription');
+  return isOperation(document, "subscription");
 }
diff --git a/src/utilities/graphql/print.ts b/src/utilities/graphql/print.ts
index 6c05355b56c..5fb1cb68599 100644
--- a/src/utilities/graphql/print.ts
+++ b/src/utilities/graphql/print.ts
@@ -1,5 +1,5 @@
-import { print as origPrint } from 'graphql';
-import { canUseWeakMap } from '../common/canUse.js';
+import { print as origPrint } from "graphql";
+import { canUseWeakMap } from "../common/canUse.js";
 
 const printCache = canUseWeakMap ? new WeakMap() : undefined;
 export const print: typeof origPrint = (ast) => {
diff --git a/src/utilities/promises/decoration.ts b/src/utilities/promises/decoration.ts
index 2b32e2e6623..9022aeed23c 100644
--- a/src/utilities/promises/decoration.ts
+++ b/src/utilities/promises/decoration.ts
@@ -1,14 +1,14 @@
 export interface PendingPromise<TValue> extends Promise<TValue> {
-  status: 'pending';
+  status: "pending";
 }
 
 export interface FulfilledPromise<TValue> extends Promise<TValue> {
-  status: 'fulfilled';
+  status: "fulfilled";
   value: TValue;
 }
 
 export interface RejectedPromise<TValue> extends Promise<TValue> {
-  status: 'rejected';
+  status: "rejected";
   reason: unknown;
 }
 
@@ -20,7 +20,7 @@ export type PromiseWithState<TValue> =
 export function createFulfilledPromise<TValue>(value: TValue) {
   const promise = Promise.resolve(value) as FulfilledPromise<TValue>;
 
-  promise.status = 'fulfilled';
+  promise.status = "fulfilled";
   promise.value = value;
 
   return promise;
@@ -32,7 +32,7 @@ export function createRejectedPromise<TValue = unknown>(reason: unknown) {
   // prevent potential edge cases leaking unhandled error rejections
   promise.catch(() => {});
 
-  promise.status = 'rejected';
+  promise.status = "rejected";
   promise.reason = reason;
 
   return promise;
@@ -41,7 +41,7 @@ export function createRejectedPromise<TValue = unknown>(reason: unknown) {
 export function isStatefulPromise<TValue>(
   promise: Promise<TValue>
 ): promise is PromiseWithState<TValue> {
-  return 'status' in promise;
+  return "status" in promise;
 }
 
 export function wrapPromiseWithState<TValue>(
@@ -52,24 +52,24 @@ export function wrapPromiseWithState<TValue>(
   }
 
   const pendingPromise = promise as PendingPromise<TValue>;
-  pendingPromise.status = 'pending';
+  pendingPromise.status = "pending";
 
   pendingPromise.then(
     (value) => {
-      if (pendingPromise.status === 'pending') {
+      if (pendingPromise.status === "pending") {
         const fulfilledPromise =
           pendingPromise as unknown as FulfilledPromise<TValue>;
 
-        fulfilledPromise.status = 'fulfilled';
+        fulfilledPromise.status = "fulfilled";
         fulfilledPromise.value = value;
       }
     },
     (reason: unknown) => {
-      if (pendingPromise.status === 'pending') {
+      if (pendingPromise.status === "pending") {
         const rejectedPromise =
           pendingPromise as unknown as RejectedPromise<TValue>;
 
-        rejectedPromise.status = 'rejected';
+        rejectedPromise.status = "rejected";
         rejectedPromise.reason = reason;
       }
     }
diff --git a/src/utilities/types/DeepOmit.ts b/src/utilities/types/DeepOmit.ts
index 884ce339380..3e5b564ee09 100644
--- a/src/utilities/types/DeepOmit.ts
+++ b/src/utilities/types/DeepOmit.ts
@@ -1,4 +1,4 @@
-import type { Primitive } from './Primitive.js';
+import type { Primitive } from "./Primitive.js";
 
 // DeepOmit primitives include functions since these are unmodified.
 type DeepOmitPrimitive = Primitive | Function;
diff --git a/src/utilities/types/DeepPartial.ts b/src/utilities/types/DeepPartial.ts
index 21ba7f8a6af..6b9d501462d 100644
--- a/src/utilities/types/DeepPartial.ts
+++ b/src/utilities/types/DeepPartial.ts
@@ -14,7 +14,7 @@
  *
  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
-import type { Primitive } from './Primitive.js';
+import type { Primitive } from "./Primitive.js";
 
 type DeepPartialPrimitive = Primitive | Date | RegExp;
 
diff --git a/tsconfig.json b/tsconfig.json
index 119f86f7c13..f8953b95808 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -20,7 +20,5 @@
     "jsx": "react"
   },
   "include": ["src/**/*.ts"],
-  "exclude": [
-    "src/**/__tests__/**/*"
-  ]
+  "exclude": ["src/**/__tests__/**/*"]
 }