Create a new pull request by comparing changes across two branches

.api-reports/api-report-react.md

@@ -2145,7 +2145,7 @@ export function useLoadableQuery<TData = unknown, TVariables extends OperationVa
 export type UseLoadableQueryResult<TData = unknown, TVariables extends OperationVariables = OperationVariables> = [
 loadQuery: LoadQueryFunction<TVariables>,
 queryRef: QueryRef<TData, TVariables> | null,
-    {
+handlers: {
     fetchMore: FetchMoreFunction<TData, TVariables>;
     refetch: RefetchFunction<TData, TVariables>;
     reset: ResetFunction;

.api-reports/api-report-react_hooks.md

@@ -1973,7 +1973,7 @@ export function useLoadableQuery<TData = unknown, TVariables extends OperationVa
 export type UseLoadableQueryResult<TData = unknown, TVariables extends OperationVariables = OperationVariables> = [
 loadQuery: LoadQueryFunction<TVariables>,
 queryRef: QueryRef<TData, TVariables> | null,
-    {
+handlers: {
     fetchMore: FetchMoreFunction<TData, TVariables>;
     refetch: RefetchFunction<TData, TVariables>;
     reset: ResetFunction;

.api-reports/api-report.md

@@ -2808,7 +2808,7 @@ export function useLoadableQuery<TData = unknown, TVariables extends OperationVa
 export type UseLoadableQueryResult<TData = unknown, TVariables extends OperationVariables = OperationVariables> = [
 loadQuery: LoadQueryFunction<TVariables>,
 queryRef: QueryRef<TData, TVariables> | null,
-    {
+handlers: {
     fetchMore: FetchMoreFunction<TData, TVariables>;
     refetch: RefetchFunction<TData, TVariables>;
     reset: ResetFunction;

.circleci/config.yml

@@ -33,16 +33,20 @@ jobs:
   Tests:
     docker:
       - image: cimg/node:22.2.0
+    parameters:
+      project:
+        type: string
     steps:
       - checkout
       - run: npm run ci:precheck
       - run: npm version
       - run: npm ci
+      - run: if test "<< parameters.project >>" = "Core Tests"; then npm run test:memory; fi
       - run:
           name: Jest suite with coverage
-          command: npm run test:ci
+          command: npm run test:ci -- --selectProjects "<< parameters.project >>"
           environment:
-            JEST_JUNIT_OUTPUT_FILE: "reports/junit/js-test-results.xml"
+            JEST_JUNIT_OUTPUT_FILE: "reports/junit/js-test-results-<< parameters.project >>.xml"
       - store_test_results:
           path: reports/junit
       - store_artifacts:
@@ -69,7 +73,7 @@ jobs:
       react:
         type: string
     docker:
-      - image: cimg/node:22.2.0
+      - image: cimg/node:22.2.0-browsers
     steps:
       - checkout
       - attach_workspace:
@@ -124,7 +128,11 @@ workflows:
   Build and Test:
     jobs:
       # - Filesize
-      - Tests
+      - Tests:
+          matrix:
+            parameters:
+              project:
+                ["Core Tests", "ReactDOM 17", "ReactDOM 18", "ReactDOM 19"]
       - Formatting
       - Lint
       - BuildTarball
@@ -165,7 +173,7 @@ workflows:
                 - "@types/[email protected] @types/[email protected]"
                 - "@types/react@17 @types/react-dom@17"
                 - "@types/react@18 @types/react-dom@18"
-                - "@types/react@npm:[email protected]alpha.3 @types/react-dom@npm:[email protected]alpha.3"
+                - "@types/react@npm:[email protected]rc.0 @types/react-dom@npm:[email protected]rc.0"
                 - "typescript@next"
   security-scans:
     jobs:

.eslintrc

@@ -23,10 +23,13 @@
     {
       "files": ["**/*.ts", "**/*.tsx"],
       "excludedFiles": ["**/__tests__/**/*.*", "*.d.ts"],
+      "extends": ["plugin:react-hooks/recommended"],
       "parserOptions": {
         "project": "./tsconfig.json"
       },
+      "plugins": ["eslint-plugin-react-compiler"],
       "rules": {
+        "react-compiler/react-compiler": "error",
         "@typescript-eslint/consistent-type-imports": [
           "error",
           {

.size-limits.json

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

CHANGELOG.md

@@ -1,5 +1,30 @@
 # @apollo/client
 
+## 3.10.5
+
+### Patch Changes
+
+- [#11888](https://github.com/apollographql/apollo-client/pull/11888) [`7fb7939`](https://github.com/apollographql/apollo-client/commit/7fb7939edb7ca8f4273b75554f96ea9936731458) Thanks [@phryneas](https://github.com/phryneas)! - switch `useRenderGuard` to an approach not accessing React's internals
+
+- [#11511](https://github.com/apollographql/apollo-client/pull/11511) [`6536369`](https://github.com/apollographql/apollo-client/commit/6536369cf213469d20d15b779c344268d70fecd5) Thanks [@phryneas](https://github.com/phryneas)! - `useLoadableQuery`: ensure that `loadQuery` is updated if the ApolloClient instance changes
+
+- [#11860](https://github.com/apollographql/apollo-client/pull/11860) [`8740f19`](https://github.com/apollographql/apollo-client/commit/8740f198805a99e01136617c4055d611b92cc231) Thanks [@alessbell](https://github.com/alessbell)! - Fixes [#11849](https://github.com/apollographql/apollo-client/issues/11849) by reevaluating `window.fetch` each time `BatchHttpLink` uses it, if not configured via `options.fetch`. Takes the same approach as PR [#8603](https://github.com/apollographql/apollo-client/pull/8603) which fixed the same issue in `HttpLink`.
+
+- [#11852](https://github.com/apollographql/apollo-client/pull/11852) [`d502a69`](https://github.com/apollographql/apollo-client/commit/d502a69654d8ffa31e09467da028304a934a9874) Thanks [@phryneas](https://github.com/phryneas)! - Fix a bug where calling the `useMutation` `reset` function would point the hook to an outdated `client` reference.
+
+- [#11329](https://github.com/apollographql/apollo-client/pull/11329) [`3d164ea`](https://github.com/apollographql/apollo-client/commit/3d164ea16c17d271f6fa9e5ad8f013623eec23a0) Thanks [@PaLy](https://github.com/PaLy)! - Fix graphQLErrors in Error Link if networkError.result is an empty string
+
+- [#11852](https://github.com/apollographql/apollo-client/pull/11852) [`d502a69`](https://github.com/apollographql/apollo-client/commit/d502a69654d8ffa31e09467da028304a934a9874) Thanks [@phryneas](https://github.com/phryneas)! - Prevent writing to a ref in render in `useMutation`.
+  As a result, you might encounter problems in the future if you call the mutation's `execute` function during render. Please note that this was never supported behavior, and we strongly recommend against it.
+
+- [#11848](https://github.com/apollographql/apollo-client/pull/11848) [`ad63924`](https://github.com/apollographql/apollo-client/commit/ad6392424ddbeb6f91b165c806251490e1cdd69e) Thanks [@phryneas](https://github.com/phryneas)! - Ensure covariant behavior: `MockedResponse<X,Y>` should be assignable to `MockedResponse`
+
+- [#11851](https://github.com/apollographql/apollo-client/pull/11851) [`45c47be`](https://github.com/apollographql/apollo-client/commit/45c47be26d4e020cfcff359a5af19ccfc39b930e) Thanks [@phryneas](https://github.com/phryneas)! - Avoid usage of useRef in useInternalState to prevent ref access in render.
+
+- [#11877](https://github.com/apollographql/apollo-client/pull/11877) [`634d91a`](https://github.com/apollographql/apollo-client/commit/634d91aeb10ab308b05d5ffb918678806046af09) Thanks [@phryneas](https://github.com/phryneas)! - Add missing name to tuple member (fix TS5084)
+
+- [#11851](https://github.com/apollographql/apollo-client/pull/11851) [`45c47be`](https://github.com/apollographql/apollo-client/commit/45c47be26d4e020cfcff359a5af19ccfc39b930e) Thanks [@phryneas](https://github.com/phryneas)! - Fix a bug where `useLazyQuery` would not pick up a client change.
+
 ## 3.10.4
 
 ### Patch Changes

ROADMAP.md

@@ -1,6 +1,6 @@
 # 🔮 Apollo Client Roadmap
 
-**Last updated: 2024-04-29**
+**Last updated: 2024-06-03**
 
 For up to date release notes, refer to the project's [Changelog](https://github.com/apollographql/apollo-client/blob/main/CHANGELOG.md).
 
@@ -16,11 +16,13 @@ For up to date release notes, refer to the project's [Changelog](https://github.
 ## [3.11.0](https://github.com/apollographql/apollo-client/milestone/40) - July 9th, 2024
 _Release candidate - July 2nd, 2024_
 
+- Rewriting `useQuery` and `useSubscription` for better React Compiler support
+
 ## Upcoming features
 
 - Data masking
 - Introduce a suspenseful `useFragment` that will suspend when the data is not yet loaded
-- leaner client (under alternate entry point)
+- Leaner client (under alternate entry point)
 - Better types for `useQuery`/`useMutation`/`useSubscription`
 
 ## 4.0

config/jest.config.js

@@ -29,6 +29,16 @@ const defaults = {
 const ignoreTSFiles = ".ts$";
 const ignoreTSXFiles = ".tsx$";
 
+const react19TestFileIgnoreList = [
+  ignoreTSFiles,
+  // The HOCs and Render Prop Components have been deprecated since March 2020,
+  // and to test them we would need to rewrite a lot of our test suites.
+  // We will not support them any more for React 19.
+  // They will probably work, but we make no more guarantees.
+  "src/react/hoc/.*",
+  "src/react/components/.*",
+];
+
 const react17TestFileIgnoreList = [
   ignoreTSFiles,
   // We only support Suspense with React 18, so don't test suspense hooks with
@@ -49,6 +59,17 @@ const tsStandardConfig = {
 
 // For both React (Jest) "projects", ignore core tests (.ts files) as they
 // do not import React, to avoid running them twice.
+const standardReact19Config = {
+  ...defaults,
+  displayName: "ReactDOM 19",
+  testPathIgnorePatterns: react19TestFileIgnoreList,
+  moduleNameMapper: {
+    "^react$": "react-19",
+    "^react-dom$": "react-dom-19",
+    "^react-dom/(.*)$": "react-dom-19/$1",
+  },
+};
+
 const standardReact18Config = {
   ...defaults,
   displayName: "ReactDOM 18",
@@ -69,5 +90,10 @@ const standardReact17Config = {
 };
 
 module.exports = {
-  projects: [tsStandardConfig, standardReact17Config, standardReact18Config],
+  projects: [
+    tsStandardConfig,
+    standardReact17Config,
+    standardReact18Config,
+    standardReact19Config,
+  ],
 };

docs/source/caching/advanced-topics.mdx

@@ -116,7 +116,7 @@ function Foo (){
 export default Foo;
 ```
 
-## TypePolicy inheritence
+## TypePolicy inheritance
 
 JavaScript developers will be familiar with the idea of [inheritance](https://en.m.wikipedia.org/wiki/Inheritance_(object-oriented_programming)) from the `extends` clause of `class` declarations, or possibly from dealing with prototype chains created by `Object.create`.
 

docs/source/performance/babel.md

@@ -1,14 +1,15 @@
 ---
-title: Compiling queries with Babel
+title: Compiling queries with Transpilers
 ---
 
 If you prefer co-locating your GraphQL queries in your Javascript files, you typically use the [graphql-tag](https://github.com/apollographql/graphql-tag) library to write them. That requires to process the query strings into a GraphQL AST, which will add to the startup time of your application, especially if you have many queries.
 
-To avoid this runtime overhead, you can precompile your queries created with `graphql-tag` using [Babel](http://babeljs.io/). Here are two ways you can do this:
+To avoid this runtime overhead, you can precompile your queries created with `graphql-tag` using transpilers like [Babel](http://babeljs.io/) and [SWC](https://swc.rs). Here are possible ways you can do this:
 
 1. Using [babel-plugin-graphql-tag](#using-babel-plugin-graphql-tag)
-2. Using [graphql-tag.macro](#using-graphql-tagmacro)
-1. Using [ts-transform-graphql-tag](#using-ts-transform-graphql-tag) for TypeScript
+2. Using [graphql-tag-swc-plugin](#using-graphql-tag-swc-plugin)
+3. Using [graphql-tag.macro](#using-graphql-tagmacro)
+4. Using [ts-transform-graphql-tag](#using-ts-transform-graphql-tag) for TypeScript
 
 If you prefer to keep your GraphQL code in separate files (`.graphql` or `.gql`) you can use [babel-plugin-import-graphql](https://github.com/detrohutt/babel-plugin-import-graphql). This plugin still uses `graphql-tag` under the hood, but transparently. You simply `import` your operations/fragments as if each were an export from your GraphQL file. This carries the same precompilation benefits as the above approaches.
 
@@ -38,6 +39,41 @@ Then add the plugin in your `.babelrc` configuration file:
 
 And that's it! All the usages of `import gql from 'graphql-tag'` will be removed, and the calls to `gql` will be replaced by the compiled version.
 
+## Using graphql-tag-swc-plugin
+
+This plugin is the same as [babel-plugin-graphql-tag](#using-babel-plugin-graphql-tag) but for [swc](https://swc.rs/), a fast rust based babel alternative.
+
+Install the plugin in your dev dependencies:
+
+```
+# with npm
+npm install --save-dev graphql-tag-swc-plugin
+
+# or with yarn
+yarn add --dev graphql-tag-swc-plugin
+```
+
+Then add the plugin in your `.swcrc` configuration file:
+
+```
+{
+  jsc: {
+    experimental: {
+      plugins: [
+        ["graphql-tag-swc-plugin",
+          {
+            importSources: ["@apollo/client", "graphql-tag"],
+            gqlTagIdentifiers: ["gql"]
+          },
+        ],
+      ],
+    },
+  },
+}
+```
+
+For more information on configuration and features, please checkout the [`graphql-tag-swc-plugin`](https://github.com/rishabh3112/graphql-tag-swc-plugin) documentation.
+
 ## Using graphql-tag.macro
 
 This approach is a bit more explicit, since you change all your usages of `graphql-tag` for `graphql-tag.macro`, which exports a `gql` function that you can use the same way as the original one. This macro requires the [babel-macros](https://github.com/kentcdodds/babel-macros) plugin, which will do the same as the previous approach but only on the calls that come from the macro import, leaving regular calls to the `graphql-tag` library untouched.