feat: Upgrade graphql and@apollo/client

Author: erwanMarmelab

examples/demo/package.json

@@ -4,7 +4,7 @@
     "private": true,
     "type": "module",
     "dependencies": {
-        "@apollo/client": "^3.12.4",
+        "@apollo/client": "^4.1.6",
         "@mui/icons-material": "^7.0.0",
         "@mui/material": "^7.0.0",
         "@types/recharts": "^1.8.10",
@@ -14,7 +14,7 @@
         "date-fns": "^3.6.0",
         "echarts": "^5.6.0",
         "fakerest": "^4.2.0",
-        "graphql": "^15.6.0",
+        "graphql": "^16.13.2",
         "graphql-tag": "^2.12.6",
         "inflection": "^3.0.0",
         "json-graphql-server": "^3.0.1",

examples/demo/src/dataProvider/graphql.ts

@@ -1,4 +1,4 @@
-import { ApolloQueryResult } from '@apollo/client';
+import { ObservableQuery } from '@apollo/client';
 import buildApolloClient, {
     buildQuery as buildQueryFactory,
 } from 'ra-data-graphql-simple';
@@ -44,7 +44,7 @@ const customBuildQuery: BuildQueryFactory = introspectionResults => {
                     }
                 }`,
                 variables: { id: params.id },
-                parseResponse: ({ data }: ApolloQueryResult<any>) => {
+                parseResponse: ({ data }: ObservableQuery.Result<any>) => {
                     if (data[`remove${resource}`]) {
                         return { data: { id: params.id } };
                     }
@@ -98,7 +98,7 @@ const customBuildQuery: BuildQueryFactory = introspectionResults => {
                     }
                 `,
                 variables: params.data,
