react-relay 14.1.0 → 16.0.0

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

@@ -4,9 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @emails oncall+relay
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
 import type {LoadMoreFn} from '../useLoadMoreFunction';
@@ -14,80 +14,84 @@ import type {
   FetchFn,
   NonNullableData,
   NullableData,
-  QueryOperation,
   QueryVariables,
   QueryVariablesSubset,
 } from './utils';
-import type {IEnvironment, OperationType} from 'relay-runtime';
+import type {IEnvironment, Variables} from 'relay-runtime';
 
 import useBlockingPaginationFragment from '../useBlockingPaginationFragment';
 import {
   fragmentData,
-  fragmentInput,
   keyAnotherNonNullable,
   keyAnotherNullable,
   keyNonNullable,
   keyNullable,
+  refetchableFragmentInput,
 } from './utils';
 
 type ExpectedReturnType<
-  TQuery: OperationType,
-  TQueryVariables,
+  TRefetchVariables: Variables,
+  TLoadMoreVariables: Variables,
   TFragmentData,
 > = {
   data: TFragmentData,
-  loadNext: LoadMoreFn<TQuery>,
-  loadPrevious: LoadMoreFn<TQuery>,
+  loadNext: LoadMoreFn<TLoadMoreVariables>,
+  loadPrevious: LoadMoreFn<TLoadMoreVariables>,
   hasNext: boolean,
   hasPrevious: boolean,
-  refetch: FetchFn<TQueryVariables>,
+  refetch: FetchFn<TRefetchVariables>,
 };
 
 /* eslint-disable react-hooks/rules-of-hooks */
 
 // Nullability of returned data type is correct
-(useBlockingPaginationFragment<QueryOperation, _>(
-  fragmentInput,
+// $FlowFixMe[prop-missing]
+// $FlowFixMe[incompatible-cast]
+(useBlockingPaginationFragment(
+  refetchableFragmentInput,
   keyNonNullable,
-): ExpectedReturnType<QueryOperation, QueryVariablesSubset, NonNullableData>);
+): ExpectedReturnType<QueryVariablesSubset, QueryVariables, NonNullableData>);
 
-(useBlockingPaginationFragment<QueryOperation, _>(
-  fragmentInput,
+(useBlockingPaginationFragment(
+  refetchableFragmentInput,
   keyNullable,
-): ExpectedReturnType<QueryOperation, QueryVariables, NullableData>);
+): ExpectedReturnType<QueryVariables, QueryVariables, NullableData>);
 
 // $FlowExpectedError: can't cast nullable to non-nullable
-(useBlockingPaginationFragment<QueryOperation, _>(
-  fragmentInput,
+(useBlockingPaginationFragment(
+  refetchableFragmentInput,
   keyNullable,
-): ExpectedReturnType<QueryOperation, QueryVariables, NonNullableData>);
+): ExpectedReturnType<QueryVariables, QueryVariables, NonNullableData>);
 
 // $FlowExpectedError: actual type of returned data is correct
-(useBlockingPaginationFragment<QueryOperation, _>(
-  fragmentInput,
+(useBlockingPaginationFragment(
+  refetchableFragmentInput,
+  // $FlowExpectedError[incompatible-call]
   keyAnotherNonNullable,
-): ExpectedReturnType<QueryOperation, QueryVariablesSubset, NonNullableData>);
-// $FlowExpectedError
-(useBlockingPaginationFragment<QueryOperation, _>(
-  fragmentInput,
+): ExpectedReturnType<QueryVariables, QueryVariablesSubset, NonNullableData>);
+
+// $FlowExpectedError[incompatible-call] `Example_user$fragmentType` is incompatible with  `FragmentType`
+(useBlockingPaginationFragment(
+  refetchableFragmentInput,
+  // $FlowExpectedError[incompatible-call]
   keyAnotherNullable,
-): ExpectedReturnType<QueryOperation, QueryVariables, NullableData>);
+): ExpectedReturnType<QueryVariables, QueryVariables, NullableData>);
 
 // $FlowExpectedError: Key should not be a user provided object
