Merge branch 'main' into release-3.9

.circleci/config.yml

@@ -15,7 +15,7 @@ jobs:
 
   Lint:
     docker:
-      - image: cimg/node:21.1.0
+      - image: cimg/node:21.2.0
     steps:
       - checkout
       - run: npm version
@@ -24,15 +24,15 @@ jobs:
 
   Formatting:
     docker:
-      - image: cimg/node:21.1.0
+      - image: cimg/node:21.2.0
     steps:
       - checkout
       - run: npm ci
       - run: npm run check:format
 
   Tests:
     docker:
-      - image: cimg/node:21.1.0
+      - image: cimg/node:21.2.0
     steps:
       - checkout
       - run: npm run ci:precheck
@@ -50,7 +50,7 @@ jobs:
 
   BuildTarball:
     docker:
-      - image: cimg/node:21.1.0
+      - image: cimg/node:21.2.0
     steps:
       - checkout
       - run: npm run ci:precheck
@@ -67,7 +67,7 @@ jobs:
       framework:
         type: string
     docker:
-      - image: cimg/node:21.1.0
+      - image: cimg/node:21.2.0
     steps:
       - checkout
       - attach_workspace:

.github/workflows/lock.yml

@@ -16,7 +16,7 @@ jobs:
     if: github.repository == 'apollographql/apollo-client'
     runs-on: ubuntu-latest
     steps:
-      - uses: dessant/lock-threads@v4
+      - uses: dessant/lock-threads@v5
         with:
           github-token: ${{ github.token }}
           log-output: true

ROADMAP.md

@@ -1,6 +1,6 @@
 # 🔮 Apollo Client Roadmap
 
-**Last updated: 2023-11-07**
+**Last updated: 2023-11-21**
 
 For up to date release notes, refer to the project's [Changelog](https://github.com/apollographql/apollo-client/blob/main/CHANGELOG.md).
 
@@ -22,8 +22,8 @@ Tentative beta date: Dec 1, 2023
 Features we plan to tackle:
 
 - Ability to preload a query outside of a React component that can be used with `useReadQuery` to suspend while loading
-- Introduce a new `useInteractiveQuery`/`useLazyBackgroundQuery` hook (name TBD)
-- Improved testing utilities
+- Introduce a new `useLoadableQuery` hook
+- `<MockedProvider />` improvements
 - Optimizing memory usage in SSR scenarios
 
 > NOTE: These are subject to change and are not guaranteed to be part of 3.9 at the time of this writing.

docs/source/data/mutations.mdx

