Merge branch 'main' into 11305-update-doc-replace-to-vite

.circleci/config.yml

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

.github/CODEOWNERS

@@ -1 +1,3 @@
+* @apollographql/client-typescript
+
 /docs/ @apollographql/docs

.github/ISSUE_TEMPLATE/bug.yml

@@ -22,3 +22,10 @@ body:
       description: Please provide any additional non-trivial steps required to reproduce the issue.
     validations:
       required: false
+  - type: input
+    attributes:
+      label: "`@apollo/client` version"
+      description: "What version of Apollo Client are you running?"
+      placeholder: "ex: 3.8.10"
+    validations:
+      required: true

.github/workflows/api-extractor.yml

@@ -11,10 +11,10 @@ jobs:
       - name: Checkout repo
         uses: actions/checkout@v4
 
-      - name: Setup Node.js 18.x
+      - name: Setup Node.js 20.x
         uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 20.x
 
       - name: Install dependencies (with cache)
         uses: bahmutov/npm-install@v1

.github/workflows/arethetypeswrong.yml

@@ -14,10 +14,10 @@ jobs:
     steps:
       - name: Checkout repo
         uses: actions/checkout@v4
-      - name: Setup Node.js 18.x
+      - name: Setup Node.js 20.x
         uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 20.x
       - name: Install dependencies (with cache)
         uses: bahmutov/npm-install@v1
 

.github/workflows/cleanup-checks.yml

@@ -30,10 +30,10 @@ jobs:
       - name: Checkout repo
         uses: actions/checkout@v4
 
-      - name: Setup Node.js 18.x
+      - name: Setup Node.js 20.x
         uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 20.x
 
       - name: Install dependencies (with cache)
         uses: bahmutov/npm-install@v1

.github/workflows/compare-build-output.yml

@@ -17,10 +17,10 @@ jobs:
         with:
           # Fetch entire git history so we have the parent commit to compare against
           fetch-depth: 0
-      - name: Setup Node.js 18.x
+      - name: Setup Node.js 20.x
         uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 20.x
       - name: Install dependencies (with cache)
         uses: bahmutov/npm-install@v1
 

.github/workflows/exit-prerelease.yml

@@ -27,10 +27,10 @@ jobs:
           # with the correct commits
           fetch-depth: 0
 
-      - name: Setup Node.js 18.x
+      - name: Setup Node.js 20.x
         uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 20.x
 
       - name: Get latest tagged version
         id: previoustag

.github/workflows/issue-close-user-survey.yml