-useBlockingPaginationFragment<QueryOperation, _>(fragmentInput, {abc: 123});
+useBlockingPaginationFragment(fragmentInput, {abc: 123});
 
 // $FlowExpectedError: Key should not be an empty object
-useBlockingPaginationFragment<QueryOperation, _>(fragmentInput, {});
+useBlockingPaginationFragment(fragmentInput, {});
 
 // $FlowExpectedError: Key should be the `<name>$key` type from generated flow
-useBlockingPaginationFragment<QueryOperation, _>(fragmentInput, fragmentData);
+useBlockingPaginationFragment(fragmentInput, fragmentData);
 
 // Refetch function options:
 declare var variables: QueryVariables;
 declare var environment: IEnvironment;
 
-const {refetch} = useBlockingPaginationFragment<QueryOperation, _>(
-  fragmentInput,
+const {refetch} = useBlockingPaginationFragment(
+  refetchableFragmentInput,
   keyNonNullable,
 );
 // $FlowExpectedError: internal option
@@ -104,17 +108,20 @@ refetch(variables, {
 declare var extraVariables: {nickname: string};
 declare var invalidVariables: {foo: string};
 
-const {loadNext} = useBlockingPaginationFragment<QueryOperation, _>(
-  fragmentInput,
+const {loadNext} = useBlockingPaginationFragment(
+  refetchableFragmentInput,
   keyNonNullable,
 );
 // Accepts extraVariables
 loadNext(10, {
+  // $FlowFixMe[prop-missing]
+  // $FlowFixMe[incompatible-call]
   UNSTABLE_extraVariables: extraVariables,
 });
 
-// $FlowExpectedError: doesn't accept variables not available in the Flow type
+// $FlowFixMe[prop-missing]
 loadNext(10, {
+  // $FlowExpectedError: doesn't accept variables not available in the Flow type
   UNSTABLE_extraVariables: invalidVariables,
 });
 

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

@@ -4,9 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @emails oncall+relay
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
 import type {

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

@@ -4,9 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @emails oncall+relay
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
 import type {LoadMoreFn} from '../useLoadMoreFunction';
@@ -14,82 +14,85 @@ import type {
   FetchFn,
   NonNullableData,
   NullableData,
-  QueryOperation,
   QueryVariables,
   QueryVariablesSubset,
 } from './utils';
-import type {IEnvironment, OperationType} from 'relay-runtime';
+import type {IEnvironment, Variables} from 'relay-runtime';
 
 import usePaginationFragment from '../usePaginationFragment';
 import {
   fragmentData,
-  fragmentInput,
   keyAnotherNonNullable,
   keyAnotherNullable,
   keyNonNullable,
   keyNullable,
+  refetchableFragmentInput,
 } from './utils';
 
 type ExpectedReturnType<
-  TQuery: OperationType,
-  TQueryVariables,
+  TRefetchVariables: Variables,
+  TLoadMoreVariables: Variables,
   TFragmentData,
 > = {
   data: TFragmentData,
-  loadNext: LoadMoreFn<TQuery>,
-  loadPrevious: LoadMoreFn<TQuery>,
+  loadNext: LoadMoreFn<TLoadMoreVariables>,
+  loadPrevious: LoadMoreFn<TLoadMoreVariables>,
   hasNext: boolean,
   hasPrevious: boolean,
   isLoadingNext: boolean,
   isLoadingPrevious: boolean,
-  refetch: FetchFn<TQueryVariables>,
+  refetch: FetchFn<TRefetchVariables>,
 };
 
 /* eslint-disable react-hooks/rules-of-hooks */
 
 // Nullability of returned data type is correct
-(usePaginationFragment<QueryOperation, _>(
-  fragmentInput,
+// $FlowFixMe[prop-missing]
+// $FlowFixMe[incompatible-cast]
+(usePaginationFragment(
+  refetchableFragmentInput,
   keyNonNullable,
-): ExpectedReturnType<QueryOperation, QueryVariablesSubset, NonNullableData>);
+): ExpectedReturnType<QueryVariablesSubset, QueryVariables, NonNullableData>);
 
-(usePaginationFragment<QueryOperation, _>(
-  fragmentInput,
+(usePaginationFragment(
+  refetchableFragmentInput,
   keyNullable,
-): ExpectedReturnType<QueryOperation, QueryVariables, NullableData>);
+): ExpectedReturnType<QueryVariables, QueryVariables, NullableData>);
 
 // $FlowExpectedError: can't cast nullable to non-nullable
-(usePaginationFragment<QueryOperation, _>(
-  fragmentInput,
+(usePaginationFragment(
+  refetchableFragmentInput,
   keyNullable,
-): ExpectedReturnType<QueryOperation, QueryVariables, NonNullableData>);
+): ExpectedReturnType<QueryVariables, QueryVariables, NonNullableData>);
 
 // $FlowExpectedError: actual type of returned data is correct
-(usePaginationFragment<QueryOperation, _>(
-  fragmentInput,
+(usePaginationFragment(
+  refetchableFragmentInput,
+  // $FlowFixMe[incompatible-call]
   keyAnotherNonNullable,
-): ExpectedReturnType<QueryOperation, QueryVariablesSubset, NonNullableData>);
+): ExpectedReturnType<QueryVariables, QueryVariablesSubset, NonNullableData>);
 // $FlowExpectedError
-(usePaginationFragment<QueryOperation, _>(
-  fragmentInput,
+(usePaginationFragment(
+  refetchableFragmentInput,
+  // $FlowFixMe[incompatible-call]
   keyAnotherNullable,
-): ExpectedReturnType<QueryOperation, QueryVariables, NullableData>);
+): ExpectedReturnType<QueryVariables, QueryVariables, NonNullableData>);
 
 // $FlowExpectedError: Key should not be a user provided object
-usePaginationFragment<QueryOperation, _>(fragmentInput, {abc: 123});
+usePaginationFragment(refetchableFragmentInput, {abc: 123});
 
 // $FlowExpectedError: Key should not be an empty object
-usePaginationFragment<QueryOperation, _>(fragmentInput, {});
+usePaginationFragment(refetchableFragmentInput, {});
 
 // $FlowExpectedError: Key should be the `<name>$key` type from generated flow
-usePaginationFragment<QueryOperation, _>(fragmentInput, fragmentData);
+usePaginationFragment(refetchableFragmentInput, fragmentData);
 
 // Refetch function options:
 declare var variables: QueryVariables;
 declare var environment: IEnvironment;
 
-const {refetch} = usePaginationFragment<QueryOperation, _>(
-  fragmentInput,
+const {refetch} = usePaginationFragment(
+  refetchableFragmentInput,
   keyNonNullable,
 );
 // $FlowExpectedError: internal option
@@ -106,17 +109,20 @@ refetch(variables, {
 declare var extraVariables: {nickname: string};
 declare var invalidVariables: {foo: string};
 
-const {loadNext} = usePaginationFragment<QueryOperation, _>(
-  fragmentInput,
+const {loadNext} = usePaginationFragment(
+  refetchableFragmentInput,
   keyNonNullable,
 );
 // Accepts extraVariables
 loadNext(10, {
+  // $FlowFixMe[prop-missing]
+  // $FlowFixMe[incompatible-call]
   UNSTABLE_extraVariables: extraVariables,
 });
 
-// $FlowExpectedError: doesn't accept variables not available in the Flow type
+// $FlowFixMe[prop-missing]
 loadNext(10, {
+  // $FlowExpectedError: doesn't accept variables not available in the Flow type
   UNSTABLE_extraVariables: invalidVariables,
 });
 

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

@@ -4,16 +4,15 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @emails oncall+relay
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
 import type {
   FetchFn,
   NonNullableData,
   NullableData,
-  QueryOperation,
   QueryVariables,
   QueryVariablesSubset,
 } from './utils';
@@ -22,64 +21,67 @@ import type {IEnvironment} from 'relay-runtime';
 import useRefetchableFragment from '../useRefetchableFragment';
 import {
   fragmentData,
-  fragmentInput,
   keyAnotherNonNullable,
   keyAnotherNullable,
   keyNonNullable,
   keyNullable,
+  refetchableFragmentInput,
 } from './utils';
 
 /* eslint-disable react-hooks/rules-of-hooks */
 
 // Nullability of returned data type is correct
-(useRefetchableFragment<QueryOperation, _>(fragmentInput, keyNonNullable): [
+// $FlowFixMe[prop-missing]
+// $FlowFixMe[incompatible-cast]
+(useRefetchableFragment(refetchableFragmentInput, keyNonNullable): [
   NonNullableData,
   FetchFn<QueryVariablesSubset>,
 ]);
 
-(useRefetchableFragment<QueryOperation, _>(fragmentInput, keyNullable): [
+(useRefetchableFragment(refetchableFragmentInput, keyNullable): [
   NullableData,
   FetchFn<QueryVariables>,
 ]);
 
 // $FlowExpectedError: can't cast nullable to non-nullable
-(useRefetchableFragment<QueryOperation, _>(fragmentInput, keyNullable): [
+(useRefetchableFragment(refetchableFragmentInput, keyNullable): [
   NonNullableData,
   FetchFn<QueryVariables>,
 ]);
 
 // $FlowExpectedError: refetch requires exact type if key is nullable
-(useRefetchableFragment<QueryOperation, _>(fragmentInput, keyNullable): [
+(useRefetchableFragment(refetchableFragmentInput, keyNullable): [
   NullableData,
   FetchFn<QueryVariablesSubset>,
 ]);
 
 // $FlowExpectedError: actual type of returned data is correct
-(useRefetchableFragment<QueryOperation, _>(
-  fragmentInput,
-  keyAnotherNonNullable,
-): [NonNullableData, FetchFn<QueryVariablesSubset>]);
-// $FlowExpectedError
-(useRefetchableFragment<QueryOperation, _>(fragmentInput, keyAnotherNullable): [
+(useRefetchableFragment(refetchableFragmentInput, keyAnotherNonNullable): [
+  NonNullableData,
+  FetchFn<QueryVariablesSubset>,
+]);
+
+// $FlowExpectedError - incompatible key types
+(useRefetchableFragment(refetchableFragmentInput, keyAnotherNullable): [
   NullableData,
   FetchFn<QueryVariables>,
 ]);
 
 // $FlowExpectedError: Key should not be a user provided object
-useRefetchableFragment<QueryOperation, _>(fragmentInput, {abc: 123});
+useRefetchableFragment(refetchableFragmentInput, {abc: 123});
 
 // $FlowExpectedError: Key should not be an empty object
-useRefetchableFragment<QueryOperation, _>(fragmentInput, {});
+useRefetchableFragment(refetchableFragmentInput, {});
 
 // $FlowExpectedError: Key should be the `<name>$key` type from generated flow
-useRefetchableFragment<QueryOperation, _>(fragmentInput, fragmentData);
+useRefetchableFragment(refetchableFragmentInput, fragmentData);
 
 // Refetch function options:
 declare var variables: QueryVariables;
 declare var environment: IEnvironment;
 
-const [_, refetch] = useRefetchableFragment<QueryOperation, _>(
-  fragmentInput,
+const [, refetch] = useRefetchableFragment(
+  refetchableFragmentInput,
   keyNonNullable,
 );
 // $FlowExpectedError: internal option

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

@@ -4,20 +4,31 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @emails oncall+relay
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
 'use strict';
 
-import type {Disposable, Fragment, FragmentType} from 'relay-runtime';
+import type {
+  Disposable,
+  Fragment,
+  FragmentType,
+  RefetchableFragment,
+} from 'relay-runtime';
 
 declare export var fragmentInput: Fragment<
   Example_user$fragmentType,
   Example_user$data,
 >;
 
+declare export var refetchableFragmentInput: RefetchableFragment<
+  Example_user$fragmentType,
+  Example_user$data,
+  QueryVariables,
+>;
+
 declare export opaque type Example_user$fragmentType: FragmentType;
 export type Example_user$data = NonNullableData;
 export type Example_user$key = {

package/relay-hooks/loadEntryPoint.js.flow

@@ -6,7 +6,7 @@
  *
  * @flow strict-local
  * @format
- * @emails oncall+relay
+ * @oncall relay
  */
 
 'use strict';
@@ -46,8 +46,10 @@ function loadEntryPoint<
   }
   const preloadProps = entryPoint.getPreloadProps(entryPointParams);
   const {queries, entryPoints, extraProps} = preloadProps;
-  const preloadedQueries: $Shape<TPreloadedQueries> = {};
-  const preloadedEntryPoints: $Shape<TPreloadedEntryPoints> = {};
+  // $FlowFixMe[incompatible-type]
+  const preloadedQueries: Partial<TPreloadedQueries> = {};
+  // $FlowFixMe[incompatible-type]
+  const preloadedEntryPoints: Partial<TPreloadedEntryPoints> = {};
   if (queries != null) {
     const queriesPropNames = Object.keys(queries);
     queriesPropNames.forEach(queryPropName => {
@@ -58,6 +60,7 @@ function loadEntryPoint<
         environmentProviderOptions,
       );
 
+      // $FlowFixMe[underconstrained-implicit-instantiation]
       preloadedQueries[queryPropName] = loadQuery(
         environment,
         parameters,
@@ -81,11 +84,15 @@ function loadEntryPoint<
       }
       const {entryPoint: nestedEntryPoint, entryPointParams: nestedParams} =
         entryPointDescription;
-      preloadedEntryPoints[entryPointPropName] = loadEntryPoint(
-        environmentProvider,
-        nestedEntryPoint,
-        nestedParams,
-      );
+      preloadedEntryPoints[entryPointPropName] = loadEntryPoint<
+        _,
+        {...},
+        {...},
+        {...},
+        mixed,
+        EntryPointComponent<{...}, {...}, {...}, mixed>,
+        _,
+      >(environmentProvider, nestedEntryPoint, nestedParams);
     });
   }
 

package/relay-hooks/loadQuery.js.flow

@@ -6,12 +6,13 @@
  *
  * @flow strict-local
  * @format
- * @emails oncall+relay
+ * @oncall relay
  */
 
 'use strict';
 
 import type {
+  EnvironmentProviderOptions,
   LoadQueryOptions,
   PreloadableConcreteRequest,
   PreloadedQueryInner,
@@ -23,6 +24,7 @@ import type {
   IEnvironment,
   OperationDescriptor,
   OperationType,
+  Query,
   RequestIdentifier,
   RequestParameters,
 } from 'relay-runtime';
@@ -30,11 +32,11 @@ import type {
 const invariant = require('invariant');
 const React = require('react');
 const {
+  __internal: {fetchQueryDeduped},
   Observable,
   PreloadableQueryRegistry,
   RelayFeatureFlags,
   ReplaySubject,
-  __internal: {fetchQueryDeduped},
   createOperationDescriptor,
   getRequest,
   getRequestIdentifier,
@@ -55,9 +57,31 @@ function useTrackLoadQueryInRender() {
   }
 }
 
-function loadQuery<TQuery: OperationType, TEnvironmentProviderOptions>(
+type QueryType<T> = T extends Query<infer V, infer D, infer RR>
+  ? {
+      variables: V,
+      response: D,
+      rawResponse?: $NonMaybeType<RR>,
+    }
+  : $Call<<T>(PreloadableConcreteRequest<T>) => T, T>;
+
+declare function loadQuery<
+  T,
+  TEnvironmentProviderOptions = EnvironmentProviderOptions,
+>(
+  environment: IEnvironment,
+  preloadableRequest: T,
+  variables: QueryType<T>['variables'],
+  options?: ?LoadQueryOptions,
+  environmentProviderOptions?: ?TEnvironmentProviderOptions,
+): PreloadedQueryInner<QueryType<T>, TEnvironmentProviderOptions>;
+
+function loadQuery<
+  TQuery: OperationType,
+  TEnvironmentProviderOptions = EnvironmentProviderOptions,
+>(
   environment: IEnvironment,
-  preloadableRequest: GraphQLTaggedNode | PreloadableConcreteRequest<TQuery>,
+  preloadableRequest: PreloadableConcreteRequest<TQuery>,
   variables: TQuery['variables'],
   options?: ?LoadQueryOptions,
   environmentProviderOptions?: ?TEnvironmentProviderOptions,
@@ -115,8 +139,8 @@ function loadQuery<TQuery: OperationType, TEnvironmentProviderOptions>(
   // allows us to capture the events that occur during the eager execution
   // of the operation, and then replay them to the Observable we
   // ultimately return.
-  const executionSubject = new ReplaySubject();
-  const returnedObservable = Observable.create(sink =>
+  const executionSubject = new ReplaySubject<GraphQLResponse>();
+  const returnedObservable = Observable.create<GraphQLResponse>(sink =>
     executionSubject.subscribe(sink),
   );
 
@@ -139,7 +163,7 @@ function loadQuery<TQuery: OperationType, TEnvironmentProviderOptions>(
     didMakeNetworkRequest = true;
 
     let observable;
-    const subject = new ReplaySubject();
+    const subject = new ReplaySubject<GraphQLResponse>();
     if (RelayFeatureFlags.ENABLE_LOAD_QUERY_REQUEST_DEDUPING === true) {
       // Here, we are calling fetchQueryDeduped at the network layer level,
       // which ensures that only a single network request is active for a given
@@ -270,7 +294,7 @@ function loadQuery<TQuery: OperationType, TEnvironmentProviderOptions>(
   };
 
   let params;
-  let cancelOnLoadCallback;
+  let cancelOnLoadCallback: () => void;
   let queryId;
   if (preloadableRequest.kind === 'PreloadableConcreteRequest') {
     const preloadableConcreteRequest: PreloadableConcreteRequest<TQuery> =

package/relay-hooks/preloadQuery_DEPRECATED.js.flow

@@ -4,9 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @emails oncall+relay
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
 'use strict';
@@ -31,7 +31,6 @@ import type {
 const {
   Observable,
   PreloadableQueryRegistry,
-  RelayFeatureFlags,
   ReplaySubject,
   createOperationDescriptor,
   getRequest,
@@ -45,8 +44,8 @@ const WEAKMAP_SUPPORTED = typeof WeakMap === 'function';
 const STORE_OR_NETWORK_DEFAULT: PreloadFetchPolicy = 'store-or-network';
 
 const pendingQueriesByEnvironment = WEAKMAP_SUPPORTED
-  ? new WeakMap()
-  : new Map();
+  ? new WeakMap<IEnvironment, Map<string, PendingQueryEntry>>()
+  : new Map<IEnvironment, Map<string, PendingQueryEntry>>();
 
 type PendingQueryEntry =
   | $ReadOnly<{
@@ -92,7 +91,7 @@ function preloadQuery<TQuery: OperationType, TEnvironmentProviderOptions>(
   );
   const source =
     queryEntry.kind === 'network'
-      ? Observable.create(sink => {
+      ? Observable.create<GraphQLResponse>(sink => {
           let subscription;
           if (pendingQueries.get(queryEntry.cacheKey) == null) {
             const newQueryEntry = preloadQueryDeduped(
@@ -205,7 +204,7 @@ function preloadQueryDeduped<TQuery: OperationType>(
   } else if (prevQueryEntry == null || prevQueryEntry.kind !== 'network') {
     // Should fetch but we're not already fetching: fetch!
     const source = network.execute(params, variables, networkCacheConfig, null);
-    const subject = new ReplaySubject();
+    const subject = new ReplaySubject<GraphQLResponse>();
     nextQueryEntry = {
       cacheKey,
       fetchKey,