Merge pull request #207 from apollographql/main

Create a new pull request by comparing changes across two branches

.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>;
 }

.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)

.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>;
 }

.changeset/heavy-ligers-train.md

@@ -0,0 +1,5 @@
+---
+"@apollo/client": patch
+---
+
+Adjust some types for React 19 compat

.changeset/rich-geese-complain.md

@@ -0,0 +1,5 @@
+---
+"@apollo/client": patch
+---
+
+Fix error "Cannot convert object to primitive value"

.circleci/config.yml

@@ -15,7 +15,7 @@ jobs:
 
   Lint:
     docker:
-      - image: cimg/node:22.0.0
+      - image: cimg/node:22.1.0
     steps:
       - checkout
       - run: npm version
@@ -24,15 +24,15 @@ jobs:
 
   Formatting:
     docker:
-      - image: cimg/node:22.0.0
+      - image: cimg/node:22.1.0
     steps:
       - checkout
       - run: npm ci
       - run: npm run check:format
 
   Tests:
     docker:
-      - image: cimg/node:22.0.0
+      - image: cimg/node:22.1.0
     steps:
       - checkout
       - run: npm run ci:precheck
@@ -50,7 +50,7 @@ jobs:
 
   BuildTarball:
     docker:
-      - image: cimg/node:22.0.0
+      - image: cimg/node:22.1.0
     steps:
       - checkout
       - run: npm run ci:precheck
@@ -66,13 +66,20 @@ jobs:
     parameters:
       framework:
         type: string
+      react:
+        type: string
     docker:
-      - image: cimg/node:22.0.0
+      - image: cimg/node:22.1.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
@@ -94,7 +104,7 @@ jobs:
       externalPackage:
         type: string
     docker:
-      - image: cimg/node:22.0.0
+      - image: cimg/node:22.1.0
     steps:
       - checkout
       - attach_workspace:
@@ -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/[email protected] @types/[email protected]"
                 - "@types/react@17 @types/react-dom@17"
                 - "@types/react@18 @types/react-dom@18"
+                - "@types/react@npm:[email protected] @types/react-dom@npm:[email protected]"
                 - "typescript@next"
   security-scans:
     jobs:

.size-limits.json

@@ -1,4 +1,4 @@
 {
-  "dist/apollo-client.min.cjs": 39551,
+  "dist/apollo-client.min.cjs": 39540,
   "import { ApolloClient, InMemoryCache, HttpLink } from \"dist/index.js\" (production)": 32826
 }

CHANGELOG.md

@@ -1,5 +1,14 @@
 # @apollo/client
 
+## 3.10.2
+
+### Patch Changes
+
+- [#11821](https://github.com/apollographql/apollo-client/pull/11821) [`2675d3c`](https://github.com/apollographql/apollo-client/commit/2675d3c97e6c47c6e298382004c7c9c2d3ffed0c) Thanks [@jerelmiller](https://github.com/jerelmiller)! - Fix a regression where rerendering a component with `useBackgroundQuery` would recreate the `queryRef` instance when used with React's strict mode.
+
+- [#11821](https://github.com/apollographql/apollo-client/pull/11821) [`2675d3c`](https://github.com/apollographql/apollo-client/commit/2675d3c97e6c47c6e298382004c7c9c2d3ffed0c) Thanks [@jerelmiller](https://github.com/jerelmiller)! - Revert the change introduced in
+  [3.9.10](https://github.com/apollographql/apollo-client/releases/tag/v3.9.10) via #11738 that disposed of queryRefs synchronously. This change caused too many issues with strict mode.
+
 ## 3.10.1
 
 ### Patch Changes

docs/source/data/suspense.mdx

@@ -865,7 +865,7 @@ For more information, see the [`useSuspenseQuery`](../api/react/hooks/#usesuspen
 While `useSuspenseQuery` and `useBackgroundQuery` both have a `skip` option, that option is only present to ease migration from `useQuery` with as few code changes as possible.
 It should not be used in the long term.
 
-Instead, you should use [`skipToken`](/react/api/react/hooks#skiptoken`):
+Instead, you should use [`skipToken`](/react/api/react/hooks#skiptoken):
 
 ```js title="Recommended usage of skipToken with useSuspenseQuery"
 import { skipToken, useSuspenseQuery } from '@apollo/client';

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"
   }
 }

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": "*"
   }
 }

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": {

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");

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,

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";
 

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: {

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);
   }

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) {

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: {

integration-tests/next/tsconfig.json

@@ -14,6 +14,7 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
+    "allowImportingTsExtensions": true,
     "plugins": [
       {
         "name": "next"

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"

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"