react-relay 14.0.0 → 15.0.0

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

@@ -0,0 +1,325 @@
+/**
+ * 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.
+ *
+ * 
+ * @format
+ * @oncall relay
+ */
+
+'use strict';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var ProfilerContext = require('../ProfilerContext');
+var _require = require('../QueryResource'),
+  getQueryResourceForEnvironment = _require.getQueryResourceForEnvironment;
+var useIsMountedRef = require('../useIsMountedRef');
+var useQueryLoader = require('../useQueryLoader');
+var useRelayEnvironment = require('../useRelayEnvironment');
+var readFragmentInternal = require('./readFragmentInternal_REACT_CACHE');
+var useFragmentInternal = require('./useFragmentInternal_REACT_CACHE');
+var invariant = require('invariant');
+var _require2 = require('react'),
+  useCallback = _require2.useCallback,
+  useContext = _require2.useContext,
+  useReducer = _require2.useReducer;
+var _require3 = require('relay-runtime'),
+  fetchQuery = _require3.__internal.fetchQuery,
+  createOperationDescriptor = _require3.createOperationDescriptor,
+  getFragmentIdentifier = _require3.getFragmentIdentifier,
+  getRefetchMetadata = _require3.getRefetchMetadata,
+  getSelector = _require3.getSelector,
+  getValueAtPath = _require3.getValueAtPath;
+var warning = require("fbjs/lib/warning");
+function reducer(state, action) {
+  switch (action.type) {
+    case 'refetch':
+      {
+        var _action$refetchEnviro;
+        return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, state), {}, {
+          fetchPolicy: action.fetchPolicy,
+          mirroredEnvironment: (_action$refetchEnviro = action.refetchEnvironment) !== null && _action$refetchEnviro !== void 0 ? _action$refetchEnviro : state.mirroredEnvironment,
+          onComplete: action.onComplete,
+          refetchEnvironment: action.refetchEnvironment,
+          refetchQuery: action.refetchQuery,
+          renderPolicy: action.renderPolicy
+        });
+      }
+    case 'reset':
+      {
+        return {
+          fetchPolicy: undefined,
+          mirroredEnvironment: action.environment,
+          mirroredFragmentIdentifier: action.fragmentIdentifier,
+          onComplete: undefined,
+          refetchQuery: null,
+          renderPolicy: undefined
+        };
+      }
+    default:
+      {
+        action.type;
+        throw new Error('useRefetchableFragmentNode: Unexpected action type');
+      }
+  }
+}
+function useRefetchableFragmentNode(fragmentNode, parentFragmentRef, componentDisplayName) {
+  var parentEnvironment = useRelayEnvironment();
+  var _getRefetchMetadata = getRefetchMetadata(fragmentNode, componentDisplayName),
+    refetchableRequest = _getRefetchMetadata.refetchableRequest,
+    fragmentRefPathInResponse = _getRefetchMetadata.fragmentRefPathInResponse,
+    identifierField = _getRefetchMetadata.identifierField;
+  var fragmentIdentifier = getFragmentIdentifier(fragmentNode, parentFragmentRef);
+  var _useReducer = useReducer(reducer, {
+      fetchPolicy: undefined,
+      mirroredEnvironment: parentEnvironment,
+      mirroredFragmentIdentifier: fragmentIdentifier,
+      onComplete: undefined,
+      refetchEnvironment: null,
+      refetchQuery: null,
+      renderPolicy: undefined
+    }),
+    refetchState = _useReducer[0],
+    dispatch = _useReducer[1];
+  var fetchPolicy = refetchState.fetchPolicy,
+    mirroredEnvironment = refetchState.mirroredEnvironment,
+    mirroredFragmentIdentifier = refetchState.mirroredFragmentIdentifier,
+    onComplete = refetchState.onComplete,
+    refetchEnvironment = refetchState.refetchEnvironment,
+    refetchQuery = refetchState.refetchQuery,
+    renderPolicy = refetchState.renderPolicy;
+  var environment = refetchEnvironment !== null && refetchEnvironment !== void 0 ? refetchEnvironment : parentEnvironment;
+  var QueryResource = getQueryResourceForEnvironment(environment);
+  var profilerContext = useContext(ProfilerContext);
+  var shouldReset = environment !== mirroredEnvironment || fragmentIdentifier !== mirroredFragmentIdentifier;
+  var _useQueryLoader = useQueryLoader(refetchableRequest),
+    queryRef = _useQueryLoader[0],
+    loadQuery = _useQueryLoader[1],
+    disposeQuery = _useQueryLoader[2];
+  var fragmentRef = parentFragmentRef;
+  if (shouldReset) {
+    dispatch({
+      type: 'reset',
+      environment: environment,
+      fragmentIdentifier: fragmentIdentifier
+    });
+    disposeQuery();
+  } else if (refetchQuery != null && queryRef != null) {
+    // If refetch was called, we expect to have a refetchQuery and queryRef
+    // in state, since both state updates to set the refetchQuery and the
+    // queryRef occur simultaneously.
+    // In this case, we need to read the refetched query data (potentially
+    // suspending if it's in flight), and extract the new fragment ref
+    // from the query in order read the current @refetchable fragment
+    // with the updated fragment owner as the new refetchQuery.
+
+    // Before observing the refetch, record the current ID and typename
+    // so that, if we are refetching existing data on
+    // a field that implements Node, after refetching we
+    // can validate that the received data is consistent
+    var debugPreviousIDAndTypename;
+    if (process.env.NODE_ENV !== "production") {
+      debugPreviousIDAndTypename = debugFunctions.getInitialIDAndType(refetchQuery.request.variables, fragmentRefPathInResponse, environment);
+    }
+    var handleQueryCompleted = function handleQueryCompleted(maybeError) {
+      onComplete && onComplete(maybeError !== null && maybeError !== void 0 ? maybeError : null);
+    };
+
+    // The queryRef.source obtained from useQueryLoader will be
+    // an observable we can consume /if/ a network request was
+    // started. Otherwise, given that QueryResource.prepare
+    // always expects an observable we fall back to a new network
+    // observable. Note however that if loadQuery did not make a network
+    // request, we don't expect to make one here, unless the state of
+    // the cache has changed between the call to refetch and this
+    // render.
+    var fetchObservable = queryRef.source != null ? queryRef.source : fetchQuery(environment, refetchQuery);
+
+    // Now wwe can we read the refetch query here using the
+    // queryRef provided from useQueryLoader. Note that the
+    // network request is started during the call to refetch,
+    // but if the refetch query is still in flight, we will suspend
+    // at this point:
+    var queryResult = profilerContext.wrapPrepareQueryResource(function () {
+      return QueryResource.prepare(refetchQuery, fetchObservable, fetchPolicy, renderPolicy, {
+        error: handleQueryCompleted,
+        complete: function complete() {
+          // Validate that the type of the object we got back matches the type
+          // of the object already in the store
+          if (process.env.NODE_ENV !== "production") {
+            debugFunctions.checkSameTypeAfterRefetch(debugPreviousIDAndTypename, environment, fragmentNode, componentDisplayName);
+          }
+          handleQueryCompleted();
+        }
+      }, queryRef.fetchKey, profilerContext);
+    });
+    var queryData = readFragmentInternal(environment, queryResult.fragmentNode, queryResult.fragmentRef, componentDisplayName).data;
+    !(queryData != null) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Relay: Expected to be able to read refetch query response. ' + "If you're seeing this, this is likely a bug in Relay.") : invariant(false) : void 0;
+
+    // After reading/fetching the refetch query, we extract from the
+    // refetch query response the new fragment ref we need to use to read
+    // the fragment. The new fragment ref will point to the refetch query
+    // as its fragment owner.
+    var refetchedFragmentRef = getValueAtPath(queryData, fragmentRefPathInResponse);
+    fragmentRef = refetchedFragmentRef;
+    if (process.env.NODE_ENV !== "production") {
+      // Validate that the id of the object we got back matches the id
+      // we queried for in the variables.
+      // We do this during render instead of onComplete to make sure we are
+      // only validating the most recent refetch.
+      debugFunctions.checkSameIDAfterRefetch(debugPreviousIDAndTypename, fragmentRef, fragmentNode, componentDisplayName);
+    }
+  }
+
+  // We read and subscribe to the fragment using useFragmentNode.
+  // If refetch was called, we read the fragment using the new computed
+  // fragment ref from the refetch query response; otherwise, we use the
+  // fragment ref passed by the caller as normal.
+  var fragmentData = useFragmentInternal(fragmentNode, fragmentRef, componentDisplayName);
+  var refetch = useRefetchFunction(componentDisplayName, dispatch, disposeQuery, fragmentData, fragmentIdentifier, fragmentNode, fragmentRefPathInResponse, identifierField, loadQuery, parentFragmentRef, refetchableRequest);
+  return {
+    fragmentData: fragmentData,
+    fragmentRef: fragmentRef,
+    refetch: refetch
+  };
+}
+function useRefetchFunction(componentDisplayName, dispatch, disposeQuery, fragmentData, fragmentIdentifier, fragmentNode, fragmentRefPathInResponse, identifierField, loadQuery, parentFragmentRef, refetchableRequest) {
+  var isMountedRef = useIsMountedRef();
+  var identifierValue = identifierField != null && fragmentData != null && typeof fragmentData === 'object' ? fragmentData[identifierField] : null;
+  return useCallback(function (providedRefetchVariables, options) {
+    // Bail out and warn if we're trying to refetch after the component
+    // has unmounted
+    if (isMountedRef.current !== true) {
+      process.env.NODE_ENV !== "production" ? warning(false, 'Relay: Unexpected call to `refetch` on unmounted component for fragment ' + '`%s` in `%s`. It looks like some instances of your component are ' + 'still trying to fetch data but they already unmounted. ' + 'Please make sure you clear all timers, intervals, ' + 'async calls, etc that may trigger a fetch.', fragmentNode.name, componentDisplayName) : void 0;
+      return {
+        dispose: function dispose() {}
+      };
+    }
+    if (parentFragmentRef == null) {
+      process.env.NODE_ENV !== "production" ? warning(false, 'Relay: Unexpected call to `refetch` while using a null fragment ref ' + 'for fragment `%s` in `%s`. When calling `refetch`, we expect ' + "initial fragment data to be non-null. Please make sure you're " + 'passing a valid fragment ref to `%s` before calling ' + '`refetch`, or make sure you pass all required variables to `refetch`.', fragmentNode.name, componentDisplayName, componentDisplayName) : void 0;
+    }
+    var refetchEnvironment = options === null || options === void 0 ? void 0 : options.__environment;
+    var fetchPolicy = options === null || options === void 0 ? void 0 : options.fetchPolicy;
+    var renderPolicy = options === null || options === void 0 ? void 0 : options.UNSTABLE_renderPolicy;
+    var onComplete = options === null || options === void 0 ? void 0 : options.onComplete;
+    var fragmentSelector = getSelector(fragmentNode, parentFragmentRef);
+    var parentVariables;
+    var fragmentVariables;
+    if (fragmentSelector == null) {
+      parentVariables = {};
+      fragmentVariables = {};
+    } else if (fragmentSelector.kind === 'PluralReaderSelector') {
+      var _fragmentSelector$sel, _fragmentSelector$sel2, _fragmentSelector$sel3, _fragmentSelector$sel4;
+      parentVariables = (_fragmentSelector$sel = (_fragmentSelector$sel2 = fragmentSelector.selectors[0]) === null || _fragmentSelector$sel2 === void 0 ? void 0 : _fragmentSelector$sel2.owner.variables) !== null && _fragmentSelector$sel !== void 0 ? _fragmentSelector$sel : {};
+      fragmentVariables = (_fragmentSelector$sel3 = (_fragmentSelector$sel4 = fragmentSelector.selectors[0]) === null || _fragmentSelector$sel4 === void 0 ? void 0 : _fragmentSelector$sel4.variables) !== null && _fragmentSelector$sel3 !== void 0 ? _fragmentSelector$sel3 : {};
+    } else {
+      parentVariables = fragmentSelector.owner.variables;
+      fragmentVariables = fragmentSelector.variables;
+    }
+
+    // A user of `useRefetchableFragment()` may pass a subset of
+    // 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.
+    var refetchVariables = (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, parentVariables), fragmentVariables), providedRefetchVariables);
+
+    // If the query needs an identifier value ('id' or similar) and one
+    // was not explicitly provided, read it from the fragment data.
+    if (identifierField != null && !providedRefetchVariables.hasOwnProperty('id')) {
+      // @refetchable fragments are guaranteed to have an `id` selection
+      // if the type is Node, implements Node, or is @fetchable. Double-check
+      // that there actually is a value at runtime.
+      if (typeof identifierValue !== 'string') {
+        process.env.NODE_ENV !== "production" ? warning(false, 'Relay: Expected result to have a string  ' + '`%s` in order to refetch, got `%s`.', identifierField, identifierValue) : void 0;
+      }
+      refetchVariables.id = identifierValue;
+    }
+    var refetchQuery = createOperationDescriptor(refetchableRequest, refetchVariables, {
+      force: true
+    });
+
+    // We call loadQuery which will start a network request if necessary
+    // and update the querRef from useQueryLoader.
+    // Note the following:
+    // - loadQuery will dispose of any previously refetched queries.
+    // - We use the variables extracted off the OperationDescriptor
+    // so that they have been filtered out to include only the
+    // variables actually declared in the query.
+    loadQuery(refetchQuery.request.variables, {
+      fetchPolicy: fetchPolicy,
+      __environment: refetchEnvironment,
+      __nameForWarning: 'refetch'
+    });
+    dispatch({
+      type: 'refetch',
+      fetchPolicy: fetchPolicy,
+      onComplete: onComplete,
+      refetchEnvironment: refetchEnvironment,
+      refetchQuery: refetchQuery,
+      renderPolicy: renderPolicy
+    });
+    return {
+      dispose: disposeQuery
+    };
+  },
+  // NOTE: We disable react-hooks-deps warning because:
+  //   - We know fragmentRefPathInResponse is static, so it can be omitted from
+  //     deps
+  //   - We know fragmentNode is static, so it can be omitted from deps.
+  //   - fragmentNode and parentFragmentRef are also captured by including
+  //     fragmentIdentifier
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [fragmentIdentifier, dispatch, disposeQuery, identifierValue, loadQuery]);
+}
+var debugFunctions;
+if (process.env.NODE_ENV !== "production") {
+  debugFunctions = {
+    getInitialIDAndType: function getInitialIDAndType(memoRefetchVariables, fragmentRefPathInResponse, environment) {
+      var _require4 = require('relay-runtime'),
+        Record = _require4.Record;
+      var id = memoRefetchVariables === null || memoRefetchVariables === void 0 ? void 0 : memoRefetchVariables.id;
+      if (fragmentRefPathInResponse.length !== 1 || fragmentRefPathInResponse[0] !== 'node' || id == null) {
+        return null;
+      }
+      var recordSource = environment.getStore().getSource();
+      var record = recordSource.get(id);
+      var typename = record && Record.getType(record);
+      if (typename == null) {
+        return null;
+      }
+      return {
+        id: id,
+        typename: typename
+      };
+    },
+    checkSameTypeAfterRefetch: function checkSameTypeAfterRefetch(previousIDAndType, environment, fragmentNode, componentDisplayName) {
+      var _require5 = require('relay-runtime'),
+        Record = _require5.Record;
+      if (!previousIDAndType) {
+        return;
+      }
+      var recordSource = environment.getStore().getSource();
+      var record = recordSource.get(previousIDAndType.id);
+      var typename = record && Record.getType(record);
+      if (typename !== previousIDAndType.typename) {
+        process.env.NODE_ENV !== "production" ? warning(false, 'Relay: Call to `refetch` returned data with a different ' + '__typename: was `%s`, now `%s`, on `%s` in `%s`. ' + 'Please make sure the server correctly implements' + 'unique id requirement.', previousIDAndType.typename, typename, fragmentNode.name, componentDisplayName) : void 0;
+      }
+    },
+    checkSameIDAfterRefetch: function checkSameIDAfterRefetch(previousIDAndTypename, refetchedFragmentRef, fragmentNode, componentDisplayName) {
+      if (previousIDAndTypename == null) {
+        return;
+      }
+      var _require6 = require('relay-runtime'),
+        ID_KEY = _require6.ID_KEY;
+      // $FlowExpectedError[incompatible-use]
+      var resultID = refetchedFragmentRef[ID_KEY];
+      if (resultID != null && resultID !== previousIDAndTypename.id) {
+        process.env.NODE_ENV !== "production" ? warning(false, 'Relay: Call to `refetch` returned a different id, expected ' + '`%s`, got `%s`, on `%s` in `%s`. ' + 'Please make sure the server correctly implements ' + 'unique id requirement.', resultID, previousIDAndTypename.id, fragmentNode.name, componentDisplayName) : void 0;
+      }
+    }
+  };
+}
+module.exports = useRefetchableFragmentNode;

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

