update react and run tests in both 18.3 and 19-beta (#11811)

* integration tests - update react versions and execute with both react 18 and react 19 beta * reference matrix parameter * naming * dedupe * more overrides...? * set overrides * move overrides * use tags -> explicit versions * multiline * don't use deprecated React types anymore * api reports * playwright version * playwright install * changeset
apollographql · May 6, 2024 · d67d7f9 · d67d7f9
1 parent d290196
commit d67d7f9
Show file tree

Hide file tree

Showing 26 changed files with 2,752 additions and 3,809 deletions.
diff --git a/.api-reports/api-report-react.md b/.api-reports/api-report-react.md
@@ -206,7 +206,7 @@ interface ApolloConsumerProps {
     // Warning: (ae-forgotten-export) The symbol "ApolloClient" needs to be exported by the entry point index.d.ts
     //
     // (undocumented)
-    children: (client: ApolloClient<object>) => ReactTypes.ReactChild | null;
+    children: (client: ApolloClient<object>) => ReactTypes.ReactNode;
 }
 
 // @public (undocumented)
@@ -2021,7 +2021,7 @@ export interface SubscriptionCurrentObservable {
 // @public (undocumented)
 export interface SubscriptionDataOptions<TData = any, TVariables extends OperationVariables = OperationVariables> extends BaseSubscriptionOptions<TData, TVariables> {
     // (undocumented)
-    children?: null | ((result: SubscriptionResult<TData>) => JSX.Element | null);
+    children?: null | ((result: SubscriptionResult<TData>) => ReactTypes.ReactNode);
     // (undocumented)
     subscription: DocumentNode | TypedDocumentNode<TData, TVariables>;
 }

diff --git a/.api-reports/api-report-react_context.md b/.api-reports/api-report-react_context.md
@@ -204,7 +204,7 @@ export interface ApolloConsumerProps {
     // Warning: (ae-forgotten-export) The symbol "ApolloClient" needs to be exported by the entry point index.d.ts
     //
     // (undocumented)
-    children: (client: ApolloClient<object>) => ReactTypes.ReactChild | null;
+    children: (client: ApolloClient<object>) => ReactTypes.ReactNode;
 }
 
 // @public (undocumented)

diff --git a/.api-reports/api-report.md b/.api-reports/api-report.md
@@ -178,7 +178,7 @@ export const ApolloConsumer: ReactTypes.FC<ApolloConsumerProps>;
 // @public (undocumented)
 interface ApolloConsumerProps {
     // (undocumented)
-    children: (client: ApolloClient<object>) => ReactTypes.ReactChild | null;
+    children: (client: ApolloClient<object>) => ReactTypes.ReactNode;
 }
 
 // @public (undocumented)
@@ -2653,7 +2653,7 @@ export interface SubscriptionCurrentObservable {
 // @public (undocumented)
 export interface SubscriptionDataOptions<TData = any, TVariables extends OperationVariables = OperationVariables> extends BaseSubscriptionOptions<TData, TVariables> {
     // (undocumented)
-    children?: null | ((result: SubscriptionResult<TData>) => JSX.Element | null);
+    children?: null | ((result: SubscriptionResult<TData>) => ReactTypes.ReactNode);
     // (undocumented)
     subscription: DocumentNode | TypedDocumentNode<TData, TVariables>;
 }

diff --git a/.changeset/heavy-ligers-train.md b/.changeset/heavy-ligers-train.md
@@ -0,0 +1,5 @@
+---
+"@apollo/client": patch
+---
+
+Adjust some types for React 19 compat
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -66,13 +66,20 @@ jobs:
     parameters:
       framework:
         type: string
+      react:
+        type: string
     docker:
       - image: cimg/node:22.0.0
     steps:
       - checkout
       - attach_workspace:
           at: /tmp/workspace
       - run: npm version
+      - run:
+          command: |
+            export VERSION=$(npm show react --json | jq '."dist-tags"."<< parameters.react >>"' -r)
+            npm pkg set "overrides[react]=${VERSION}" "overrides[react-dom]=${VERSION}"
+          working_directory: integration-tests
       - run:
           command: npm run ci-preparations --workspace=<< parameters.framework >> --if-present
           working_directory: integration-tests
@@ -82,6 +89,9 @@ jobs:
       - run:
           command: npx playwright install-deps
           working_directory: integration-tests
+      - run:
+          command: npx playwright install
+          working_directory: integration-tests
       - run:
           command: npm run build --workspace=<< parameters.framework >> --if-present
           working_directory: integration-tests
@@ -116,7 +126,7 @@ workflows:
       - Lint
       - BuildTarball
       - IntegrationTests:
-          name: Integration Test << matrix.framework >>
+          name: Integration Test << matrix.framework >> with React << matrix.react >>
           requires:
             - BuildTarball
           matrix:
@@ -130,6 +140,15 @@ workflows:
                 - vite
                 - vite-swc
                 # -browser-esm would need a package publish to npm/CDNs
+              react:
+                - latest
+                - next
+            exclude:
+              - framework: cra4
+                react: next
+              # next ships it's own React version anyways, no need to run this test twice
+              - framework: next
+                react: next
       - TestPeerDepTypes:
           name: Test external types for << matrix.externalPackage >>
           requires:
@@ -143,6 +162,7 @@ workflows:
                 - "@types/react@16.8 @types/react-dom@16.8"
                 - "@types/react@17 @types/react-dom@17"
                 - "@types/react@18 @types/react-dom@18"
+                - "@types/react@npm:types-react@19.0.0-alpha.3 @types/react-dom@npm:types-react-dom@19.0.0-alpha.3"
                 - "typescript@next"
   security-scans:
     jobs:

diff --git a/integration-tests/cra4/package.json b/integration-tests/cra4/package.json
@@ -3,11 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@apollo/client": "^3.7.16",
+    "@apollo/client": "^3.10.1",
     "graphql": "^16.8.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-redux": "^8.0.5",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
     "react-scripts": "^4"
   },
   "scripts": {
@@ -35,12 +34,12 @@
     ]
   },
   "devDependencies": {
+    "@playwright/test": "*",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
-    "typescript": "^4.9.4",
-    "shared": "*",
     "playwright": "*",
-    "@playwright/test": "*",
-    "serve": "*"
+    "serve": "*",
+    "shared": "*",
+    "typescript": "^4.9.4"
   }
 }
