From d6d14911c40782cd6d69167b6f6169c890091ccb Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Wed, 8 Nov 2023 12:50:59 +0100 Subject: [PATCH] use external package to wrap `React` imports to circumvent non-existing functions in RSC (#11175) Co-authored-by: Jerel Miller --- .api-reports/api-report-react.md | 21 +++++++--------- .api-reports/api-report-react_components.md | 15 ++++++----- .api-reports/api-report-react_context.md | 21 +++++++--------- .api-reports/api-report-react_hoc.md | 14 +++++------ .api-reports/api-report-react_ssr.md | 20 ++++++--------- .api-reports/api-report.md | 21 +++++++--------- .changeset/friendly-clouds-laugh.md | 7 ++++++ .size-limit.cjs | 2 +- config/apiExtractor.ts | 25 ++++++++++++++++++- package-lock.json | 18 +++++++++++++ package.json | 1 + src/react/components/Mutation.tsx | 3 ++- src/react/components/Query.tsx | 5 +++- src/react/components/Subscription.tsx | 5 +++- src/react/components/types.ts | 12 ++++++--- src/react/context/ApolloConsumer.tsx | 7 +++--- src/react/context/ApolloContext.ts | 5 ++-- src/react/context/ApolloProvider.tsx | 7 +++--- src/react/hoc/graphql.tsx | 5 ++-- src/react/hoc/hoc-utils.tsx | 2 +- src/react/hoc/mutation-hoc.tsx | 7 +++--- src/react/hoc/query-hoc.tsx | 7 +++--- src/react/hoc/subscription-hoc.tsx | 7 +++--- src/react/hoc/withApollo.tsx | 13 ++++++---- src/react/hooks/internal/__use.ts | 2 +- src/react/hooks/internal/useDeepMemo.ts | 2 +- .../internal/useIsomorphicLayoutEffect.ts | 2 +- src/react/hooks/useApolloClient.ts | 2 +- src/react/hooks/useBackgroundQuery.ts | 2 +- src/react/hooks/useFragment.ts | 2 +- src/react/hooks/useLazyQuery.ts | 2 +- src/react/hooks/useMutation.ts | 2 +- src/react/hooks/useQuery.ts | 2 +- src/react/hooks/useReactiveVar.ts | 2 +- src/react/hooks/useReadQuery.ts | 2 +- src/react/hooks/useSubscription.ts | 2 +- src/react/hooks/useSuspenseQuery.ts | 2 +- src/react/hooks/useSyncExternalStore.ts | 2 +- src/react/ssr/RenderPromises.ts | 5 ++-- src/react/ssr/getDataFromTree.ts | 9 ++++--- src/react/ssr/renderToStringWithData.ts | 4 +-- src/react/types/types.ts | 4 +-- 42 files changed, 179 insertions(+), 121 deletions(-) create mode 100644 .changeset/friendly-clouds-laugh.md diff --git a/.api-reports/api-report-react.md b/.api-reports/api-report-react.md index ff07bab0665..ceee7f54aac 100644 --- a/.api-reports/api-report-react.md +++ b/.api-reports/api-report-react.md @@ -4,8 +4,6 @@ ```ts -/// - import type { ASTNode } from 'graphql'; import type { DocumentNode } from 'graphql'; import type { ExecutionResult } from 'graphql'; @@ -15,8 +13,7 @@ import type { GraphQLError } from 'graphql'; import type { GraphQLErrorExtensions } from 'graphql'; import { Observable } from 'zen-observable-ts'; import type { Observer } from 'zen-observable-ts'; -import * as React_2 from 'react'; -import { ReactNode } from 'react'; +import type * as ReactTypes from 'react'; import type { Subscriber } from 'zen-observable-ts'; import type { Subscription } from 'zen-observable-ts'; import { TypedDocumentNode } from '@graphql-typed-document-node/core'; @@ -219,14 +216,14 @@ type ApolloClientOptions = { // Warning: (ae-forgotten-export) The symbol "ApolloConsumerProps" needs to be exported by the entry point index.d.ts // // @public (undocumented) -export const ApolloConsumer: React_2.FC; +export const ApolloConsumer: ReactTypes.FC; // @public (undocumented) interface ApolloConsumerProps { // Warning: (ae-forgotten-export) The symbol "ApolloClient" needs to be exported by the entry point index.d.ts // // (undocumented) - children: (client: ApolloClient) => React_2.ReactChild | null; + children: (client: ApolloClient) => ReactTypes.ReactChild | null; } // @public (undocumented) @@ -320,12 +317,12 @@ class ApolloLink { // Warning: (ae-forgotten-export) The symbol "ApolloProviderProps" needs to be exported by the entry point index.d.ts // // @public (undocumented) -export const ApolloProvider: React_2.FC>; +export const ApolloProvider: ReactTypes.FC>; // @public (undocumented) interface ApolloProviderProps { // (undocumented) - children: React_2.ReactNode | React_2.ReactNode[] | null; + children: ReactTypes.ReactNode | ReactTypes.ReactNode[] | null; // (undocumented) client: ApolloClient; } @@ -857,7 +854,7 @@ interface FragmentMap { type FragmentMatcher = (rootValue: any, typeCondition: string, context: any) => boolean; // @public (undocumented) -export function getApolloContext(): React_2.Context; +export function getApolloContext(): ReactTypes.Context; // @public (undocumented) type GraphQLErrors = ReadonlyArray; @@ -1420,7 +1417,7 @@ interface QueryData { // @public (undocumented) export interface QueryDataOptions extends QueryFunctionOptions { // (undocumented) - children?: (result: QueryResult) => ReactNode; + children?: (result: QueryResult) => ReactTypes.ReactNode; // (undocumented) query: DocumentNode | TypedDocumentNode; } @@ -1780,11 +1777,11 @@ type RefetchWritePolicy = "merge" | "overwrite"; // @public (undocumented) class RenderPromises { // (undocumented) - addObservableQueryPromise(obsQuery: ObservableQuery): ReactNode; + addObservableQueryPromise(obsQuery: ObservableQuery): ReactTypes.ReactNode; // Warning: (ae-forgotten-export) The symbol "QueryData" needs to be exported by the entry point index.d.ts // // (undocumented) - addQueryPromise(queryInstance: QueryData, finish?: () => React.ReactNode): React.ReactNode; + addQueryPromise(queryInstance: QueryData, finish?: () => ReactTypes.ReactNode): ReactTypes.ReactNode; // (undocumented) consumeAndAwaitPromises(): Promise; // (undocumented) diff --git a/.api-reports/api-report-react_components.md b/.api-reports/api-report-react_components.md index bfb472ede13..ab9ab7432fb 100644 --- a/.api-reports/api-report-react_components.md +++ b/.api-reports/api-report-react_components.md @@ -4,8 +4,6 @@ ```ts -/// - import type { ASTNode } from 'graphql'; import type { DocumentNode } from 'graphql'; import type { ExecutionResult } from 'graphql'; @@ -16,6 +14,7 @@ import type { GraphQLErrorExtensions } from 'graphql'; import { Observable } from 'zen-observable-ts'; import type { Observer } from 'zen-observable-ts'; import * as PropTypes from 'prop-types'; +import type * as ReactTypes from 'react'; import type { Subscriber } from 'zen-observable-ts'; import type { Subscription as Subscription_2 } from 'zen-observable-ts'; import { TypedDocumentNode } from '@graphql-typed-document-node/core'; @@ -915,7 +914,7 @@ type Modifiers = Record> = Partia }>; // @public (undocumented) -export function Mutation(props: MutationComponentOptions): JSX.Element | null; +export function Mutation(props: MutationComponentOptions): ReactTypes.JSX.Element | null; // @public (undocumented) export namespace Mutation { @@ -967,7 +966,7 @@ export interface MutationComponentOptions, result: MutationResult) => JSX.Element | null; + children: (mutateFunction: MutationFunction, result: MutationResult) => ReactTypes.JSX.Element | null; // (undocumented) mutation: DocumentNode | TypedDocumentNode; } @@ -1205,7 +1204,7 @@ type OperationVariables = Record; type Path = ReadonlyArray; // @public (undocumented) -export function Query(props: QueryComponentOptions): JSX.Element | null; +export function Query(props: QueryComponentOptions): ReactTypes.JSX.Element | null; // @public (undocumented) export namespace Query { @@ -1226,7 +1225,7 @@ export interface QueryComponentOptions) => JSX.Element | null; + children: (result: QueryResult) => ReactTypes.JSX.Element | null; // (undocumented) query: DocumentNode | TypedDocumentNode; } @@ -1615,7 +1614,7 @@ type SubscribeToMoreOptions(props: SubscriptionComponentOptions): JSX.Element | null; +export function Subscription(props: SubscriptionComponentOptions): ReactTypes.JSX.Element | null; // @public (undocumented) export namespace Subscription { @@ -1634,7 +1633,7 @@ export interface Subscription { // @public (undocumented) export interface SubscriptionComponentOptions extends BaseSubscriptionOptions { // (undocumented) - children?: null | ((result: SubscriptionResult) => JSX.Element | null); + children?: null | ((result: SubscriptionResult) => ReactTypes.JSX.Element | null); // (undocumented) subscription: DocumentNode | TypedDocumentNode; } diff --git a/.api-reports/api-report-react_context.md b/.api-reports/api-report-react_context.md index 384e4137877..949a46e67e6 100644 --- a/.api-reports/api-report-react_context.md +++ b/.api-reports/api-report-react_context.md @@ -4,8 +4,6 @@ ```ts -/// - import type { ASTNode } from 'graphql'; import type { DocumentNode } from 'graphql'; import type { ExecutionResult } from 'graphql'; @@ -15,8 +13,7 @@ import type { GraphQLError } from 'graphql'; import type { GraphQLErrorExtensions } from 'graphql'; import { Observable } from 'zen-observable-ts'; import type { Observer } from 'zen-observable-ts'; -import * as React_2 from 'react'; -import { ReactNode } from 'react'; +import type * as ReactTypes from 'react'; import type { Subscriber } from 'zen-observable-ts'; import type { Subscription } from 'zen-observable-ts'; import { TypedDocumentNode } from '@graphql-typed-document-node/core'; @@ -217,14 +214,14 @@ type ApolloClientOptions = { }; // @public (undocumented) -export const ApolloConsumer: React_2.FC; +export const ApolloConsumer: ReactTypes.FC; // @public (undocumented) 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) => React_2.ReactChild | null; + children: (client: ApolloClient) => ReactTypes.ReactChild | null; } // @public (undocumented) @@ -316,12 +313,12 @@ class ApolloLink { } // @public (undocumented) -export const ApolloProvider: React_2.FC>; +export const ApolloProvider: ReactTypes.FC>; // @public (undocumented) export interface ApolloProviderProps { // (undocumented) - children: React_2.ReactNode | React_2.ReactNode[] | null; + children: ReactTypes.ReactNode | ReactTypes.ReactNode[] | null; // (undocumented) client: ApolloClient; } @@ -723,7 +720,7 @@ interface FragmentMap { type FragmentMatcher = (rootValue: any, typeCondition: string, context: any) => boolean; // @public (undocumented) -export function getApolloContext(): React_2.Context; +export function getApolloContext(): ReactTypes.Context; // @public (undocumented) type GraphQLErrors = ReadonlyArray; @@ -1136,7 +1133,7 @@ interface QueryDataOptions) => ReactNode; + children?: (result: QueryResult) => ReactTypes.ReactNode; // (undocumented) query: DocumentNode | TypedDocumentNode; } @@ -1454,11 +1451,11 @@ type RefetchWritePolicy = "merge" | "overwrite"; // @public (undocumented) class RenderPromises { // (undocumented) - addObservableQueryPromise(obsQuery: ObservableQuery): ReactNode; + addObservableQueryPromise(obsQuery: ObservableQuery): ReactTypes.ReactNode; // Warning: (ae-forgotten-export) The symbol "QueryData" needs to be exported by the entry point index.d.ts // // (undocumented) - addQueryPromise(queryInstance: QueryData, finish?: () => React.ReactNode): React.ReactNode; + addQueryPromise(queryInstance: QueryData, finish?: () => ReactTypes.ReactNode): ReactTypes.ReactNode; // (undocumented) consumeAndAwaitPromises(): Promise; // Warning: (ae-forgotten-export) The symbol "QueryDataOptions" needs to be exported by the entry point index.d.ts diff --git a/.api-reports/api-report-react_hoc.md b/.api-reports/api-report-react_hoc.md index 3ed5c1b1873..bf4d99a6b7b 100644 --- a/.api-reports/api-report-react_hoc.md +++ b/.api-reports/api-report-react_hoc.md @@ -4,8 +4,6 @@ ```ts -/// - import type { ASTNode } from 'graphql'; import type { DocumentNode } from 'graphql'; import type { ExecutionResult } from 'graphql'; @@ -15,7 +13,7 @@ import type { GraphQLError } from 'graphql'; import type { GraphQLErrorExtensions } from 'graphql'; import { Observable } from 'zen-observable-ts'; import type { Observer } from 'zen-observable-ts'; -import * as React_2 from 'react'; +import type * as ReactTypes from 'react'; import type { Subscriber } from 'zen-observable-ts'; import type { Subscription } from 'zen-observable-ts'; import { TypedDocumentNode } from '@graphql-typed-document-node/core'; @@ -733,7 +731,7 @@ interface FragmentMap { type FragmentMatcher = (rootValue: any, typeCondition: string, context: any) => boolean; // @public (undocumented) -export function graphql> & Partial>>(document: DocumentNode, operationOptions?: OperationOption): (WrappedComponent: React.ComponentType) => React.ComponentClass; +export function graphql> & Partial>>(document: DocumentNode, operationOptions?: OperationOption): (WrappedComponent: ReactTypes.ComponentType) => ReactTypes.ComponentClass; // @public (undocumented) type GraphQLErrors = ReadonlyArray; @@ -1660,7 +1658,7 @@ interface WatchQueryOptions(WrappedComponent: React_2.ComponentType>>, operationOptions?: OperationOption): React_2.ComponentClass>; +export function withApollo(WrappedComponent: ReactTypes.ComponentType>>, operationOptions?: OperationOption): ReactTypes.ComponentClass>; // @public (undocumented) export type WithApolloClient

= P & { @@ -1668,13 +1666,13 @@ export type WithApolloClient

= P & { }; // @public (undocumented) -export function withMutation = {}, TGraphQLVariables extends OperationVariables = {}, TChildProps = MutateProps, TContext extends Record = DefaultContext, TCache extends ApolloCache = ApolloCache>(document: DocumentNode, operationOptions?: OperationOption): (WrappedComponent: React_2.ComponentType) => React_2.ComponentClass; +export function withMutation = {}, TGraphQLVariables extends OperationVariables = {}, TChildProps = MutateProps, TContext extends Record = DefaultContext, TCache extends ApolloCache = ApolloCache>(document: DocumentNode, operationOptions?: OperationOption): (WrappedComponent: ReactTypes.ComponentType) => ReactTypes.ComponentClass; // @public (undocumented) -export function withQuery = Record, TData extends object = {}, TGraphQLVariables extends object = {}, TChildProps extends object = DataProps>(document: DocumentNode, operationOptions?: OperationOption): (WrappedComponent: React_2.ComponentType) => React_2.ComponentClass; +export function withQuery = Record, TData extends object = {}, TGraphQLVariables extends object = {}, TChildProps extends object = DataProps>(document: DocumentNode, operationOptions?: OperationOption): (WrappedComponent: ReactTypes.ComponentType) => ReactTypes.ComponentClass; // @public (undocumented) -export function withSubscription>(document: DocumentNode, operationOptions?: OperationOption): (WrappedComponent: React_2.ComponentType) => React_2.ComponentClass; +export function withSubscription>(document: DocumentNode, operationOptions?: OperationOption): (WrappedComponent: ReactTypes.ComponentType) => ReactTypes.ComponentClass; // Warnings were encountered during analysis: // diff --git a/.api-reports/api-report-react_ssr.md b/.api-reports/api-report-react_ssr.md index bfee4799898..9f6a2cdaf8e 100644 --- a/.api-reports/api-report-react_ssr.md +++ b/.api-reports/api-report-react_ssr.md @@ -4,8 +4,6 @@ ```ts -/// - import type { ASTNode } from 'graphql'; import type { DocumentNode } from 'graphql'; import type { ExecutionResult } from 'graphql'; @@ -15,9 +13,7 @@ import type { GraphQLError } from 'graphql'; import type { GraphQLErrorExtensions } from 'graphql'; import { Observable } from 'zen-observable-ts'; import type { Observer } from 'zen-observable-ts'; -import * as React_2 from 'react'; -import type { ReactElement } from 'react'; -import { ReactNode } from 'react'; +import type * as ReactTypes from 'react'; import type { Subscriber } from 'zen-observable-ts'; import type { Subscription } from 'zen-observable-ts'; import { TypedDocumentNode } from '@graphql-typed-document-node/core'; @@ -694,7 +690,7 @@ interface FragmentMap { type FragmentMatcher = (rootValue: any, typeCondition: string, context: any) => boolean; // @public (undocumented) -export function getDataFromTree(tree: React_2.ReactNode, context?: { +export function getDataFromTree(tree: ReactTypes.ReactNode, context?: { [key: string]: any; }): Promise; @@ -705,11 +701,11 @@ export function getMarkupFromTree({ tree, context, renderFunction, }: GetMarkupF // @public (undocumented) type GetMarkupFromTreeOptions = { - tree: React_2.ReactNode; + tree: ReactTypes.ReactNode; context?: { [key: string]: any; }; - renderFunction?: (tree: React_2.ReactElement) => string | PromiseLike; + renderFunction?: (tree: ReactTypes.ReactElement) => string | PromiseLike; }; // @public (undocumented) @@ -1123,7 +1119,7 @@ interface QueryDataOptions) => ReactNode; + children?: (result: QueryResult) => ReactTypes.ReactNode; // (undocumented) query: DocumentNode | TypedDocumentNode; } @@ -1441,11 +1437,11 @@ type RefetchWritePolicy = "merge" | "overwrite"; // @public (undocumented) export class RenderPromises { // (undocumented) - addObservableQueryPromise(obsQuery: ObservableQuery): ReactNode; + addObservableQueryPromise(obsQuery: ObservableQuery): ReactTypes.ReactNode; // Warning: (ae-forgotten-export) The symbol "QueryData" needs to be exported by the entry point index.d.ts // // (undocumented) - addQueryPromise(queryInstance: QueryData, finish?: () => React.ReactNode): React.ReactNode; + addQueryPromise(queryInstance: QueryData, finish?: () => ReactTypes.ReactNode): ReactTypes.ReactNode; // (undocumented) consumeAndAwaitPromises(): Promise; // Warning: (ae-forgotten-export) The symbol "QueryDataOptions" needs to be exported by the entry point index.d.ts @@ -1461,7 +1457,7 @@ export class RenderPromises { } // @public (undocumented) -export function renderToStringWithData(component: ReactElement): Promise; +export function renderToStringWithData(component: ReactTypes.ReactElement): Promise; // @public (undocumented) type RequestHandler = (operation: Operation, forward: NextLink) => Observable | null; diff --git a/.api-reports/api-report.md b/.api-reports/api-report.md index 227e554222e..a9d2cce7e79 100644 --- a/.api-reports/api-report.md +++ b/.api-reports/api-report.md @@ -4,8 +4,6 @@ ```ts -/// - import type { ASTNode } from 'graphql'; import { disableExperimentalFragmentVariables } from 'graphql-tag'; import { disableFragmentWarnings } from 'graphql-tag'; @@ -22,8 +20,7 @@ import { InvariantError } from 'ts-invariant'; import { Observable } from 'zen-observable-ts'; import type { Subscription as ObservableSubscription } from 'zen-observable-ts'; import type { Observer } from 'zen-observable-ts'; -import * as React_2 from 'react'; -import { ReactNode } from 'react'; +import type * as ReactTypes from 'react'; import { resetCaches } from 'graphql-tag'; import type { SelectionSetNode } from 'graphql'; import { setVerbosity as setLogVerbosity } from 'ts-invariant'; @@ -188,12 +185,12 @@ export type ApolloClientOptions = { // Warning: (ae-forgotten-export) The symbol "ApolloConsumerProps" needs to be exported by the entry point index.d.ts // // @public (undocumented) -export const ApolloConsumer: React_2.FC; +export const ApolloConsumer: ReactTypes.FC; // @public (undocumented) interface ApolloConsumerProps { // (undocumented) - children: (client: ApolloClient) => React_2.ReactChild | null; + children: (client: ApolloClient) => ReactTypes.ReactChild | null; } // @public (undocumented) @@ -286,12 +283,12 @@ export interface ApolloPayloadResult, TExtensions = // Warning: (ae-forgotten-export) The symbol "ApolloProviderProps" needs to be exported by the entry point index.d.ts // // @public (undocumented) -export const ApolloProvider: React_2.FC>; +export const ApolloProvider: ReactTypes.FC>; // @public (undocumented) interface ApolloProviderProps { // (undocumented) - children: React_2.ReactNode | React_2.ReactNode[] | null; + children: ReactTypes.ReactNode | ReactTypes.ReactNode[] | null; // (undocumented) client: ApolloClient; } @@ -1071,7 +1068,7 @@ export function fromError(errorValue: any): Observable; export function fromPromise(promise: Promise): Observable; // @public (undocumented) -export function getApolloContext(): React_2.Context; +export function getApolloContext(): ReactTypes.Context; export { gql } @@ -1977,7 +1974,7 @@ interface QueryData { // @public (undocumented) export interface QueryDataOptions extends QueryFunctionOptions { // (undocumented) - children?: (result: QueryResult) => ReactNode; + children?: (result: QueryResult) => ReactTypes.ReactNode; // (undocumented) query: DocumentNode | TypedDocumentNode; } @@ -2346,11 +2343,11 @@ type RefetchWritePolicy = "merge" | "overwrite"; // @public (undocumented) class RenderPromises { // (undocumented) - addObservableQueryPromise(obsQuery: ObservableQuery): ReactNode; + addObservableQueryPromise(obsQuery: ObservableQuery): ReactTypes.ReactNode; // Warning: (ae-forgotten-export) The symbol "QueryData" needs to be exported by the entry point index.d.ts // // (undocumented) - addQueryPromise(queryInstance: QueryData, finish?: () => React.ReactNode): React.ReactNode; + addQueryPromise(queryInstance: QueryData, finish?: () => ReactTypes.ReactNode): ReactTypes.ReactNode; // (undocumented) consumeAndAwaitPromises(): Promise; // (undocumented) diff --git a/.changeset/friendly-clouds-laugh.md b/.changeset/friendly-clouds-laugh.md new file mode 100644 index 00000000000..3821053fa83 --- /dev/null +++ b/.changeset/friendly-clouds-laugh.md @@ -0,0 +1,7 @@ +--- +"@apollo/client": minor +--- + +To work around issues in React Server Components, especially with bundling for +the Next.js "edge" runtime we now use an external package to wrap `react` imports +instead of importing React directly. diff --git a/.size-limit.cjs b/.size-limit.cjs index 5637af876f6..bd4497ec3a5 100644 --- a/.size-limit.cjs +++ b/.size-limit.cjs @@ -1,7 +1,7 @@ const checks = [ { path: "dist/apollo-client.min.cjs", - limit: "38074", + limit: "38101", }, { path: "dist/main.cjs", diff --git a/config/apiExtractor.ts b/config/apiExtractor.ts index 9ccb35cbf6b..12f712dfc77 100644 --- a/config/apiExtractor.ts +++ b/config/apiExtractor.ts @@ -6,6 +6,7 @@ import { } from "@microsoft/api-extractor"; // @ts-ignore import { map } from "./entryPoints.js"; +import { readFileSync } from "fs"; // Load and parse the api-extractor.json file const configObjectFullPath = path.resolve(__dirname, "../api-extractor.json"); @@ -43,13 +44,35 @@ map((entryPoint: { dirs: string[] }) => { showVerboseMessages: true, }); - if (extractorResult.succeeded) { + let succeededAdditionalChecks = true; + const contents = readFileSync(extractorConfig.reportFilePath, "utf8"); + + if (contents.includes("rehackt")) { + succeededAdditionalChecks = false; + console.error( + "❗ %s contains a reference to the `rehackt` package!", + extractorConfig.reportFilePath + ); + } + if (contents.includes('/// ')) { + succeededAdditionalChecks = false; + console.error( + "❗ %s contains a reference to the global `React` type!/n" + + 'Use `import type * as ReactTypes from "react";` instead', + extractorConfig.reportFilePath + ); + } + + if (extractorResult.succeeded && succeededAdditionalChecks) { console.log(`✅ API Extractor completed successfully`); } else { console.error( `❗ API Extractor completed with ${extractorResult.errorCount} errors` + ` and ${extractorResult.warningCount} warnings` ); + if (!succeededAdditionalChecks) { + console.error("Additional checks failed."); + } process.exitCode = 1; } }); diff --git a/package-lock.json b/package-lock.json index e80382241a3..c224c5575a5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "hoist-non-react-statics": "^3.3.2", "optimism": "^0.17.5", "prop-types": "^15.7.2", + "rehackt": "0.0.3", "response-iterator": "^0.2.6", "symbol-observable": "^4.0.0", "ts-invariant": "^0.10.3", @@ -9791,6 +9792,23 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/rehackt": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/rehackt/-/rehackt-0.0.3.tgz", + "integrity": "sha512-aBRHudKhOWwsTvCbSoinzq+Lej/7R8e8UoPvLZo5HirZIIBLGAgdG7SL9QpdcBoQ7+3QYPi3lRLknAzXBlhZ7g==", + "peerDependencies": { + "@types/react": "*", + "react": "*" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "react": { + "optional": true + } + } + }, "node_modules/require-directory": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", diff --git a/package.json b/package.json index d355f3076f9..43f1536e8d9 100644 --- a/package.json +++ b/package.json @@ -96,6 +96,7 @@ "hoist-non-react-statics": "^3.3.2", "optimism": "^0.17.5", "prop-types": "^15.7.2", + "rehackt": "0.0.3", "response-iterator": "^0.2.6", "symbol-observable": "^4.0.0", "ts-invariant": "^0.10.3", diff --git a/src/react/components/Mutation.tsx b/src/react/components/Mutation.tsx index 492e0089312..8dca6889f7d 100644 --- a/src/react/components/Mutation.tsx +++ b/src/react/components/Mutation.tsx @@ -1,4 +1,5 @@ import * as PropTypes from "prop-types"; +import type * as ReactTypes from "react"; import type { OperationVariables } from "../../core/index.js"; import type { MutationComponentOptions } from "./types.js"; @@ -6,7 +7,7 @@ import { useMutation } from "../hooks/index.js"; export function Mutation( props: MutationComponentOptions -) { +): ReactTypes.JSX.Element | null { const [runMutation, result] = useMutation(props.mutation, props); return props.children ? props.children(runMutation, result) : null; } diff --git a/src/react/components/Query.tsx b/src/react/components/Query.tsx index 1e5611f646a..119696f3973 100644 --- a/src/react/components/Query.tsx +++ b/src/react/components/Query.tsx @@ -1,4 +1,5 @@ import * as PropTypes from "prop-types"; +import type * as ReactTypes from "react"; import type { OperationVariables } from "../../core/index.js"; import type { QueryComponentOptions } from "./types.js"; @@ -7,7 +8,9 @@ import { useQuery } from "../hooks/index.js"; export function Query< TData = any, TVariables extends OperationVariables = OperationVariables, ->(props: QueryComponentOptions) { +>( + props: QueryComponentOptions +): ReactTypes.JSX.Element | null { const { children, query, ...options } = props; const result = useQuery(query, options); return result ? children(result as any) : null; diff --git a/src/react/components/Subscription.tsx b/src/react/components/Subscription.tsx index 5701cdcb01d..76dda1a6241 100644 --- a/src/react/components/Subscription.tsx +++ b/src/react/components/Subscription.tsx @@ -1,4 +1,5 @@ import * as PropTypes from "prop-types"; +import type * as ReactTypes from "react"; import type { OperationVariables } from "../../core/index.js"; import type { SubscriptionComponentOptions } from "./types.js"; @@ -7,7 +8,9 @@ import { useSubscription } from "../hooks/index.js"; export function Subscription< TData = any, TVariables extends OperationVariables = OperationVariables, ->(props: SubscriptionComponentOptions) { +>( + props: SubscriptionComponentOptions +): ReactTypes.JSX.Element | null { const result = useSubscription(props.subscription, props); return props.children && result ? props.children(result) : null; } diff --git a/src/react/components/types.ts b/src/react/components/types.ts index 4e1abacb6a1..a0114f65ae2 100644 --- a/src/react/components/types.ts +++ b/src/react/components/types.ts @@ -1,6 +1,8 @@ import type { DocumentNode } from "graphql"; import type { TypedDocumentNode } from "@graphql-typed-document-node/core"; +import type * as ReactTypes from "react"; + import type { OperationVariables, DefaultContext, @@ -20,7 +22,9 @@ export interface QueryComponentOptions< TData = any, TVariables extends OperationVariables = OperationVariables, > extends QueryFunctionOptions { - children: (result: QueryResult) => JSX.Element | null; + children: ( + result: QueryResult + ) => ReactTypes.JSX.Element | null; query: DocumentNode | TypedDocumentNode; } @@ -34,7 +38,7 @@ export interface MutationComponentOptions< children: ( mutateFunction: MutationFunction, result: MutationResult - ) => JSX.Element | null; + ) => ReactTypes.JSX.Element | null; } export interface SubscriptionComponentOptions< @@ -42,5 +46,7 @@ export interface SubscriptionComponentOptions< TVariables extends OperationVariables = OperationVariables, > extends BaseSubscriptionOptions { subscription: DocumentNode | TypedDocumentNode; - children?: null | ((result: SubscriptionResult) => JSX.Element | null); + children?: + | null + | ((result: SubscriptionResult) => ReactTypes.JSX.Element | null); } diff --git a/src/react/context/ApolloConsumer.tsx b/src/react/context/ApolloConsumer.tsx index ac26e734da9..e71ec520ee3 100644 --- a/src/react/context/ApolloConsumer.tsx +++ b/src/react/context/ApolloConsumer.tsx @@ -1,15 +1,16 @@ import { invariant } from "../../utilities/globals/index.js"; -import * as React from "react"; +import * as React from "rehackt"; +import type * as ReactTypes from "react"; import type { ApolloClient } from "../../core/index.js"; import { getApolloContext } from "./ApolloContext.js"; export interface ApolloConsumerProps { - children: (client: ApolloClient) => React.ReactChild | null; + children: (client: ApolloClient) => ReactTypes.ReactChild | null; } -export const ApolloConsumer: React.FC = (props) => { +export const ApolloConsumer: ReactTypes.FC = (props) => { const ApolloContext = getApolloContext(); return ( diff --git a/src/react/context/ApolloContext.ts b/src/react/context/ApolloContext.ts index e942e8e9dad..49a7f3885b8 100644 --- a/src/react/context/ApolloContext.ts +++ b/src/react/context/ApolloContext.ts @@ -1,4 +1,5 @@ -import * as React from "react"; +import * as React from "rehackt"; +import type * as ReactTypes from "react"; import type { ApolloClient } from "../../core/index.js"; import { canUseSymbol } from "../../utilities/index.js"; import type { RenderPromises } from "../ssr/index.js"; @@ -17,7 +18,7 @@ const contextKey = canUseSymbol ? Symbol.for("__APOLLO_CONTEXT__") : "__APOLLO_CONTEXT__"; -export function getApolloContext(): React.Context { +export function getApolloContext(): ReactTypes.Context { invariant( "createContext" in React, "Invoking `getApolloContext` in an environment where `React.createContext` is not available.\n" + diff --git a/src/react/context/ApolloProvider.tsx b/src/react/context/ApolloProvider.tsx index 930e32dab0a..aa91b2cfc01 100644 --- a/src/react/context/ApolloProvider.tsx +++ b/src/react/context/ApolloProvider.tsx @@ -1,16 +1,17 @@ import { invariant } from "../../utilities/globals/index.js"; -import * as React from "react"; +import * as React from "rehackt"; +import type * as ReactTypes from "react"; import type { ApolloClient } from "../../core/index.js"; import { getApolloContext } from "./ApolloContext.js"; export interface ApolloProviderProps { client: ApolloClient; - children: React.ReactNode | React.ReactNode[] | null; + children: ReactTypes.ReactNode | ReactTypes.ReactNode[] | null; } -export const ApolloProvider: React.FC> = ({ +export const ApolloProvider: ReactTypes.FC> = ({ client, children, }) => { diff --git a/src/react/hoc/graphql.tsx b/src/react/hoc/graphql.tsx index 88bf39e9961..1a770aae04e 100644 --- a/src/react/hoc/graphql.tsx +++ b/src/react/hoc/graphql.tsx @@ -1,4 +1,5 @@ import type { DocumentNode } from "graphql"; +import type * as ReactTypes from "react"; import { parser, DocumentType } from "../parser/index.js"; import { withQuery } from "./query-hoc.js"; @@ -22,8 +23,8 @@ export function graphql< TChildProps > = {} ): ( - WrappedComponent: React.ComponentType -) => React.ComponentClass { + WrappedComponent: ReactTypes.ComponentType +) => ReactTypes.ComponentClass { switch (parser(document).type) { case DocumentType.Mutation: return withMutation(document, operationOptions); diff --git a/src/react/hoc/hoc-utils.tsx b/src/react/hoc/hoc-utils.tsx index 2e59f74e944..7c7d0598e08 100644 --- a/src/react/hoc/hoc-utils.tsx +++ b/src/react/hoc/hoc-utils.tsx @@ -1,5 +1,5 @@ import { invariant } from "../../utilities/globals/index.js"; -import * as React from "react"; +import * as React from "rehackt"; import type { OperationVariables } from "../../core/index.js"; import type { IDocumentDefinition } from "../parser/index.js"; diff --git a/src/react/hoc/mutation-hoc.tsx b/src/react/hoc/mutation-hoc.tsx index a0098a0f290..9e0917d0b6e 100644 --- a/src/react/hoc/mutation-hoc.tsx +++ b/src/react/hoc/mutation-hoc.tsx @@ -1,4 +1,5 @@ -import * as React from "react"; +import * as React from "rehackt"; +import type * as ReactTypes from "react"; import type { DocumentNode } from "graphql"; import hoistNonReactStatics from "hoist-non-react-statics"; @@ -56,8 +57,8 @@ export function withMutation< >; return ( - WrappedComponent: React.ComponentType - ): React.ComponentClass => { + WrappedComponent: ReactTypes.ComponentType + ): ReactTypes.ComponentClass => { const graphQLDisplayName = `${alias}(${getDisplayName(WrappedComponent)})`; class GraphQL extends GraphQLBase { static displayName = graphQLDisplayName; diff --git a/src/react/hoc/query-hoc.tsx b/src/react/hoc/query-hoc.tsx index 144133494c6..5587ce83119 100644 --- a/src/react/hoc/query-hoc.tsx +++ b/src/react/hoc/query-hoc.tsx @@ -1,4 +1,5 @@ -import * as React from "react"; +import * as React from "rehackt"; +import type * as ReactTypes from "react"; import type { DocumentNode } from "graphql"; import hoistNonReactStatics from "hoist-non-react-statics"; @@ -50,8 +51,8 @@ export function withQuery< // allow for advanced referential equality checks let lastResultProps: TChildProps | void; return ( - WrappedComponent: React.ComponentType - ): React.ComponentClass => { + WrappedComponent: ReactTypes.ComponentType + ): ReactTypes.ComponentClass => { const graphQLDisplayName = `${alias}(${getDisplayName(WrappedComponent)})`; class GraphQL extends GraphQLBase { static displayName = graphQLDisplayName; diff --git a/src/react/hoc/subscription-hoc.tsx b/src/react/hoc/subscription-hoc.tsx index b044c1c2658..5bbea06bb3a 100644 --- a/src/react/hoc/subscription-hoc.tsx +++ b/src/react/hoc/subscription-hoc.tsx @@ -1,4 +1,5 @@ -import * as React from "react"; +import * as React from "rehackt"; +import type * as ReactTypes from "react"; import type { DocumentNode } from "graphql"; import hoistNonReactStatics from "hoist-non-react-statics"; @@ -48,8 +49,8 @@ export function withSubscription< // allow for advanced referential equality checks let lastResultProps: TChildProps | void; return ( - WrappedComponent: React.ComponentType - ): React.ComponentClass => { + WrappedComponent: ReactTypes.ComponentType + ): ReactTypes.ComponentClass => { const graphQLDisplayName = `${alias}(${getDisplayName(WrappedComponent)})`; class GraphQL extends GraphQLBase< TProps, diff --git a/src/react/hoc/withApollo.tsx b/src/react/hoc/withApollo.tsx index bfa21b454a4..71b982a3cac 100644 --- a/src/react/hoc/withApollo.tsx +++ b/src/react/hoc/withApollo.tsx @@ -1,20 +1,21 @@ import { invariant } from "../../utilities/globals/index.js"; -import * as React from "react"; +import * as React from "rehackt"; +import type * as ReactTypes from "react"; import hoistNonReactStatics from "hoist-non-react-statics"; import { ApolloConsumer } from "../context/index.js"; import type { OperationOption, WithApolloClient } from "./types.js"; -function getDisplayName

(WrappedComponent: React.ComponentType

) { +function getDisplayName

(WrappedComponent: ReactTypes.ComponentType

) { return WrappedComponent.displayName || WrappedComponent.name || "Component"; } export function withApollo( - WrappedComponent: React.ComponentType< + WrappedComponent: ReactTypes.ComponentType< WithApolloClient> >, operationOptions: OperationOption = {} -): React.ComponentClass> { +): ReactTypes.ComponentClass> { const withDisplayName = `withApollo(${getDisplayName(WrappedComponent)})`; class WithApollo extends React.Component> { @@ -39,7 +40,9 @@ export function withApollo( return this.wrappedInstance; } - setWrappedInstance(ref: React.ComponentType>) { + setWrappedInstance( + ref: ReactTypes.ComponentType> + ) { this.wrappedInstance = ref; } diff --git a/src/react/hooks/internal/__use.ts b/src/react/hooks/internal/__use.ts index 2a49fab9e0c..b06760ff04e 100644 --- a/src/react/hooks/internal/__use.ts +++ b/src/react/hooks/internal/__use.ts @@ -1,5 +1,5 @@ import { wrapPromiseWithState } from "../../../utilities/index.js"; -import * as React from "react"; +import * as React from "rehackt"; type Use = (promise: Promise) => T; // Prevent webpack from complaining about our feature detection of the diff --git a/src/react/hooks/internal/useDeepMemo.ts b/src/react/hooks/internal/useDeepMemo.ts index 5a49115a49b..916e23a746d 100644 --- a/src/react/hooks/internal/useDeepMemo.ts +++ b/src/react/hooks/internal/useDeepMemo.ts @@ -1,5 +1,5 @@ import type { DependencyList } from "react"; -import * as React from "react"; +import * as React from "rehackt"; import { equal } from "@wry/equality"; export function useDeepMemo( diff --git a/src/react/hooks/internal/useIsomorphicLayoutEffect.ts b/src/react/hooks/internal/useIsomorphicLayoutEffect.ts index f5380a88fdd..1d13ade2854 100644 --- a/src/react/hooks/internal/useIsomorphicLayoutEffect.ts +++ b/src/react/hooks/internal/useIsomorphicLayoutEffect.ts @@ -1,4 +1,4 @@ -import * as React from "react"; +import * as React from "rehackt"; import { canUseDOM } from "../../../utilities/index.js"; // use canUseDOM here instead of canUseLayoutEffect because we want to be able diff --git a/src/react/hooks/useApolloClient.ts b/src/react/hooks/useApolloClient.ts index c9e81a8551c..54bf7bd0874 100644 --- a/src/react/hooks/useApolloClient.ts +++ b/src/react/hooks/useApolloClient.ts @@ -1,5 +1,5 @@ import { invariant } from "../../utilities/globals/index.js"; -import * as React from "react"; +import * as React from "rehackt"; import type { ApolloClient } from "../../core/index.js"; import { getApolloContext } from "../context/index.js"; diff --git a/src/react/hooks/useBackgroundQuery.ts b/src/react/hooks/useBackgroundQuery.ts index 8e49114e7aa..99a41f5e5eb 100644 --- a/src/react/hooks/useBackgroundQuery.ts +++ b/src/react/hooks/useBackgroundQuery.ts @@ -1,4 +1,4 @@ -import * as React from "react"; +import * as React from "rehackt"; import type { DocumentNode, OperationVariables, diff --git a/src/react/hooks/useFragment.ts b/src/react/hooks/useFragment.ts index debd1bd02eb..0f07d0df3a5 100644 --- a/src/react/hooks/useFragment.ts +++ b/src/react/hooks/useFragment.ts @@ -1,4 +1,4 @@ -import * as React from "react"; +import * as React from "rehackt"; import { equal } from "@wry/equality"; import type { DeepPartial } from "../../utilities/index.js"; diff --git a/src/react/hooks/useLazyQuery.ts b/src/react/hooks/useLazyQuery.ts index 535b9b4ceb2..81f988ded50 100644 --- a/src/react/hooks/useLazyQuery.ts +++ b/src/react/hooks/useLazyQuery.ts @@ -1,6 +1,6 @@ import type { DocumentNode } from "graphql"; import type { TypedDocumentNode } from "@graphql-typed-document-node/core"; -import * as React from "react"; +import * as React from "rehackt"; import type { OperationVariables } from "../../core/index.js"; import { mergeOptions } from "../../utilities/index.js"; diff --git a/src/react/hooks/useMutation.ts b/src/react/hooks/useMutation.ts index f3c2b233abd..fe76e167218 100644 --- a/src/react/hooks/useMutation.ts +++ b/src/react/hooks/useMutation.ts @@ -1,4 +1,4 @@ -import * as React from "react"; +import * as React from "rehackt"; import type { DocumentNode } from "graphql"; import type { TypedDocumentNode } from "@graphql-typed-document-node/core"; import type { diff --git a/src/react/hooks/useQuery.ts b/src/react/hooks/useQuery.ts index 33b127f62e6..7ff9cb085ff 100644 --- a/src/react/hooks/useQuery.ts +++ b/src/react/hooks/useQuery.ts @@ -1,6 +1,6 @@ import { invariant } from "../../utilities/globals/index.js"; -import * as React from "react"; +import * as React from "rehackt"; import { useSyncExternalStore } from "./useSyncExternalStore.js"; import { equal } from "@wry/equality"; diff --git a/src/react/hooks/useReactiveVar.ts b/src/react/hooks/useReactiveVar.ts index 2d14c12cd63..b98c4401e69 100644 --- a/src/react/hooks/useReactiveVar.ts +++ b/src/react/hooks/useReactiveVar.ts @@ -1,4 +1,4 @@ -import * as React from "react"; +import * as React from "rehackt"; import type { ReactiveVar } from "../../core/index.js"; import { useSyncExternalStore } from "./useSyncExternalStore.js"; diff --git a/src/react/hooks/useReadQuery.ts b/src/react/hooks/useReadQuery.ts index e6a97e1446f..803535c4878 100644 --- a/src/react/hooks/useReadQuery.ts +++ b/src/react/hooks/useReadQuery.ts @@ -1,4 +1,4 @@ -import * as React from "react"; +import * as React from "rehackt"; import { unwrapQueryRef } from "../cache/QueryReference.js"; import type { QueryReference } from "../cache/QueryReference.js"; import { __use } from "./internal/index.js"; diff --git a/src/react/hooks/useSubscription.ts b/src/react/hooks/useSubscription.ts index 764879810da..ab98b2bb540 100644 --- a/src/react/hooks/useSubscription.ts +++ b/src/react/hooks/useSubscription.ts @@ -1,5 +1,5 @@ import { invariant } from "../../utilities/globals/index.js"; -import * as React from "react"; +import * as React from "rehackt"; import type { DocumentNode } from "graphql"; import type { TypedDocumentNode } from "@graphql-typed-document-node/core"; import { equal } from "@wry/equality"; diff --git a/src/react/hooks/useSuspenseQuery.ts b/src/react/hooks/useSuspenseQuery.ts index 1139b3a4984..b92bfe2eea9 100644 --- a/src/react/hooks/useSuspenseQuery.ts +++ b/src/react/hooks/useSuspenseQuery.ts @@ -1,4 +1,4 @@ -import * as React from "react"; +import * as React from "rehackt"; import { invariant } from "../../utilities/globals/index.js"; import type { ApolloClient, diff --git a/src/react/hooks/useSyncExternalStore.ts b/src/react/hooks/useSyncExternalStore.ts index 0ae0a84d793..adf4d059f7f 100644 --- a/src/react/hooks/useSyncExternalStore.ts +++ b/src/react/hooks/useSyncExternalStore.ts @@ -1,5 +1,5 @@ import { invariant } from "../../utilities/globals/index.js"; -import * as React from "react"; +import * as React from "rehackt"; import { canUseLayoutEffect } from "../../utilities/index.js"; diff --git a/src/react/ssr/RenderPromises.ts b/src/react/ssr/RenderPromises.ts index d72574bd6c1..f51bcc93aca 100644 --- a/src/react/ssr/RenderPromises.ts +++ b/src/react/ssr/RenderPromises.ts @@ -1,4 +1,5 @@ import type { DocumentNode } from "graphql"; +import type * as ReactTypes from "react"; import type { ObservableQuery, OperationVariables } from "../../core/index.js"; import type { QueryDataOptions } from "../types/types.js"; @@ -58,8 +59,8 @@ export class RenderPromises { public addQueryPromise( queryInstance: QueryData, - finish?: () => React.ReactNode - ): React.ReactNode { + finish?: () => ReactTypes.ReactNode + ): ReactTypes.ReactNode { if (!this.stopped) { const info = this.lookupQueryInfo(queryInstance.getOptions()); if (!info.seen) { diff --git a/src/react/ssr/getDataFromTree.ts b/src/react/ssr/getDataFromTree.ts index 49d706934c6..b43e6c112cf 100644 --- a/src/react/ssr/getDataFromTree.ts +++ b/src/react/ssr/getDataFromTree.ts @@ -1,10 +1,11 @@ -import * as React from "react"; +import * as React from "rehackt"; +import type * as ReactTypes from "react"; import { getApolloContext } from "../context/index.js"; import { RenderPromises } from "./RenderPromises.js"; import { renderToStaticMarkup } from "react-dom/server"; export function getDataFromTree( - tree: React.ReactNode, + tree: ReactTypes.ReactNode, context: { [key: string]: any } = {} ) { return getMarkupFromTree({ @@ -17,10 +18,10 @@ export function getDataFromTree( } export type GetMarkupFromTreeOptions = { - tree: React.ReactNode; + tree: ReactTypes.ReactNode; context?: { [key: string]: any }; renderFunction?: ( - tree: React.ReactElement + tree: ReactTypes.ReactElement ) => string | PromiseLike; }; diff --git a/src/react/ssr/renderToStringWithData.ts b/src/react/ssr/renderToStringWithData.ts index 0e3944344a2..f6bcb345849 100644 --- a/src/react/ssr/renderToStringWithData.ts +++ b/src/react/ssr/renderToStringWithData.ts @@ -1,9 +1,9 @@ -import type { ReactElement } from "react"; +import type * as ReactTypes from "react"; import { getMarkupFromTree } from "./getDataFromTree.js"; import { renderToString } from "react-dom/server"; export function renderToStringWithData( - component: ReactElement + component: ReactTypes.ReactElement ): Promise { return getMarkupFromTree({ tree: component, diff --git a/src/react/types/types.ts b/src/react/types/types.ts index 5d057261dbc..70df3b03458 100644 --- a/src/react/types/types.ts +++ b/src/react/types/types.ts @@ -1,4 +1,4 @@ -import type { ReactNode } from "react"; +import type * as ReactTypes from "react"; import type { DocumentNode } from "graphql"; import type { TypedDocumentNode } from "@graphql-typed-document-node/core"; @@ -93,7 +93,7 @@ export interface QueryDataOptions< TData = any, TVariables extends OperationVariables = OperationVariables, > extends QueryFunctionOptions { - children?: (result: QueryResult) => ReactNode; + children?: (result: QueryResult) => ReactTypes.ReactNode; query: DocumentNode | TypedDocumentNode; }