diff --git a/examples/react/apollo-client-defer/package.json b/examples/react/apollo-client-defer/package.json index d8b5b759f0b..74dacd80fe7 100644 --- 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 index 3084386bb4e..020bbffb9f6 100644 --- 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 index 470ef7b8464..7eab655d3ce 100644 --- 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 index 6bffbd83e3c..372af6e4aa7 100644 --- 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 index da2a0c7b8bb..98e1d0f0d7e 100644 --- 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 index e8acda33586..7e9736be846 100644 --- 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 index 80d2058f4c1..f98f54e480f 100644 --- 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 index 4e8c2f3744c..a1267d812e3 100644 --- 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 index e8acda33586..7e9736be846 100644 --- 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 index 46d815c98bc..1a49705d9aa 100644 --- 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 index 7f0d22696a5..5c9b7a559b3 100644 --- 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 index 7f3ff713c8b..4078c879da6 100644 --- 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 index 7f0d22696a5..5c9b7a559b3 100644 --- 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 index 9ee81a4a8c9..ce88ac9f3d3 100644 --- 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 index 7f0d22696a5..5c9b7a559b3 100644 --- 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 index 8fa40756eaa..6617da133dd 100644 --- 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 new file mode 100644 index 00000000000..bdc69767c81 --- /dev/null +++ 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 index 6405595ab23..20c2d3d4ba3 100644 --- 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 index d375e099fb9..10fc97cb380 100644 --- 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 index 82ab461934a..5de93045f85 100644 --- 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 index 969fcd3c6b5..5116b7bab52 100644 --- 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"