react-relay 12.0.0 → 13.0.0-rc.0

package/relay-hooks/RelayEnvironmentProvider.js.flow

@@ -13,14 +13,14 @@
 
 'use strict';
 
-const React = require('react');
-const ReactRelayContext = require('react-relay/ReactRelayContext');
-
+import type {IEnvironment} from 'relay-runtime';
 import type {
-  IActorEnvironment,
   ActorIdentifier,
+  IActorEnvironment,
 } from 'relay-runtime/multi-actor-environment';
-import type {IEnvironment} from 'relay-runtime';
+
+const React = require('react');
+const ReactRelayContext = require('react-relay/ReactRelayContext');
 
 const {useMemo} = React;
 
@@ -34,10 +34,10 @@ type Props = $ReadOnly<{|
 
 function RelayEnvironmentProvider(props: Props): React.Node {
   const {children, environment, getEnvironmentForActor} = props;
-  const context = useMemo(() => ({environment, getEnvironmentForActor}), [
-    environment,
-    getEnvironmentForActor,
-  ]);
+  const context = useMemo(
+    () => ({environment, getEnvironmentForActor}),
+    [environment, getEnvironmentForActor],
+  );
   return (
     <ReactRelayContext.Provider value={context}>
       {children}

package/relay-hooks/SuspenseResource.js.flow

@@ -0,0 +1,115 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @emails oncall+relay
+ * @format
+ */
+
+// flowlint ambiguous-object-type:error
+
+'use strict';
+
+import type {Disposable, IEnvironment} from 'relay-runtime';
+
+const invariant = require('invariant');
+
+const TEMPORARY_RETAIN_DURATION_MS = 5 * 60 * 1000;
+
+/**
+ * Allows you to retain a resource as part of a component lifecycle accounting
+ * for Suspense. You temporarily retain the resource during render, then
+ * permanently retain it during commit and release it during unmount.
+ */
+class SuspenseResource {
+  _retainCount = 0;
+  _retainDisposable: ?Disposable = null;
+  _releaseTemporaryRetain: ?() => void = null;
+  _retain: IEnvironment => Disposable;
+
+  constructor(retain: (environment: IEnvironment) => Disposable) {
+    this._retain = (environment: IEnvironment): Disposable => {
+      this._retainCount++;
+      if (this._retainCount === 1) {
+        this._retainDisposable = retain(environment);
+      }
+      return {
+        dispose: () => {
+          this._retainCount = Math.max(0, this._retainCount - 1);
+          if (this._retainCount === 0) {
+            invariant(
+              this._retainDisposable != null,
+              'Relay: Expected disposable to release query to be defined.' +
+                "If you're seeing this, this is likely a bug in Relay.",
+            );
+            this._retainDisposable.dispose();
+            this._retainDisposable = null;
+          }
+        },
+      };
+    };
+  }
+
+  temporaryRetain(environment: IEnvironment): Disposable {
+    // If we're executing in a server environment, there's no need
+    // to create temporary retains, since the component will never commit.
+    if (environment.isServer()) {
+      return {dispose: () => {}};
+    }
+
+    // temporaryRetain is called during the render phase. However,
+    // given that we can't tell if this render will eventually commit or not,
+    // we create a timer to autodispose of this retain in case the associated
+    // component never commits.
+    // If the component /does/ commit, permanentRetain will clear this timeout
+    // and permanently retain the data.
+    const retention = this._retain(environment);
+    let releaseQueryTimeout = null;
+    const releaseTemporaryRetain = () => {
+      clearTimeout(releaseQueryTimeout);
+      releaseQueryTimeout = null;
+      this._releaseTemporaryRetain = null;
+      retention.dispose();
+    };
+    releaseQueryTimeout = setTimeout(
+      releaseTemporaryRetain,
+      TEMPORARY_RETAIN_DURATION_MS,
+    );
+
+    // NOTE: Since temporaryRetain can be called multiple times, we release
+    // the previous temporary retain after we re-establish a new one, since
+    // we only ever need a single temporary retain until the permanent retain is
+    // established.
+    // temporaryRetain may be called multiple times by React during the render
+    // phase, as well as multiple times by other query components that are
+    // rendering the same query/variables.
+    this._releaseTemporaryRetain?.();
+    this._releaseTemporaryRetain = releaseTemporaryRetain;
+
+    return {
+      dispose: () => {
+        this._releaseTemporaryRetain?.();
+      },
+    };
+  }
+
+  permanentRetain(environment: IEnvironment): Disposable {
+    const disposable = this._retain(environment);
+    this.releaseTemporaryRetain();
+    return disposable;
+  }
+
+  releaseTemporaryRetain(): void {
+    this._releaseTemporaryRetain?.();
+    this._releaseTemporaryRetain = null;
+  }
+
+  getRetainCount(): number {
+    return this._retainCount;
+  }
+}
+
+module.exports = SuspenseResource;

package/relay-hooks/__flowtests__/EntryPointTypes/EntryPointElementConfig-flowtest.js.flow

@@ -13,8 +13,8 @@
 
 import type {
   EntryPoint,
-  EntryPointProps,
   EntryPointElementConfig,
+  EntryPointProps,
 } from '../../EntryPointTypes.flow';
 
 type MyComponentOtherProps = $ReadOnly<{|
@@ -30,10 +30,11 @@ type PreloadParams = $ReadOnly<{||}>;
 type MyComponentEntryPointType = EntryPoint<PreloadParams, typeof MyComponent>;
 
 // This gets the "other props" of the component through the entrypoint's typing
-type MyComponentEntryPointProps = EntryPointElementConfig<MyComponentEntryPointType>;
+type MyComponentEntryPointProps =
+  EntryPointElementConfig<MyComponentEntryPointType>;
 
 // This gets the "other props" directly from the component's prop typings
-type OtherProps = $PropertyType<MyComponentProps, 'props'>;
+type OtherProps = MyComponentProps['props'];
 
 // We want to make sure that `OtherProps` and `MyComponentEntryPointProps` are exactly the same.
 opaque type __SUBTYPE_CHECK_1__: OtherProps = MyComponentEntryPointProps;

package/relay-hooks/__flowtests__/EntryPointTypes/NestedEntrypoints-flowtest.js.flow

@@ -11,12 +11,12 @@
 
 'use strict';
 
+import type {JSResourceReference} from 'JSResourceReference';
 import type {
   EntryPoint,
   EntryPointProps,
   PreloadedEntryPoint,
 } from '../../EntryPointTypes.flow';
-import type {JSResourceReference} from 'JSResourceReference';
 
 declare function mockJSResource<TModule>(
   module: TModule,

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

@@ -11,16 +11,7 @@
 
 // flowlint ambiguous-object-type:error
 
-import useBlockingPaginationFragment from '../useBlockingPaginationFragment';
 import type {LoadMoreFn} from '../useLoadMoreFunction';
-import {
-  fragmentData,
-  fragmentInput,
-  keyAnotherNonNullable,
-  keyAnotherNullable,
-  keyNonNullable,
-  keyNullable,
-} from './utils';
 import type {
   FetchFn,
   NonNullableData,
@@ -31,6 +22,16 @@ import type {
 } from './utils';
 import type {IEnvironment, OperationType} from 'relay-runtime';
 
+import useBlockingPaginationFragment from '../useBlockingPaginationFragment';
+import {
+  fragmentData,
+  fragmentInput,
+  keyAnotherNonNullable,
+  keyAnotherNullable,
+  keyNonNullable,
+  keyNullable,
+} from './utils';
+
 type ExpectedReturnType<
   TQuery: OperationType,
   TQueryVariables,

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

@@ -11,8 +11,16 @@
 
 // flowlint ambiguous-object-type:error
 
+import type {
+  NonNullableData,
+  NonNullablePluralData,
+  NullableData,
+  NullablePluralData,
+} from './utils';
+
 import useFragment from '../useFragment';
 import {
+  fragmentData,
   fragmentInput,
   keyAnotherNonNullable,
   keyAnotherNullable,
@@ -20,13 +28,6 @@ import {
   keyNonNullablePlural,
   keyNullable,
   keyNullablePlural,
-  fragmentData,
-} from './utils';
-import type {
-  NonNullableData,
-  NonNullablePluralData,
-  NullableData,
-  NullablePluralData,
 } from './utils';
 
 /* eslint-disable react-hooks/rules-of-hooks */

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

@@ -12,15 +12,6 @@
 // flowlint ambiguous-object-type:error
 
 import type {LoadMoreFn} from '../useLoadMoreFunction';
-import usePaginationFragment from '../usePaginationFragment';
-import {
-  fragmentInput,
-  fragmentData,
-  keyAnotherNonNullable,
-  keyAnotherNullable,
-  keyNonNullable,
-  keyNullable,
-} from './utils';
 import type {
   FetchFn,
   NonNullableData,
@@ -31,6 +22,16 @@ import type {
 } from './utils';
 import type {IEnvironment, OperationType} from 'relay-runtime';
 
+import usePaginationFragment from '../usePaginationFragment';
+import {
+  fragmentData,
+  fragmentInput,
+  keyAnotherNonNullable,
+  keyAnotherNullable,
+  keyNonNullable,
+  keyNullable,
+} from './utils';
+
 type ExpectedReturnType<
   TQuery: OperationType,
   TQueryVariables,

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

@@ -11,15 +11,6 @@
 
 // flowlint ambiguous-object-type:error
 
-import useRefetchableFragment from '../useRefetchableFragment';
-import {
-  fragmentInput,
-  keyAnotherNonNullable,
-  keyAnotherNullable,
-  keyNonNullable,
-  keyNullable,
-  fragmentData,
-} from './utils';
 import type {
   FetchFn,
   NonNullableData,
@@ -30,6 +21,16 @@ import type {
 } from './utils';
 import type {IEnvironment} from 'relay-runtime';
 
+import useRefetchableFragment from '../useRefetchableFragment';
+import {
+  fragmentData,
+  fragmentInput,
+  keyAnotherNonNullable,
+  keyAnotherNullable,
+  keyNonNullable,
+  keyNullable,
+} from './utils';
+
 /* eslint-disable react-hooks/rules-of-hooks */
 
 // Nullability of returned data type is correct

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

@@ -13,11 +13,7 @@
 
 'use strict';
 
-import type {
-  Disposable,
-  FragmentReference,
-  GraphQLTaggedNode,
-} from 'relay-runtime';
+import type {Disposable, FragmentType, GraphQLTaggedNode} from 'relay-runtime';
 
 declare export var fragmentInput: GraphQLTaggedNode;
 
@@ -38,42 +34,42 @@ export type AnotherNonNullableData = {|
 
 declare export var keyNonNullable: {
   +$data?: NonNullableData,
-  +$fragmentRefs: FragmentReference,
+  +$fragmentSpreads: FragmentType,
   ...
 };
 
 declare export var keyNonNullablePlural: $ReadOnlyArray<{
   +$data?: NonNullablePluralData,
-  +$fragmentRefs: FragmentReference,
+  +$fragmentSpreads: FragmentType,
   ...
 }>;
 
 declare export var keyNullablePlural: ?$ReadOnlyArray<{
   +$data?: NonNullablePluralData,
-  +$fragmentRefs: FragmentReference,
+  +$fragmentSpreads: FragmentType,
   ...
 }>;
 
 declare export var keyNullable: ?{
   +$data?: NonNullableData,
-  +$fragmentRefs: FragmentReference,
+  +$fragmentSpreads: FragmentType,
   ...
 };
 
 declare export var keyAnotherNonNullable: {
   +$data: AnotherNonNullableData,
-  +$fragmentRefs: FragmentReference,
+  +$fragmentSpreads: FragmentType,
   ...
 };
 
 declare export var keyAnotherNullable: ?{
   +$data: AnotherNonNullableData,
-  +$fragmentRefs: FragmentReference,
+  +$fragmentSpreads: FragmentType,
   ...
 };
 
 declare export var fragmentData: {
-  +$refType: FragmentReference,
+  +$fragmentType: FragmentType,
   ...
 };
 

package/relay-hooks/loadEntryPoint.js.flow

@@ -11,8 +11,6 @@
 
 'use strict';
 
-const {loadQuery} = require('./loadQuery');
-
 import type {
   EntryPoint,
   EntryPointComponent,
@@ -21,6 +19,8 @@ import type {
   PreloadedEntryPoint,
 } from './EntryPointTypes.flow';
 
+const {loadQuery} = require('./loadQuery');
+
 function loadEntryPoint<
   TEntryPointParams: {...},
   TPreloadedQueries: {...},
@@ -51,12 +51,8 @@ function loadEntryPoint<
   if (queries != null) {
     const queriesPropNames = Object.keys(queries);
     queriesPropNames.forEach(queryPropName => {
-      const {
-        environmentProviderOptions,
-        options,
-        parameters,
-        variables,
-      } = queries[queryPropName];
+      const {environmentProviderOptions, options, parameters, variables} =
+        queries[queryPropName];
 
       const environment = environmentProvider.getEnvironment(
         environmentProviderOptions,
@@ -83,10 +79,8 @@ function loadEntryPoint<
       if (entryPointDescription == null) {
         return;
       }
-      const {
-        entryPoint: nestedEntryPoint,
-        entryPointParams: nestedParams,
-      } = entryPointDescription;
+      const {entryPoint: nestedEntryPoint, entryPointParams: nestedParams} =
+        entryPointDescription;
       preloadedEntryPoints[entryPointPropName] = loadEntryPoint(
         environmentProvider,
         nestedEntryPoint,

package/relay-hooks/loadQuery.js.flow

@@ -11,37 +11,35 @@
 
 'use strict';
 
-const React = require('react');
-
-const invariant = require('invariant');
-const warning = require('warning');
-
-const {
-  PreloadableQueryRegistry,
-  ReplaySubject,
-  createOperationDescriptor,
-  getRequest,
-  getRequestIdentifier,
-  Observable,
-  RelayFeatureFlags,
-  __internal: {fetchQueryDeduped},
-} = require('relay-runtime');
-
 import type {
+  LoadQueryOptions,
   PreloadableConcreteRequest,
   PreloadedQueryInner,
-  LoadQueryOptions,
 } from './EntryPointTypes.flow';
 import type {
+  GraphQLResponse,
+  GraphQLTaggedNode,
   IEnvironment,
   OperationDescriptor,
   OperationType,
-  GraphQLTaggedNode,
-  GraphQLResponse,
   RequestIdentifier,
   RequestParameters,
 } from 'relay-runtime';
 
+const invariant = require('invariant');
+const React = require('react');
+const {
+  Observable,
+  PreloadableQueryRegistry,
+  RelayFeatureFlags,
+  ReplaySubject,
+  __internal: {fetchQueryDeduped},
+  createOperationDescriptor,
+  getRequest,
+  getRequestIdentifier,
+} = require('relay-runtime');
+const warning = require('warning');
+
 let RenderDispatcher = null;
 let fetchKey = 100001;
 
@@ -59,7 +57,7 @@ function useTrackLoadQueryInRender() {
 function loadQuery<TQuery: OperationType, TEnvironmentProviderOptions>(
   environment: IEnvironment,
   preloadableRequest: GraphQLTaggedNode | PreloadableConcreteRequest<TQuery>,
-  variables: $ElementType<TQuery, 'variables'>,
+  variables: TQuery['variables'],
   options?: ?LoadQueryOptions,
   environmentProviderOptions?: ?TEnvironmentProviderOptions,
 ): PreloadedQueryInner<TQuery, TEnvironmentProviderOptions> {
@@ -274,7 +272,8 @@ function loadQuery<TQuery: OperationType, TEnvironmentProviderOptions>(
   let cancelOnLoadCallback;
   let queryId;
   if (preloadableRequest.kind === 'PreloadableConcreteRequest') {
-    const preloadableConcreteRequest: PreloadableConcreteRequest<TQuery> = (preloadableRequest: $FlowFixMe);
+    const preloadableConcreteRequest: PreloadableConcreteRequest<TQuery> =
+      (preloadableRequest: $FlowFixMe);
     ({params} = preloadableConcreteRequest);
 
     ({id: queryId} = params);
@@ -300,7 +299,6 @@ function loadQuery<TQuery: OperationType, TEnvironmentProviderOptions>(
         fetchPolicy === 'store-only' ? null : makeNetworkRequest(params);
       // $FlowFixMe[method-unbinding] added when improving typing for this parameters
       ({dispose: cancelOnLoadCallback} = PreloadableQueryRegistry.onLoad(
-        // $FlowFixMe[incompatible-call]
         queryId,
         preloadedModule => {
           cancelOnLoadCallback();
@@ -319,7 +317,8 @@ function loadQuery<TQuery: OperationType, TEnvironmentProviderOptions>(
       ));
     }
   } else {
-    const graphQlTaggedNode: GraphQLTaggedNode = (preloadableRequest: $FlowFixMe);
+    const graphQlTaggedNode: GraphQLTaggedNode =
+      (preloadableRequest: $FlowFixMe);
     const request = getRequest(graphQlTaggedNode);
     params = request.params;
     queryId = params.cacheID != null ? params.cacheID : params.id;

package/relay-hooks/preloadQuery_DEPRECATED.js.flow

@@ -13,15 +13,6 @@
 
 'use strict';
 
-const {
-  createOperationDescriptor,
-  getRequest,
-  getRequestIdentifier,
-  Observable,
-  PreloadableQueryRegistry,
-  ReplaySubject,
-} = require('relay-runtime');
-
 import type {
   PreloadableConcreteRequest,
   PreloadedQueryInner_DEPRECATED,
@@ -39,6 +30,16 @@ import type {
   Subscription,
 } from 'relay-runtime';
 
+const {
+  Observable,
+  PreloadableQueryRegistry,
+  RelayFeatureFlags,
+  ReplaySubject,
+  createOperationDescriptor,
+  getRequest,
+  getRequestIdentifier,
+} = require('relay-runtime');
+
 // Expire results by this delay after they resolve.
 const DEFAULT_PREFETCH_TIMEOUT = 30 * 1000; // 30 seconds
 
@@ -111,7 +112,23 @@ function preloadQuery<TQuery: OperationType, TEnvironmentProviderOptions>(
           }
           return () => {
             subscription?.unsubscribe();
-            cleanup(pendingQueries, queryEntry);
+            if (environment.isServer()) {
+              return;
+            }
+            if (
+              RelayFeatureFlags.DELAY_CLEANUP_OF_PENDING_PRELOAD_QUERIES ===
+              true
+            ) {
+              setTimeout(() => {
+                // Clear the cache entry after the default timeout
+                // null-check for Flow
+                if (queryEntry != null) {
+                  cleanup(pendingQueries, queryEntry);
+                }
+              }, DEFAULT_PREFETCH_TIMEOUT);
+            } else {
+              cleanup(pendingQueries, queryEntry);
+            }
           };
         })
       : null;
@@ -140,7 +157,8 @@ function preloadQueryDeduped<TQuery: OperationType>(
   let params;
   let query: ?ConcreteRequest;
   if (preloadableRequest.kind === 'PreloadableConcreteRequest') {
-    const preloadableConcreteRequest: PreloadableConcreteRequest<TQuery> = (preloadableRequest: $FlowFixMe);
+    const preloadableConcreteRequest: PreloadableConcreteRequest<TQuery> =
+      (preloadableRequest: $FlowFixMe);
     params = preloadableConcreteRequest.params;
     query = params.id != null ? PreloadableQueryRegistry.get(params.id) : null;
   } else {
@@ -238,9 +256,7 @@ function preloadQueryDeduped<TQuery: OperationType>(
   } else {
     nextQueryEntry = prevQueryEntry;
   }
-  // $FlowFixMe[incompatible-call]
   pendingQueries.set(cacheKey, nextQueryEntry);
-  // $FlowFixMe[incompatible-return]
   return nextQueryEntry;
 }
 

package/relay-hooks/prepareEntryPoint_DEPRECATED.js.flow

@@ -13,8 +13,6 @@
 
 'use strict';
 
-const preloadQuery = require('./preloadQuery_DEPRECATED');
-
 import type {
   EntryPoint,
   EntryPointComponent,
@@ -22,6 +20,8 @@ import type {
   IEnvironmentProvider,
 } from './EntryPointTypes.flow';
 
+const preloadQuery = require('./preloadQuery_DEPRECATED');
+
 function prepareEntryPoint<
   TEntryPointParams: {...},
   TPreloadedQueries: {...},
@@ -51,12 +51,8 @@ function prepareEntryPoint<
   if (queries != null) {
     const queriesPropNames = Object.keys(queries);
     queriesPropNames.forEach(queryPropName => {
-      const {
-        environmentProviderOptions,
-        options,
-        parameters,
-        variables,
-      } = queries[queryPropName];
+      const {environmentProviderOptions, options, parameters, variables} =
+        queries[queryPropName];
 
       const environment = environmentProvider.getEnvironment(
         environmentProviderOptions,
@@ -79,10 +75,8 @@ function prepareEntryPoint<
       if (entryPointDescription == null) {
         return;
       }
-      const {
-        entryPoint: nestedEntryPoint,
-        entryPointParams: nestedParams,
-      } = entryPointDescription;
+      const {entryPoint: nestedEntryPoint, entryPointParams: nestedParams} =
+        entryPointDescription;
       preloadedEntryPoints[entryPointPropName] = prepareEntryPoint(
         environmentProvider,
         nestedEntryPoint,

package/relay-hooks/useBlockingPaginationFragment.js.flow

@@ -13,11 +13,20 @@
 
 'use strict';
 
-const invariant = require('invariant');
+import type {LoadMoreFn, UseLoadMoreFunctionArgs} from './useLoadMoreFunction';
+import type {RefetchFnDynamic} from './useRefetchableFragmentNode';
+import type {
+  FragmentType,
+  GraphQLResponse,
+  GraphQLTaggedNode,
+  Observer,
+  OperationType,
+} from 'relay-runtime';
+
 const useLoadMoreFunction = require('./useLoadMoreFunction');
 const useRefetchableFragmentNode = require('./useRefetchableFragmentNode');
 const useStaticFragmentNodeWarning = require('./useStaticFragmentNodeWarning');
-
+const invariant = require('invariant');
 const {useCallback, useEffect, useRef, useState} = require('react');
 const {
   getFragment,
@@ -25,16 +34,6 @@ const {
   getPaginationMetadata,
 } = require('relay-runtime');
 
-import type {LoadMoreFn, UseLoadMoreFunctionArgs} from './useLoadMoreFunction';
-import type {RefetchFnDynamic} from './useRefetchableFragmentNode';
-import type {
-  FragmentReference,
-  GraphQLResponse,
-  GraphQLTaggedNode,
-  Observer,
-  OperationType,
-} from 'relay-runtime';
-
 export type ReturnType<TQuery: OperationType, TKey, TFragmentData> = {|
   data: TFragmentData,
   loadNext: LoadMoreFn<TQuery>,
@@ -46,7 +45,7 @@ export type ReturnType<TQuery: OperationType, TKey, TFragmentData> = {|
 
 function useBlockingPaginationFragment<
   TQuery: OperationType,
-  TKey: ?{+$data?: mixed, +$fragmentRefs: FragmentReference, ...},
+  TKey: ?{+$data?: mixed, +$fragmentSpreads: FragmentType, ...},
 >(
   fragmentInput: GraphQLTaggedNode,
   parentFragmentRef: TKey,