react-relay 14.1.0 → 16.0.0

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

@@ -1,57 +1,33 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @emails oncall+relay
- * 
- * @format
- */
 '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;
-
+  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;
-
+  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;
-
+  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,
@@ -61,7 +37,6 @@ function reducer(state, action) {
           renderPolicy: action.renderPolicy
         });
       }
-
     case 'reset':
       {
         return {
@@ -73,7 +48,6 @@ function reducer(state, action) {
           renderPolicy: undefined
         };
       }
-
     default:
       {
         action.type;
@@ -81,48 +55,40 @@ function reducer(state, action) {
       }
   }
 }
-
 function useRefetchableFragmentNode(fragmentNode, parentFragmentRef, componentDisplayName) {
   var parentEnvironment = useRelayEnvironment();
-
   var _getRefetchMetadata = getRefetchMetadata(fragmentNode, componentDisplayName),
-      refetchableRequest = _getRefetchMetadata.refetchableRequest,
-      fragmentRefPathInResponse = _getRefetchMetadata.fragmentRefPathInResponse,
-      identifierField = _getRefetchMetadata.identifierField;
-
+    refetchableRequest = _getRefetchMetadata.refetchableRequest,
+    fragmentRefPathInResponse = _getRefetchMetadata.fragmentRefPathInResponse,
+    identifierInfo = _getRefetchMetadata.identifierInfo;
   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];
-
+      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;
+    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];
-
+    queryRef = _useQueryLoader[0],
+    loadQuery = _useQueryLoader[1],
+    disposeQuery = _useQueryLoader[2];
   var fragmentRef = parentFragmentRef;
-
   if (shouldReset) {
     dispatch({
       type: 'reset',
@@ -131,103 +97,54 @@ function useRefetchableFragmentNode(fragmentNode, parentFragmentRef, componentDi
     });
     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);
+      debugPreviousIDAndTypename = debugFunctions.getInitialIDAndType(refetchQuery.request.variables, fragmentRefPathInResponse, identifierInfo === null || identifierInfo === void 0 ? void 0 : identifierInfo.identifierQueryVariableName, 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 fetchObservable = queryRef.source != null ? queryRef.source : fetchQuery(environment, refetchQuery);
     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.
-
+    !(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;
     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);
+  var refetch = useRefetchFunction(componentDisplayName, dispatch, disposeQuery, fragmentData, fragmentIdentifier, fragmentNode, fragmentRefPathInResponse, identifierInfo, loadQuery, parentFragmentRef, refetchableRequest);
   return {
     fragmentData: fragmentData,
     fragmentRef: fragmentRef,
     refetch: refetch
   };
 }
-
-function useRefetchFunction(componentDisplayName, dispatch, disposeQuery, fragmentData, fragmentIdentifier, fragmentNode, fragmentRefPathInResponse, identifierField, loadQuery, parentFragmentRef, refetchableRequest) {
+function useRefetchFunction(componentDisplayName, dispatch, disposeQuery, fragmentData, fragmentIdentifier, fragmentNode, fragmentRefPathInResponse, identifierInfo, loadQuery, parentFragmentRef, refetchableRequest) {
   var isMountedRef = useIsMountedRef();
-  var identifierValue = identifierField != null && fragmentData != null && typeof fragmentData === 'object' ? fragmentData[identifierField] : null;
+  var identifierValue = (identifierInfo === null || identifierInfo === void 0 ? void 0 : identifierInfo.identifierField) != null && fragmentData != null && typeof fragmentData === 'object' ? fragmentData[identifierInfo.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;
@@ -235,48 +152,27 @@ function useRefetchFunction(componentDisplayName, dispatch, disposeQuery, fragme
     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.
+    }
+    var refetchVariables = (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, parentVariables), fragmentVariables), providedRefetchVariables);
+    if (identifierInfo != null && !providedRefetchVariables.hasOwnProperty(identifierInfo.identifierQueryVariableName)) {
       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;
+        process.env.NODE_ENV !== "production" ? warning(false, 'Relay: Expected result to have a string  ' + '`%s` in order to refetch, got `%s`.', identifierInfo.identifierField, identifierValue) : void 0;
       }
-
-      refetchVariables.id = identifierValue;
+      refetchVariables[identifierInfo.identifierQueryVariableName] = 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,
@@ -293,38 +189,24 @@ function useRefetchFunction(componentDisplayName, dispatch, disposeQuery, fragme
     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]);
+  }, [fragmentIdentifier, dispatch, disposeQuery, identifierValue, loadQuery]);
 }
-
 var debugFunctions;
-
 if (process.env.NODE_ENV !== "production") {
   debugFunctions = {
-    getInitialIDAndType: function getInitialIDAndType(memoRefetchVariables, fragmentRefPathInResponse, environment) {
+    getInitialIDAndType: function getInitialIDAndType(memoRefetchVariables, fragmentRefPathInResponse, identifierQueryVariableName, environment) {
       var _require4 = require('relay-runtime'),
-          Record = _require4.Record;
-
-      var id = memoRefetchVariables === null || memoRefetchVariables === void 0 ? void 0 : memoRefetchVariables.id;
-
+        Record = _require4.Record;
+      var id = memoRefetchVariables === null || memoRefetchVariables === void 0 ? void 0 : memoRefetchVariables[identifierQueryVariableName !== null && identifierQueryVariableName !== void 0 ? identifierQueryVariableName : '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);
-
+      var typename = record == null ? null : Record.getType(record);
       if (typename == null) {
         return null;
       }
-
       return {
         id: id,
         typename: typename
@@ -332,16 +214,13 @@ if (process.env.NODE_ENV !== "production") {
     },
     checkSameTypeAfterRefetch: function checkSameTypeAfterRefetch(previousIDAndType, environment, fragmentNode, componentDisplayName) {
       var _require5 = require('relay-runtime'),
-          Record = _require5.Record;
-
+        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;
       }
@@ -350,18 +229,13 @@ if (process.env.NODE_ENV !== "production") {
       if (previousIDAndTypename == null) {
         return;
       }
-
       var _require6 = require('relay-runtime'),
-          ID_KEY = _require6.ID_KEY; // $FlowExpectedError[incompatible-use]
-
-
+        ID_KEY = _require6.ID_KEY;
       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

@@ -1,45 +1,23 @@
-/**
- * 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
- */
 'use strict';
 
-var useRefetchableFragmentInternal = require('./useRefetchableFragmentInternal_REACT_CACHE');
-
 var useStaticFragmentNodeWarning = require('../useStaticFragmentNodeWarning');
-
+var useRefetchableFragmentInternal = require('./useRefetchableFragmentInternal_REACT_CACHE');
 var _require = require('react'),
-    useDebugValue = _require.useDebugValue;
-
+  useDebugValue = _require.useDebugValue;
 var _require2 = require('relay-runtime'),
-    getFragment = _require2.getFragment;
-
+  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;
-
+    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;