Merge branch 'main' into dependabot/npm_and_yarn/integration-tests/ba…

…bel/traverse-7.23.2

.api-reports/api-report-react.md

@@ -2101,11 +2101,17 @@ export function useQuery<TData = any, TVariables extends OperationVariables = Op
 export function useReactiveVar<T>(rv: ReactiveVar<T>): T;
 
 // @public (undocumented)
-export function useReadQuery<TData>(queryRef: QueryReference<TData>): {
+export function useReadQuery<TData>(queryRef: QueryReference<TData>): UseReadQueryResult<TData>;
+
+// @public (undocumented)
+export interface UseReadQueryResult<TData = unknown> {
+    // (undocumented)
     data: TData;
-    networkStatus: NetworkStatus;
+    // (undocumented)
     error: ApolloError | undefined;
-};
+    // (undocumented)
+    networkStatus: NetworkStatus;
+}
 
 // @public (undocumented)
 export function useSubscription<TData = any, TVariables extends OperationVariables = OperationVariables>(subscription: DocumentNode | TypedDocumentNode<TData, TVariables>, options?: SubscriptionHookOptions<NoInfer<TData>, NoInfer<TVariables>>): SubscriptionResult<TData, TVariables>;

.api-reports/api-report-react_hooks.md

@@ -1988,11 +1988,17 @@ export function useQuery<TData = any, TVariables extends OperationVariables = Op
 export function useReactiveVar<T>(rv: ReactiveVar<T>): T;
 
 // @public (undocumented)
-export function useReadQuery<TData>(queryRef: QueryReference<TData>): {
+export function useReadQuery<TData>(queryRef: QueryReference<TData>): UseReadQueryResult<TData>;
+
+// @public (undocumented)
+export interface UseReadQueryResult<TData = unknown> {
+    // (undocumented)
     data: TData;
-    networkStatus: NetworkStatus;
+    // (undocumented)
     error: ApolloError | undefined;
-};
+    // (undocumented)
+    networkStatus: NetworkStatus;
+}
 
 // Warning: (ae-forgotten-export) The symbol "SubscriptionHookOptions" needs to be exported by the entry point index.d.ts
 //

.api-reports/api-report.md

@@ -2742,11 +2742,17 @@ export function useQuery<TData = any, TVariables extends OperationVariables = Op
 export function useReactiveVar<T>(rv: ReactiveVar<T>): T;
 
 // @public (undocumented)
-export function useReadQuery<TData>(queryRef: QueryReference<TData>): {
+export function useReadQuery<TData>(queryRef: QueryReference<TData>): UseReadQueryResult<TData>;
+
+// @public (undocumented)
+export interface UseReadQueryResult<TData = unknown> {
+    // (undocumented)
     data: TData;
-    networkStatus: NetworkStatus;
+    // (undocumented)
     error: ApolloError | undefined;
-};
+    // (undocumented)
+    networkStatus: NetworkStatus;
+}
 
 // @public (undocumented)
 export function useSubscription<TData = any, TVariables extends OperationVariables = OperationVariables>(subscription: DocumentNode | TypedDocumentNode<TData, TVariables>, options?: SubscriptionHookOptions<NoInfer<TData>, NoInfer<TVariables>>): SubscriptionResult<TData, TVariables>;

.changeset/good-experts-repair.md

@@ -0,0 +1,5 @@
+---
+"@apollo/client": patch
+---
+
+Add an explicit return type for the `useReadQuery` hook called `UseReadQueryResult`. Previously the return type of this hook was inferred from the return value.

.circleci/config.yml

@@ -1,7 +1,7 @@
 version: 2.1
 
 orbs:
-  secops: apollo/[email protected].0
+  secops: apollo/[email protected].1
 
 jobs:
   # Filesize:

docs/source/development-testing/testing.mdx