diff --git a/integration-tests/cra5/package.json b/integration-tests/cra5/package.json
@@ -3,14 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@apollo/client": "^3.10.1",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "graphql": "^16.8.1",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
     "react-scripts": "5.0.1",
-    "typescript": "^4.9.5",
-    "@apollo/client": "^3.7.16",
-    "graphql": "^16.8.1"
+    "typescript": "^4.9.5"
   },
   "scripts": {
     "start": "PORT=3000 react-scripts start",
@@ -37,9 +37,9 @@
     ]
   },
   "devDependencies": {
-    "shared": "*",
-    "playwright": "*",
     "@playwright/test": "*",
-    "serve": "*"
+    "playwright": "*",
+    "serve": "*",
+    "shared": "*"
   }
 }
diff --git a/integration-tests/next/package.json b/integration-tests/next/package.json
@@ -11,18 +11,18 @@
     "test": "playwright test"
   },
   "dependencies": {
-    "@apollo/client": "^3.8.0-beta.4",
-    "@apollo/experimental-nextjs-app-support": "^0.7.0",
+    "@apollo/client": "^3.10.1",
+    "@apollo/experimental-nextjs-app-support": "^0.10.0",
     "@graphql-tools/schema": "^10.0.0",
     "@types/node": "20.3.1",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
     "deepmerge": "^4.3.1",
     "graphql": "^16.8.1",
     "lodash": "^4.17.21",
-    "next": "13.4.7",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "next": "^14.2.3",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
     "typescript": "5.1.3"
   },
   "devDependencies": {

diff --git a/integration-tests/next/src/app/cc/ApolloWrapper.tsx b/integration-tests/next/src/app/cc/ApolloWrapper.tsx
@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import * as React from "react";
 import { HttpLink } from "@apollo/client";
 import {
   ApolloNextAppProvider,
@@ -9,7 +9,7 @@ import {
 
 import { loadErrorMessages, loadDevMessages } from "@apollo/client/dev";
 import { setVerbosity } from "ts-invariant";
-import { schemaLink } from "@/libs/schemaLink";
+import { schemaLink } from "@/libs/schemaLink.ts";
 
 //if (process.env.NODE_ENV === 'development') {
 setVerbosity("debug");

diff --git a/integration-tests/next/src/app/cc/layout.tsx b/integration-tests/next/src/app/cc/layout.tsx
@@ -1,4 +1,4 @@
-import { ApolloWrapper } from "./ApolloWrapper";
+import { ApolloWrapper } from "./ApolloWrapper.tsx";
 
 export default async function Layout({
   children,

diff --git a/integration-tests/next/src/app/client.ts b/integration-tests/next/src/app/client.ts
@@ -1,4 +1,4 @@
-import { schemaLink } from "@/libs/schemaLink";
+import { schemaLink } from "@/libs/schemaLink.ts";
 import { ApolloClient, InMemoryCache } from "@apollo/client";
 import { registerApolloClient } from "@apollo/experimental-nextjs-app-support/rsc";
 

diff --git a/integration-tests/next/src/app/page.tsx b/integration-tests/next/src/app/page.tsx
@@ -1,6 +1,6 @@
 import type { TypedDocumentNode } from "@apollo/client";
 import { gql } from "@apollo/client";
-import { getClient } from "./client";
+import { getClient } from "./client.ts";
 
 const QUERY: TypedDocumentNode<{
   products: {

diff --git a/integration-tests/next/src/libs/apolloClient.ts b/integration-tests/next/src/libs/apolloClient.ts
@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import * as React from "react";
 import type { NormalizedCacheObject } from "@apollo/client";
 import {
   ApolloClient,
@@ -12,7 +12,7 @@ import { onError } from "@apollo/client/link/error";
 import merge from "deepmerge";
 import isEqual from "lodash/isEqual";
 import type { GetServerSidePropsResult } from "next";
-import { schemaLink } from "./schemaLink";
+import { schemaLink } from "./schemaLink.ts";
 
 export const APOLLO_STATE_PROP_NAME = "__APOLLO_STATE__";
 
@@ -103,7 +103,7 @@ export function addApolloState(
 
 export function useApollo(pageProps?: ApolloProps) {
   const state = pageProps?.[APOLLO_STATE_PROP_NAME];
-  const storeRef = useRef<ApolloClient<NormalizedCacheObject>>();
+  const storeRef = React.useRef<ApolloClient<NormalizedCacheObject>>();
   if (!storeRef.current) {
     storeRef.current = initializeApollo(state);
   }

diff --git a/integration-tests/next/src/pages/_app.tsx b/integration-tests/next/src/pages/_app.tsx
@@ -1,5 +1,5 @@
 import { ApolloProvider } from "@apollo/client";
-import { useApollo } from "../libs/apolloClient";
+import { useApollo } from "../libs/apolloClient.ts";
 import type { AppProps } from "next/app";
 
 export default function App({ Component, pageProps }: AppProps) {

diff --git a/integration-tests/next/src/pages/pages.tsx b/integration-tests/next/src/pages/pages.tsx
@@ -3,7 +3,7 @@
 import type { TypedDocumentNode } from "@apollo/client";
 import { gql, useQuery } from "@apollo/client";
 import type { GetStaticProps } from "next";
-import { addApolloState, initializeApollo } from "@/libs/apolloClient";
+import { addApolloState, initializeApollo } from "@/libs/apolloClient.ts";
 
 const QUERY: TypedDocumentNode<{
   products: {

diff --git a/integration-tests/next/tsconfig.json b/integration-tests/next/tsconfig.json
@@ -14,6 +14,7 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
+    "allowImportingTsExtensions": true,
     "plugins": [
       {
         "name": "next"

diff --git a/integration-tests/node-esm/package.json b/integration-tests/node-esm/package.json
@@ -8,9 +8,9 @@
     "test": "node test-cjs.cjs && node test-esm.mjs"
   },
   "dependencies": {
-    "@apollo/client": "^3.7.16",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "@apollo/client": "^3.10.1",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0"
   },
   "devDependencies": {
     "resolve-esm": "^1.4.0"

diff --git a/integration-tests/node-standard/package.json b/integration-tests/node-standard/package.json
@@ -7,9 +7,9 @@
     "test": "node test-cjs.js && node test-esm.mjs"
   },
   "dependencies": {
-    "@apollo/client": "^3.7.16",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "@apollo/client": "^3.10.1",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0"
   },
   "devDependencies": {
     "resolve-esm": "^1.4.0"