react-relay 12.0.0 → 13.0.0-rc.0

package/relay-hooks/usePreloadedQuery.js.flow

@@ -13,24 +13,23 @@
 
 'use strict';
 
-const invariant = require('invariant');
+import type {PreloadedQuery} from './EntryPointTypes.flow';
+import type {
+  GraphQLTaggedNode,
+  OperationType,
+  RenderPolicy,
+} from 'relay-runtime';
+
+const {useTrackLoadQueryInRender} = require('./loadQuery');
 const useLazyLoadQueryNode = require('./useLazyLoadQueryNode');
 const useMemoOperationDescriptor = require('./useMemoOperationDescriptor');
 const useRelayEnvironment = require('./useRelayEnvironment');
-const warning = require('warning');
-
-const {useTrackLoadQueryInRender} = require('./loadQuery');
+const invariant = require('invariant');
 const {useDebugValue} = require('react');
 const {
   __internal: {fetchQueryDeduped, fetchQuery},
 } = require('relay-runtime');
-
-import type {PreloadedQuery} from './EntryPointTypes.flow';
-import type {
-  GraphQLTaggedNode,
-  OperationType,
-  RenderPolicy,
-} from 'relay-runtime';
+const warning = require('warning');
 
 function usePreloadedQuery<TQuery: OperationType>(
   gqlQuery: GraphQLTaggedNode,
@@ -38,19 +37,14 @@ function usePreloadedQuery<TQuery: OperationType>(
   options?: {|
     UNSTABLE_renderPolicy?: RenderPolicy,
   |},
-): $ElementType<TQuery, 'response'> {
+): TQuery['response'] {
   // We need to use this hook in order to be able to track if
   // loadQuery was called during render
   useTrackLoadQueryInRender();
 
   const environment = useRelayEnvironment();
-  const {
-    fetchKey,
-    fetchPolicy,
-    source,
-    variables,
-    networkCacheConfig,
-  } = preloadedQuery;
+  const {fetchKey, fetchPolicy, source, variables, networkCacheConfig} =
+    preloadedQuery;
   const operation = useMemoOperationDescriptor(
     gqlQuery,
     variables,

package/relay-hooks/useQueryLoader.js.flow

@@ -13,16 +13,9 @@
 
 'use strict';
 
-const useIsMountedRef = require('./useIsMountedRef');
-const useRelayEnvironment = require('./useRelayEnvironment');
-
-const {loadQuery, useTrackLoadQueryInRender} = require('./loadQuery');
-const {useCallback, useEffect, useRef, useState} = require('react');
-const {getRequest} = require('relay-runtime');
-
 import type {
-  PreloadableConcreteRequest,
   LoadQueryOptions,
+  PreloadableConcreteRequest,
   PreloadedQuery,
 } from './EntryPointTypes.flow';
 import type {
@@ -31,8 +24,14 @@ import type {
   OperationType,
 } from 'relay-runtime';
 
+const {loadQuery, useTrackLoadQueryInRender} = require('./loadQuery');
+const useIsMountedRef = require('./useIsMountedRef');
+const useRelayEnvironment = require('./useRelayEnvironment');
+const {useCallback, useEffect, useRef, useState} = require('react');
+const {getRequest} = require('relay-runtime');
+
 export type LoaderFn<TQuery: OperationType> = (
-  variables: $ElementType<TQuery, 'variables'>,
+  variables: TQuery['variables'],
   options?: UseQueryLoaderLoadQueryOptions,
 ) => void;
 
@@ -104,12 +103,10 @@ function useQueryLoader<TQuery: OperationType>(
     PreloadedQuery<TQuery> | NullQueryReference,
   >(() => initialQueryReferenceInternal);
 
-  const [
-    previousInitialQueryReference,
-    setPreviousInitialQueryReference,
-  ] = useState<PreloadedQuery<TQuery> | NullQueryReference>(
-    () => initialQueryReferenceInternal,
-  );
+  const [previousInitialQueryReference, setPreviousInitialQueryReference] =
+    useState<PreloadedQuery<TQuery> | NullQueryReference>(
+      () => initialQueryReferenceInternal,
+    );
 
   if (initialQueryReferenceInternal !== previousInitialQueryReference) {
     // Rendering the query reference makes it "managed" by this hook, so
@@ -131,7 +128,7 @@ function useQueryLoader<TQuery: OperationType>(
 
   const queryLoaderCallback = useCallback(
     (
-      variables: $ElementType<TQuery, 'variables'>,
+      variables: TQuery['variables'],
       options?: ?UseQueryLoaderLoadQueryOptions,
     ) => {
       const mergedOptions: ?UseQueryLoaderLoadQueryOptions =

package/relay-hooks/useRefetchableFragment.js.flow

@@ -13,19 +13,18 @@
 
 'use strict';
 
-const useRefetchableFragmentNode = require('./useRefetchableFragmentNode');
-const useStaticFragmentNodeWarning = require('./useStaticFragmentNodeWarning');
-
-const {useDebugValue} = require('react');
-const {getFragment} = require('relay-runtime');
-
 import type {RefetchFnDynamic} from './useRefetchableFragmentNode';
 import type {
+  FragmentType,
   GraphQLTaggedNode,
   OperationType,
-  FragmentReference,
 } from 'relay-runtime';
 
+const useRefetchableFragmentNode = require('./useRefetchableFragmentNode');
+const useStaticFragmentNodeWarning = require('./useStaticFragmentNodeWarning');
+const {useDebugValue} = require('react');
+const {getFragment} = require('relay-runtime');
+
 type ReturnType<TQuery: OperationType, TKey: ?{+$data?: mixed, ...}> = [
   // NOTE: This $Call ensures that the type of the returned data is either:
   //   - nullable if the provided ref type is nullable
@@ -41,7 +40,7 @@ type ReturnType<TQuery: OperationType, TKey: ?{+$data?: mixed, ...}> = [
 
 function useRefetchableFragment<
   TQuery: OperationType,
-  TKey: ?{+$data?: mixed, +$fragmentRefs: FragmentReference, ...},
+  TKey: ?{+$data?: mixed, +$fragmentSpreads: FragmentType, ...},
 >(
   fragmentInput: GraphQLTaggedNode,
   fragmentRef: TKey,

package/relay-hooks/useRefetchableFragmentNode.js.flow

@@ -13,17 +13,27 @@
 
 'use strict';
 
-const ProfilerContext = require('./ProfilerContext');
+import type {LoaderFn} from './useQueryLoader';
+import type {
+  Disposable,
+  FetchPolicy,
+  IEnvironment,
+  OperationDescriptor,
+  OperationType,
+  ReaderFragment,
+  RenderPolicy,
+  Variables,
+  VariablesOf,
+} from 'relay-runtime';
 
-const invariant = require('invariant');
+const {getFragmentResourceForEnvironment} = require('./FragmentResource');
+const ProfilerContext = require('./ProfilerContext');
+const {getQueryResourceForEnvironment} = require('./QueryResource');
 const useFragmentNode = require('./useFragmentNode');
 const useIsMountedRef = require('./useIsMountedRef');
 const useQueryLoader = require('./useQueryLoader');
 const useRelayEnvironment = require('./useRelayEnvironment');
-const warning = require('warning');
-
-const {getFragmentResourceForEnvironment} = require('./FragmentResource');
-const {getQueryResourceForEnvironment} = require('./QueryResource');
+const invariant = require('invariant');
 const {useCallback, useContext, useReducer} = require('react');
 const {
   __internal: {fetchQuery},
@@ -33,19 +43,7 @@ const {
   getSelector,
   getValueAtPath,
 } = require('relay-runtime');
-
-import type {LoaderFn} from './useQueryLoader';
-import type {
-  Disposable,
-  FetchPolicy,
-  IEnvironment,
-  OperationDescriptor,
-  OperationType,
-  ReaderFragment,
-  RenderPolicy,
-  Variables,
-  VariablesOf,
-} from 'relay-runtime';
+const warning = require('warning');
 
 export type RefetchFn<
   TQuery: OperationType,
@@ -176,11 +174,8 @@ function useRefetchableFragmentNode<
   componentDisplayName: string,
 ): ReturnType<TQuery, TKey, InternalOptions> {
   const parentEnvironment = useRelayEnvironment();
-  const {
-    refetchableRequest,
-    fragmentRefPathInResponse,
-    identifierField,
-  } = getRefetchMetadata(fragmentNode, componentDisplayName);
+  const {refetchableRequest, fragmentRefPathInResponse, identifierField} =
+    getRefetchMetadata(fragmentNode, componentDisplayName);
   const fragmentIdentifier = getFragmentIdentifier(
     fragmentNode,
     parentFragmentRef,
@@ -213,9 +208,8 @@ function useRefetchableFragmentNode<
   const shouldReset =
     environment !== mirroredEnvironment ||
     fragmentIdentifier !== mirroredFragmentIdentifier;
-  const [queryRef, loadQuery, disposeQuery] = useQueryLoader<TQuery>(
-    refetchableRequest,
-  );
+  const [queryRef, loadQuery, disposeQuery] =
+    useQueryLoader<TQuery>(refetchableRequest);
 
   let fragmentRef = parentFragmentRef;
   if (shouldReset) {
@@ -436,7 +430,6 @@ function useRefetchFunction<TQuery: OperationType>(
       // all variables required by the fragment when calling `refetch()`.
       // We fill in any variables not passed by the call to `refetch()` with the
       // variables from the original parent fragment owner.
-      // $FlowFixMe[cannot-spread-interface]
       const refetchVariables: VariablesOf<TQuery> = {
         ...(parentVariables: $FlowFixMe),
         ...fragmentVariables,
@@ -500,7 +493,7 @@ function useRefetchFunction<TQuery: OperationType>(
     //   - fragmentNode and parentFragmentRef are also captured by including
     //     fragmentIdentifier
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [fragmentIdentifier, dispatch, disposeQuery, identifierValue],
+    [fragmentIdentifier, dispatch, disposeQuery, identifierValue, loadQuery],
   );
 }
 
@@ -513,7 +506,6 @@ if (__DEV__) {
       environment: IEnvironment,
     ): ?DebugIDandTypename {
       const {Record} = require('relay-runtime');
-      // $FlowFixMe[prop-missing]
       const id = memoRefetchVariables?.id;
       if (
         fragmentRefPathInResponse.length !== 1 ||

package/relay-hooks/useRelayEnvironment.js.flow

@@ -13,13 +13,11 @@
 
 'use strict';
 
-const ReactRelayContext = require('react-relay/ReactRelayContext');
+import type {IEnvironment} from 'relay-runtime';
 
 const invariant = require('invariant');
-
 const {useContext} = require('react');
-
-import type {IEnvironment} from 'relay-runtime';
+const ReactRelayContext = require('react-relay/ReactRelayContext');
 
 function useRelayEnvironment(): IEnvironment {
   const context = useContext(ReactRelayContext);

package/relay-hooks/useStaticFragmentNodeWarning.js.flow

@@ -13,11 +13,10 @@
 
 'use strict';
 
-const warning = require('warning');
+import type {ReaderFragment} from 'relay-runtime';
 
 const {useRef} = require('react');
-
-import type {ReaderFragment} from 'relay-runtime';
+const warning = require('warning');
 
 function useStaticFragmentNodeWarning(
   fragmentNode: ReaderFragment,

package/relay-hooks/useSubscribeToInvalidationState.js.flow

@@ -13,12 +13,11 @@
 
 'use strict';
 
-const useRelayEnvironment = require('./useRelayEnvironment');
+import type {DataID, Disposable, InvalidationState} from 'relay-runtime';
 
+const useRelayEnvironment = require('./useRelayEnvironment');
 const {useEffect, useRef} = require('react');
 
-import type {DataID, Disposable, InvalidationState} from 'relay-runtime';
-
 /**
  * This hook subscribes a callback to the invalidation state of the given data
  * ids.
@@ -35,9 +34,7 @@ function useSubscribeToInvalidationState(
   const environment = useRelayEnvironment();
   const disposableRef = useRef(null);
 
-  const stableDataIDs = Array.from(dataIDs)
-    .sort()
-    .join('');
+  const stableDataIDs = Array.from(dataIDs).sort().join('');
   useEffect(() => {
     const store = environment.getStore();
     const invalidationState = store.lookupInvalidationState(dataIDs);

package/relay-hooks/useSubscription.js.flow

@@ -12,18 +12,17 @@
 
 'use strict';
 
-const useRelayEnvironment = require('./useRelayEnvironment');
-
-const {useEffect} = require('react');
-const {requestSubscription} = require('relay-runtime');
-
 import type {
-  IEnvironment,
+  Disposable,
   GraphQLSubscriptionConfig,
+  IEnvironment,
   SubscriptionParameters,
-  Disposable,
 } from 'relay-runtime';
 
+const useRelayEnvironment = require('./useRelayEnvironment');
+const {useEffect} = require('react');
+const {requestSubscription} = require('relay-runtime');
+
 type RequestSubscriptionFn<TSubscriptionParameters: SubscriptionParameters> = (
   environment: IEnvironment,
   config: GraphQLSubscriptionConfig<TSubscriptionParameters>,