fix: Upgrade `graphql` and`@apollo/client` by erwanMarmelab · Pull Request #11200 · marmelab/react-admin

erwanMarmelab · 2026-03-25T14:46:35Z

Fixes #10971

Problem

@apollo/client version isn't up to date

Solution

Upgrade graphql and@apollo/client

Usefull links

https://github.com/apollographql/apollo-client/blob/main/CHANGELOG.md#breaking-changes-summary

https://www.apollographql.com/docs/react/migrating/apollo-client-4-migration

https://github.com/graphql/graphql-js/releases/tag/v16.0.0

How To Test

make install && make build && make run-graphql-demo

Additional Checks

The PR targets master for a bugfix or a documentation fix, or next for a feature
~~[ ] The PR includes unit tests (if not possible, describe why)~~
~~[ ] The PR includes one or several stories (if not possible, describe why)~~
~~[ ] The documentation is up to date~~

erwanMarmelab · 2026-03-25T14:48:31Z

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

-        uri,
-        credentials,
-        headers,
-        link = uri ? new HttpLink({ uri, credentials, headers }) : undefined,
+        link,


link option is now required

You should keep uri, credentials and headers. keep the default for link. And update the type so that we require either link, or uri, credentials and headers to construct link.

erwanMarmelab · 2026-03-25T14:49:50Z

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

-                        throw new ApolloError({
-                            graphQLErrors: [new GraphQLError('some error')],
-                        });


Apollo Client 4 removes the ApolloError class entirely.
https://www.apollographql.com/docs/react/migrating/apollo-client-4-migration#removal-of-apolloerror

Copilot

Pull request overview

Upgrades the GraphQL/Apollo client stack across the monorepo (library packages + demo) to newer major versions, and adjusts TypeScript usage to match the updated Apollo APIs.

Changes:

Bump @apollo/client to ^4.1.6 and graphql to ^16.13.2 in relevant workspaces (and lockfile).
Update some Apollo-related TypeScript types/usages in ra-data-graphql, ra-data-graphql-simple, and the GraphQL demo.

Reviewed changes

Copilot reviewed 8 out of 9 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
`yarn.lock`	Locks updated dependency graph for Apollo v4 + GraphQL v16.
`packages/ra-data-graphql/src/introspection.ts`	Adjusts `ApolloClient` typing in schema introspection helpers.
`packages/ra-data-graphql/src/index.test.ts`	Updates error test setup for Apollo v4 (currently inconsistent with assertions).
`packages/ra-data-graphql/src/buildApolloClient.ts`	Refactors client creation for Apollo v4 (currently breaks `uri`-based config).
`packages/ra-data-graphql/package.json`	Upgrades Apollo/GraphQL versions (peer deps need alignment with Apollo v4).
`packages/ra-data-graphql-simple/src/getResponseParser.ts`	Changes response typing (currently mismatched vs actual `query()/mutate()` results).
`packages/ra-data-graphql-simple/package.json`	Upgrades Apollo/GraphQL versions (peer deps need alignment with Apollo v4).
`examples/demo/src/dataProvider/graphql.ts`	Updates demo parseResponse typings (currently mismatched vs actual runtime results).
`examples/demo/package.json`	Upgrades Apollo/GraphQL versions for the demo (missing required Apollo peer `rxjs`).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-25T14:52:37Z

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

    const {
        cache = new InMemoryCache().restore({}),
-        uri,
-        credentials,
-        headers,
-        link = uri ? new HttpLink({ uri, credentials, headers }) : undefined,
+        link,
        ...otherOptions
    } = options;


buildApolloClient no longer derives an HttpLink from uri/credentials/headers. Callers (e.g. the demo via clientOptions.uri) will now pass link: undefined and ApolloClient will throw at runtime because link is required. Consider restoring the previous behavior (create new HttpLink({ uri, credentials, headers }) when link isn’t provided) or update all call sites to pass an explicit link instead of uri.

Copilot · 2026-03-25T14:52:37Z

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

-                        throw new ApolloError({
-                            graphQLErrors: [new GraphQLError('some error')],
-                        });
+                        throw new GraphQLError('some error');


This test still asserts error.body.graphQLErrors, but the mock now throws a raw GraphQLError, so handleError will wrap that and error.body won’t have graphQLErrors. To keep the test meaningful, throw an ApolloError (or an object shaped like it) with graphQLErrors: [new GraphQLError(...)], or update the assertions to match the new error shape.

Suggested change

throw new GraphQLError('some error');