@@ -169,6 +169,9 @@ We can use the asynchronous `screen.findByText` method to query the DOM elements
 ```jsx
 it("should render dog", async () => {
   const dogMock = {
+    delay: 30 // to prevent React from batching the loading state away
+    // delay: Infinity // if you only want to test the loading state
+
     request: {
       query: GET_DOG_QUERY,
       variables: { name: "Buck" }

renovate.json

@@ -33,6 +33,7 @@
     "react-dom-17",
     "@testing-library/react-12",
     "@rollup/plugin-node-resolve",
-    "rollup"
+    "rollup",
+    "glob"
   ]
 }

src/react/hooks/index.ts

@@ -11,6 +11,7 @@ export type { UseSuspenseQueryResult } from "./useSuspenseQuery.js";
 export { useSuspenseQuery } from "./useSuspenseQuery.js";
 export type { UseBackgroundQueryResult } from "./useBackgroundQuery.js";
 export { useBackgroundQuery } from "./useBackgroundQuery.js";
+export type { UseReadQueryResult } from "./useReadQuery.js";
 export { useReadQuery } from "./useReadQuery.js";
 export { skipToken } from "./constants.js";
 export type { SkipToken } from "./constants.js";

src/react/hooks/useReadQuery.ts

@@ -5,8 +5,37 @@ import { __use } from "./internal/index.js";
 import { toApolloError } from "./useSuspenseQuery.js";
 import { invariant } from "../../utilities/globals/index.js";
 import { useSyncExternalStore } from "./useSyncExternalStore.js";
+import type { ApolloError } from "../../errors/index.js";
+import type { NetworkStatus } from "../../core/index.js";
 
-export function useReadQuery<TData>(queryRef: QueryReference<TData>) {
+export interface UseReadQueryResult<TData = unknown> {
+  /**
+   * An object containing the result of your GraphQL query after it completes.
+   *
+   * This value might be `undefined` if a query results in one or more errors
+   * (depending on the query's `errorPolicy`).
+   */
+  data: TData;
+  /**
+   * If the query produces one or more errors, this object contains either an
+   * array of `graphQLErrors` or a single `networkError`. Otherwise, this value
+   * is `undefined`.
+   *
+   * This property can be ignored when using the default `errorPolicy` or an
+   * `errorPolicy` of `none`. The hook will throw the error instead of setting
+   * this property.
+   */
+  error: ApolloError | undefined;
+  /**
+   * A number indicating the current network state of the query's associated
+   * request. {@link https://github.com/apollographql/apollo-client/blob/d96f4578f89b933c281bb775a39503f6cdb59ee8/src/core/networkStatus.ts#L4 | See possible values}.
+   */
+  networkStatus: NetworkStatus;
+}
+
+export function useReadQuery<TData>(
+  queryRef: QueryReference<TData>
+): UseReadQueryResult<TData> {
   const internalQueryRef = unwrapQueryRef(queryRef);
   invariant(
     internalQueryRef.promiseCache,

src/testing/react/__tests__/MockedProvider.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { DocumentNode } from "graphql";
-import { render, waitFor } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import gql from "graphql-tag";
 
 import { itAsync, MockedResponse, MockLink } from "../../core";
@@ -708,6 +708,70 @@ describe("General use", () => {
       }).then(resolve, reject);
     }
   );
+
+  it("should support loading state testing with delay", async () => {
+    function Component({ username }: Variables) {
+      const { loading, data } = useQuery<Data, Variables>(query, { variables });
+
+      if (loading || data === undefined) return <p>Loading the user ID...</p>;
+
+      return <p>The user ID is '{data.user.id}'</p>;
+    }
+
+    const mocks: ReadonlyArray<MockedResponse> = [
+      {
+        delay: 30, // prevent React from batching the loading state away
+        request: {
+          query,
+          variables,
+        },
+        result: { data: { user } },
+      },
+    ];
+
+    render(
+      <MockedProvider mocks={mocks}>
+        <Component {...variables} />
+      </MockedProvider>
+    );
+
+    expect(
+      await screen.findByText("Loading the user ID...")
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByText("The user ID is 'user_id'")
+    ).toBeInTheDocument();
+  });
+
+  it("should support loading state testing with infinite delay", async () => {
+    function Component({ username }: Variables) {
+      const { loading, data } = useQuery<Data, Variables>(query, { variables });
+
+      if (loading || data === undefined) return <p>Loading the user ID...</p>;
+
+      return <p>The user ID is '{data.user.id}'</p>;
+    }
+
+    const mocks: ReadonlyArray<MockedResponse> = [
+      {
+        delay: Infinity, // keep loading forever.
+        request: {
+          query,
+          variables,
+        },
+      },
+    ];
+
+    render(
+      <MockedProvider mocks={mocks}>
+        <Component {...variables} />
+      </MockedProvider>
+    );
+
+    expect(
+      await screen.findByText("Loading the user ID...")
+    ).toBeInTheDocument();
+  });
 });
 
 describe("@client testing", () => {