Use import * as React everywhere.

This prevents an error when importing `@apollo/client` in a React Server component. (see [#10974](#10974))

.changeset/large-beers-rhyme.md

@@ -0,0 +1,5 @@
+---
+'@apollo/client': patch
+---
+
+Use `import * as React` everywhere. This prevents an error when importing `@apollo/client` in a React Server component. (see [#10974](https://github.com/apollographql/apollo-client/issues/10974))

src/react/hooks/internal/__use.ts

@@ -1,5 +1,5 @@
 import { wrapPromiseWithState } from '../../../utilities';
-import React from 'react';
+import * as React from 'react';
 
 type Use = <T>(promise: Promise<T>) => T;
 // Prevent webpack from complaining about our feature detection of the

src/react/hooks/internal/useDeepMemo.ts

@@ -1,12 +1,12 @@
 import type { DependencyList } from 'react';
-import { useRef } from 'react';
+import * as React from 'react';
 import { equal } from '@wry/equality';
 
 export function useDeepMemo<TValue>(
   memoFn: () => TValue,
   deps: DependencyList
 ) {
-  const ref = useRef<{ deps: DependencyList; value: TValue }>();
+  const ref = React.useRef<{ deps: DependencyList; value: TValue }>();
 
   if (!ref.current || !equal(ref.current.deps, deps)) {
     ref.current = { value: memoFn(), deps };

src/react/hooks/internal/useIsomorphicLayoutEffect.ts

@@ -1,6 +1,8 @@
-import { useLayoutEffect, useEffect } from 'react';
+import * as React from 'react';
 import { canUseDOM } from '../../../utilities';
 
+const { useLayoutEffect, useEffect } = React;
+
 // use canUseDOM here instead of canUseLayoutEffect because we want to be able
 // to use useLayoutEffect in our jest tests. useLayoutEffect seems to work fine
 // in useSuspenseQuery tests, but to honor the original comment about the

src/react/hooks/internal/useStrictModeSafeCleanupEffect.ts

@@ -1,9 +1,9 @@
-import { useEffect } from 'react';
+import * as React from 'react';
 
 export function useStrictModeSafeCleanupEffect(cleanup: () => void) {
   let timeout: NodeJS.Timeout;
 
-  useEffect(() => {
+  React.useEffect(() => {
     clearTimeout(timeout);
 
     return () => {

src/react/hooks/useApolloClient.ts

@@ -1,12 +1,12 @@
 import { invariant } from '../../utilities/globals';
-import { useContext } from 'react';
+import * as React from 'react';
 import type { ApolloClient } from '../../core';
 import { getApolloContext } from '../context';
 
 export function useApolloClient(
   override?: ApolloClient<object>,
 ): ApolloClient<object> {
-  const context = useContext(getApolloContext());
+  const context = React.useContext(getApolloContext());
   const client = override || context.client;
   invariant(
     !!client,

src/react/hooks/useBackgroundQuery.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState, useMemo, useCallback } from 'react';
+import * as React from 'react';
 import type {
   DocumentNode,
   OperationVariables,
@@ -20,6 +20,8 @@ import { canonicalStringify } from '../../cache';
 import type { DeepPartial } from '../../utilities';
 import { invariant } from '../../utilities/globals';
 
+const { useEffect, useState, useMemo, useCallback } = React;
+
 export type UseBackgroundQueryResult<
   TData = unknown,
   TVariables extends OperationVariables = OperationVariables

src/react/hooks/useLazyQuery.ts

@@ -1,6 +1,6 @@
 import type { DocumentNode } from 'graphql';
 import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
-import { useCallback, useMemo, useRef } from 'react';
+import * as React from 'react';
 
 import type { OperationVariables } from '../../core';
 import { mergeOptions } from '../../utilities';
@@ -14,6 +14,8 @@ import type {
 import { useInternalState } from './useQuery';
 import { useApolloClient } from './useApolloClient';
 
+const { useCallback, useMemo, useRef } = React;
+
 // The following methods, when called will execute the query, regardless of
 // whether the useLazyQuery execute function was called before.
 const EAGER_METHODS = [

src/react/hooks/useMutation.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import * as React from 'react';
 import type { DocumentNode } from 'graphql';
 import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import type {
@@ -21,6 +21,8 @@ import { DocumentType, verifyDocumentType } from '../parser';
 import { ApolloError } from '../../errors';
 import { useApolloClient } from './useApolloClient';
 
+const { useCallback, useEffect, useRef, useState } = React;
+
 export function useMutation<
   TData = any,
   TVariables = OperationVariables,

src/react/hooks/useQuery.ts

@@ -1,12 +1,6 @@
 import { invariant } from '../../utilities/globals';
 
-import {
-  useCallback,
-  useContext,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import * as React from 'react';
 import { useSyncExternalStore } from './useSyncExternalStore';
 import { equal } from '@wry/equality';
 
@@ -36,6 +30,14 @@ import { DocumentType, verifyDocumentType } from '../parser';
 import { useApolloClient } from './useApolloClient';
 import { canUseWeakMap, compact, isNonEmptyArray, maybeDeepFreeze } from '../../utilities';
 
+const {
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+} = React;
+
 const {
   prototype: {
     hasOwnProperty,

src/react/hooks/useReactiveVar.ts

@@ -1,6 +1,8 @@
-import { useEffect, useState } from 'react';
+import * as React from 'react';
 import type { ReactiveVar } from '../../core';
 
+const { useEffect, useState } = React;
+
 export function useReactiveVar<T>(rv: ReactiveVar<T>): T {
   const value = rv();
 

src/react/hooks/useSubscription.ts

@@ -1,5 +1,5 @@
 import { invariant } from '../../utilities/globals';
-import { useState, useRef, useEffect } from 'react';
+import * as React from 'react';
 import type { DocumentNode } from 'graphql';
 import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import { equal } from '@wry/equality';
@@ -13,6 +13,8 @@ import type {
 import type { OperationVariables } from '../../core';
 import { useApolloClient } from './useApolloClient';
 
+const { useState, useRef, useEffect } = React;
+
 export function useSubscription<TData = any, TVariables extends OperationVariables = OperationVariables>(
   subscription: DocumentNode | TypedDocumentNode<TData, TVariables>,
   options?: SubscriptionHookOptions<NoInfer<TData>, NoInfer<TVariables>>,

src/react/hooks/useSuspenseCache.ts

@@ -1,10 +1,10 @@
-import { useContext } from 'react';
+import * as React from 'react';
 import { getApolloContext } from '../context';
 import { invariant } from '../../utilities/globals';
 import type { SuspenseCache } from '../cache';
 
 export function useSuspenseCache(override?: SuspenseCache) {
-  const context = useContext(getApolloContext());
+  const context = React.useContext(getApolloContext());
   const suspenseCache = override || context.suspenseCache;
 
   invariant(

src/react/hooks/useSuspenseQuery.ts

@@ -1,5 +1,5 @@
 import { invariant, __DEV__ } from '../../utilities/globals';
-import { useRef, useCallback, useMemo, useEffect, useState } from 'react';
+import * as React from 'react';
 import type {
   ApolloClient,
   ApolloQueryResult,
@@ -25,6 +25,7 @@ import { useSuspenseCache } from './useSuspenseCache';
 import type { QueryReference } from '../cache/QueryReference';
 import { canonicalStringify } from '../../cache';
 
+const { useRef, useCallback, useMemo, useEffect, useState } = React;
 export interface UseSuspenseQueryResult<
   TData = unknown,
   TVariables extends OperationVariables = OperationVariables