@@ -0,0 +1,37 @@
+/**
+ * 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.
+ *
+ * 
+ * @format
+ * @oncall relay
+ */
+
+'use strict';
+
+var useStaticFragmentNodeWarning = require('../useStaticFragmentNodeWarning');
+var useRefetchableFragmentInternal = require('./useRefetchableFragmentInternal_REACT_CACHE');
+var _require = require('react'),
+  useDebugValue = _require.useDebugValue;
+var _require2 = require('relay-runtime'),
+  getFragment = _require2.getFragment;
+function useRefetchableFragment(fragmentInput, fragmentRef) {
+  var fragmentNode = getFragment(fragmentInput);
+  useStaticFragmentNodeWarning(fragmentNode, 'first argument of useRefetchableFragment()');
+  var _useRefetchableFragme = useRefetchableFragmentInternal(fragmentNode, fragmentRef, 'useRefetchableFragment()'),
+    fragmentData = _useRefetchableFragme.fragmentData,
+    refetch = _useRefetchableFragme.refetch;
+  if (process.env.NODE_ENV !== "production") {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useDebugValue({
+      fragment: fragmentNode.name,
+      data: fragmentData
+    });
+  }
+  /* $FlowExpectedError[prop-missing] : Exposed options is a subset of internal
+   * options */
+  return [fragmentData, refetch];
+}
+module.exports = useRefetchableFragment;