@@ -211,6 +211,8 @@ const [addTodo, { data, loading, error }] = useMutation(ADD_TODO, {
 });
 ```
 
+> You can only refetch _active_ queries. Active queries are those used by components on the current page. If the data you want to update is not fetched by a component on the current page, it's best to [update your cache directly](#updating-the-cache-directly).
+
 Each element in the `refetchQueries` array is one of the following:
 
 * A `DocumentNode` object parsed with the `gql` function

docs/source/data/queries.mdx

@@ -155,7 +155,7 @@ function DogPhoto({ breed }) {
   return (
     <div>
       <img src={data.dog.displayImage} style={{ height: 100, width: 100 }} />
-      <button onClick={() => refetch({ breed: 'new_dog_breed' })}>
+      <button onClick={() => refetch()}>
         Refetch new breed!
       </button>
     </div>
@@ -211,7 +211,7 @@ function DogPhoto({ breed }) {
   return (
     <div>
       <img src={data.dog.displayImage} style={{ height: 100, width: 100 }} />
-      <button onClick={() => refetch({ breed: 'new_dog_breed' })}>
+      <button onClick={() => refetch()}>
         Refetch!
       </button>
     </div>

package.json

@@ -92,7 +92,7 @@
     "@graphql-typed-document-node/core": "^3.1.1",
     "@wry/context": "^0.7.3",
     "@wry/equality": "^0.5.6",
-    "@wry/trie": "^0.4.3",
+    "@wry/trie": "^0.5.0",
     "graphql-tag": "^2.12.6",
     "hoist-non-react-statics": "^3.3.2",
     "optimism": "^0.17.5",

src/react/components/__tests__/client/Query.test.tsx

@@ -1491,7 +1491,7 @@ describe("Query component", () => {
       return (
         <AllPeopleQuery2 query={query} notifyOnNetworkStatusChange={true}>
           {(r: any) => {
-            ProfiledContainer.updateSnapshot(r);
+            ProfiledContainer.replaceSnapshot(r);
             return null;
           }}
         </AllPeopleQuery2>

src/react/hoc/__tests__/queries/lifecycle.test.tsx

@@ -52,7 +52,7 @@ describe("[queries] lifecycle", () => {
     })(
       class extends React.Component<ChildProps<Vars, Data, Vars>> {
         render() {
-          ProfiledApp.updateSnapshot(this.props.data!);
+          ProfiledApp.replaceSnapshot(this.props.data!);
           return null;
         }
       }

src/react/hoc/__tests__/queries/loading.test.tsx

@@ -407,7 +407,7 @@ describe("[queries] loading", () => {
     })(
       class extends React.Component<ChildProps<{}, Data>> {
         render() {
-          ProfiledContainer.updateSnapshot(this.props.data!);
+          ProfiledContainer.replaceSnapshot(this.props.data!);
           return null;
         }
       }

src/react/hooks/__tests__/useBackgroundQuery.test.tsx

@@ -335,7 +335,7 @@ function renderVariablesIntegrationTest({
   const ProfiledApp = profile<Renders, ComponentProps<typeof App>>({
     Component: App,
     snapshotDOM: true,
-    onRender: ({ updateSnapshot }) => updateSnapshot(cloneDeep(renders)),
+    onRender: ({ replaceSnapshot }) => replaceSnapshot(cloneDeep(renders)),
   });
 
   const { ...rest } = render(
@@ -434,9 +434,8 @@ function renderPaginatedIntegrationTest({
   }
 
   function SuspenseFallback() {
-    ProfiledApp.updateSnapshot((snapshot) => ({
-      ...snapshot,
-      suspenseCount: snapshot.suspenseCount + 1,
+    ProfiledApp.mergeSnapshot(({ suspenseCount }) => ({
+      suspenseCount: suspenseCount + 1,
     }));
     return <div>loading</div>;
   }
@@ -450,9 +449,8 @@ function renderPaginatedIntegrationTest({
   }) {
     const { data, error } = useReadQuery(queryRef);
     // count renders in the child component
-    ProfiledApp.updateSnapshot((snapshot) => ({
-      ...snapshot,
-      count: snapshot.count + 1,
+    ProfiledApp.mergeSnapshot(({ count }) => ({
+      count: count + 1,
     }));
     return (
       <div>
@@ -504,10 +502,9 @@ function renderPaginatedIntegrationTest({
         <ErrorBoundary
           fallback={<div>Error</div>}
           onError={(error) => {
-            ProfiledApp.updateSnapshot((snapshot) => ({
-              ...snapshot,
-              errorCount: snapshot.errorCount + 1,
-              errors: snapshot.errors.concat(error),
+            ProfiledApp.mergeSnapshot(({ errorCount, errors }) => ({
+              errorCount: errorCount + 1,
+              errors: errors.concat(error),
             }));
           }}
         >

src/react/hooks/__tests__/useFragment.test.tsx

@@ -1476,7 +1476,7 @@ describe("has the same timing as `useQuery`", () => {
         from: initialItem,
       });
 
-      ProfiledComponent.updateSnapshot({ queryData, fragmentData });
+      ProfiledComponent.replaceSnapshot({ queryData, fragmentData });
 
       return complete ? JSON.stringify(fragmentData) : "loading";
     }

src/react/hooks/__tests__/useLazyQuery.test.tsx

@@ -1115,7 +1115,7 @@ describe("useLazyQuery Hook", () => {
       ),
     });
 
-    const [execute] = ProfiledHook.getCurrentSnapshot();
+    const [execute] = await ProfiledHook.peekSnapshot();
 
     {
       const [, result] = await ProfiledHook.takeSnapshot();

src/react/hooks/__tests__/useSuspenseQuery.test.tsx

@@ -357,7 +357,7 @@ describe("useSuspenseQuery", () => {
 
     const Component = () => {
       const result = useSuspenseQuery(query);
-      ProfiledApp.updateSnapshot(result);
+      ProfiledApp.replaceSnapshot(result);
       return <div>{result.data.greeting}</div>;
     };