react-relay 20.1.1 → 21.0.1

package/relay-hooks/__flowtests__/useRefetchableFragment-flowtest.js.flow

@@ -32,69 +32,62 @@ import {
 
 // Nullability of returned data type is correct
 // $FlowFixMe[prop-missing]
-// $FlowFixMe[incompatible-cast]
+// $FlowFixMe[incompatible-type]
 // $FlowFixMe[incompatible-exact]
 // $FlowFixMe[react-rule-hook]
-(useRefetchableFragment(refetchableFragmentInput, keyNonNullable): [
+useRefetchableFragment(refetchableFragmentInput, keyNonNullable) as [
   NonNullableData,
   FetchFn<QueryVariablesSubset>,
-]);
+];
 
 // $FlowFixMe[react-rule-hook]
-(useRefetchableFragment(refetchableFragmentInput, keyNullable): [
+useRefetchableFragment(refetchableFragmentInput, keyNullable) as [
   NullableData,
   FetchFn<QueryVariables>,
-]);
+];
 
-// $FlowExpectedError: can't cast nullable to non-nullable
 // $FlowFixMe[react-rule-hook]
-// $FlowFixMe[incompatible-cast]
-(useRefetchableFragment(refetchableFragmentInput, keyNullable): [
+// $FlowFixMe[incompatible-type] can't cast nullable to non-nullable
+useRefetchableFragment(refetchableFragmentInput, keyNullable) as [
   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): [
+// $FlowFixMe[incompatible-type] refetch requires exact type if key is nullable
+useRefetchableFragment(refetchableFragmentInput, keyNullable) as [
   NullableData,
   FetchFn<QueryVariablesSubset>,
-]);
+];
 
-// $FlowExpectedError: actual type of returned data is correct
 // $FlowFixMe[react-rule-hook]
-// $FlowFixMe[incompatible-call]
+// $FlowFixMe[incompatible-type]
 // $FlowFixMe[incompatible-exact]
 // $FlowFixMe[prop-missing]
-// $FlowFixMe[incompatible-cast]
-(useRefetchableFragment(refetchableFragmentInput, keyAnotherNonNullable): [
+// $FlowFixMe[incompatible-type] actual type of returned data is correct
+useRefetchableFragment(refetchableFragmentInput, keyAnotherNonNullable) as [
   NonNullableData,
   FetchFn<QueryVariablesSubset>,
-]);
+];
 
-// $FlowExpectedError - incompatible key types
 // $FlowFixMe[react-rule-hook]
-// $FlowFixMe[incompatible-call]
-(useRefetchableFragment(refetchableFragmentInput, keyAnotherNullable): [
+// $FlowFixMe[incompatible-type]: incompatible key types
+useRefetchableFragment(refetchableFragmentInput, keyAnotherNullable) as [
   NullableData,
   FetchFn<QueryVariables>,
-]);
+];
 
-// $FlowExpectedError: Key should not be a user provided object
 // $FlowFixMe[react-rule-hook]
-// $FlowFixMe[prop-missing]
+// $FlowFixMe[incompatible-type] Key should not be a user provided object
 useRefetchableFragment(refetchableFragmentInput, {abc: 123});
 
-// $FlowExpectedError: Key should not be an empty object
 // $FlowFixMe[react-rule-hook]
-// $FlowFixMe[prop-missing]
+// $FlowFixMe[incompatible-type] Key should not be an empty object
 useRefetchableFragment(refetchableFragmentInput, {});
 
-// $FlowExpectedError: Key should be the `<name>$key` type from generated flow
 // $FlowFixMe[react-rule-hook]
-// $FlowFixMe[prop-missing]
+// $FlowFixMe[incompatible-type] Key should be the `<name>$key` type from generated flow
 useRefetchableFragment(refetchableFragmentInput, fragmentData);
 
 // Refetch function options:
@@ -106,12 +99,12 @@ const [, refetch] = useRefetchableFragment(
   refetchableFragmentInput,
   keyNonNullable,
 );
-// $FlowExpectedError: internal option
+// $FlowExpectedError[incompatible-type] : internal option
 refetch(variables, {
   __environment: environment,
 });
 
-// $FlowExpectedError: doesn't exist
+// $FlowExpectedError[incompatible-type] : doesn't exist
 refetch(variables, {
   NON_EXIST: 'NON_EXIST',
 });

package/relay-hooks/__flowtests__/utils.js.flow

@@ -32,52 +32,52 @@ declare export var refetchableFragmentInput: RefetchableFragment<
 declare export opaque type Example_user$fragmentType: FragmentType;
 export type Example_user$data = NonNullableData;
 export type Example_user$key = {
-  +$data?: Example_user$data,
-  +$fragmentSpreads: Example_user$fragmentType,
+  readonly $data?: Example_user$data,
+  readonly $fragmentSpreads: Example_user$fragmentType,
   ...
 };
 
 export type NonNullableData = {
-  +id: string,
-  +count: number,
+  readonly id: string,
+  readonly count: number,
 };
 export type NullableData = ?NonNullableData;
-export type NonNullablePluralData = $ReadOnlyArray<NonNullableData>;
-export type NullablePluralData = ?$ReadOnlyArray<NonNullableData>;
+export type NonNullablePluralData = ReadonlyArray<NonNullableData>;
+export type NullablePluralData = ?ReadonlyArray<NonNullableData>;
 
 export type AnotherNonNullableData = {
-  +name: ?string,
-  +friends: ?number,
+  readonly name: ?string,
+  readonly friends: ?number,
 };
 
 declare export var keyNonNullable: Example_user$key;
 
-declare export var keyNonNullablePlural: $ReadOnlyArray<Example_user$key>;
+declare export var keyNonNullablePlural: ReadonlyArray<Example_user$key>;
 
-declare export var keyNullablePlural: ?$ReadOnlyArray<Example_user$key>;
+declare export var keyNullablePlural: ?ReadonlyArray<Example_user$key>;
 
 declare export var keyNullable: ?Example_user$key;
 
 declare export var keyAnotherNonNullable: {
-  +$data: AnotherNonNullableData,
-  +$fragmentSpreads: FragmentType,
+  readonly $data: AnotherNonNullableData,
+  readonly $fragmentSpreads: FragmentType,
   ...
 };
 
 declare export var keyAnotherNullable: ?{
-  +$data: AnotherNonNullableData,
-  +$fragmentSpreads: FragmentType,
+  readonly $data: AnotherNonNullableData,
+  readonly $fragmentSpreads: FragmentType,
   ...
 };
 
 declare export var fragmentData: {
-  +$fragmentType: FragmentType,
+  readonly $fragmentType: FragmentType,
   ...
 };
 
 export type QueryOperation = {
-  +variables: QueryVariables,
-  +response: {...},
+  readonly variables: QueryVariables,
+  readonly response: {...},
 };
 
 export type QueryVariables = {

package/relay-hooks/getConnectionState.js.flow

@@ -19,8 +19,8 @@ const {ConnectionInterface, getValueAtPath} = require('relay-runtime');
 function getConnectionState(
   direction: Direction,
   fragmentNode: ReaderFragment,
-  fragmentData: mixed,
-  connectionPathInFragmentData: $ReadOnlyArray<string | number>,
+  fragmentData: unknown,
+  connectionPathInFragmentData: ReadonlyArray<string | number>,
 ): {
   cursor: ?string,
   hasMore: boolean,

package/relay-hooks/legacy/FragmentResource.js.flow

@@ -45,8 +45,8 @@ export type FragmentResource = FragmentResourceImpl;
 type FragmentResourceCache = Cache<
   | {
       kind: 'pending',
-      pendingOperations: $ReadOnlyArray<RequestDescriptor>,
-      promise: Promise<mixed>,
+      pendingOperations: ReadonlyArray<RequestDescriptor>,
+      promise: Promise<unknown>,
       result: FragmentResult,
     }
   | {kind: 'done', result: FragmentResult}
@@ -63,11 +63,11 @@ interface IMap<K, V> {
   set(key: K, value: V): IMap<K, V>;
 }
 
-type SingularOrPluralSnapshot = Snapshot | $ReadOnlyArray<Snapshot>;
+type SingularOrPluralSnapshot = Snapshot | ReadonlyArray<Snapshot>;
 
-opaque type FragmentResult: {data: mixed, ...} = {
+opaque type FragmentResult: {data: unknown, ...} = {
   cacheKey: string,
-  data: mixed,
+  data: unknown,
   isMissingData: boolean,
   snapshot: SingularOrPluralSnapshot | null,
   storeEpoch: number,
@@ -97,7 +97,7 @@ function hasMissingClientEdges(snapshot: SingularOrPluralSnapshot): boolean {
 
 function missingLiveResolverFields(
   snapshot: SingularOrPluralSnapshot,
-): ?$ReadOnlyArray<DataID> {
+): ?ReadonlyArray<DataID> {
   if (Array.isArray(snapshot)) {
     return snapshot
       .map(s => s.missingLiveResolverFields)
@@ -217,7 +217,7 @@ class FragmentResourceImpl {
    */
   read(
     fragmentNode: ReaderFragment,
-    fragmentRef: mixed,
+    fragmentRef: unknown,
     componentDisplayName: string,
     fragmentKey?: string,
   ): FragmentResult {
@@ -237,7 +237,7 @@ class FragmentResourceImpl {
    */
   readWithIdentifier(
     fragmentNode: ReaderFragment,
-    fragmentRef: mixed,
+    fragmentRef: unknown,
     fragmentIdentifier: string,
     componentDisplayName: string,
     fragmentKey?: ?string,
@@ -307,7 +307,7 @@ class FragmentResourceImpl {
         !missingLiveResolverFields(cachedValue.result.snapshot)?.length
       ) {
         this._throwOrLogErrorsInSnapshot(
-          // $FlowFixMe[incompatible-call]
+          // $FlowFixMe[incompatible-type]
           cachedValue.result.snapshot,
         );
 
@@ -527,7 +527,7 @@ class FragmentResourceImpl {
   _performClientEdgeQuery(
     queryResource: QueryResource,
     fragmentNode: ReaderFragment,
-    fragmentRef: mixed,
+    fragmentRef: unknown,
     request: ConcreteRequest,
     clientEdgeDestinationID: DataID,
   ): {queryResult: QueryResult, requestDescriptor: RequestDescriptor} {
@@ -568,7 +568,7 @@ class FragmentResourceImpl {
 
   readSpec(
     fragmentNodes: {[string]: ReaderFragment, ...},
-    fragmentRefs: {[string]: mixed, ...},
+    fragmentRefs: {[string]: unknown, ...},
     componentDisplayName: string,
   ): {[string]: FragmentResult, ...} {
     const result: {[string]: FragmentResult} = {};
@@ -804,7 +804,7 @@ class FragmentResourceImpl {
     fragmentResult: FragmentResult,
   ): {
     promise: Promise<void>,
-    pendingOperations: $ReadOnlyArray<RequestDescriptor>,
+    pendingOperations: ReadonlyArray<RequestDescriptor>,
   } | null {
     const pendingOperationsResult = getPendingOperationsForFragment(
       this._environment,
@@ -840,7 +840,7 @@ class FragmentResourceImpl {
 
   _updatePluralSnapshot(
     cacheKey: string,
-    baseSnapshots: $ReadOnlyArray<Snapshot>,
+    baseSnapshots: ReadonlyArray<Snapshot>,
     latestSnapshot: Snapshot,
     idx: number,
     storeEpoch: number,

package/relay-hooks/legacy/useBlockingPaginationFragment.js.flow

@@ -31,7 +31,9 @@ type RefetchVariables<TVariables, TKey> =
   // NOTE: This type ensures that the type of the variables is either:
   //   - nullable if the provided ref type is non-nullable
   //   - non-nullable if the provided ref type is nullable, and the caller need to provide the full set of variables
-  [+key: TKey] extends [+key: {+$fragmentSpreads: mixed, ...}]
+  [readonly key: TKey] extends [
+    readonly key: {readonly $fragmentSpreads: unknown, ...},
+  ]
     ? Partial<TVariables>
     : TVariables;
 
@@ -49,7 +51,9 @@ type ReturnType<TVariables, TData, TKey> = {
   // NOTE: This rtpw ensures that the type of the returned data is either:
   //   - nullable if the provided ref type is nullable
   //   - non-nullable if the provided ref type is non-nullable
-  data: [+key: TKey] extends [+key: {+$fragmentSpreads: mixed, ...}]
+  data: [readonly key: TKey] extends [
+    readonly key: {readonly $fragmentSpreads: unknown, ...},
+  ]
     ? TData
     : ?TData,
   loadNext: LoadMoreFn<TVariables>,
@@ -60,10 +64,10 @@ type ReturnType<TVariables, TData, TKey> = {
 };
 
 hook useBlockingPaginationFragment<
-  TFragmentType: FragmentType,
-  TVariables: Variables,
+  TFragmentType extends FragmentType,
+  TVariables extends Variables,
   TData,
-  TKey: ?{+$fragmentSpreads: TFragmentType, ...},
+  TKey extends ?{readonly $fragmentSpreads: TFragmentType, ...},
 >(
   fragmentInput: RefetchableFragment<TFragmentType, TData, TVariables>,
   parentFragmentRef: TKey,
@@ -99,7 +103,7 @@ hook useBlockingPaginationFragment<
       variables: TVariables,
     },
     {
-      +$data: mixed,
+      readonly $data: unknown,
       ...
     },
   >(fragmentNode, parentFragmentRef, componentDisplayName);
@@ -143,33 +147,34 @@ hook useBlockingPaginationFragment<
       disposeFetchNext();
       disposeFetchPrevious();
       // $FlowFixMe[incompatible-variance]
+      // $FlowFixMe[incompatible-type]
       return refetch(variables, {...options, __environment: undefined});
     },
     [disposeFetchNext, disposeFetchPrevious, refetch],
   );
 
   return {
-    // $FlowFixMe[incompatible-cast]
-    // $FlowFixMe[incompatible-return]
-    data: (fragmentData: TData),
-    loadNext,
-    loadPrevious,
+    // $FlowFixMe[incompatible-type]
+    // $FlowFixMe[incompatible-type]
+    data: fragmentData as TData,
     hasNext,
     hasPrevious,
+    loadNext,
+    loadPrevious,
     refetch: refetchPagination,
   };
 }
 
-hook useLoadMore<TVariables: Variables>(args: {
+hook useLoadMore<TVariables extends Variables>(args: {
   disableStoreUpdates: () => void,
   enableStoreUpdates: () => void,
   ...$Exact<Omit<UseLoadMoreFunctionArgs, 'observer' | 'onReset'>>,
 }): [LoadMoreFn<TVariables>, boolean, () => void] {
   const {disableStoreUpdates, enableStoreUpdates, ...loadMoreArgs} = args;
-  const [requestPromise, setRequestPromise] = useState<null | Promise<mixed>>(
+  const [requestPromise, setRequestPromise] = useState<null | Promise<unknown>>(
     null,
   );
-  const requestPromiseRef = useRef<null | Promise<mixed>>(null);
+  const requestPromiseRef = useRef<null | Promise<unknown>>(null);
   const promiseResolveRef = useRef<null | (() => void)>(null);
 
   const promiseResolve = () => {
@@ -185,6 +190,15 @@ hook useLoadMore<TVariables: Variables>(args: {
 
   const observer = {
     complete: promiseResolve,
+    // TODO: Handle error; we probably don't want to throw an error
+    // and blow away the whole list of items.
+    error: promiseResolve,
+    // NOTE: Since streaming is disallowed with this hook, this means that the
+    // first payload will always contain the entire next page of items,
+    // while subsequent paylaods will contain @defer'd payloads.
+    // This allows us to unsuspend here, on the first payload, and allow
+    // descendant components to suspend on their respective @defer payloads
+    next: promiseResolve,
     // NOTE: loadMore is a no-op if a request is already in flight, so we
     // can safely assume that `start` will only be called once while a
     // request is in flight.
@@ -203,17 +217,6 @@ hook useLoadMore<TVariables: Variables>(args: {
       requestPromiseRef.current = promise;
       setRequestPromise(promise);
     },
-
-    // NOTE: Since streaming is disallowed with this hook, this means that the
-    // first payload will always contain the entire next page of items,
-    // while subsequent paylaods will contain @defer'd payloads.
-    // This allows us to unsuspend here, on the first payload, and allow
-    // descendant components to suspend on their respective @defer payloads
-    next: promiseResolve,
-
-    // TODO: Handle error; we probably don't want to throw an error
-    // and blow away the whole list of items.
-    error: promiseResolve,
   };
   const [loadMore, hasMore, disposeFetch] = useLoadMoreFunction<TVariables>({
     ...loadMoreArgs,

package/relay-hooks/legacy/useFragmentNode.js.flow

@@ -20,15 +20,15 @@ const {useEffect, useState} = require('react');
 const {RelayFeatureFlags, getFragmentIdentifier} = require('relay-runtime');
 const warning = require('warning');
 
-type ReturnType<TFragmentData: mixed> = {
+type ReturnType<TFragmentData extends unknown> = {
   data: TFragmentData,
   disableStoreUpdates: () => void,
   enableStoreUpdates: () => void,
 };
 
-hook useFragmentNode<TFragmentData: mixed>(
+hook useFragmentNode<TFragmentData extends unknown>(
   fragmentNode: ReaderFragment,
-  fragmentRef: mixed,
+  fragmentRef: unknown,
   componentDisplayName: string,
 ): ReturnType<TFragmentData> {
   const environment = useRelayEnvironment();
@@ -123,7 +123,7 @@ hook useFragmentNode<TFragmentData: mixed>(
   }
 
   return {
-    // $FlowFixMe[incompatible-return]
+    // $FlowFixMe[incompatible-type]
     data: fragmentResult.data,
     disableStoreUpdates,
     enableStoreUpdates,