dotansimha · renovate · Apr 9, 2026 · Apr 10, 2026 · Apr 10, 2026 · Apr 10, 2026
diff --git a/examples/react/apollo-client-defer/package.json b/examples/react/apollo-client-defer/package.json
@@ -12,7 +12,7 @@
     "test:end2end": "start-server-and-test start http://localhost:3000 test"
   },
   "dependencies": {
-    "@apollo/client": "^3.7.10",
+    "@apollo/client": "^4.0.0",
     "@graphql-yoga/plugin-defer-stream": "^3.0.0",
     "graphql": "^16.6.0",
     "graphql-yoga": "5.21.0",

diff --git a/examples/react/apollo-client-defer/src/App.tsx b/examples/react/apollo-client-defer/src/App.tsx
@@ -1,4 +1,4 @@
-import { useQuery } from '@apollo/client';
+import { useQuery } from '@apollo/client/react';
 import { DocumentType, FragmentType, graphql, isFragmentReady, useFragment } from './gql';
 
 export const slowFieldFragment = graphql(/* GraphQL */ `

diff --git a/examples/react/apollo-client-defer/src/main.tsx b/examples/react/apollo-client-defer/src/main.tsx
@@ -1,11 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
+import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client';
+import { GraphQL17Alpha9Handler } from '@apollo/client/incremental';
+import { ApolloProvider } from '@apollo/client/react';
 import App from './App';
 
 const client = new ApolloClient({
-  uri: 'http://localhost:4000/graphql',
+  link: new HttpLink({
+    uri: 'https://graphql.org/graphql/',
+  }),
   cache: new InMemoryCache(),
+  incrementalHandler: new GraphQL17Alpha9Handler(),
 });
 
 const root = ReactDOM.createRoot(document.getElementById('app') as HTMLElement);

diff --git a/examples/react/apollo-client-swc-plugin/package.json b/examples/react/apollo-client-swc-plugin/package.json
@@ -10,7 +10,7 @@
     "test:end2end": "exit 0"
   },
   "dependencies": {
-    "@apollo/client": "^3.7.10",
+    "@apollo/client": "^4.0.0",
     "react": "19.2.5",
     "react-dom": "19.2.5"
   },

diff --git a/examples/react/apollo-client-swc-plugin/src/App.tsx b/examples/react/apollo-client-swc-plugin/src/App.tsx
@@ -1,4 +1,4 @@
-import { useQuery } from '@apollo/client';
+import { useQuery } from '@apollo/client/react';
 import './App.css';
 import Film from './Film';
 import { graphql } from './gql';

diff --git a/examples/react/apollo-client-swc-plugin/src/main.tsx b/examples/react/apollo-client-swc-plugin/src/main.tsx
@@ -1,11 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './main.css';
-import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
+import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client';
+import { ApolloProvider } from '@apollo/client/react';
 import App from './App';
 
 const client = new ApolloClient({
-  uri: 'https://graphql.org/graphql/',
+  link: new HttpLink({
+    uri: 'https://graphql.org/graphql/',
+  }),
   cache: new InMemoryCache(),
 });
 

diff --git a/examples/react/apollo-client/package.json b/examples/react/apollo-client/package.json
@@ -11,7 +11,7 @@
     "test:end2end": "start-server-and-test start http://localhost:3000 test"
   },
   "dependencies": {
-    "@apollo/client": "^3.7.10",
+    "@apollo/client": "^4.0.0",
     "graphql": "^16.6.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

diff --git a/examples/react/apollo-client/src/App.tsx b/examples/react/apollo-client/src/App.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useQuery } from '@apollo/client';
+import { useQuery } from '@apollo/client/react';
 import './App.css';
 import Film from './Film';
 import { graphql } from './gql/gql';

diff --git a/examples/react/apollo-client/src/main.tsx b/examples/react/apollo-client/src/main.tsx
@@ -1,11 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './main.css';
-import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
+import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client';
+import { ApolloProvider } from '@apollo/client/react';
 import App from './App';
 
 const client = new ApolloClient({
-  uri: 'https://graphql.org/graphql/',
+  link: new HttpLink({
+    uri: 'https://graphql.org/graphql/',
+  }),
   cache: new InMemoryCache(),
 });
 

diff --git a/examples/vite/vite-react-cts/package.json b/examples/vite/vite-react-cts/package.json
@@ -12,7 +12,7 @@
     "test:end2end": "start-server-and-test start http://localhost:3000 test"
   },
   "dependencies": {
-    "@apollo/client": "^3.7.10",
+    "@apollo/client": "^4.0.0",
     "@graphql-typed-document-node/core": "3.2.0",
     "@vitejs/plugin-react-swc": "^4.0.0",
     "graphql": "16.13.2",

diff --git a/examples/vite/vite-react-cts/src/main.tsx b/examples/vite/vite-react-cts/src/main.tsx
@@ -1,11 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { ApolloClient, ApolloProvider, InMemoryCache, useQuery } from '@apollo/client';
+import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client';
+import { ApolloProvider, useQuery } from '@apollo/client/react';
 import Film from './Film';
 import { graphql } from './gql';
 
 const client = new ApolloClient({
-  uri: 'https://graphql.org/graphql/',
+  link: new HttpLink({
+    uri: 'https://graphql.org/graphql/',
+  }),
   cache: new InMemoryCache(),
 });
 

diff --git a/examples/vite/vite-react-mts/package.json b/examples/vite/vite-react-mts/package.json
@@ -12,7 +12,7 @@
     "test:end2end": "start-server-and-test start http://localhost:3000 test"
   },
   "dependencies": {
-    "@apollo/client": "^3.7.10",
+    "@apollo/client": "^4.0.0",
     "@graphql-typed-document-node/core": "3.2.0",
     "@vitejs/plugin-react-swc": "^4.0.0",
     "graphql": "16.13.2",

diff --git a/examples/vite/vite-react-mts/src/main.tsx b/examples/vite/vite-react-mts/src/main.tsx
@@ -1,11 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { ApolloClient, ApolloProvider, InMemoryCache, useQuery } from '@apollo/client';
+import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client';
+import { ApolloProvider, useQuery } from '@apollo/client/react';
 import Film from './Film';
 import { graphql } from './gql';
 
 const client = new ApolloClient({
-  uri: 'https://graphql.org/graphql/',
+  link: new HttpLink({
+    uri: 'https://graphql.org/graphql/',
+  }),
   cache: new InMemoryCache(),
 });
 

diff --git a/examples/vite/vite-react-ts/package.json b/examples/vite/vite-react-ts/package.json
@@ -12,7 +12,7 @@
     "test:end2end": "start-server-and-test start http://localhost:3000 test"
   },
   "dependencies": {
-    "@apollo/client": "^3.7.10",
+    "@apollo/client": "^4.0.0",
     "@graphql-typed-document-node/core": "3.2.0",
     "@vitejs/plugin-react-swc": "^4.0.0",
     "graphql": "16.13.2",

diff --git a/examples/vite/vite-react-ts/src/main.tsx b/examples/vite/vite-react-ts/src/main.tsx
@@ -1,11 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { ApolloClient, ApolloProvider, InMemoryCache, useQuery } from '@apollo/client';
+import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client';
+import { ApolloProvider, useQuery } from '@apollo/client/react';
 import Film from './Film';
 import { graphql } from './gql';
 
 const client = new ApolloClient({
-  uri: 'https://graphql.org/graphql/',
+  link: new HttpLink({
+    uri: 'https://graphql.org/graphql/',
+  }),
   cache: new InMemoryCache(),
 });
 

diff --git a/examples/vue/apollo-composable/package.json b/examples/vue/apollo-composable/package.json
@@ -11,7 +11,7 @@
     "test:end2end": "start-server-and-test start http://localhost:3000 test"
   },
   "dependencies": {
-    "@apollo/client": "^3.7.10",
+    "@apollo/client": "^4.0.0",
     "@vue/apollo-composable": "4.2.2",
     "graphql": "^16.6.0",
     "vue": "^3.2.37"

diff --git a/examples/vue/apollo-composable/shims/apollo-v4-compat.ts b/examples/vue/apollo-composable/shims/apollo-v4-compat.ts
@@ -0,0 +1,25 @@
+export class ApolloError extends Error {
+  public graphQLErrors: any[];
+  public clientErrors: any[];
+  public networkError: any;
+  public extraInfo: any;
+
+  constructor(opts: {
+    graphQLErrors?: any[];
+    clientErrors?: any[];
+    networkError?: any;
+    errorMessage?: string;
+    extraInfo?: any;
+  }) {
+    super(opts.errorMessage || 'Apollo Client Error');
+    this.name = 'ApolloError';
+    this.graphQLErrors = opts.graphQLErrors ?? [];
+    this.clientErrors = opts.clientErrors ?? [];
+    this.networkError = opts.networkError;
+    this.extraInfo = opts.extraInfo;
+  }
+}
+
+export function isApolloError(err: unknown): err is ApolloError {
+  return err instanceof ApolloError;
+}
diff --git a/examples/vue/apollo-composable/vite.config.ts b/examples/vue/apollo-composable/vite.config.ts
@@ -1,7 +1,15 @@
+import { fileURLToPath } from 'url';
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  resolve: {
+    alias: {
+      '@apollo/client/core/index.js': fileURLToPath(
+        new URL('./shims/apollo-v4-compat.ts', import.meta.url),
+      ),
+    },
+  },
 });
diff --git a/website/src/components/live-demo/examples.ts b/website/src/components/live-demo/examples.ts
@@ -63,7 +63,7 @@ const TS_QUERY = dedent(/* GraphQL */ `
 `);
 
 export const APP_TSX = `\
-import { useQuery } from '@apollo/client';
+import { useQuery } from '@apollo/client/react';
 
 import { graphql } from './gql/gql';
 

diff --git a/website/src/pages/plugins/presets/preset-client.mdx b/website/src/pages/plugins/presets/preset-client.mdx
@@ -323,7 +323,7 @@ the data for a deferred fragment is available, as shown in the example below:
 
 ```jsx
 // index.tsx
-import { useQuery } from '@apollo/client';
+import { useQuery } from '@apollo/client/react';
 import { useFragment, graphql, FragmentType, isFragmentReady } from './gql';
 
 const OrdersFragment = graphql(`

diff --git a/yarn.lock b/yarn.lock
@@ -20,24 +20,18 @@
     package-manager-detector "^1.3.0"
     tinyexec "^1.0.1"
 
-"@apollo/client@^3.7.10":
-  version "3.14.1"
-  resolved "https://registry.yarnpkg.com/@apollo/client/-/client-3.14.1.tgz#98931c8feea4a50c89c32ec0c8ffd04ccaa9416f"
-  integrity sha512-SgGX6E23JsZhUdG2anxiyHvEvvN6CUaI4ZfMsndZFeuHPXL3H0IsaiNAhLITSISbeyeYd+CBd9oERXQDdjXWZw==
+"@apollo/client@^4.0.0":
+  version "4.1.7"
+  resolved "https://registry.yarnpkg.com/@apollo/client/-/client-4.1.7.tgz#c7a85132437fbc62f48eb67337a25664c7174257"
+  integrity sha512-CE1Pe22vszRBMGrBOovIXzTa5infy1kwF0kWX2JBLcGFXoOPBOAo9zoM++tuSRZr8PscWJyv2ka2FKoyEquEHw==
   dependencies:
     "@graphql-typed-document-node/core" "^3.1.1"
     "@wry/caches" "^1.0.0"
     "@wry/equality" "^0.5.6"
     "@wry/trie" "^0.5.0"
     graphql-tag "^2.12.6"
-    hoist-non-react-statics "^3.3.2"
     optimism "^0.18.0"
-    prop-types "^15.7.2"
-    rehackt "^0.1.0"
-    symbol-observable "^4.0.0"
-    ts-invariant "^0.10.3"
     tslib "^2.3.0"
-    zen-observable-ts "^1.2.5"
 
 "@ardatan/relay-compiler@12.0.0":
   version "12.0.0"
@@ -9338,7 +9332,7 @@ header-case@^2.0.4:
     capital-case "^1.0.4"
     tslib "^2.0.3"
 
-hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.3.1:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -12963,11 +12957,6 @@ regjsparser@^0.13.0:
   dependencies:
     jsesc "~3.1.0"
 
-rehackt@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/rehackt/-/rehackt-0.1.0.tgz#a7c5e289c87345f70da8728a7eb878e5d03c696b"
-  integrity sha512-7kRDOuLHB87D/JESKxQoRwv4DzbIdwkAGQ7p6QKGdVlY1IZheUnVhlk/4UZlNUVxdAXpyxikE3URsG067ybVzw==
-
 rehype-katex@^7.0.0:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/rehype-katex/-/rehype-katex-7.0.1.tgz#832e6d7af2744a228981d1b0fe89483a9e7c93a1"
@@ -14245,11 +14234,6 @@ swr@^2.0.0:
     dequal "^2.0.3"
     use-sync-external-store "^1.6.0"
 
-symbol-observable@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-4.0.0.tgz#5b425f192279e87f2f9b937ac8540d1984b39205"
-  integrity sha512-b19dMThMV4HVFynSAM1++gBHAbk2Tc/osgLIBZMKsyqh34jb2e8Os7T6ZW/Bt3pJFdBTd2JwAnAAEQV7rSNvcQ==
-
 sync-fetch@0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/sync-fetch/-/sync-fetch-0.6.0.tgz#5759e775f3d5202e1b3d14821bc152fec32aa180"
@@ -14503,13 +14487,6 @@ ts-interface-checker@^0.1.9:
   resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
   integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
 
-ts-invariant@^0.10.3:
-  version "0.10.3"
-  resolved "https://registry.yarnpkg.com/ts-invariant/-/ts-invariant-0.10.3.tgz#3e048ff96e91459ffca01304dbc7f61c1f642f6c"
-  integrity sha512-uivwYcQaxAucv1CzRp2n/QdYPo4ILf9VXgH19zEIjFx2EJufV16P0JtJVpYHy89DItG6Kwj2oIUjrcK5au+4tQ==
-  dependencies:
-    tslib "^2.1.0"
-
 ts-log@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/ts-log/-/ts-log-3.0.0.tgz#74a84ca54ebeea02d6a6d052d21a8c47889c119a"
@@ -15746,18 +15723,6 @@ youch@4.1.0-beta.10:
     cookie "^1.0.2"
     youch-core "^0.3.3"
 
-zen-observable-ts@^1.2.5:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/zen-observable-ts/-/zen-observable-ts-1.2.5.tgz#6c6d9ea3d3a842812c6e9519209365a122ba8b58"
-  integrity sha512-QZWQekv6iB72Naeake9hS1KxHlotfRpe+WGNbNx5/ta+R3DNjVO2bswf63gXlWDcs+EMd7XY8HfVQyP1X6T4Zg==
-  dependencies:
-    zen-observable "0.8.15"
-
-zen-observable@0.8.15:
-  version "0.8.15"
-  resolved "https://registry.yarnpkg.com/zen-observable/-/zen-observable-0.8.15.tgz#96415c512d8e3ffd920afd3889604e30b9eaac15"
-  integrity sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ==
-
 zimmerframe@^1.1.2:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/zimmerframe/-/zimmerframe-1.1.4.tgz#0352b5cafad3ad4526b0a526a9a52d9c040d865b"