Prepare 3.8.0-beta.0 release 🎉 (#10916)

.changeset/nine-boxes-happen.md

@@ -0,0 +1,5 @@
+---
+'@apollo/client': patch
+---
+
+Remove experimental labels from hooks, move to beta.

.changeset/pre.json

@@ -1,6 +1,6 @@
 {
   "mode": "pre",
-  "tag": "alpha",
+  "tag": "beta",
   "initialVersions": {
     "@apollo/client": "3.7.2"
   },

.size-limit.cjs

@@ -18,10 +18,10 @@ const checks = [
     "useLazyQuery",
     "useMutation",
     "useSubscription",
-    "useSuspenseQuery_experimental",
-    "useBackgroundQuery_experimental",
-    "useReadQuery_experimental",
-    "useFragment_experimental"
+    "useSuspenseQuery",
+    "useBackgroundQuery",
+    "useReadQuery",
+    "useFragment"
   ].map((name) => ({ path: "dist/react/index.js", import: `{ ${name} }` })),
 ].map((config) => ({
   ...config,

docs/source/api/react/hooks-experimental.mdx

@@ -11,15 +11,15 @@ import UseSuspenseQueryResult from '../../../shared/useSuspenseQuery-result.mdx'
 import UseBackgroundQueryResult from '../../../shared/useBackgroundQuery-result.mdx';
 import UseReadQueryResult from '../../../shared/useReadQuery-result.mdx';
 
-## `useBackgroundQuery_experimental` and `useReadQuery_experimental`
+## `useBackgroundQuery` and `useReadQuery`
 
 ### Installation
 
-> ⚠️ **The `useBackgroundQuery_experimental` and `useReadQuery_experimental` hooks are currently at the [alpha stage](https://www.apollographql.com/docs/resources/product-launch-stages/#alpha--beta) in Apollo Client.** If you have feedback on them, please let us know via [GitHub issues](https://github.com/apollographql/apollo-client/issues/new?assignees=&labels=&template=bug.md).
+> ⚠️ **The `useBackgroundQuery` and `useReadQuery` hooks are currently at the [beta stage](https://www.apollographql.com/docs/resources/product-launch-stages/#alpha--beta) in Apollo Client.** If you have feedback on them, please let us know via [GitHub issues](https://github.com/apollographql/apollo-client/issues/new?assignees=&labels=&template=bug.md).
 
-Beginning with version `3.8.0-alpha.14`, Apollo Client has alpha support for the `useBackgroundQuery_experimental` and `useReadQuery_experimental` hooks, which work with React's [Suspense](https://react.dev/reference/react/Suspense) feature. You can install it via `npm install @apollo/client@alpha`.
+Apollo Client has beta support for the `useBackgroundQuery` and `useReadQuery` hooks, which work with React's [Suspense](https://react.dev/reference/react/Suspense) feature. You can install it via `npm install @apollo/client@beta`.
 
-### Using `useBackgroundQuery_experimental` and `useReadQuery_experimental`
+### Using `useBackgroundQuery` and `useReadQuery`
 
 Create and provide a `SuspenseCache` instance to your `ApolloProvider`.
 
@@ -31,20 +31,20 @@ const suspenseCache = new SuspenseCache();
 <ApolloProvider suspenseCache={suspenseCache} />;
 ```
 
-`useBackgroundQuery_experimental` allows a user to initiate a query outside of the component that will read and render the data with `useReadQuery_experimental`, which triggers the nearest Suspense boundary while the query is pending. This means a query can be initiated higher up in the React render tree and your application can begin requesting data before the component that has a dependency on that data begins rendering.
+`useBackgroundQuery` allows a user to initiate a query outside of the component that will read and render the data with `useReadQuery`, which triggers the nearest Suspense boundary while the query is pending. This means a query can be initiated higher up in the React render tree and your application can begin requesting data before the component that has a dependency on that data begins rendering.
 
-Ensure the component tree that uses `useReadQuery_experimental` is wrapped with React's [`Suspense`](https://react.dev/reference/react/Suspense) component. Note that the `useReadQuery_experimental` hook returns only `data`, `error` and `networkStatus` (though `networkStatus` should rarely be needed). Since Suspense provides the tools to manage our application's loading states, `useReadQuery_experimental` does not return a `loading` boolean.
+Ensure the component tree that uses `useReadQuery` is wrapped with React's [`Suspense`](https://react.dev/reference/react/Suspense) component. Note that the `useReadQuery` hook returns only `data`, `error` and `networkStatus` (though `networkStatus` should rarely be needed). Since Suspense provides the tools to manage our application's loading states, `useReadQuery` does not return a `loading` boolean.
 
-See the API references for [`useBackgroundQuery_experimental`](#usebackgroundquery_experimental-api) and [`useReadQuery_experimental`](#usereadquery_experimental-api) for supported options.
+See the API references for [`useBackgroundQuery`](#usebackgroundquery-api) and [`useReadQuery`](#usereadquery-api) for supported options.
 
 ```jsx
 import { Suspense } from 'react';
 import {
   ApolloClient,
   InMemoryCache,
   SuspenseCache,
-  useBackgroundQuery_experimental as useBackgroundQuery,
-  useReadQuery_experimental as useReadQuery,
+  useBackgroundQuery,
+  useReadQuery,
 } from '@apollo/client';
 
 const query = gql`
@@ -92,12 +92,12 @@ function App() {
 
 ```
 
-### `useBackgroundQuery_experimental` API
+### `useBackgroundQuery` API
 
 #### Function Signature
 
 ```ts
-function useBackgroundQuery_experimental<
+function useBackgroundQuery<
   TData = any,
   TVariables extends OperationVariables = OperationVariables
 >(
@@ -126,12 +126,12 @@ function useBackgroundQuery_experimental<
 
 <UseBackgroundQueryResult />
 
-### `useReadQuery_experimental` API
+### `useReadQuery` API
 
 #### Function Signature
 
 ```ts
-function useReadQuery_experimental<TData>(
+function useReadQuery<TData>(
   queryRef: QueryReference<TData>
 ): {
   data: TData;
@@ -152,17 +152,17 @@ function useReadQuery_experimental<TData>(
 
 <UseReadQueryResult />
 
-## `useFragment_experimental`
+## `useFragment`
 
 ### Installation
 
-> ⚠️ **The `useFragment_experimental` hook is currently at the [preview stage](https://www.apollographql.com/docs/resources/release-stages/#preview) in Apollo Client.** If you have feedback on it, please let us know via [GitHub issues](https://github.com/apollographql/apollo-client/issues/new?assignees=&labels=&template=bug.md).
+> ⚠️ **The `useFragment` hook is currently at the [beta stage](https://www.apollographql.com/docs/resources/product-launch-stages/#alpha--beta) in Apollo Client.** If you have feedback on it, please let us know via [GitHub issues](https://github.com/apollographql/apollo-client/issues/new?assignees=&labels=&template=bug.md).
 
-Beginning with version `3.7.0`, Apollo Client has preview support for the `useFragment_experimental` hook, which represents a lightweight live binding into the Apollo Client Cache. This hook returns an always-up-to-date view of whatever data the cache currently contains for a given fragment. `useFragment_experimental` never triggers network requests of its own.
+Beginning with version `3.7.0`, Apollo Client has preview support for the `useFragment` hook, which represents a lightweight live binding into the Apollo Client Cache. This hook returns an always-up-to-date view of whatever data the cache currently contains for a given fragment. `useFragment` never triggers network requests of its own.
 
-`useFragment_experimental` enables Apollo Client to broadcast very specific fragment results to individual components. Note that the `useQuery` hook remains the primary hook responsible for querying and populating data in the cache ([see the API reference](./hooks#usequery)). As a result, the component reading the fragment data via `useFragment_experimental` is still subscribed to all changes in the query data, but receives updates only when that fragment's specific data change.
+`useFragment` enables Apollo Client to broadcast very specific fragment results to individual components. Note that the `useQuery` hook remains the primary hook responsible for querying and populating data in the cache ([see the API reference](./hooks#usequery)). As a result, the component reading the fragment data via `useFragment` is still subscribed to all changes in the query data, but receives updates only when that fragment's specific data change.
 
-### Using `useFragment_experimental`
+### Using `useFragment`
 
 > A [GraphQL fragment](http://graphql.org/learn/queries/#fragments) defines a subset of fields on a GraphQL type that can be used to specify component-level data dependencies or allow re-use between multiple queries and mutations. [See the API reference.](../../data/fragments)
 
@@ -198,11 +198,11 @@ function List() {
 }
 ```
 
-We can then use `useFragment_experimental` from within the `<Item>` component to create a live binding for each item by providing the `fragment` document, `fragmentName` and object reference via `from`.
+We can then use `useFragment` from within the `<Item>` component to create a live binding for each item by providing the `fragment` document, `fragmentName` and object reference via `from`.
 
 ```jsx
 function Item(props: { id: number }) {
-  const { complete, data } = useFragment_experimental({
+  const { complete, data } = useFragment({
     fragment: ItemFragment,
     fragmentName: "ItemFragment",
     from: {
@@ -214,33 +214,33 @@ function Item(props: { id: number }) {
 }
 ```
 
-> `useFragment_experimental` can be used in combination with the `@nonreactive` directive in cases where list items should react to individual cache updates without rerendering the entire list. For more information, see the [`@nonreactive` docs](/react/data/directives#nonreactive).
+> `useFragment` can be used in combination with the `@nonreactive` directive in cases where list items should react to individual cache updates without rerendering the entire list. For more information, see the [`@nonreactive` docs](/react/data/directives#nonreactive).
 
-### `useFragment_experimental` API
+### `useFragment` API
 
-Supported options and result fields for the `useFragment_experimental` hook are listed below.
+Supported options and result fields for the `useFragment` hook are listed below.
 
-Most calls to `useFragment_experimental` can omit the majority of these options, but it's useful to know they exist.
+Most calls to `useFragment` can omit the majority of these options, but it's useful to know they exist.
 
 #### Options
 
-The `useFragment_experimental` hook accepts the following options:
+The `useFragment` hook accepts the following options:
 
 <UseFragmentOptions />
 
 #### Result
 
 <UseFragmentResult />
 
-## `useSuspenseQuery_experimental`
+## `useSuspenseQuery`
 
 ### Installation
 
-> ⚠️ **The `useSuspenseQuery_experimental` hook is currently at the [preview stage](https://www.apollographql.com/docs/resources/product-launch-stages/#alpha--beta) in Apollo Client.** If you have feedback on it, please let us know via [GitHub issues](https://github.com/apollographql/apollo-client/issues/new?assignees=&labels=&template=bug.md).
+> ⚠️ **The `useSuspenseQuery` hook is currently at the [beta stage](https://www.apollographql.com/docs/resources/product-launch-stages/#alpha--beta) in Apollo Client.** If you have feedback on it, please let us know via [GitHub issues](https://github.com/apollographql/apollo-client/issues/new?assignees=&labels=&template=bug.md).
 
-Beginning with version `3.8.0-alpha.0`, Apollo Client has alpha support for the `useSuspenseQuery_experimental` hook, which works with React's [Suspense](https://react.dev/reference/react/Suspense) feature. You can install it via `npm install @apollo/client@alpha`.
+Apollo Client has beta support for the `useSuspenseQuery` hook, which works with React's [Suspense](https://react.dev/reference/react/Suspense) feature. You can install it via `npm install @apollo/client@beta`.
 
-### Using `useSuspenseQuery_experimental`
+### Using `useSuspenseQuery`
 
 Create and provide a `SuspenseCache` instance to your `ApolloProvider`.
 
@@ -252,13 +252,13 @@ const suspenseCache = new SuspenseCache();
 <ApolloProvider suspenseCache={suspenseCache} />;
 ```
 
-Write queries using `useSuspenseQuery_experimental`. Ensure the component is wrapped with React's [`Suspense`](https://react.dev/reference/react/Suspense) component. Note that the hook returns only `data` and `error`: since Suspense provides the tools to manage our application's loading states, `useSuspenseQuery_experimental` does not return a `loading` boolean.
+Write queries using `useSuspenseQuery`. Ensure the component is wrapped with React's [`Suspense`](https://react.dev/reference/react/Suspense) component. Note that the hook returns only `data` and `error`: since Suspense provides the tools to manage our application's loading states, `useSuspenseQuery` does not return a `loading` boolean.
 
-See the [API reference](#usesuspensequery_experimental-api) for supported options.
+See the [API reference](#usesuspensequery-api) for supported options.
 
 ```jsx
 import { Suspense } from 'react';
-import { useSuspenseQuery_experimental } from '@apollo/client';
+import { useSuspenseQuery } from '@apollo/client';
 
 const listQuery = gql`
   query {
@@ -277,7 +277,7 @@ function App() {
 }
 
 function List() {
-  const { data } = useSuspenseQuery_experimental(listQuery);
+  const { data } = useSuspenseQuery(listQuery);
 
   return (
     <ol>
@@ -288,12 +288,12 @@ function List() {
 
 ```
 
-### `useSuspenseQuery_experimental` API
+### `useSuspenseQuery` API
 
 #### Function Signature
 
 ```ts
-function useSuspenseQuery_experimental<
+function useSuspenseQuery<
   TData = any,
   TVariables extends OperationVariables = OperationVariables
 >(

docs/source/caching/cache-interaction.mdx

@@ -9,7 +9,7 @@ Apollo Client supports multiple strategies for interacting with cached data:
 | Strategy | API | Description |
 |----------|-----|-------------|
 | [Using GraphQL queries](#using-graphql-queries) | `readQuery` / `writeQuery` / `updateQuery` | Use standard GraphQL queries for managing both remote and local data. |
-| [Using GraphQL fragments](#using-graphql-fragments) | `readFragment` / `writeFragment` / `updateFragment` / `useFragment_experimental` | Access the fields of any cached object without composing an entire query to reach that object.  |
+| [Using GraphQL fragments](#using-graphql-fragments) | `readFragment` / `writeFragment` / `updateFragment` / `useFragment` | Access the fields of any cached object without composing an entire query to reach that object.  |
 | [Directly modifying cached fields](#using-cachemodify) | `cache.modify` | Manipulate cached data without using GraphQL at all. |
 
  You can use whichever combination of strategies and methods are most helpful for your use case.
@@ -192,11 +192,11 @@ client.writeFragment({
 
 All subscribers to the Apollo Client cache (including all active queries) see this change and update your application's UI accordingly.
 
-### `useFragment_experimental`
+### `useFragment`
 
-> ⚠️ **The `useFragment_experimental` hook is currently at the [preview stage](https://www.apollographql.com/docs/resources/release-stages/#preview) in Apollo Client.** If you have feedback on it, please let us know via [GitHub issues](https://github.com/apollographql/apollo-client/issues/new?assignees=&labels=&template=bug.md).
+> ⚠️ **The `useFragment` hook is currently at the [preview stage](https://www.apollographql.com/docs/resources/release-stages/#preview) in Apollo Client.** If you have feedback on it, please let us know via [GitHub issues](https://github.com/apollographql/apollo-client/issues/new?assignees=&labels=&template=bug.md).
 
-You can read data for a given fragment directly from the cache using the `useFragment_experimental` hook. This hook returns an always-up-to-date view of whatever data the cache currently contains for a given fragment. [See the API reference.](../api/react/hooks-experimental)
+You can read data for a given fragment directly from the cache using the `useFragment` hook. This hook returns an always-up-to-date view of whatever data the cache currently contains for a given fragment. [See the API reference.](../api/react/hooks-experimental)
 
 ## Combining reads and writes
 

docs/source/data/fragments.md

@@ -369,6 +369,6 @@ const cache = new InMemoryCache({
 });
 ```
 
-## `useFragment_experimental`
+## `useFragment`
 
-> ⚠️ **The `useFragment_experimental` hook is currently at the [preview stage](https://www.apollographql.com/docs/resources/release-stages/#preview) in Apollo Client.** [See the API reference for more details.](../api/react/hooks-experimental)
+[See the API reference for more details.](../api/react/hooks-experimental)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apollo/client",
-  "version": "3.8.0-alpha.15",
+  "version": "3.8.0",
   "description": "A fully-featured caching GraphQL client.",
   "private": true,
   "keywords": [

src/__tests__/__snapshots__/exports.ts.snap

@@ -56,15 +56,15 @@ Array [
   "throwServerError",
   "toPromise",
   "useApolloClient",
-  "useBackgroundQuery_experimental",
-  "useFragment_experimental",
+  "useBackgroundQuery",
+  "useFragment",
   "useLazyQuery",
   "useMutation",
   "useQuery",
   "useReactiveVar",
-  "useReadQuery_experimental",
+  "useReadQuery",
   "useSubscription",
-  "useSuspenseQuery_experimental",
+  "useSuspenseQuery",
 ]
 `;
 
@@ -271,15 +271,15 @@ Array [
   "parser",
   "resetApolloContext",
   "useApolloClient",
-  "useBackgroundQuery_experimental",
-  "useFragment_experimental",
+  "useBackgroundQuery",
+  "useFragment",
   "useLazyQuery",
   "useMutation",
   "useQuery",
   "useReactiveVar",
-  "useReadQuery_experimental",
+  "useReadQuery",
   "useSubscription",
-  "useSuspenseQuery_experimental",
+  "useSuspenseQuery",
 ]
 `;
 
@@ -313,15 +313,15 @@ Array [
 exports[`exports of public entry points @apollo/client/react/hooks 1`] = `
 Array [
   "useApolloClient",
-  "useBackgroundQuery_experimental",
-  "useFragment_experimental",
+  "useBackgroundQuery",
+  "useFragment",
   "useLazyQuery",
   "useMutation",
   "useQuery",
   "useReactiveVar",
-  "useReadQuery_experimental",
+  "useReadQuery",
   "useSubscription",
-  "useSuspenseQuery_experimental",
+  "useSuspenseQuery",
 ]
 `;
 

src/react/hooks/__tests__/useBackgroundQuery.test.tsx

@@ -34,10 +34,7 @@ import {
   mockSingleLink,
 } from '../../../testing';
 import { concatPagination, offsetLimitPagination } from '../../../utilities';
-import {
-  useBackgroundQuery_experimental as useBackgroundQuery,
-  useReadQuery_experimental as useReadQuery,
-} from '../useBackgroundQuery';
+import { useBackgroundQuery, useReadQuery } from '../useBackgroundQuery';
 import { ApolloProvider } from '../../context';
 import { SuspenseCache } from '../../cache';
 import { InMemoryCache } from '../../../cache';

src/react/hooks/__tests__/useFragment.test.tsx

@@ -3,7 +3,7 @@ import { render, waitFor, screen, renderHook } from "@testing-library/react";
 import userEvent from '@testing-library/user-event';
 import { act } from "react-dom/test-utils";
 
-import { UseFragmentOptions, useFragment_experimental as useFragment } from "../useFragment";
+import { UseFragmentOptions, useFragment } from "../useFragment";
 import { MockedProvider } from "../../../testing";
 import { ApolloProvider } from "../../context";
 import {

src/react/hooks/__tests__/useSuspenseQuery.test.tsx

@@ -46,7 +46,7 @@ import {
 import { ApolloProvider } from '../../context';
 import { SuspenseCache } from '../../cache';
 import { SuspenseQueryHookFetchPolicy } from '../../../react';
-import { useSuspenseQuery_experimental as useSuspenseQuery } from '../useSuspenseQuery';
+import { useSuspenseQuery } from '../useSuspenseQuery';
 
 type RenderSuspenseHookOptions<Props, TSerializedCache = {}> = Omit<
   RenderHookOptions<Props>,

src/react/hooks/index.ts

@@ -8,14 +8,14 @@ export * from './useSubscription';
 export * from './useReactiveVar';
 export * from './useFragment';
 export {
-  useSuspenseQuery_experimental,
+  useSuspenseQuery,
   UseSuspenseQueryResult,
   FetchMoreFunction,
   RefetchFunction,
   SubscribeToMoreFunction,
 } from './useSuspenseQuery';
 export {
-  useBackgroundQuery_experimental,
-  useReadQuery_experimental,
+  useBackgroundQuery,
+  useReadQuery,
   UseBackgroundQueryResult,
 } from './useBackgroundQuery';