@@ -0,0 +1,27 @@
+name: Issue Close User Survey
+
+on:
+  issues:
+    types: [closed]
+
+jobs:
+  user-survey-comment:
+    permissions:
+      issues: write
+    runs-on: ubuntu-latest
+    if: github.repository == 'apollographql/apollo-client'
+    steps:
+      - run: |
+          if [ "$STATE_REASON" == "completed" ] || [ "$SENDER" != "github-actions" ]; then
+            gh issue comment "$NUMBER" --body "$BODY"
+          else
+            echo "Issue was closed as not planned, skipping comment."
+          fi
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GH_REPO: ${{ github.repository }}
+          NUMBER: ${{ github.event.issue.number }}
+          STATE_REASON: ${{ github.event.issue.state_reason }}
+          SENDER: ${{ github.event.sender.login }}
+          BODY: >
+            Do you have any feedback for the maintainers? Please tell us by taking a [one-minute survey](https://docs.google.com/forms/d/e/1FAIpQLSczNDXfJne3ZUOXjk9Ursm9JYvhTh1_nFTDfdq3XBAFWCzplQ/viewform?usp=pp_url&entry.1170701325=Apollo+Client&entry.204965213=GitHub+Issue). Your responses will help us understand Apollo Client usage and allow us to serve you better.

.github/workflows/prerelease.yml

@@ -38,17 +38,17 @@ jobs:
         env:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
 
-      - name: Setup Node.js 18.x
+      - name: Setup Node.js 20.x
         uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 20.x
 
       - name: Install dependencies with cache
         uses: bahmutov/npm-install@v1
 
       - name: Check for pre.json file existence
         id: check_files
-        uses: andstor/file-existence-action@v2.0.0
+        uses: andstor/file-existence-action@v3.0.0
         with:
           files: ".changeset/pre.json"
 
@@ -85,7 +85,7 @@ jobs:
       - name: Send a Slack notification on publish
         if: steps.changesets.outcome == 'success'
         id: slack
-        uses: slackapi/slack-github-action@v1.24.0
+        uses: slackapi/slack-github-action@v1.25.0
         with:
           # Slack channel id, channel name, or user id to post message
           # See also: https://api.slack.com/methods/chat.postMessage#channels

.github/workflows/release.yml

@@ -30,7 +30,7 @@ jobs:
 
       - name: Check for pre.json file existence
         id: check_files
-        uses: andstor/file-existence-action@v2.0.0
+        uses: andstor/file-existence-action@v3.0.0
         with:
           files: ".changeset/pre.json"
 
@@ -43,10 +43,10 @@ jobs:
         env:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
 
-      - name: Setup Node.js 18.x
+      - name: Setup Node.js 20.x
         uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 20.x
 
       - name: Install dependencies (with cache)
         uses: bahmutov/npm-install@v1
@@ -65,7 +65,7 @@ jobs:
       - name: Send a Slack notification on publish
         if: steps.changesets.outcome == 'success' && steps.changesets.outputs.published == 'true'
         id: slack
-        uses: slackapi/slack-github-action@v1.24.0
+        uses: slackapi/slack-github-action@v1.25.0
         with:
           # Slack channel id, channel name, or user id to post message
           # See also: https://api.slack.com/methods/chat.postMessage#channels

.github/workflows/size-limit.yml

@@ -11,10 +11,10 @@ jobs:
     steps:
       - name: Checkout repo
         uses: actions/checkout@v4
-      - name: Setup Node.js 18.x
+      - name: Setup Node.js 20.x
         uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 20.x
       - name: Install dependencies (with cache)
         uses: bahmutov/npm-install@v1
       - name: Run size-limit

.github/workflows/snapshot-release.yml

@@ -56,17 +56,17 @@ jobs:
         env:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
 
-      - name: Setup Node.js 18.x
+      - name: Setup Node.js 20.x
         uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 20.x
 
       - name: Install dependencies (with cache)
         uses: bahmutov/npm-install@v1
 
       - name: Check for pre.json file existence
         id: check_files
-        uses: andstor/file-existence-action@v2.0.0
+        uses: andstor/file-existence-action@v3.0.0
         with:
           files: ".changeset/pre.json"
 
@@ -80,7 +80,7 @@ jobs:
 
       - name: Add comment if no new changesets exist
         if: ${{ steps.added-files.outputs.changesets == '' }}
-        uses: peter-evans/create-or-update-comment@v3.1.0
+        uses: peter-evans/create-or-update-comment@v4.0.0
         with:
           issue-number: ${{ github.event.issue.number }}
           body: |
@@ -106,7 +106,7 @@ jobs:
 
       - name: Create comment
         if: ${{ steps.added-files.outputs.changesets != '' }}
-        uses: peter-evans/create-or-update-comment@v3.1.0
+        uses: peter-evans/create-or-update-comment@v4.0.0
         with:
           issue-number: ${{ github.event.issue.number }}
           body: |

.size-limits.json

@@ -1,4 +1,4 @@
 {
   "dist/apollo-client.min.cjs": 37930,
-  "import { ApolloClient, InMemoryCache, HttpLink } from \"dist/index.js\" (production)": 31972
+  "import { ApolloClient, InMemoryCache, HttpLink } from \"dist/index.js\" (production)": 31974
 }

README.md

@@ -11,6 +11,10 @@
 
 Apollo Client is a fully-featured caching GraphQL client with integrations for React, Angular, and more. It allows you to easily build UI components that fetch data via GraphQL.
 
+| ☑️  Apollo Client User Survey |
+| :----- |
+| What do you like best about Apollo Client? What needs to be improved? Please tell us by taking a [one-minute survey](https://docs.google.com/forms/d/e/1FAIpQLSczNDXfJne3ZUOXjk9Ursm9JYvhTh1_nFTDfdq3XBAFWCzplQ/viewform?usp=pp_url&entry.1170701325=Apollo+Client&entry.204965213=Readme). Your responses will help us understand Apollo Client usage and allow us to serve you better. |
+
 ## Documentation
 
 All Apollo Client documentation, including React integration articles and helpful recipes, can be found at: <br/>

ROADMAP.md

@@ -1,6 +1,6 @@
 # 🔮 Apollo Client Roadmap
 
-**Last updated: 2024-01-16**
+**Last updated: 2024-01-29**
 
 For up to date release notes, refer to the project's [Changelog](https://github.com/apollographql/apollo-client/blob/main/CHANGELOG.md).
 
@@ -15,9 +15,9 @@ For up to date release notes, refer to the project's [Changelog](https://github.
 
 ## [3.9.0](https://github.com/apollographql/apollo-client/milestone/32)
 
-_Currently in beta phase_
+_Currently in RC phase_
 
-  Tentative rc date: Jan 17, 2024
+  Tentative date: Jan 31, 2024
 
 Features include:
 

docs/source/api/cache/InMemoryCache.mdx

@@ -1092,7 +1092,7 @@ The full key for the field used internally, including serialized key arguments.
 </td>
 <td>
 
-A helper function for reading other fields within the current object.
+A helper function for reading other fields on the object passed to the modifier function as the first parameter.
 </td>
 </tr>
 

docs/source/caching/cache-interaction.mdx

@@ -12,7 +12,9 @@ Apollo Client supports multiple strategies for interacting with cached data:
 | [Using GraphQL fragments](#using-graphql-fragments) | `readFragment` / `writeFragment` / `updateFragment` / `useFragment` | Access the fields of any cached object without composing an entire query to reach that object.  |
 | [Directly modifying cached fields](#using-cachemodify) | `cache.modify` | Manipulate cached data without using GraphQL at all. |
 
- You can use whichever combination of strategies and methods are most helpful for your use case.
+You can use whichever combination of strategies and methods are most helpful for your use case.
+
+Bear in mind the difference between fields that contain references to other objects in the cache and fields that contain literal values.  References are objects that contain a `__ref` field—see the [example](./overview/#example) in the caching overview.  Modifying a reference will not change the values contained in the object to which the reference points.  So avoid updating an object from something like `{__ref: '5'}` to `{__ref: '5', completed: true}`.
 
 > All code samples below assume that you have initialized an instance of `ApolloClient` and that you have imported the `gql` function from `@apollo/client`. If you haven't, [get started](../get-started).
 >
@@ -338,7 +340,7 @@ cache.modify({
 
 When you define a modifier function for a field that contains a scalar, an enum, or a list of these base types, the modifier function is passed the exact existing value for the field. For example, if you define a modifier function for an object's `quantity` field that has current value `5`, your modifier function is passed the value `5`.
 
-**However**, when you define a modifier function for a field that contains an object type or a list of objects, those objects are represented as **references**. Each reference points to its corresponding object in the cache by its cache ID. If you return a _different_ reference in your modifier function, you change _which_ other cached object is contained in this field. You _don't_ modify the original cached object's data.
+**However**, when you define a modifier function for a field that contains an object type or a list of objects, those objects are represented as **references**. Each reference points to its corresponding object in the cache by its cache ID. If you return a _different_ reference in your modifier function, you change _which_ other cached object is contained in this field. You _don't_ modify the original cached object's data. Additionally, modifying a field (or adding a new one) in a reference will only take effect for the location you're modifying.
 
 ### Modifier function utilities
 

docs/source/data/error-handling.mdx

@@ -154,7 +154,7 @@ const errorLink = onError(({ graphQLErrors, networkError }) => {
         `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
       )
     );
-  if (networkError) console.log(`[Network error]: ${networkError}`);
+  if (networkError) console.error(`[Network error]: ${networkError}`);
 });
 
 const httpLink = new HttpLink({ uri: 'http://localhost:4000/graphql' })

docs/source/integrations/react-native.md

@@ -54,15 +54,16 @@ A community plugin called [React Native Apollo devtools](https://github.com/razo
    2. Go to add plugin and search for `react-native-apollo-devtools` and install it
    3. Add `react-native-flipper` and `react-native-apollo-devtools-client` as dev dependecy to react native app.
    4. Initialize the plugin with flipper on client side
-      
-      ```  
+
+      ```ts
         import { apolloDevToolsInit } from 'react-native-apollo-devtools-client';
+
         const client = new ApolloClient({
-            // ...
-        })
-        
-        if(__DEV__){
-            apolloDevToolsInit(client);
+          // ...
+        });
+
+        if (__DEV__) {
+          apolloDevToolsInit(client);
         }
       ```