package/lib/relay-hooks/useBlockingPaginationFragment.js

@@ -4,98 +4,86 @@
  * 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
+ * @oncall relay
  */
-// flowlint ambiguous-object-type:error
-'use strict';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+'use strict';
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
+var _excluded = ["disableStoreUpdates", "enableStoreUpdates"];
 var useLoadMoreFunction = require('./useLoadMoreFunction');
-
 var useRefetchableFragmentNode = require('./useRefetchableFragmentNode');
-
 var useStaticFragmentNodeWarning = require('./useStaticFragmentNodeWarning');
-
 var invariant = require('invariant');
-
 var _require = require('react'),
-    useCallback = _require.useCallback,
-    useEffect = _require.useEffect,
-    useRef = _require.useRef,
-    useState = _require.useState;
-
+  useCallback = _require.useCallback,
+  useEffect = _require.useEffect,
+  useRef = _require.useRef,
+  useState = _require.useState;
 var _require2 = require('relay-runtime'),
-    getFragment = _require2.getFragment,
-    getFragmentIdentifier = _require2.getFragmentIdentifier,
-    getPaginationMetadata = _require2.getPaginationMetadata;
-
+  getFragment = _require2.getFragment,
+  getFragmentIdentifier = _require2.getFragmentIdentifier,
+  getPaginationMetadata = _require2.getPaginationMetadata;
 function useBlockingPaginationFragment(fragmentInput, parentFragmentRef) {
   var componentDisplayName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'useBlockingPaginationFragment()';
   var fragmentNode = getFragment(fragmentInput);
   useStaticFragmentNodeWarning(fragmentNode, "first argument of ".concat(componentDisplayName));
-
   var _getPaginationMetadat = getPaginationMetadata(fragmentNode, componentDisplayName),
-      connectionPathInFragmentData = _getPaginationMetadat.connectionPathInFragmentData,
-      identifierField = _getPaginationMetadat.identifierField,
-      paginationRequest = _getPaginationMetadat.paginationRequest,
-      paginationMetadata = _getPaginationMetadat.paginationMetadata,
-      stream = _getPaginationMetadat.stream;
-
+    connectionPathInFragmentData = _getPaginationMetadat.connectionPathInFragmentData,
+    identifierField = _getPaginationMetadat.identifierField,
+    paginationRequest = _getPaginationMetadat.paginationRequest,
+    paginationMetadata = _getPaginationMetadat.paginationMetadata,
+    stream = _getPaginationMetadat.stream;
   !(stream === false) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Relay: @stream_connection is not compatible with `useBlockingPaginationFragment`. ' + 'Use `useStreamingPaginationFragment` instead.') : invariant(false) : void 0;
-
   var _useRefetchableFragme = useRefetchableFragmentNode(fragmentNode, parentFragmentRef, componentDisplayName),
-      fragmentData = _useRefetchableFragme.fragmentData,
-      fragmentRef = _useRefetchableFragme.fragmentRef,
-      refetch = _useRefetchableFragme.refetch,
-      disableStoreUpdates = _useRefetchableFragme.disableStoreUpdates,
-      enableStoreUpdates = _useRefetchableFragme.enableStoreUpdates;
-
-  var fragmentIdentifier = getFragmentIdentifier(fragmentNode, fragmentRef); // Backward pagination
-
+    fragmentData = _useRefetchableFragme.fragmentData,
+    fragmentRef = _useRefetchableFragme.fragmentRef,
+    refetch = _useRefetchableFragme.refetch,
+    disableStoreUpdates = _useRefetchableFragme.disableStoreUpdates,
+    enableStoreUpdates = _useRefetchableFragme.enableStoreUpdates;
+  var fragmentIdentifier = getFragmentIdentifier(fragmentNode, fragmentRef);
+
+  // Backward pagination
   var _useLoadMore = useLoadMore({
-    componentDisplayName: componentDisplayName,
-    connectionPathInFragmentData: connectionPathInFragmentData,
-    direction: 'backward',
-    disableStoreUpdates: disableStoreUpdates,
-    enableStoreUpdates: enableStoreUpdates,
-    fragmentData: fragmentData,
-    fragmentIdentifier: fragmentIdentifier,
-    fragmentNode: fragmentNode,
-    fragmentRef: fragmentRef,
-    identifierField: identifierField,
-    paginationMetadata: paginationMetadata,
-    paginationRequest: paginationRequest
-  }),
-      loadPrevious = _useLoadMore[0],
-      hasPrevious = _useLoadMore[1],
-      disposeFetchPrevious = _useLoadMore[2]; // Forward pagination
-
-
+      componentDisplayName: componentDisplayName,
+      connectionPathInFragmentData: connectionPathInFragmentData,
+      direction: 'backward',
+      disableStoreUpdates: disableStoreUpdates,
+      enableStoreUpdates: enableStoreUpdates,
+      fragmentData: fragmentData,
+      fragmentIdentifier: fragmentIdentifier,
+      fragmentNode: fragmentNode,
+      fragmentRef: fragmentRef,
+      identifierField: identifierField,
+      paginationMetadata: paginationMetadata,
+      paginationRequest: paginationRequest
+    }),
+    loadPrevious = _useLoadMore[0],
+    hasPrevious = _useLoadMore[1],
+    disposeFetchPrevious = _useLoadMore[2];
+
+  // Forward pagination
   var _useLoadMore2 = useLoadMore({
-    componentDisplayName: componentDisplayName,
-    connectionPathInFragmentData: connectionPathInFragmentData,
-    direction: 'forward',
-    disableStoreUpdates: disableStoreUpdates,
-    enableStoreUpdates: enableStoreUpdates,
-    fragmentData: fragmentData,
-    fragmentIdentifier: fragmentIdentifier,
-    fragmentNode: fragmentNode,
-    fragmentRef: fragmentRef,
-    identifierField: identifierField,
-    paginationMetadata: paginationMetadata,
-    paginationRequest: paginationRequest
-  }),
-      loadNext = _useLoadMore2[0],
-      hasNext = _useLoadMore2[1],
-      disposeFetchNext = _useLoadMore2[2];
-
+      componentDisplayName: componentDisplayName,
+      connectionPathInFragmentData: connectionPathInFragmentData,
+      direction: 'forward',
+      disableStoreUpdates: disableStoreUpdates,
+      enableStoreUpdates: enableStoreUpdates,
+      fragmentData: fragmentData,
+      fragmentIdentifier: fragmentIdentifier,
+      fragmentNode: fragmentNode,
+      fragmentRef: fragmentRef,
+      identifierField: identifierField,
+      paginationMetadata: paginationMetadata,
+      paginationRequest: paginationRequest
+    }),
+    loadNext = _useLoadMore2[0],
+    hasNext = _useLoadMore2[1],
+    disposeFetchNext = _useLoadMore2[2];
   var refetchPagination = useCallback(function (variables, options) {
     disposeFetchNext();
     disposeFetchPrevious();
@@ -104,6 +92,7 @@ function useBlockingPaginationFragment(fragmentInput, parentFragmentRef) {
     }));
   }, [disposeFetchNext, disposeFetchPrevious, refetch]);
   return {
+    // $FlowFixMe[incompatible-cast]
     data: fragmentData,
     loadNext: loadNext,
     loadPrevious: loadPrevious,
@@ -112,30 +101,24 @@ function useBlockingPaginationFragment(fragmentInput, parentFragmentRef) {
     refetch: refetchPagination
   };
 }
