react-relay 13.2.0 → 14.0.0

package/lib/relay-hooks/react-cache/useFragmentInternal_REACT_CACHE.js

@@ -41,6 +41,8 @@ var _require2 = require('relay-runtime'),
     handlePotentialSnapshotErrors = _require2.handlePotentialSnapshotErrors,
     recycleNodesInto = _require2.recycleNodesInto;
 
+var warning = require("fbjs/lib/warning");
+
 function isMissingData(state) {
   if (state.kind === 'bailout') {
     return false;
@@ -119,16 +121,22 @@ function handlePotentialSnapshotErrorsForState(environment, state) {
     }
   }
 }
+/**
+ * Check for updates to the store that occurred concurrently with rendering the given `state` value,
+ * returning a new (updated) state if there were updates or null if there were no changes.
+ */
 
-function handleMissedUpdates(environment, state, setState) {
+
+function handleMissedUpdates(environment, state) {
   if (state.kind === 'bailout') {
-    return;
-  }
+    return null;
+  } // FIXME this is invalid if we've just switched environments.
+
 
   var currentEpoch = environment.getStore().getEpoch();
 
   if (currentEpoch === state.epoch) {
-    return;
+    return null;
   } // The store has updated since we rendered (without us being subscribed yet),
   // so check for any updates to the data we're rendering:
 
@@ -136,16 +144,24 @@ function handleMissedUpdates(environment, state, setState) {
   if (state.kind === 'singular') {
     var currentSnapshot = environment.lookup(state.snapshot.selector);
     var updatedData = recycleNodesInto(state.snapshot.data, currentSnapshot.data);
-
-    if (updatedData !== state.snapshot.data) {
-      setState({
-        kind: 'singular',
-        snapshot: currentSnapshot,
-        epoch: currentEpoch
-      });
-    }
+    var updatedCurrentSnapshot = {
+      data: updatedData,
+      isMissingData: currentSnapshot.isMissingData,
+      missingClientEdges: currentSnapshot.missingClientEdges,
+      missingLiveResolverFields: currentSnapshot.missingLiveResolverFields,
+      seenRecords: currentSnapshot.seenRecords,
+      selector: currentSnapshot.selector,
+      missingRequiredFields: currentSnapshot.missingRequiredFields,
+      relayResolverErrors: currentSnapshot.relayResolverErrors
+    };
+    return [updatedData !== state.snapshot.data, {
+      kind: 'singular',
+      snapshot: updatedCurrentSnapshot,
+      epoch: currentEpoch
+    }];
   } else {
-    var updates = null;
+    var didMissUpdates = false;
+    var currentSnapshots = [];
 
     for (var index = 0; index < state.snapshots.length; index++) {
       var snapshot = state.snapshots[index];
@@ -154,34 +170,30 @@ function handleMissedUpdates(environment, state, setState) {
 
       var _updatedData = recycleNodesInto(snapshot.data, _currentSnapshot.data);
 
+      var _updatedCurrentSnapshot = {
+        data: _updatedData,
+        isMissingData: _currentSnapshot.isMissingData,
+        missingClientEdges: _currentSnapshot.missingClientEdges,
+        missingLiveResolverFields: _currentSnapshot.missingLiveResolverFields,
+        seenRecords: _currentSnapshot.seenRecords,
+        selector: _currentSnapshot.selector,
+        missingRequiredFields: _currentSnapshot.missingRequiredFields,
+        relayResolverErrors: _currentSnapshot.relayResolverErrors
+      };
+
       if (_updatedData !== snapshot.data) {
-        updates = updates === null ? new Array(state.snapshots.length) : updates;
-        updates[index] = snapshot;
+        didMissUpdates = true;
       }
-    }
-
-    if (updates !== null) {
-      var theUpdates = updates; // preserve flow refinement.
-
-      setState(function (existing) {
-        !(existing.kind === 'plural') ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot go from singular to plural or from bailout to plural.') : invariant(false) : void 0;
-        var updated = (0, _toConsumableArray2["default"])(existing.snapshots);
 
-        for (var _index = 0; _index < theUpdates.length; _index++) {
-          var updatedSnapshot = theUpdates[_index];
-
-          if (updatedSnapshot) {
-            updated[_index] = updatedSnapshot;
-          }
-        }
-
-        return {
-          kind: 'plural',
-          snapshots: updated,
-          epoch: currentEpoch
-        };
-      });
+      currentSnapshots.push(_updatedCurrentSnapshot);
     }
+
+    !(currentSnapshots.length === state.snapshots.length) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Expected same number of snapshots') : invariant(false) : void 0;
+    return [didMissUpdates, {
+      kind: 'plural',
+      snapshots: currentSnapshots,
+      epoch: currentEpoch
+    }];
   }
 }
 
@@ -196,7 +208,13 @@ function handleMissingClientEdge(environment, parentFragmentNode, parentFragment
   // according to the component mount/suspense cycle; getQueryResultOrFetchQuery
   // already handles this by itself.
 
-  getQueryResultOrFetchQuery(environment, queryOperationDescriptor, queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.fetchPolicy);
+  var _getQueryResultOrFetc = getQueryResultOrFetchQuery(environment, queryOperationDescriptor, {
+    fetchPolicy: queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.fetchPolicy
+  }),
+      _ = _getQueryResultOrFetc[0],
+      effect = _getQueryResultOrFetc[1];
+
+  return effect;
 }
 
 function subscribeToSnapshot(environment, state, setState) {
@@ -204,10 +222,12 @@ function subscribeToSnapshot(environment, state, setState) {
     return function () {};
   } else if (state.kind === 'singular') {
     var disposable = environment.subscribe(state.snapshot, function (latestSnapshot) {
-      setState({
-        kind: 'singular',
-        snapshot: latestSnapshot,
-        epoch: environment.getStore().getEpoch()
+      setState(function (_) {
+        return {
+          kind: 'singular',
+          snapshot: latestSnapshot,
+          epoch: environment.getStore().getEpoch()
+        };
       });
     });
     return function () {
@@ -246,7 +266,7 @@ function subscribeToSnapshot(environment, state, setState) {
   }
 }
 
-function getFragmentState(environment, fragmentSelector) {
+function getFragmentState(environment, fragmentSelector, isPlural) {
   if (fragmentSelector == null) {
     return {
       kind: 'bailout'
@@ -270,66 +290,148 @@ function getFragmentState(environment, fragmentSelector) {
 
 
 function useFragmentInternal_REACT_CACHE(fragmentNode, fragmentRef, hookDisplayName, queryOptions, fragmentKey) {
-  var _fragmentNode$metadat;
+  var _fragmentNode$metadat, _fragmentNode$metadat2;
 
-  var fragmentSelector = getSelector(fragmentNode, fragmentRef);
+  var fragmentSelector = useMemo(function () {
+    return getSelector(fragmentNode, fragmentRef);
+  }, [fragmentNode, fragmentRef]);
+  var isPlural = (fragmentNode === null || fragmentNode === void 0 ? void 0 : (_fragmentNode$metadat = fragmentNode.metadata) === null || _fragmentNode$metadat === void 0 ? void 0 : _fragmentNode$metadat.plural) === true;
 
-  if ((fragmentNode === null || fragmentNode === void 0 ? void 0 : (_fragmentNode$metadat = fragmentNode.metadata) === null || _fragmentNode$metadat === void 0 ? void 0 : _fragmentNode$metadat.plural) === true) {
-    !Array.isArray(fragmentRef) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Relay: Expected fragment pointer%s for fragment `%s` to be ' + 'an array, instead got `%s`. Remove `@relay(plural: true)` ' + 'from fragment `%s` to allow the prop to be an object.', fragmentKey != null ? " for key `".concat(fragmentKey, "`") : '', fragmentNode.name, typeof fragmentRef, fragmentNode.name) : invariant(false) : void 0;
+  if (isPlural) {
+    !(fragmentRef == null || Array.isArray(fragmentRef)) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Relay: Expected fragment pointer%s for fragment `%s` to be ' + 'an array, instead got `%s`. Remove `@relay(plural: true)` ' + 'from fragment `%s` to allow the prop to be an object.', fragmentKey != null ? " for key `".concat(fragmentKey, "`") : '', fragmentNode.name, typeof fragmentRef, fragmentNode.name) : invariant(false) : void 0;
   } else {
     !!Array.isArray(fragmentRef) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Relay: Expected fragment pointer%s for fragment `%s` not to be ' + 'an array, instead got `%s`. Add `@relay(plural: true)` ' + 'to fragment `%s` to allow the prop to be an array.', fragmentKey != null ? " for key `".concat(fragmentKey, "`") : '', fragmentNode.name, typeof fragmentRef, fragmentNode.name) : invariant(false) : void 0;
   }
 
-  !(fragmentRef == null || fragmentSelector != null) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Relay: Expected to receive an object where `...%s` was spread, ' + 'but the fragment reference was not found`. This is most ' + 'likely the result of:\n' + "- Forgetting to spread `%s` in `%s`'s parent's fragment.\n" + '- Conditionally fetching `%s` but unconditionally passing %s prop ' + 'to `%s`. If the parent fragment only fetches the fragment conditionally ' + '- with e.g. `@include`, `@skip`, or inside a `... on SomeType { }` ' + 'spread  - then the fragment reference will not exist. ' + 'In this case, pass `null` if the conditions for evaluating the ' + 'fragment are not met (e.g. if the `@include(if)` value is false.)', fragmentNode.name, fragmentNode.name, hookDisplayName, fragmentNode.name, fragmentKey == null ? 'a fragment reference' : "the `".concat(fragmentKey, "`"), hookDisplayName) : invariant(false) : void 0;
+  !(fragmentRef == null || isPlural && Array.isArray(fragmentRef) && fragmentRef.length === 0 || fragmentSelector != null) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Relay: Expected to receive an object where `...%s` was spread, ' + 'but the fragment reference was not found`. This is most ' + 'likely the result of:\n' + "- Forgetting to spread `%s` in `%s`'s parent's fragment.\n" + '- Conditionally fetching `%s` but unconditionally passing %s prop ' + 'to `%s`. If the parent fragment only fetches the fragment conditionally ' + '- with e.g. `@include`, `@skip`, or inside a `... on SomeType { }` ' + 'spread  - then the fragment reference will not exist. ' + 'In this case, pass `null` if the conditions for evaluating the ' + 'fragment are not met (e.g. if the `@include(if)` value is false.)', fragmentNode.name, fragmentNode.name, hookDisplayName, fragmentNode.name, fragmentKey == null ? 'a fragment reference' : "the `".concat(fragmentKey, "`"), hookDisplayName) : invariant(false) : void 0;
   var environment = useRelayEnvironment();
 
   var _useState = useState(function () {
-    return getFragmentState(environment, fragmentSelector);
+    return getFragmentState(environment, fragmentSelector, isPlural);
   }),
       rawState = _useState[0],
-      setState = _useState[1];
+      setState = _useState[1]; // On second look this separate rawState may not be needed at all, it can just be
+  // put into getFragmentState. Exception: can we properly handle the case where the
+  // fragmentRef goes from non-null to null?
+
+
+  var stateFromRawState = function stateFromRawState(state) {
+    if (fragmentRef == null) {
+      return {
+        kind: 'bailout'
+      };
+    } else if (state.kind === 'plural' && state.snapshots.length === 0) {
+      return {
+        kind: 'bailout'
+      };
+    } else {
+      return state;
+    }
+  };
 
-  var _useState2 = useState(fragmentSelector),
-      previousFragmentSelector = _useState2[0],
-      setPreviousFragmentSelector = _useState2[1];
+  var state = stateFromRawState(rawState); // This copy of the state we only update when something requires us to
+  // unsubscribe and re-subscribe, namely a changed environment or
+  // fragment selector.
 
-  if (!areEqualSelectors(fragmentSelector, previousFragmentSelector)) {
-    setPreviousFragmentSelector(fragmentSelector);
-    setState(getFragmentState(environment, fragmentSelector));
-  }
+  var _useState2 = useState(state),
+      rawSubscribedState = _useState2[0],
+      setSubscribedState = _useState2[1]; // FIXME since this is used as an effect dependency, it needs to be memoized.
 
-  var state;
 
-  if (fragmentRef == null) {
-    state = {
-      kind: 'bailout'
-    };
-  } else if (rawState.kind === 'plural' && rawState.snapshots.length === 0) {
-    state = {
-      kind: 'bailout'
-    };
-  } else {
-    state = rawState;
+  var subscribedState = stateFromRawState(rawSubscribedState);
+
+  var _useState3 = useState(fragmentSelector),
+      previousFragmentSelector = _useState3[0],
+      setPreviousFragmentSelector = _useState3[1];
+
+  var _useState4 = useState(environment),
+      previousEnvironment = _useState4[0],
+      setPreviousEnvironment = _useState4[1];
+
+  if (!areEqualSelectors(fragmentSelector, previousFragmentSelector) || environment !== previousEnvironment) {
+    // Enqueue setState to record the new selector and state
+    setPreviousFragmentSelector(fragmentSelector);
+    setPreviousEnvironment(environment);
+    var newState = stateFromRawState(getFragmentState(environment, fragmentSelector, isPlural));
+    setState(newState);
+    setSubscribedState(newState); // This causes us to form a new subscription
+    // But render with the latest state w/o waiting for the setState. Otherwise
+    // the component would render the wrong information temporarily (including
+    // possibly incorrectly triggering some warnings below).
+
+    state = newState;
+    subscribedState = newState;
   } // Handle the queries for any missing client edges; this may suspend.
   // FIXME handle client edges in parallel.
 
 
-  var missingClientEdges = getMissingClientEdges(state);
+  if (((_fragmentNode$metadat2 = fragmentNode.metadata) === null || _fragmentNode$metadat2 === void 0 ? void 0 : _fragmentNode$metadat2.hasClientEdges) === true) {
+    // The fragment is validated to be static (in useFragment) and hasClientEdges is
+    // a static (constant) property of the fragment. In practice, this effect will
+    // always or never run for a given invocation of this hook.
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    var effects = useMemo(function () {
+      var missingClientEdges = getMissingClientEdges(state); // eslint-disable-next-line no-shadow
 
-  if (missingClientEdges === null || missingClientEdges === void 0 ? void 0 : missingClientEdges.length) {
-    var _iterator5 = (0, _createForOfIteratorHelper2["default"])(missingClientEdges),
-        _step5;
+      var effects;
 
-    try {
-      for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
-        var edge = _step5.value;
-        handleMissingClientEdge(environment, fragmentNode, fragmentRef, edge, queryOptions);
+      if (missingClientEdges === null || missingClientEdges === void 0 ? void 0 : missingClientEdges.length) {
+        effects = [];
+
+        var _iterator5 = (0, _createForOfIteratorHelper2["default"])(missingClientEdges),
+            _step5;
+
+        try {
+          for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+            var edge = _step5.value;
+            effects.push(handleMissingClientEdge(environment, fragmentNode, fragmentRef, edge, queryOptions));
+          }
+        } catch (err) {
+          _iterator5.e(err);
+        } finally {
+          _iterator5.f();
+        }
       }
-    } catch (err) {
-      _iterator5.e(err);
-    } finally {
-      _iterator5.f();
-    }
+
+      return effects;
+    }, [state, environment, fragmentNode, fragmentRef, queryOptions]); // See above note
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+
+    useEffect(function () {
+      if (effects === null || effects === void 0 ? void 0 : effects.length) {
+        var cleanups = [];
+
+        var _iterator6 = (0, _createForOfIteratorHelper2["default"])(effects),
+            _step6;
+
+        try {
+          for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
+            var effect = _step6.value;
+            cleanups.push(effect());
+          }
+        } catch (err) {
+          _iterator6.e(err);
+        } finally {
+          _iterator6.f();
+        }
+
+        return function () {
+          var _iterator7 = (0, _createForOfIteratorHelper2["default"])(cleanups),
+              _step7;
+
+          try {
+            for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
+              var cleanup = _step7.value;
+              cleanup();
+            }
+          } catch (err) {
+            _iterator7.e(err);
+          } finally {
+            _iterator7.f();
+          }
+        };
+      }
+    }, [effects]);
   }
 
   if (isMissingData(state)) {
@@ -346,36 +448,83 @@ function useFragmentInternal_REACT_CACHE(fragmentNode, fragmentRef, hookDisplayN
 
 
     handlePotentialSnapshotErrorsForState(environment, state);
-  } // Subscriptions:
-
-
-  var isMountedRef = useRef(false);
-  var isListeningForUpdatesRef = useRef(true);
-
-  function enableStoreUpdates() {
-    isListeningForUpdatesRef.current = true;
-    handleMissedUpdates(environment, state, setState);
-  }
-
-  function disableStoreUpdates() {
-    isListeningForUpdatesRef.current = false;
   }
 
   useEffect(function () {
-    var wasAlreadySubscribed = isMountedRef.current;
-    isMountedRef.current = true;
+    // Check for updates since the state was rendered
+    var currentState = subscribedState;
+    var updates = handleMissedUpdates(environment, subscribedState);
 
-    if (!wasAlreadySubscribed) {
-      handleMissedUpdates(environment, state, setState);
+    if (updates !== null) {
+      var didMissUpdates = updates[0],
+          updatedState = updates[1]; // TODO: didMissUpdates only checks for changes to snapshot data, but it's possible
+      // that other snapshot properties may have changed that should also trigger a re-render,
+      // such as changed missing resolver fields, missing client edges, etc.
+      // A potential alternative is for handleMissedUpdates() to recycle the entire state
+      // value, and return the new (recycled) state only if there was some change. In that
+      // case the code would always setState if something in the snapshot changed, in addition
+      // to using the latest snapshot to subscribe.
+
+      if (didMissUpdates) {
+        setState(updatedState);
+      }
+
+      currentState = updatedState;
     }
 
-    return subscribeToSnapshot(environment, state, setState);
-  }, [environment, state]);
-  var data = useMemo(function () {
-    return state.kind === 'bailout' ? {} : state.kind === 'singular' ? state.snapshot.data : state.snapshots.map(function (s) {
-      return s.data;
+    return subscribeToSnapshot(environment, currentState, function (updater) {
+      setState(function (latestState) {
+        var _latestState$snapshot, _currentState$snapsho;
+
+        if (((_latestState$snapshot = latestState.snapshot) === null || _latestState$snapshot === void 0 ? void 0 : _latestState$snapshot.selector) !== ((_currentState$snapsho = currentState.snapshot) === null || _currentState$snapsho === void 0 ? void 0 : _currentState$snapsho.selector)) {
+          // Ignore updates to the subscription if it's for a previous fragment selector
+          // than the latest one to be rendered. This can happen if the store is updated
+          // after we re-render with a new fragmentRef prop but before the effect fires
+          // in which we unsubscribe to the old one and subscribe to the new one.
+          // (NB: it's safe to compare the selectors by reference because the selector
+          // is recycled into new snapshots.)
+          return latestState;
+        } else {
+          return updater(latestState);
+        }
+      });
     });
-  }, [state]);
+  }, [environment, subscribedState]);
+  var data;
+
+  if (isPlural) {
+    // Plural fragments require allocating an array of the snasphot data values,
+    // which has to be memoized to avoid triggering downstream re-renders.
+    //
+    // Note that isPlural is a constant property of the fragment and does not change
+    // for a particular useFragment invocation site
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    data = useMemo(function () {
+      if (state.kind === 'bailout') {
+        return [];
+      } else {
+        !(state.kind === 'plural') ? process.env.NODE_ENV !== "production" ? invariant(false, 'Expected state to be plural because fragment is plural') : invariant(false) : void 0;
+        return state.snapshots.map(function (s) {
+          return s.data;
+        });
+      }
+    }, [state]);
+  } else if (state.kind === 'bailout') {
+    // This case doesn't allocate a new object so it doesn't have to be memoized
+    data = null;
+  } else {
+    // This case doesn't allocate a new object so it doesn't have to be memoized
+    !(state.kind === 'singular') ? process.env.NODE_ENV !== "production" ? invariant(false, 'Expected state to be singular because fragment is singular') : invariant(false) : void 0;
+    data = state.snapshot.data;
+  }
+
+  if (process.env.NODE_ENV !== "production") {
+    if (fragmentRef != null && (data === undefined || Array.isArray(data) && data.length > 0 && data.every(function (d) {
+      return d === undefined;
+    }))) {
+      process.env.NODE_ENV !== "production" ? warning(false, 'Relay: Expected to have been able to read non-null data for ' + 'fragment `%s` declared in ' + '`%s`, since fragment reference was non-null. ' + "Make sure that that `%s`'s parent isn't " + 'holding on to and/or passing a fragment reference for data that ' + 'has been deleted.', fragmentNode.name, hookDisplayName, hookDisplayName) : void 0;
+    }
+  }
 
   if (process.env.NODE_ENV !== "production") {
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -385,11 +534,7 @@ function useFragmentInternal_REACT_CACHE(fragmentNode, fragmentRef, hookDisplayN
     });
   }
 
-  return {
-    data: data,
-    disableStoreUpdates: disableStoreUpdates,
-    enableStoreUpdates: enableStoreUpdates
-  };
+  return data;
 }
 
 module.exports = useFragmentInternal_REACT_CACHE;

package/lib/relay-hooks/react-cache/useFragment_REACT_CACHE.js

@@ -0,0 +1,51 @@
+/**
+ * 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.
+ *
+ * @emails oncall+relay
+ * 
+ * @format
+ */
+// flowlint ambiguous-object-type:error
+'use strict';
+
+var _require = require('../loadQuery'),
+    useTrackLoadQueryInRender = _require.useTrackLoadQueryInRender;
+
+var useStaticFragmentNodeWarning = require('../useStaticFragmentNodeWarning');
+
+var useFragmentInternal = require('./useFragmentInternal_REACT_CACHE');
+
+var _require2 = require('react'),
+    useDebugValue = _require2.useDebugValue;
+
+var _require3 = require('relay-runtime'),
+    getFragment = _require3.getFragment;
+
+function useFragment(fragment, key) {
+  // We need to use this hook in order to be able to track if
+  // loadQuery was called during render
+  useTrackLoadQueryInRender();
+  var fragmentNode = getFragment(fragment);
+
+  if (process.env.NODE_ENV !== "production") {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useStaticFragmentNodeWarning(fragmentNode, 'first argument of useFragment()');
+  }
+
+  var data = useFragmentInternal(fragmentNode, key, 'useFragment()');
+
+  if (process.env.NODE_ENV !== "production") {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useDebugValue({
+      fragment: fragmentNode.name,
+      data: data
+    });
+  }
+
+  return data;
+}
+
+module.exports = useFragment;

package/lib/relay-hooks/react-cache/useLazyLoadQuery_REACT_CACHE.js

@@ -22,6 +22,9 @@ var getQueryResultOrFetchQuery = require('./getQueryResultOrFetchQuery_REACT_CAC
 
 var useFragmentInternal = require('./useFragmentInternal_REACT_CACHE');
 
+var _require2 = require('react'),
+    useEffect = _require2.useEffect;
+
 function useLazyLoadQuery_REACT_CACHE(gqlQuery, variables, options) {
   var _options$networkCache;
 
@@ -31,7 +34,15 @@ function useLazyLoadQuery_REACT_CACHE(gqlQuery, variables, options) {
     force: true
   }); // Get the query going if needed -- this may suspend.
 
-  var queryResult = getQueryResultOrFetchQuery(environment, queryOperationDescriptor, options === null || options === void 0 ? void 0 : options.fetchPolicy); // Read the query's root fragment -- this may suspend.
+  var _getQueryResultOrFetc = getQueryResultOrFetchQuery(environment, queryOperationDescriptor, {
+    fetchPolicy: options === null || options === void 0 ? void 0 : options.fetchPolicy,
+    renderPolicy: options === null || options === void 0 ? void 0 : options.UNSTABLE_renderPolicy,
+    fetchKey: options === null || options === void 0 ? void 0 : options.fetchKey
+  }),
+      queryResult = _getQueryResultOrFetc[0],
+      effect = _getQueryResultOrFetc[1];
+
+  useEffect(effect); // Read the query's root fragment -- this may suspend.
 
   var fragmentNode = queryResult.fragmentNode,
       fragmentRef = queryResult.fragmentRef; // $FlowExpectedError[incompatible-return] Is this a fixable incompatible-return?
@@ -39,7 +50,7 @@ function useLazyLoadQuery_REACT_CACHE(gqlQuery, variables, options) {
   return useFragmentInternal(fragmentNode, fragmentRef, 'useLazyLoadQuery()', {
     fetchPolicy: options === null || options === void 0 ? void 0 : options.fetchPolicy,
     networkCacheConfig: options === null || options === void 0 ? void 0 : options.networkCacheConfig
-  }).data;
+  });
 }
 
 module.exports = useLazyLoadQuery_REACT_CACHE;