react-relay 12.0.0 → 13.0.0

package/relay-hooks/QueryResource.js.flow

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
@@ -13,19 +13,7 @@
 
 'use strict';
 
-const LRUCache = require('./LRUCache');
-
-const invariant = require('invariant');
-const warning = require('warning');
-
-const {isPromise} = require('relay-runtime');
-
-const CACHE_CAPACITY = 1000;
-
-const DEFAULT_FETCH_POLICY = 'store-or-network';
-
-const DATA_RETENTION_TIMEOUT = 5 * 60 * 1000;
-
+import type {Cache} from './LRUCache';
 import type {
   Disposable,
   FetchPolicy,
@@ -40,7 +28,15 @@ import type {
   Snapshot,
   Subscription,
 } from 'relay-runtime';
-import type {Cache} from './LRUCache';
+
+const LRUCache = require('./LRUCache');
+const SuspenseResource = require('./SuspenseResource');
+const invariant = require('invariant');
+const {RelayFeatureFlags, isPromise} = require('relay-runtime');
+const warning = require('warning');
+
+const CACHE_CAPACITY = 1000;
+const DEFAULT_FETCH_POLICY = 'store-or-network';
 
 export type QueryResource = QueryResourceImpl;
 
@@ -63,7 +59,7 @@ type QueryResourceCacheEntry = {|
   permanentRetain(environment: IEnvironment): Disposable,
   releaseTemporaryRetain(): void,
 |};
-opaque type QueryResult: {
+export opaque type QueryResult: {
   fragmentNode: ReaderFragment,
   fragmentRef: mixed,
   ...
@@ -129,6 +125,106 @@ function createCacheEntry(
   value: Error | Promise<void> | QueryResult,
   networkSubscription: ?Subscription,
   onDispose: QueryResourceCacheEntry => void,
+): QueryResourceCacheEntry {
+  // There should be no behavior difference between createCacheEntry_new and
+  // createCacheEntry_old, and it doesn't directly relate to Client Edges.
+  // It was just a refactoring that was needed for Client Edges but that
+  // is behind the feature flag just in case there is any accidental breakage.
+  if (RelayFeatureFlags.REFACTOR_SUSPENSE_RESOURCE) {
+    return createCacheEntry_new(
+      cacheIdentifier,
+      operation,
+      operationAvailability,
+      value,
+      networkSubscription,
+      onDispose,
+    );
+  } else {
+    return createCacheEntry_old(
+      cacheIdentifier,
+      operation,
+      operationAvailability,
+      value,
+      networkSubscription,
+      onDispose,
+    );
+  }
+}
+
+function createCacheEntry_new(
+  cacheIdentifier: string,
+  operation: OperationDescriptor,
+  operationAvailability: ?OperationAvailability,
+  value: Error | Promise<void> | QueryResult,
+  networkSubscription: ?Subscription,
+  onDispose: QueryResourceCacheEntry => void,
+): QueryResourceCacheEntry {
+  const isLiveQuery = operationIsLiveQuery(operation);
+
+  let currentValue: Error | Promise<void> | QueryResult = value;
+  let currentNetworkSubscription: ?Subscription = networkSubscription;
+
+  const suspenseResource = new SuspenseResource(environment => {
+    const retention = environment.retain(operation);
+    return {
+      dispose: () => {
+        // Normally if this entry never commits, the request would've ended by the
+        // time this timeout expires and the temporary retain is released. However,
+        // we need to do this for live queries which remain open indefinitely.
+        if (isLiveQuery && currentNetworkSubscription != null) {
+          currentNetworkSubscription.unsubscribe();
+        }
+        retention.dispose();
+        onDispose(cacheEntry);
+      },
+    };
+  });
+
+  const cacheEntry = {
+    cacheIdentifier,
+    id: nextID++,
+    processedPayloadsCount: 0,
+    operationAvailability,
+    getValue() {
+      return currentValue;
+    },
+    setValue(val: QueryResult | Promise<void> | Error) {
+      currentValue = val;
+    },
+    getRetainCount() {
+      return suspenseResource.getRetainCount();
+    },
+    getNetworkSubscription() {
+      return currentNetworkSubscription;
+    },
+    setNetworkSubscription(subscription: ?Subscription) {
+      if (isLiveQuery && currentNetworkSubscription != null) {
+        currentNetworkSubscription.unsubscribe();
+      }
+      currentNetworkSubscription = subscription;
+    },
+    temporaryRetain(environment: IEnvironment): Disposable {
+      return suspenseResource.temporaryRetain(environment);
+    },
+    permanentRetain(environment: IEnvironment): Disposable {
+      return suspenseResource.permanentRetain(environment);
+    },
+    releaseTemporaryRetain() {
+      suspenseResource.releaseTemporaryRetain();
+    },
+  };
+
+  return cacheEntry;
+}
+
+const DATA_RETENTION_TIMEOUT = 5 * 60 * 1000;
+function createCacheEntry_old(
+  cacheIdentifier: string,
+  operation: OperationDescriptor,
+  operationAvailability: ?OperationAvailability,
+  value: Error | Promise<void> | QueryResult,
+  networkSubscription: ?Subscription,
+  onDispose: QueryResourceCacheEntry => void,
 ): QueryResourceCacheEntry {
   const isLiveQuery = operationIsLiveQuery(operation);
 
@@ -168,7 +264,7 @@ function createCacheEntry(
     getValue() {
       return currentValue;
     },
-    setValue(val) {
+    setValue(val: QueryResult | Promise<void> | Error) {
       currentValue = val;
     },
     getRetainCount() {
@@ -436,8 +532,14 @@ class QueryResourceImpl {
   }
 
   _clearCacheEntry = (cacheEntry: QueryResourceCacheEntry): void => {
-    if (cacheEntry.getRetainCount() <= 0) {
+    // The new code does this retainCount <= 0 check within SuspenseResource
+    // before calling _clearCacheEntry, whereas with the old code we do it here.
+    if (RelayFeatureFlags.REFACTOR_SUSPENSE_RESOURCE) {
       this._cache.delete(cacheEntry.cacheIdentifier);
+    } else {
+      if (cacheEntry.getRetainCount() <= 0) {
+        this._cache.delete(cacheEntry.cacheIdentifier);
+      }
     }
   };
 

package/relay-hooks/RelayEnvironmentProvider.js.flow

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
@@ -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) 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.
+ *
+ * @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

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
@@ -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

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
@@ -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__/__generated__/useFragmentFlowtest_user.graphql.js.flow

@@ -0,0 +1,59 @@
+/**
+ * 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.
+ *
+ * @generated SignedSource<<57e35620e0558adaa97ee6b06423e705>>
+ * @flow
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* eslint-disable */
+
+'use strict';
+
+/*::
+import type { Fragment, ReaderFragment } from 'relay-runtime';
+import type { FragmentType } from "relay-runtime";
+declare export opaque type useFragmentFlowtest_user$fragmentType: FragmentType;
+export type useFragmentFlowtest_user$ref = useFragmentFlowtest_user$fragmentType;
+export type useFragmentFlowtest_user$data = {|
+  +id: string,
+  +$fragmentType: useFragmentFlowtest_user$fragmentType,
+|};
+export type useFragmentFlowtest_user = useFragmentFlowtest_user$data;
+export type useFragmentFlowtest_user$key = {
+  +$data?: useFragmentFlowtest_user$data,
+  +$fragmentSpreads: useFragmentFlowtest_user$fragmentType,
+  ...
+};
+*/
+
+var node/*: ReaderFragment*/ = {
+  "argumentDefinitions": [],
+  "kind": "Fragment",
+  "metadata": null,
+  "name": "useFragmentFlowtest_user",
+  "selections": [
+    {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "id",
+      "storageKey": null
+    }
+  ],
+  "type": "User",
+  "abstractKey": null
+};
+
+if (__DEV__) {
+  (node/*: any*/).hash = "a0eb71a1bbfb0eb3a4c42fb5a69a7f81";
+}
+
+module.exports = ((node/*: any*/)/*: Fragment<
+  useFragmentFlowtest_user$fragmentType,
+  useFragmentFlowtest_user$data,
+>*/);

package/relay-hooks/__flowtests__/__generated__/useFragmentFlowtest_users.graphql.js.flow

@@ -0,0 +1,61 @@
+/**
+ * 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.
+ *
+ * @generated SignedSource<<e21003870360e15cc93c1cee7aa239ad>>
+ * @flow
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* eslint-disable */
+
+'use strict';
+
+/*::
+import type { Fragment, ReaderFragment } from 'relay-runtime';
+import type { FragmentType } from "relay-runtime";
+declare export opaque type useFragmentFlowtest_users$fragmentType: FragmentType;
+export type useFragmentFlowtest_users$ref = useFragmentFlowtest_users$fragmentType;
+export type useFragmentFlowtest_users$data = $ReadOnlyArray<{|
+  +id: string,
+  +$fragmentType: useFragmentFlowtest_users$fragmentType,
+|}>;
+export type useFragmentFlowtest_users = useFragmentFlowtest_users$data;
+export type useFragmentFlowtest_users$key = $ReadOnlyArray<{
+  +$data?: useFragmentFlowtest_users$data,
+  +$fragmentSpreads: useFragmentFlowtest_users$fragmentType,
+  ...
+}>;
+*/
+
+var node/*: ReaderFragment*/ = {
+  "argumentDefinitions": [],
+  "kind": "Fragment",
+  "metadata": {
+    "plural": true
+  },
+  "name": "useFragmentFlowtest_users",
+  "selections": [
+    {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "id",
+      "storageKey": null
+    }
+  ],
+  "type": "User",
+  "abstractKey": null
+};
+
+if (__DEV__) {
+  (node/*: any*/).hash = "8b9b9b23494aec63a7cb96eed58ebcbc";
+}
+
+module.exports = ((node/*: any*/)/*: Fragment<
+  useFragmentFlowtest_users$fragmentType,
+  useFragmentFlowtest_users$data,
+>*/);

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

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
@@ -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

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
@@ -11,52 +11,75 @@
 
 // flowlint ambiguous-object-type:error
 
-import useFragment from '../useFragment';
-import {
-  fragmentInput,
-  keyAnotherNonNullable,
-  keyAnotherNullable,
-  keyNonNullable,
-  keyNonNullablePlural,
-  keyNullable,
-  keyNullablePlural,
-  fragmentData,
-} from './utils';
 import type {
-  NonNullableData,
-  NonNullablePluralData,
-  NullableData,
-  NullablePluralData,
-} from './utils';
+  useFragmentFlowtest_user$data,
+  useFragmentFlowtest_user$key,
+} from './__generated__/useFragmentFlowtest_user.graphql';
+import typeof useFragmentFlowtest_user$fragment from './__generated__/useFragmentFlowtest_user.graphql';
+import type {
+  useFragmentFlowtest_users$data,
+  useFragmentFlowtest_users$key,
+} from './__generated__/useFragmentFlowtest_users.graphql';
+import typeof useFragmentFlowtest_users$fragment from './__generated__/useFragmentFlowtest_users.graphql';
+
+import useFragment from '../useFragment';
+import {graphql} from 'relay-runtime';
+
+declare var Any: $FlowFixMe;
+
+const userFragment: useFragmentFlowtest_user$fragment = graphql`
+  fragment useFragmentFlowtest_user on User {
+    id
+  }
+`;
+
+const usersFragment: useFragmentFlowtest_users$fragment = graphql`
+  fragment useFragmentFlowtest_users on User @relay(plural: true) {
+    id
+  }
+`;
 
 /* eslint-disable react-hooks/rules-of-hooks */
 
 // Nullability of returned data type is correct
-(useFragment(fragmentInput, keyNonNullable): NonNullableData);
-(useFragment(fragmentInput, keyNullable): NullableData);
-(useFragment(fragmentInput, keyNonNullablePlural): NonNullablePluralData);
-(useFragment(fragmentInput, keyNullablePlural): NullablePluralData);
+(useFragment(
+  userFragment,
+  (Any: useFragmentFlowtest_user$key),
+): useFragmentFlowtest_user$data);
+(useFragment(
+  userFragment,
+  (Any: ?useFragmentFlowtest_user$key),
+): ?useFragmentFlowtest_user$data);
+(useFragment(
+  usersFragment,
+  (Any: useFragmentFlowtest_users$key),
+): useFragmentFlowtest_users$data);
+(useFragment(
+  usersFragment,
+  (Any: ?useFragmentFlowtest_users$key),
+): ?useFragmentFlowtest_users$data);
 
 // $FlowExpectedError: can't cast nullable to non-nullable
-(useFragment(fragmentInput, keyNullable): NonNullableData);
+(useFragment(
+  userFragment,
+  (Any: ?useFragmentFlowtest_user$key),
+): useFragmentFlowtest_user$data);
 // $FlowExpectedError: can't cast nullable plural to non-nullable plural
-(useFragment(fragmentInput, keyNullablePlural): NonNullablePluralData);
-
-// $FlowExpectedError: actual type of returned data is correct
-(useFragment(fragmentInput, keyAnotherNonNullable): NonNullableData);
-// $FlowExpectedError
-(useFragment(fragmentInput, keyAnotherNullable): NullableData);
+(useFragment(
+  usersFragment,
+  (Any: ?useFragmentFlowtest_users$key),
+): useFragmentFlowtest_users$data);
 
 // $FlowExpectedError: Key should be one of the generated types
-(useFragment(fragmentInput, 'INVALID_KEY'): NullableData);
+useFragment(userFragment, 'INVALID_KEY');
 
 // $FlowExpectedError: Key should not be a user provided object
-useFragment(fragmentInput, {a: 123});
+useFragment(userFragment, {a: 123});
 
 // $FlowExpectedError: Key should not be an empty object
-useFragment(fragmentInput, {});
+useFragment(userFragment, {});
 
 // $FlowExpectedError: Key should be the `<name>$key` type from generated flow
-useFragment(fragmentInput, fragmentData);
+useFragment(userFragment, (Any: useFragmentFlowtest_user$data));
 
 /* eslint-enable react-hooks/rules-of-hooks */