-
 function useLoadMore(args) {
   var disableStoreUpdates = args.disableStoreUpdates,
-      enableStoreUpdates = args.enableStoreUpdates,
-      loadMoreArgs = (0, _objectWithoutPropertiesLoose2["default"])(args, ["disableStoreUpdates", "enableStoreUpdates"]);
-
+    enableStoreUpdates = args.enableStoreUpdates,
+    loadMoreArgs = (0, _objectWithoutPropertiesLoose2["default"])(args, _excluded);
   var _useState = useState(null),
-      requestPromise = _useState[0],
-      setRequestPromise = _useState[1];
-
+    requestPromise = _useState[0],
+    setRequestPromise = _useState[1];
   var requestPromiseRef = useRef(null);
   var promiseResolveRef = useRef(null);
-
   var promiseResolve = function promiseResolve() {
     if (promiseResolveRef.current != null) {
       promiseResolveRef.current();
       promiseResolveRef.current = null;
     }
   };
-
   var handleReset = function handleReset() {
     promiseResolve();
   };
-
   var observer = {
     complete: promiseResolve,
     // NOTE: loadMore is a no-op if a request is already in flight, so we
@@ -165,34 +148,31 @@ function useLoadMore(args) {
     // and blow away the whole list of items.
     error: promiseResolve
   };
-
   var _useLoadMoreFunction = useLoadMoreFunction((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, loadMoreArgs), {}, {
-    observer: observer,
-    onReset: handleReset
-  })),
-      loadMore = _useLoadMoreFunction[0],
-      hasMore = _useLoadMoreFunction[1],
-      disposeFetch = _useLoadMoreFunction[2]; // NOTE: To determine if we need to suspend, we check that the promise in
+      observer: observer,
+      onReset: handleReset
+    })),
+    loadMore = _useLoadMoreFunction[0],
+    hasMore = _useLoadMoreFunction[1],
+    disposeFetch = _useLoadMoreFunction[2];
+
+  // NOTE: To determine if we need to suspend, we check that the promise in
   // state is the same as the promise on the ref, which ensures that we
   // wont incorrectly suspend on other higher-pri updates before the update
   // to suspend has committed.
