react-relay 20.1.1 → 21.0.1

package/relay-hooks/usePrefetchableForwardPaginationFragment.js.flow

@@ -43,7 +43,7 @@ const {
   getValueAtPath,
 } = require('relay-runtime');
 
-type LoadMoreFn<TVariables: Variables> = (
+type LoadMoreFn<TVariables extends Variables> = (
   count: number,
   options?: {
     onComplete?: (Error | null) => void,
@@ -55,7 +55,9 @@ export type ReturnType<TVariables, TData, TEdgeData, TKey> = {
   // NOTE: This type 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>,
@@ -72,18 +74,20 @@ type LoadMoreOptions<TVariables> = {
 
 export type GetExtraVariablesFn<TEdgeData, TData, TVariables, TKey> = ({
   hasNext: boolean,
-  data: [+key: TKey] extends [+key: {+$fragmentSpreads: mixed, ...}]
+  data: [readonly key: TKey] extends [
+    readonly key: {readonly $fragmentSpreads: unknown, ...},
+  ]
     ? TData
     : ?TData,
   getServerEdges: () => TEdgeData,
 }) => Partial<TVariables>;
 
 hook usePrefetchableForwardPaginationFragment<
-  TFragmentType: FragmentType,
-  TVariables: Variables,
+  TFragmentType extends FragmentType,
+  TVariables extends Variables,
   TData,
   TEdgeData,
-  TKey: ?{+$fragmentSpreads: TFragmentType, ...},
+  TKey extends ?{readonly $fragmentSpreads: TFragmentType, ...},
 >(
   fragmentInput: PrefetchableRefetchableFragment<
     TFragmentType,
@@ -257,26 +261,26 @@ hook usePrefetchableForwardPaginationFragment<
               onComplete: prefetchingOnComplete,
               UNSTABLE_extraVariables:
                 typeof prefetchingUNSTABLE_extraVariables === 'function'
-                  ? // $FlowFixMe[incompatible-call]
+                  ? // $FlowFixMe[incompatible-type]
                     prefetchingUNSTABLE_extraVariables({
                       hasNext,
-                      // $FlowFixMe[incompatible-call]
+                      // $FlowFixMe[incompatible-type]
                       data: fragmentData,
                       getServerEdges: () => {
                         const selector = getSelector(
-                          // $FlowFixMe[incompatible-call]
+                          // $FlowFixMe[incompatible-type]
                           edgesFragment,
                           edgeKeys,
                         );
                         if (selector == null) {
-                          // $FlowFixMe[incompatible-call]
+                          // $FlowFixMe[incompatible-type]
                           return [];
                         }
                         invariant(
                           selector.kind === 'PluralReaderSelector',
                           'Expected a plural selector',
                         );
-                        // $FlowFixMe[incompatible-call]
+                        // $FlowFixMe[incompatible-type]
                         return selector.selectors.map(
                           sel => environment.lookup(sel).data,
                         );
@@ -332,22 +336,22 @@ hook usePrefetchableForwardPaginationFragment<
           onComplete,
           UNSTABLE_extraVariables:
             typeof prefetchingUNSTABLE_extraVariables === 'function'
-              ? // $FlowFixMe[incompatible-call]
+              ? // $FlowFixMe[incompatible-type]
                 prefetchingUNSTABLE_extraVariables({
                   hasNext,
-                  // $FlowFixMe[incompatible-call]
+                  // $FlowFixMe[incompatible-type]
                   data: fragmentData,
                   getServerEdges: () => {
                     const selector = getSelector(edgesFragment, edgeKeys);
                     if (selector == null) {
-                      // $FlowFixMe[incompatible-call]
+                      // $FlowFixMe[incompatible-type]
                       return [];
                     }
                     invariant(
                       selector.kind === 'PluralReaderSelector',
                       'Expected a plural selector',
                     );
-                    // $FlowFixMe[incompatible-call]
+                    // $FlowFixMe[incompatible-type]
                     return selector.selectors.map(
                       sel => environment.lookup(sel).data,
                     );
@@ -375,12 +379,12 @@ hook usePrefetchableForwardPaginationFragment<
 
   const realNumInUse = Math.min(numInUse, sourceSize);
 
-  const derivedEdgeKeys: $ReadOnlyArray<mixed> = useMemo(
+  const derivedEdgeKeys: ReadonlyArray<unknown> = useMemo(
     () => edgeKeys?.slice(0, realNumInUse) ?? [],
     [edgeKeys, realNumInUse],
   );
 
-  // $FlowExpectedError[incompatible-call] - we know derivedEdgeKeys are the correct keys
+  // $FlowExpectedError[incompatible-type] - we know derivedEdgeKeys are the correct keys
   const edges: TEdgeData = useFragment(edgesFragment, derivedEdgeKeys);
 
   const refetchPagination = useCallback(
@@ -422,13 +426,14 @@ hook usePrefetchableForwardPaginationFragment<
 
   return {
     edges,
-    // $FlowFixMe[incompatible-return]
+    // $FlowFixMe[incompatible-type]
     data: fragmentData,
     loadNext: showMore,
     hasNext: hasNext || sourceSize > numInUse,
     // Only reflect `isLoadingMore` if the product depends on it, do not refelect
     // `isLoaindgMore` state if it is for fufilling the buffer
     isLoadingNext: isLoadingMore && numInUse > sourceSize,
+    // $FlowFixMe[incompatible-type]
     refetch: refetchPagination,
   };
 }

package/relay-hooks/usePrefetchableForwardPaginationFragment_EXPERIMENTAL.js.flow

@@ -43,7 +43,7 @@ const {
   getValueAtPath,
 } = require('relay-runtime');
 
-type LoadMoreFn<TVariables: Variables> = (
+type LoadMoreFn<TVariables extends Variables> = (
   count: number,
   options?: {
     onComplete?: (Error | null) => void,
@@ -55,7 +55,9 @@ export type ReturnType<TVariables, TData, TEdgeData, TKey> = {
   // NOTE: This type 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>,
@@ -72,18 +74,20 @@ type LoadMoreOptions<TVariables> = {
 
 export type GetExtraVariablesFn<TEdgeData, TData, TVariables, TKey> = ({
   hasNext: boolean,
-  data: [+key: TKey] extends [+key: {+$fragmentSpreads: mixed, ...}]
+  data: [readonly key: TKey] extends [
+    readonly key: {readonly $fragmentSpreads: unknown, ...},
+  ]
     ? TData
     : ?TData,
   getServerEdges: () => TEdgeData,
 }) => Partial<TVariables>;
 
 hook usePrefetchableForwardPaginationFragment_EXPERIMENTAL<
-  TFragmentType: FragmentType,
-  TVariables: Variables,
+  TFragmentType extends FragmentType,
+  TVariables extends Variables,
   TData,
   TEdgeData,
-  TKey: ?{+$fragmentSpreads: TFragmentType, ...},
+  TKey extends ?{readonly $fragmentSpreads: TFragmentType, ...},
 >(
   fragmentInput: PrefetchableRefetchableFragment<
     TFragmentType,
@@ -257,26 +261,26 @@ hook usePrefetchableForwardPaginationFragment_EXPERIMENTAL<
               onComplete: prefetchingOnComplete,
               UNSTABLE_extraVariables:
                 typeof prefetchingUNSTABLE_extraVariables === 'function'
-                  ? // $FlowFixMe[incompatible-call]
+                  ? // $FlowFixMe[incompatible-type]
                     prefetchingUNSTABLE_extraVariables({
                       hasNext,
-                      // $FlowFixMe[incompatible-call]
+                      // $FlowFixMe[incompatible-type]
                       data: fragmentData,
                       getServerEdges: () => {
                         const selector = getSelector(
-                          // $FlowFixMe[incompatible-call]
+                          // $FlowFixMe[incompatible-type]
                           edgesFragment,
                           edgeKeys,
                         );
                         if (selector == null) {
-                          // $FlowFixMe[incompatible-call]
+                          // $FlowFixMe[incompatible-type]
                           return [];
                         }
                         invariant(
                           selector.kind === 'PluralReaderSelector',
                           'Expected a plural selector',
                         );
-                        // $FlowFixMe[incompatible-call]
+                        // $FlowFixMe[incompatible-type]
                         return selector.selectors.map(
                           sel => environment.lookup(sel).data,
                         );
@@ -331,22 +335,22 @@ hook usePrefetchableForwardPaginationFragment_EXPERIMENTAL<
           onComplete,
           UNSTABLE_extraVariables:
             typeof prefetchingUNSTABLE_extraVariables === 'function'
-              ? // $FlowFixMe[incompatible-call]
+              ? // $FlowFixMe[incompatible-type]
                 prefetchingUNSTABLE_extraVariables({
                   hasNext,
-                  // $FlowFixMe[incompatible-call]
+                  // $FlowFixMe[incompatible-type]
                   data: fragmentData,
                   getServerEdges: () => {
                     const selector = getSelector(edgesFragment, edgeKeys);
                     if (selector == null) {
-                      // $FlowFixMe[incompatible-call]
+                      // $FlowFixMe[incompatible-type]
                       return [];
                     }
                     invariant(
                       selector.kind === 'PluralReaderSelector',
                       'Expected a plural selector',
                     );
-                    // $FlowFixMe[incompatible-call]
+                    // $FlowFixMe[incompatible-type]
                     return selector.selectors.map(
                       sel => environment.lookup(sel).data,
                     );
@@ -374,12 +378,12 @@ hook usePrefetchableForwardPaginationFragment_EXPERIMENTAL<
 
   const realNumInUse = Math.min(numInUse, sourceSize);
 
-  const derivedEdgeKeys: $ReadOnlyArray<mixed> = useMemo(
+  const derivedEdgeKeys: ReadonlyArray<unknown> = useMemo(
     () => edgeKeys?.slice(0, realNumInUse) ?? [],
     [edgeKeys, realNumInUse],
   );
 
-  // $FlowExpectedError[incompatible-call] - we know derivedEdgeKeys are the correct keys
+  // $FlowExpectedError[incompatible-type] - we know derivedEdgeKeys are the correct keys
   const edges: TEdgeData = useFragment(edgesFragment, derivedEdgeKeys);
 
   const refetchPagination = useCallback(
@@ -421,13 +425,14 @@ hook usePrefetchableForwardPaginationFragment_EXPERIMENTAL<
 
   return {
     edges,
-    // $FlowFixMe[incompatible-return]
+    // $FlowFixMe[incompatible-type]
     data: fragmentData,
     loadNext: showMore,
     hasNext: hasNext || sourceSize > numInUse,
     // Only reflect `isLoadingMore` if the product depends on it, do not refelect
     // `isLoaindgMore` state if it is for fufilling the buffer
     isLoadingNext: isLoadingMore && numInUse > sourceSize,
+    // $FlowFixMe[incompatible-type]
     refetch: refetchPagination,
   };
 }

package/relay-hooks/usePreloadedQuery.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { PreloadedQuery } from '../ReactRelayTypes';
+import {GraphQLTaggedNode, OperationType, RenderPolicy} from 'relay-runtime';
+
+export function usePreloadedQuery<TQuery extends OperationType>(
+    gqlQuery: GraphQLTaggedNode,
+    preloadedQuery: PreloadedQuery<TQuery>,
+    options?: {
+        UNSTABLE_renderPolicy?: RenderPolicy | undefined;
+    },
+): TQuery['response'];

package/relay-hooks/usePreloadedQuery.js.flow

@@ -29,7 +29,7 @@ const {
 const warning = require('warning');
 
 type PreloadedQuery<
-  TVariables: Variables,
+  TVariables extends Variables,
   TData,
   TRawResponse,
   TEnvironmentProviderOptions = EnvironmentProviderOptions,
@@ -51,114 +51,147 @@ type PreloadedQuery<
       TEnvironmentProviderOptions,
     >;
 
-hook usePreloadedQuery<
-  TVariables: Variables,
+declare hook usePreloadedQuery<
+  TVariables extends Variables,
+  TData,
+  TRawResponse extends ?{...} = void,
+>(
+  gqlQuery:
+    | Query<TVariables, TData, TRawResponse>
+    | ClientQuery<TVariables, TData, TRawResponse>,
+  preloadedQuery: PreloadedQuery<TVariables, TData, NonNullable<TRawResponse>>,
+  options?: {
+    UNSTABLE_renderPolicy?: RenderPolicy,
+  },
+): TData;
+
+declare hook usePreloadedQuery<
+  TVariables extends Variables,
   TData,
-  TRawResponse: ?{...} = void,
+  TRawResponse extends ?{...} = void,
 >(
   gqlQuery:
     | Query<TVariables, TData, TRawResponse>
     | ClientQuery<TVariables, TData, TRawResponse>,
-  preloadedQuery: PreloadedQuery<
+  preloadedQuery: ?PreloadedQuery<TVariables, TData, NonNullable<TRawResponse>>,
+  options?: {
+    UNSTABLE_renderPolicy?: RenderPolicy,
+  },
+): ?TData;
+
+hook usePreloadedQuery<
+  TVariables extends Variables,
+  TData,
+  TRawResponse extends ?{...} = void,
+  TPreloadedQuery extends ?PreloadedQuery<
     TVariables,
     TData,
-    $NonMaybeType<TRawResponse>,
-  >,
+    NonNullable<TRawResponse>,
+  > = PreloadedQuery<TVariables, TData, NonNullable<TRawResponse>>,
+>(
+  gqlQuery:
+    | Query<TVariables, TData, TRawResponse>
+    | ClientQuery<TVariables, TData, TRawResponse>,
+  preloadedQuery: TPreloadedQuery,
   options?: {
     UNSTABLE_renderPolicy?: RenderPolicy,
   },
-): TData {
+): ?TData {
   const environment = useRelayEnvironment();
-  const {fetchKey, fetchPolicy, source, variables, networkCacheConfig} =
-    preloadedQuery;
   const operation = useMemoOperationDescriptor(
     gqlQuery,
-    variables,
-    networkCacheConfig,
+    preloadedQuery != null ? preloadedQuery.variables : {},
+    preloadedQuery != null ? preloadedQuery.networkCacheConfig : undefined,
   );
 
   let useLazyLoadQueryNodeParams;
-  if (preloadedQuery.kind === 'PreloadedQuery_DEPRECATED') {
-    invariant(
-      operation.request.node.params.name === preloadedQuery.name,
-      'usePreloadedQuery(): Expected data to be prefetched for query `%s`, ' +
-        'got prefetch results for query `%s`.',
-      operation.request.node.params.name,
-      preloadedQuery.name,
-    );
-
-    useLazyLoadQueryNodeParams = {
-      componentDisplayName: 'usePreloadedQuery()',
-      fetchKey,
-      fetchObservable: fetchQueryDeduped(
-        environment,
-        operation.request.identifier,
-        () => {
-          if (environment === preloadedQuery.environment && source != null) {
-            return environment.executeWithSource({operation, source});
-          } else {
-            return environment.execute({operation});
-          }
-        },
-      ),
-      fetchPolicy,
-      query: operation,
-      renderPolicy: options?.UNSTABLE_renderPolicy,
-    };
-  } else {
-    warning(
-      preloadedQuery.isDisposed === false,
-      'usePreloadedQuery(): Expected preloadedQuery to not be disposed yet. ' +
-        'This is because disposing the query marks it for future garbage ' +
-        'collection, and as such query results may no longer be present in the Relay ' +
-        'store. In the future, this will become a hard error.',
-    );
+  if (preloadedQuery != null) {
+    const {fetchKey, fetchPolicy, source} = preloadedQuery;
+    if (preloadedQuery.kind === 'PreloadedQuery_DEPRECATED') {
+      invariant(
+        operation.request.node.params.name === preloadedQuery.name,
+        'usePreloadedQuery(): Expected data to be prefetched for query `%s`, ' +
+          'got prefetch results for query `%s`.',
+        operation.request.node.params.name,
+        preloadedQuery.name,
+      );
 
-    const fallbackFetchObservable = fetchQuery(environment, operation);
-    let fetchObservable;
-    if (source != null && environment === preloadedQuery.environment) {
-      // If the source observable exists and the environments match, reuse
-      // the source observable.
-      // If the source observable happens to be empty, we need to fall back
-      // and re-execute and de-dupe the query (at render time).
-      fetchObservable = source.ifEmpty(fallbackFetchObservable);
-    } else if (environment !== preloadedQuery.environment) {
-      // If a call to loadQuery is made with a particular environment, and that
-      // preloaded query is passed to usePreloadedQuery in a different environment
-      // context, we cannot re-use the existing preloaded query.
-      // Instead, we need to fall back and re-execute and de-dupe the query with
-      // the new environment (at render time).
-      // TODO T68036756 track occurrences of this warning and turn it into a hard error
+      useLazyLoadQueryNodeParams = {
+        componentDisplayName: 'usePreloadedQuery()',
+        fetchKey,
+        fetchObservable: fetchQueryDeduped(
+          environment,
+          operation.request.identifier,
+          () => {
+            if (environment === preloadedQuery.environment && source != null) {
+              return environment.executeWithSource({operation, source});
+            } else {
+              return environment.execute({operation});
+            }
+          },
+        ),
+        fetchPolicy,
+        query: operation,
+        renderPolicy: options?.UNSTABLE_renderPolicy,
+      };
+    } else {
       warning(
-        false,
-        'usePreloadedQuery(): usePreloadedQuery was passed a preloaded query ' +
-          'that was created with a different environment than the one that is currently ' +
-          'in context. In the future, this will become a hard error.',
+        preloadedQuery.isDisposed === false,
+        'usePreloadedQuery(): Expected preloadedQuery to not be disposed yet. ' +
+          'This is because disposing the query marks it for future garbage ' +
+          'collection, and as such query results may no longer be present in the Relay ' +
+          'store. In the future, this will become a hard error.',
       );
-      fetchObservable = fallbackFetchObservable;
-    } else {
-      // if (source == null)
-      // If the source observable does not exist, we need to
-      // fall back and re-execute and de-dupe the query (at render time).
-      fetchObservable = fallbackFetchObservable;
-    }
 
+      const fallbackFetchObservable = fetchQuery(environment, operation);
+      let fetchObservable;
+      if (source != null && environment === preloadedQuery.environment) {
+        // If the source observable exists and the environments match, reuse
+        // the source observable.
+        // If the source observable happens to be empty, we need to fall back
+        // and re-execute and de-dupe the query (at render time).
+        fetchObservable = source.ifEmpty(fallbackFetchObservable);
+      } else if (environment !== preloadedQuery.environment) {
+        // If a call to loadQuery is made with a particular environment, and that
+        // preloaded query is passed to usePreloadedQuery in a different environment
+        // context, we cannot re-use the existing preloaded query.
+        // Instead, we need to fall back and re-execute and de-dupe the query with
+        // the new environment (at render time).
+        // TODO T68036756 track occurrences of this warning and turn it into a hard error
+        warning(
+          false,
+          'usePreloadedQuery(): usePreloadedQuery was passed a preloaded query ' +
+            'that was created with a different environment than the one that is currently ' +
+            'in context. In the future, this will become a hard error.',
+        );
+        fetchObservable = fallbackFetchObservable;
+      } else {
+        // if (source == null)
+        // If the source observable does not exist, we need to
+        // fall back and re-execute and de-dupe the query (at render time).
+        fetchObservable = fallbackFetchObservable;
+      }
+
+      useLazyLoadQueryNodeParams = {
+        componentDisplayName: 'usePreloadedQuery()',
+        fetchKey,
+        fetchObservable,
+        fetchPolicy,
+        query: operation,
+        renderPolicy: options?.UNSTABLE_renderPolicy,
+      };
+    }
+  } else {
     useLazyLoadQueryNodeParams = {
       componentDisplayName: 'usePreloadedQuery()',
-      fetchObservable,
-      fetchKey,
-      fetchPolicy,
-      query: operation,
-      renderPolicy: options?.UNSTABLE_renderPolicy,
+      fragmentNode: gqlQuery.fragment,
     };
   }
 
   const data = useLazyLoadQueryNode<{
     variables: TVariables,
     response: TData,
-    rawResponse?: $NonMaybeType<TRawResponse>,
-    /* $FlowFixMe[incompatible-call] Natural Inference rollout. See
-     * https://fburl.com/gdoc/y8dn025u */
+    rawResponse?: NonNullable<TRawResponse>,
   }>(useLazyLoadQueryNodeParams);
 
   if (__DEV__) {
@@ -166,14 +199,15 @@ hook usePreloadedQuery<
     // $FlowFixMe[react-rule-hook]
     // $FlowFixMe[react-rule-hook-conditional]
     useDebugValue({
-      query: preloadedQuery.name,
-      variables: preloadedQuery.variables,
       data,
-      fetchKey,
-      fetchPolicy,
+      fetchKey: preloadedQuery?.fetchKey,
+      fetchPolicy: preloadedQuery?.fetchPolicy,
+      query: preloadedQuery?.name,
       renderPolicy: options?.UNSTABLE_renderPolicy,
+      variables: preloadedQuery?.variables,
     });
   }
+
   return data;
 }
 

package/relay-hooks/useQueryLoader.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {LoadQueryOptions, PreloadedQuery} from '../ReactRelayTypes';
+import {
+  DisposeFn,
+  GraphQLTaggedNode,
+  IEnvironment,
+  OperationType,
+  PreloadableConcreteRequest,
+  VariablesOf,
+} from 'relay-runtime';
+
+export type useQueryLoaderHookType<TQuery extends OperationType> = [
+    PreloadedQuery<TQuery> | null | undefined,
+    (variables: VariablesOf<TQuery>, options?: UseQueryLoaderLoadQueryOptions) => void,
+    DisposeFn,
+];
+
+export type UseQueryLoaderLoadQueryOptions =
+    & LoadQueryOptions
+    & Readonly<{
+        __environment?: IEnvironment | null | undefined;
+    }>;
+
+export function useQueryLoader<TQuery extends OperationType>(
+    preloadableRequest: GraphQLTaggedNode | PreloadableConcreteRequest<TQuery>,
+    initialQueryReference?: PreloadedQuery<TQuery> | null,
+): useQueryLoaderHookType<TQuery>;