throw new ApolloError({

graphQLErrors: [new GraphQLError('some error')],

});

Copilot · 2026-03-25T14:52:38Z

examples/demo/src/dataProvider/graphql.ts

                }`,
                variables: { id: params.id },
-                parseResponse: ({ data }: ApolloQueryResult<any>) => {
+                parseResponse: ({ data }: ObservableQuery.Result<any>) => {


The file switches from ApolloQueryResult to ObservableQuery.Result, but parseResponse here is called with the result of client.query()/client.mutate() (via ra-data-graphql), not a watchQuery result. Keeping the parameter typed as ApolloQueryResult (or a correct union type) will better reflect the actual runtime shape and avoid confusing consumers.

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

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

Copilot · 2026-03-25T14:52:38Z

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

        _queryType: IntrospectionField
    ) =>
-    (response: ApolloQueryResult<any>) => {
+    (response: ObservableQuery.Result<any>) => {


getResponseParser is used as the parseResponse handler for client.query()/client.mutate() results, which are ApolloQueryResult/mutation results—not ObservableQuery.Result (watchQuery). Using ObservableQuery.Result here is misleading and may break downstream typing; prefer ApolloQueryResult (and/or a union including mutation results if needed).

Copilot · 2026-03-25T14:52:39Z

examples/demo/src/dataProvider/graphql.ts

                `,
                variables: params.data,
-                parseResponse: ({ data }: ApolloQueryResult<any>) => {
+                parseResponse: ({ data }: ObservableQuery.Result<any>) => {


Same issue as above: parseResponse is typed as ObservableQuery.Result, but this handler receives the result of client.query()/client.mutate(), not watchQuery. Prefer ApolloQueryResult (or a correct union type) to match what ra-data-graphql passes at runtime.

Copilot · 2026-03-25T14:52:39Z

packages/ra-data-graphql/package.json

        "graphql": "^15.6.0 || ^16",
        "ra-core": "^5.0.0"
    },
    "devDependencies": {
-        "graphql": "^15.6.0",
+        "graphql": "^16.13.2",


@apollo/client@4.x declares graphql@^16 and rxjs@^7.3.0 as required peer dependencies. This package still advertises graphql: ^15.6.0 || ^16 and doesn’t declare rxjs, which can lead to peer resolution warnings/errors (especially under Yarn PnP) and an inaccurate compatibility signal to consumers. Consider updating peerDependencies to require graphql@^16 and adding rxjs (peer + devDependency as needed).

examples/demo/package.json

erwanMarmelab · 2026-03-25T17:26:01Z

package.json

        }
    },
    "resolutions": {
+        "ra-data-graphql/@apollo/client": "4.1.6",


to be able to remove this line. We need to publish a new version of json-graphql-server (with the compatibility with apollo/client v4)

ThieryMichel

Ci is failing

ThieryMichel · 2026-03-26T08:57:48Z

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

-        uri,
-        credentials,
-        headers,
-        link = uri ? new HttpLink({ uri, credentials, headers }) : undefined,
+        link,


You should keep uri, credentials and headers. keep the default for link. And update the type so that we require either link, or uri, credentials and headers to construct link.

feat: Upgrade graphql and@apollo/client

2dd16e9

erwanMarmelab requested review from Copilot, fzaninotto and slax57 March 25, 2026 14:46

erwanMarmelab added the RFR Ready For Review label Mar 25, 2026

Copilot started reviewing on behalf of erwanMarmelab March 25, 2026 14:47 View session

vercel bot had a problem deploying to Preview – react-admin-storybook March 25, 2026 14:47 Failure

erwanMarmelab commented Mar 25, 2026

View reviewed changes

Copilot AI reviewed Mar 25, 2026

View reviewed changes

erwanMarmelab added 2 commits March 25, 2026 17:32

Add some imports in packages + revert some type updates

3c4fad8

fix build

617fc74

erwanMarmelab commented Mar 25, 2026

View reviewed changes

vercel bot had a problem deploying to Preview – react-admin-storybook March 25, 2026 17:27 Failure

ThieryMichel requested changes Mar 26, 2026

View reviewed changes

Uh oh!

Conversation

erwanMarmelab commented Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

Solution

Usefull links

How To Test

Additional Checks

Uh oh!

erwanMarmelab Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

ThieryMichel Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

erwanMarmelab Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

erwanMarmelab Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

ThieryMichel left a comment

Choose a reason for hiding this comment

Uh oh!

ThieryMichel Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

3 participants

erwanMarmelab commented Mar 25, 2026 •

edited

Loading