Migrate relay hooks to hook-syntax

Reviewed By: SamChou19815 Differential Revision: D56448931 fbshipit-source-id: 7713c667a67d24924bd52daf72b1c27aca36e34c
facebook · Apr 23, 2024 · badd538 · badd538 · steveluscher · Jul 8, 2024
1 parent 349b5a8
commit badd538
Show file tree

Hide file tree

Showing 41 changed files with 122 additions and 47 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -26,6 +26,9 @@ module.exports = {
     // Flow declares trip up the no-redeclare rule
     'no-redeclare': 'off',
 
+    // Flow handles these rules
+    'no-unreachable': 'off',
+
     // Prettier and ESLint may disagree on the following rules
     indent: 'off',
     'array-bracket-spacing': 'off',

diff --git a/packages/react-relay/ReactRelayLocalQueryRenderer.js b/packages/react-relay/ReactRelayLocalQueryRenderer.js
@@ -40,7 +40,7 @@ const queryRendererContext: ReactRelayQueryRendererContextType = {
   rootIsQueryRenderer: true,
 };
 
-function useDeepCompare<T: {...}>(value: T): T {
+hook useDeepCompare<T: {...}>(value: T): T {
   const latestValue = React.useRef(value);
   if (!areEqual(latestValue.current, value)) {
     if (__DEV__) {

diff --git a/packages/react-relay/multi-actor/useRelayActorEnvironment.js b/packages/react-relay/multi-actor/useRelayActorEnvironment.js
@@ -20,7 +20,7 @@ const ReactRelayContext = require('./../ReactRelayContext');
 const invariant = require('invariant');
 const {useContext} = require('react');
 
-function useRelayActorEnvironment(
+hook useRelayActorEnvironment(
   actorIdentifier: ActorIdentifier,
 ): IActorEnvironment {
   const context = useContext(ReactRelayContext);

diff --git a/packages/react-relay/relay-hooks/__flowtests__/useBlockingPaginationFragment-flowtest.js b/packages/react-relay/relay-hooks/__flowtests__/useBlockingPaginationFragment-flowtest.js
@@ -48,49 +48,68 @@ type ExpectedReturnType<
 // $FlowFixMe[prop-missing]
 // $FlowFixMe[incompatible-cast]
 // $FlowFixMe[incompatible-exact]
+// $FlowFixMe[react-rule-hook]
 (useBlockingPaginationFragment(
   refetchableFragmentInput,
   keyNonNullable,
 ): ExpectedReturnType<QueryVariablesSubset, QueryVariables, NonNullableData>);
 
+// $FlowFixMe[react-rule-hook]
 (useBlockingPaginationFragment(
   refetchableFragmentInput,
   keyNullable,
 ): ExpectedReturnType<QueryVariables, QueryVariables, NullableData>);
 
 // $FlowExpectedError: can't cast nullable to non-nullable
+// $FlowFixMe[react-rule-hook]
+// $FlowFixMe[incompatible-cast]
 (useBlockingPaginationFragment(
   refetchableFragmentInput,
   keyNullable,
 ): ExpectedReturnType<QueryVariables, QueryVariables, NonNullableData>);
 
 // $FlowExpectedError: actual type of returned data is correct
+// $FlowFixMe[react-rule-hook]
+// $FlowFixMe[incompatible-exact]
+// $FlowFixMe[prop-missing]
+// $FlowFixMe[incompatible-cast]
 (useBlockingPaginationFragment(
   refetchableFragmentInput,
   // $FlowExpectedError[incompatible-call]
   keyAnotherNonNullable,
 ): ExpectedReturnType<QueryVariables, QueryVariablesSubset, NonNullableData>);
 
 // $FlowExpectedError[incompatible-call] `Example_user$fragmentType` is incompatible with  `FragmentType`
+// $FlowFixMe[react-rule-hook]
 (useBlockingPaginationFragment(
   refetchableFragmentInput,
   // $FlowExpectedError[incompatible-call]
   keyAnotherNullable,
 ): ExpectedReturnType<QueryVariables, QueryVariables, NullableData>);
 
 // $FlowExpectedError: Key should not be a user provided object
+// $FlowFixMe[react-rule-hook]
+// $FlowFixMe[prop-missing]
+// $FlowFixMe[cannot-resolve-name]
 useBlockingPaginationFragment(fragmentInput, {abc: 123});
 
 // $FlowExpectedError: Key should not be an empty object
+// $FlowFixMe[react-rule-hook]
+// $FlowFixMe[prop-missing]
+// $FlowFixMe[cannot-resolve-name]
 useBlockingPaginationFragment(fragmentInput, {});
 
 // $FlowExpectedError: Key should be the `<name>$key` type from generated flow
+// $FlowFixMe[react-rule-hook]
+// $FlowFixMe[prop-missing]
+// $FlowFixMe[cannot-resolve-name]
 useBlockingPaginationFragment(fragmentInput, fragmentData);
 
 // Refetch function options:
 declare var variables: QueryVariables;
 declare var environment: IEnvironment;
 
+// $FlowFixMe[react-rule-hook]
 const {refetch} = useBlockingPaginationFragment(
   refetchableFragmentInput,
   keyNonNullable,
@@ -109,6 +128,7 @@ refetch(variables, {
 declare var extraVariables: {nickname: string};
 declare var invalidVariables: {foo: string};
 
+// $FlowFixMe[react-rule-hook]
 const {loadNext} = useBlockingPaginationFragment(
   refetchableFragmentInput,
   keyNonNullable,

diff --git a/packages/react-relay/relay-hooks/__flowtests__/usePaginationFragment-flowtest.js b/packages/react-relay/relay-hooks/__flowtests__/usePaginationFragment-flowtest.js
@@ -50,48 +50,65 @@ type ExpectedReturnType<
 // $FlowFixMe[prop-missing]
 // $FlowFixMe[incompatible-cast]
 // $FlowFixMe[incompatible-exact]
+// $FlowFixMe[react-rule-hook]
 (usePaginationFragment(
   refetchableFragmentInput,
   keyNonNullable,
 ): ExpectedReturnType<QueryVariablesSubset, QueryVariables, NonNullableData>);
 
+// $FlowFixMe[react-rule-hook]
 (usePaginationFragment(
   refetchableFragmentInput,
   keyNullable,
 ): ExpectedReturnType<QueryVariables, QueryVariables, NullableData>);
 
 // $FlowExpectedError: can't cast nullable to non-nullable
+// $FlowFixMe[react-rule-hook]
+// $FlowFixMe[incompatible-cast]
 (usePaginationFragment(
   refetchableFragmentInput,
   keyNullable,
 ): ExpectedReturnType<QueryVariables, QueryVariables, NonNullableData>);
 
 // $FlowExpectedError: actual type of returned data is correct
+// $FlowFixMe[react-rule-hook]
+// $FlowFixMe[incompatible-exact]
+// $FlowFixMe[prop-missing]
+// $FlowFixMe[incompatible-cast]
 (usePaginationFragment(
   refetchableFragmentInput,
   // $FlowFixMe[incompatible-call]
   keyAnotherNonNullable,
 ): ExpectedReturnType<QueryVariables, QueryVariablesSubset, NonNullableData>);
 // $FlowExpectedError
+// $FlowFixMe[react-rule-hook]
+// $FlowFixMe[incompatible-cast]
 (usePaginationFragment(
   refetchableFragmentInput,
   // $FlowFixMe[incompatible-call]
   keyAnotherNullable,
 ): ExpectedReturnType<QueryVariables, QueryVariables, NonNullableData>);
 
 // $FlowExpectedError: Key should not be a user provided object
+// $FlowFixMe[react-rule-hook]
+// $FlowFixMe[prop-missing]
 usePaginationFragment(refetchableFragmentInput, {abc: 123});
 
 // $FlowExpectedError: Key should not be an empty object
+// $FlowFixMe[react-rule-hook]
+// $FlowFixMe[prop-missing]
 usePaginationFragment(refetchableFragmentInput, {});
 
 // $FlowExpectedError: Key should be the `<name>$key` type from generated flow
+// $FlowFixMe[react-rule-hook]
+// $FlowFixMe[prop-missing]
 usePaginationFragment(refetchableFragmentInput, fragmentData);
 
 // Refetch function options:
 declare var variables: QueryVariables;
 declare var environment: IEnvironment;
 
+// $FlowFixMe[react-rule-hook]
 const {refetch} = usePaginationFragment(
   refetchableFragmentInput,
   keyNonNullable,
@@ -110,6 +127,7 @@ refetch(variables, {
 declare var extraVariables: {nickname: string};
 declare var invalidVariables: {foo: string};
 
+// $FlowFixMe[react-rule-hook]
 const {loadNext} = usePaginationFragment(
   refetchableFragmentInput,
   keyNonNullable,

diff --git a/packages/react-relay/relay-hooks/__flowtests__/useRefetchableFragment-flowtest.js b/packages/react-relay/relay-hooks/__flowtests__/useRefetchableFragment-flowtest.js
@@ -34,53 +34,74 @@ import {
 // $FlowFixMe[prop-missing]
 // $FlowFixMe[incompatible-cast]
 // $FlowFixMe[incompatible-exact]
+// $FlowFixMe[react-rule-hook]
 (useRefetchableFragment(refetchableFragmentInput, keyNonNullable): [
   NonNullableData,
   FetchFn<QueryVariablesSubset>,
 ]);
 
+// $FlowFixMe[react-rule-hook]
 (useRefetchableFragment(refetchableFragmentInput, keyNullable): [
   NullableData,
   FetchFn<QueryVariables>,
 ]);
 
 // $FlowExpectedError: can't cast nullable to non-nullable
+// $FlowFixMe[react-rule-hook]
+// $FlowFixMe[incompatible-cast]
 (useRefetchableFragment(refetchableFragmentInput, keyNullable): [
   NonNullableData,
   FetchFn<QueryVariables>,
 ]);
 
 // $FlowExpectedError: refetch requires exact type if key is nullable
+// $FlowFixMe[react-rule-hook]
+// $FlowFixMe[incompatible-exact]
+// $FlowFixMe[prop-missing]
 (useRefetchableFragment(refetchableFragmentInput, keyNullable): [
   NullableData,
   FetchFn<QueryVariablesSubset>,
 ]);
 
 // $FlowExpectedError: actual type of returned data is correct
+// $FlowFixMe[react-rule-hook]
+// $FlowFixMe[incompatible-call]
+// $FlowFixMe[incompatible-exact]
+// $FlowFixMe[prop-missing]
+// $FlowFixMe[incompatible-cast]
 (useRefetchableFragment(refetchableFragmentInput, keyAnotherNonNullable): [
   NonNullableData,
   FetchFn<QueryVariablesSubset>,
 ]);
 
 // $FlowExpectedError - incompatible key types
+// $FlowFixMe[react-rule-hook]
+// $FlowFixMe[incompatible-call]
 (useRefetchableFragment(refetchableFragmentInput, keyAnotherNullable): [
   NullableData,
   FetchFn<QueryVariables>,
 ]);
 
 // $FlowExpectedError: Key should not be a user provided object
+// $FlowFixMe[react-rule-hook]
+// $FlowFixMe[prop-missing]
 useRefetchableFragment(refetchableFragmentInput, {abc: 123});
 
 // $FlowExpectedError: Key should not be an empty object
+// $FlowFixMe[react-rule-hook]
+// $FlowFixMe[prop-missing]
 useRefetchableFragment(refetchableFragmentInput, {});
 
 // $FlowExpectedError: Key should be the `<name>$key` type from generated flow
+// $FlowFixMe[react-rule-hook]
+// $FlowFixMe[prop-missing]
 useRefetchableFragment(refetchableFragmentInput, fragmentData);
 
 // Refetch function options:
 declare var variables: QueryVariables;
 declare var environment: IEnvironment;
 
+// $FlowFixMe[react-rule-hook]
 const [, refetch] = useRefetchableFragment(
   refetchableFragmentInput,
   keyNonNullable,

diff --git a/packages/react-relay/relay-hooks/__tests__/LazyLoadEntryPointContainer_DEEPRECATED-test.js b/packages/react-relay/relay-hooks/__tests__/LazyLoadEntryPointContainer_DEEPRECATED-test.js
@@ -298,6 +298,7 @@ it('renders synchronously when the query and component are already loaded', () =
 it('re-renders without reloading when non-prefetch props change', () => {
   // $FlowFixMe[missing-local-annot] error found when enabling Flow LTI mode
   const Component = jest.fn(props => {
+    // $FlowFixMe[react-rule-hook]
     const data = usePreloadedQuery(query, props.queries.prefetched);
     return data.node?.name;
   });
@@ -340,6 +341,7 @@ it('re-renders without reloading when non-prefetch props change', () => {
 it('re-renders and reloads when prefetch params change', () => {
   // $FlowFixMe[missing-local-annot] error found when enabling Flow LTI mode
   const Component = jest.fn(props => {
+    // $FlowFixMe[react-rule-hook]
     const data = usePreloadedQuery(query, props.queries.prefetched);
     return data.node?.name;
   });

diff --git a/packages/react-relay/relay-hooks/__tests__/loadQuery-test.js b/packages/react-relay/relay-hooks/__tests__/loadQuery-test.js
@@ -900,6 +900,7 @@ describe('loadQuery', () => {
 
     beforeEach(() => {
       Container = (props: {children: React.Node}) => {
+        // $FlowFixMe[react-rule-hook]
         useTrackLoadQueryInRender();
         return props.children;
       };

diff --git a/packages/react-relay/relay-hooks/__tests__/useEntryPointLoader-test.js b/packages/react-relay/relay-hooks/__tests__/useEntryPointLoader-test.js
@@ -78,6 +78,7 @@ beforeEach(() => {
   }) {
     renderCount = (renderCount || 0) + 1;
     [loadedEntryPoint, entryPointLoaderCallback, disposeEntryPoint] =
+      // $FlowFixMe[react-rule-hook]
       useEntryPointLoader<{...}, any, any, any, any, any, any>(
         environmentProvider,
         entryPoint,

diff --git a/packages/react-relay/relay-hooks/__tests__/useFragment-test.js b/packages/react-relay/relay-hooks/__tests__/useFragment-test.js
@@ -58,7 +58,7 @@ let SingularRenderer;
 let PluralRenderer;
 let ContextProvider;
 
-function useFragment(
+hook useFragment(
   fragmentNode:
     | Fragment<
         useFragmentTestUserFragment$fragmentType,

diff --git a/packages/react-relay/relay-hooks/__tests__/useFragmentNode-required-test.js b/packages/react-relay/relay-hooks/__tests__/useFragmentNode-required-test.js
@@ -32,7 +32,7 @@ let singularQuery;
 let renderSingularFragment;
 let renderSpy;
 
-function useFragmentNode(
+hook useFragmentNode(
   fragmentNode: ReaderFragment,
   fragmentRef: $TEMPORARY$object<{
     __fragmentOwner: RequestDescriptor,

diff --git a/packages/react-relay/relay-hooks/__tests__/useFragmentNode-test.js b/packages/react-relay/relay-hooks/__tests__/useFragmentNode-test.js
@@ -92,7 +92,7 @@ type ReturnType<TFragmentData: mixed> = {
   disableStoreUpdates: () => void,
   enableStoreUpdates: () => void,
 };
-function useFragmentNode_NEW<TFragmentData: mixed>(
+hook useFragmentNode_NEW<TFragmentData: mixed>(
   fragment:
     | Fragment<
         useFragmentNodeTestUserFragment$fragmentType,

diff --git a/packages/react-relay/relay-hooks/__tests__/usePaginationFragment-test.js b/packages/react-relay/relay-hooks/__tests__/usePaginationFragment-test.js
@@ -117,7 +117,7 @@ class ErrorBoundary extends React.Component<any, any> {
   }
 }
 
-function usePaginationFragment(fragmentNode: any, fragmentRef: any) {
+hook usePaginationFragment(fragmentNode: any, fragmentRef: any) {
   /* $FlowFixMe[underconstrained-implicit-instantiation] error found when
    * enabling Flow LTI mode */
   const {data, ...result} = usePaginationFragmentImpl(

diff --git a/packages/react-relay/relay-hooks/legacy/useBlockingPaginationFragment.js b/packages/react-relay/relay-hooks/legacy/useBlockingPaginationFragment.js
@@ -65,7 +65,7 @@ type ReturnType<TVariables, TData, TKey> = {
   refetch: RefetchFn<TVariables, TKey>,
 };
 
-function useBlockingPaginationFragment<
+hook useBlockingPaginationFragment<
   TFragmentType: FragmentType,
   TVariables: Variables,
   TData,
@@ -166,7 +166,7 @@ function useBlockingPaginationFragment<
   };
 }
 
-function useLoadMore<TVariables: Variables>(args: {
+hook useLoadMore<TVariables: Variables>(args: {
   disableStoreUpdates: () => void,
   enableStoreUpdates: () => void,
   ...$Exact<

diff --git a/packages/react-relay/relay-hooks/legacy/useFragmentNode.js b/packages/react-relay/relay-hooks/legacy/useFragmentNode.js
@@ -26,7 +26,7 @@ type ReturnType<TFragmentData: mixed> = {
   enableStoreUpdates: () => void,
 };
 
-function useFragmentNode<TFragmentData: mixed>(
+hook useFragmentNode<TFragmentData: mixed>(
   fragmentNode: ReaderFragment,
   fragmentRef: mixed,
   componentDisplayName: string,

diff --git a/packages/react-relay/relay-hooks/legacy/useRefetchableFragmentNode.js b/packages/react-relay/relay-hooks/legacy/useRefetchableFragmentNode.js
@@ -162,7 +162,7 @@ function reducer(state: RefetchState, action: Action): RefetchState {
   }
 }
 
-function useRefetchableFragmentNode<
+hook useRefetchableFragmentNode<
   TQuery: OperationType,
   TKey: ?{+$data?: mixed, ...},
 >(
@@ -367,7 +367,7 @@ function useRefetchableFragmentNode<
   };
 }
 
-function useRefetchFunction<TQuery: OperationType>(
+hook useRefetchFunction<TQuery: OperationType>(
   componentDisplayName: string,
   dispatch: (
     | {

diff --git a/packages/react-relay/relay-hooks/loadQuery.js b/packages/react-relay/relay-hooks/loadQuery.js
@@ -46,7 +46,7 @@ const warning = require('warning');
 let RenderDispatcher = null;
 let fetchKey = 100001;
 
-function useTrackLoadQueryInRender() {
+hook useTrackLoadQueryInRender() {
   if (RenderDispatcher === null) {
     // Flow does not know of React internals (rightly so), but we need to
     // ensure here that this function isn't called inside render.

diff --git a/packages/react-relay/relay-hooks/useClientQuery.js b/packages/react-relay/relay-hooks/useClientQuery.js
@@ -20,7 +20,7 @@ const useLazyLoadQuery = require('./useLazyLoadQuery');
  * These queries are consist of queries for client-only data,
  * schematized via local schema extensions and/or Relay resolvers.
  */
-function useClientQuery<TVariables: Variables, TData, TRawResponse>(
+hook useClientQuery<TVariables: Variables, TData, TRawResponse>(
   gqlQuery: ClientQuery<TVariables, TData, TRawResponse>,
   variables: TVariables,
   options?: {

diff --git a/packages/react-relay/relay-hooks/useEntryPointLoader.js b/packages/react-relay/relay-hooks/useEntryPointLoader.js
@@ -50,7 +50,7 @@ type NullEntryPointReference = {
 };
 const initialNullEntryPointReferenceState = {kind: 'NullEntryPointReference'};
 
-function useLoadEntryPoint<
+hook useLoadEntryPoint<
   TEntryPointParams: {...},
   TPreloadedQueries: {...},
   TPreloadedEntryPoints: {...},