-
-
   if (requestPromise != null && requestPromise === requestPromiseRef.current) {
     throw requestPromise;
   }
-
   useEffect(function () {
     if (requestPromise !== requestPromiseRef.current) {
       // NOTE: After suspense pagination has resolved, we re-enable store updates
       // for this fragment. This may cause the component to re-render if
       // we missed any updates to the fragment data other than the pagination update.
       enableStoreUpdates();
-    } // NOTE: We know the identity of enableStoreUpdates wont change
+    }
+    // NOTE: We know the identity of enableStoreUpdates wont change
     // eslint-disable-next-line react-hooks/exhaustive-deps
-
   }, [requestPromise]);
   return [loadMore, hasMore, disposeFetch];
 }
-
 module.exports = useBlockingPaginationFragment;

package/lib/relay-hooks/useClientQuery.js

@@ -0,0 +1,30 @@
+/**
+ * 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.
+ *
+ * 
+ * @format
+ * @oncall relay
+ */
+
+'use strict';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var useLazyLoadQuery = require('./useLazyLoadQuery');
+
+/**
+ * This hook can be used to render client-only queries.
+ * These queries are consist of queries for client-only data,
+ * schematized via local schema extensions and/or Relay resolvers.
+ */
+function useClientQuery(gqlQuery, variables, options) {
+  // $FlowFixMe[incompatible-type] client queries can be used with useLazyLoadQuery, but only with `store-only` policy.
+  var query = gqlQuery;
+  return useLazyLoadQuery(query, variables, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, options), {}, {
+    fetchPolicy: 'store-only'
+  }));
+}
+module.exports = useClientQuery;