-                parseResponse: ({ data }: ApolloQueryResult<any>) => {
+                parseResponse: ({ data }: ObservableQuery.Result<any>) => {
                     if (data.createCustomer) {
                         return { data: { id: data.createCustomer.id } };
                     }

packages/ra-data-graphql-simple/package.json

@@ -32,7 +32,7 @@
         "build": "zshy --silent"
     },
     "dependencies": {
-        "@apollo/client": "^3.3.19",
+        "@apollo/client": "^4.1.6",
         "graphql-ast-types-browser": "~1.0.2",
         "lodash": "~4.17.5",
         "pluralize": "~7.0.0",
@@ -43,7 +43,7 @@
         "ra-core": "^5.0.0"
     },
     "devDependencies": {
-        "graphql": "^15.6.0",
+        "graphql": "^16.13.2",
         "typescript": "^5.1.3",
         "zshy": "^0.5.0"
     },

packages/ra-data-graphql-simple/src/getResponseParser.ts

@@ -7,15 +7,15 @@ import {
 } from 'ra-core';
 import { IntrospectionResult, IntrospectedResource } from 'ra-data-graphql';
 import { IntrospectionField } from 'graphql';
-import { ApolloQueryResult } from '@apollo/client';
+import { ObservableQuery } from '@apollo/client';
 
 export default (_introspectionResults: IntrospectionResult) =>
     (
         raFetchMethod: string,
         _resource: IntrospectedResource,
         _queryType: IntrospectionField
     ) =>
-    (response: ApolloQueryResult<any>) => {
+    (response: ObservableQuery.Result<any>) => {
         const data = response.data;
 
         if (

packages/ra-data-graphql/package.json

@@ -32,7 +32,7 @@
         "build": "zshy --silent"
     },
     "dependencies": {
-        "@apollo/client": "^3.3.19",
+        "@apollo/client": "^4.1.6",
         "graphql-tag": "^2.12.6",
         "lodash": "~4.17.5",
         "pluralize": "~7.0.0"
@@ -42,7 +42,7 @@
         "ra-core": "^5.0.0"
     },
     "devDependencies": {
-        "graphql": "^15.6.0",
+        "graphql": "^16.13.2",
         "typescript": "^5.1.3",
         "zshy": "^0.5.0"
     },

packages/ra-data-graphql/src/buildApolloClient.ts

@@ -1,23 +1,21 @@
 import {
     ApolloClient,
-    ApolloClientOptions,
-    HttpLink,
     InMemoryCache,
+    HttpLink,
+    type ApolloClientOptions,
 } from '@apollo/client';
 
 export default (options?: Partial<ApolloClientOptions<unknown>>) => {
     if (!options) {
         return new ApolloClient({
             cache: new InMemoryCache().restore({}),
+            link: new HttpLink({}),
         });
     }
 
     const {
         cache = new InMemoryCache().restore({}),
-        uri,
-        credentials,
-        headers,
-        link = uri ? new HttpLink({ uri, credentials, headers }) : undefined,
+        link,
         ...otherOptions
     } = options;
 

packages/ra-data-graphql/src/index.test.ts

@@ -1,4 +1,5 @@
-import { ApolloClient, ApolloError } from '@apollo/client';
+import { ApolloClient } from '@apollo/client';
+import { ApolloError } from '@apollo/client/v4-migration';
 import { GraphQLError } from 'graphql';
 import gql from 'graphql-tag';
 
@@ -10,9 +11,7 @@ describe('GraphQL data provider', () => {
             it('sets ApolloError in body', async () => {
                 const mockClient = {
                     mutate: async () => {
-                        throw new ApolloError({
-                            graphQLErrors: [new GraphQLError('some error')],
-                        });
+                        throw new GraphQLError('some error');
                     },
                 };
                 const mockBuildQueryFactory = () => {
@@ -28,7 +27,7 @@ describe('GraphQL data provider', () => {
                     });
                 };
                 const dataProvider = await buildDataProvider({
-                    client: mockClient as unknown as ApolloClient<unknown>,
+                    client: mockClient as unknown as ApolloClient,
                     introspection: false,
                     buildQuery:
                         mockBuildQueryFactory as unknown as BuildQueryFactory,
@@ -81,7 +80,7 @@ describe('GraphQL data provider', () => {
             };
 
             const dataProvider = buildDataProvider({
-                client: client as unknown as ApolloClient<unknown>,
+                client: client as unknown as ApolloClient,
                 buildQuery: () => () => undefined,
             });
 

packages/ra-data-graphql/src/introspection.ts

@@ -15,7 +15,7 @@ import { ALL_TYPES } from './constants';
  * @param {Object} options The introspection options
  */
 export const introspectSchema = async (
-    client: ApolloClient<unknown>,
+    client: ApolloClient,
     options: IntrospectionOptions
 ) => {
     const schema = options.schema ? options.schema : await fetchSchema(client);
@@ -50,9 +50,7 @@ export type IntrospectionResult = {
     schema: IntrospectionSchema;
 };
 
-const fetchSchema = (
-    client: ApolloClient<unknown>
-): Promise<IntrospectionSchema> =>
+const fetchSchema = (client: ApolloClient): Promise<IntrospectionSchema> =>
     client
         .query<IntrospectionQuery>({
             fetchPolicy: 'network-only',

yarn.lock

@@ -35,7 +35,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@apollo/client@npm:^3.12.4, @apollo/client@npm:^3.3.19, @apollo/client@npm:^3.9.11":
+"@apollo/client@npm:^3.9.11":
   version: 3.12.4
   resolution: "@apollo/client@npm:3.12.4"
   dependencies:
@@ -72,6 +72,37 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@apollo/client@npm:^4.1.6":
+  version: 4.1.6
+  resolution: "@apollo/client@npm:4.1.6"
+  dependencies:
+    "@graphql-typed-document-node/core": "npm:^3.1.1"
+    "@wry/caches": "npm:^1.0.0"
+    "@wry/equality": "npm:^0.5.6"
+    "@wry/trie": "npm:^0.5.0"
+    graphql-tag: "npm:^2.12.6"
+    optimism: "npm:^0.18.0"
+    tslib: "npm:^2.3.0"
+  peerDependencies:
+    graphql: ^16.0.0
+    graphql-ws: ^5.5.5 || ^6.0.3
+    react: ^17.0.0 || ^18.0.0 || >=19.0.0-rc
+    react-dom: ^17.0.0 || ^18.0.0 || >=19.0.0-rc
+    rxjs: ^7.3.0
+    subscriptions-transport-ws: ^0.9.0 || ^0.11.0
+  peerDependenciesMeta:
+    graphql-ws:
+      optional: true
+    react:
+      optional: true
+    react-dom:
+      optional: true
+    subscriptions-transport-ws:
+      optional: true
+  checksum: ff152317932cb0ba46423161d388d1a2bc0bbc6c8ec6e2e85e915bb2ec22f461effa6fd2bbc8b754babd75ac8b52843f1e3ddf8e501cbe1d9b857e4df2f2f2df
+  languageName: node
+  linkType: hard
+
 "@astrojs/compiler@npm:^2.13.0, @astrojs/compiler@npm:^2.9.1":
   version: 2.13.0
   resolution: "@astrojs/compiler@npm:2.13.0"
@@ -10852,7 +10883,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "demo@workspace:examples/demo"
   dependencies:
-    "@apollo/client": "npm:^3.12.4"
+    "@apollo/client": "npm:^4.1.6"
     "@mui/icons-material": "npm:^7.0.0"
     "@mui/material": "npm:^7.0.0"
     "@types/jest": "npm:^29.5.2"
@@ -10866,7 +10897,7 @@ __metadata:
     date-fns: "npm:^3.6.0"
     echarts: "npm:^5.6.0"
     fakerest: "npm:^4.2.0"
-    graphql: "npm:^15.6.0"
+    graphql: "npm:^16.13.2"
     graphql-tag: "npm:^2.12.6"
     inflection: "npm:^3.0.0"
     json-graphql-server: "npm:^3.0.1"
@@ -13665,10 +13696,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"graphql@npm:^15.6.0":
-  version: 15.8.0
-  resolution: "graphql@npm:15.8.0"
-  checksum: 30cc09b77170a9d1ed68e4c017ec8c5265f69501c96e4f34f8f6613f39a886c96dd9853eac925f212566ed651736334c8fe24ceae6c44e8d7625c95c3009a801
+"graphql@npm:^16.13.2":
+  version: 16.13.2
+  resolution: "graphql@npm:16.13.2"
+  checksum: 64e822a0a0e4398781e4bc9765b88d370c08261498b517add4b878038ef7be2005b6b394a79a5102b9379d57052f60bc7f23fec8f39808d101984a74772ebd9d
   languageName: node
   linkType: hard
 
@@ -20803,8 +20834,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "ra-data-graphql-simple@workspace:packages/ra-data-graphql-simple"
   dependencies:
-    "@apollo/client": "npm:^3.3.19"
-    graphql: "npm:^15.6.0"
+    "@apollo/client": "npm:^4.1.6"
+    graphql: "npm:^16.13.2"
     graphql-ast-types-browser: "npm:~1.0.2"
     lodash: "npm:~4.17.5"
     pluralize: "npm:~7.0.0"
@@ -20821,8 +20852,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "ra-data-graphql@workspace:packages/ra-data-graphql"
   dependencies:
-    "@apollo/client": "npm:^3.3.19"
-    graphql: "npm:^15.6.0"
+    "@apollo/client": "npm:^4.1.6"
+    graphql: "npm:^16.13.2"
     graphql-tag: "npm:^2.12.6"
     lodash: "npm:~4.17.5"
     pluralize: "npm:~7.0.0"