Skip to content

Commit

Permalink
Use import * as React everywhere.
Browse files Browse the repository at this point in the history
This prevents an error when importing `@apollo/client` in a React Server component. (see [#10974](#10974))
  • Loading branch information
phryneas committed Jun 21, 2023
1 parent 43c506a commit e32ad86
Show file tree
Hide file tree
Showing 14 changed files with 43 additions and 23 deletions.
5 changes: 5 additions & 0 deletions .changeset/large-beers-rhyme.md
Original file line number Diff line number Diff line change
@@ -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))
2 changes: 1 addition & 1 deletion src/react/hooks/internal/__use.ts
Original file line number Diff line number Diff line change
@@ -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
Expand Down
4 changes: 2 additions & 2 deletions src/react/hooks/internal/useDeepMemo.ts
Original file line number Diff line number Diff line change
@@ -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 };
Expand Down
4 changes: 3 additions & 1 deletion src/react/hooks/internal/useIsomorphicLayoutEffect.ts
Original file line number Diff line number Diff line change
@@ -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
Expand Down
4 changes: 2 additions & 2 deletions src/react/hooks/internal/useStrictModeSafeCleanupEffect.ts
Original file line number Diff line number Diff line change
@@ -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 () => {
Expand Down
4 changes: 2 additions & 2 deletions src/react/hooks/useApolloClient.ts
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
4 changes: 3 additions & 1 deletion src/react/hooks/useBackgroundQuery.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useEffect, useState, useMemo, useCallback } from 'react';
import * as React from 'react';
import type {
DocumentNode,
OperationVariables,
Expand All @@ -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
Expand Down
4 changes: 3 additions & 1 deletion src/react/hooks/useLazyQuery.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 = [
Expand Down
4 changes: 3 additions & 1 deletion src/react/hooks/useMutation.ts
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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,
Expand Down
16 changes: 9 additions & 7 deletions src/react/hooks/useQuery.ts
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -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,
Expand Down
4 changes: 3 additions & 1 deletion src/react/hooks/useReactiveVar.ts
Original file line number Diff line number Diff line change
@@ -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();

Expand Down
4 changes: 3 additions & 1 deletion src/react/hooks/useSubscription.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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>>,
Expand Down
4 changes: 2 additions & 2 deletions src/react/hooks/useSuspenseCache.ts
Original file line number Diff line number Diff line change
@@ -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(
Expand Down
3 changes: 2 additions & 1 deletion src/react/hooks/useSuspenseQuery.ts
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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
Expand Down

0 comments on commit e32ad86

Please sign in to comment.