react-relay 13.1.0 → 14.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ReactRelayContext.js +1 -1
- package/ReactRelayFragmentContainer.js.flow +7 -4
- package/ReactRelayLocalQueryRenderer.js.flow +1 -1
- package/ReactRelayPaginationContainer.js.flow +13 -8
- package/ReactRelayQueryFetcher.js.flow +1 -0
- package/ReactRelayQueryRenderer.js.flow +7 -6
- package/ReactRelayRefetchContainer.js.flow +10 -3
- package/__flowtests__/__generated__/ReactRelayFragmentContainerFlowtest_viewer.graphql.js.flow +2 -2
- package/__flowtests__/__generated__/ReactRelayFragmentContainerFlowtest_viewer2.graphql.js.flow +2 -2
- package/__flowtests__/__generated__/ReactRelayPaginationContainerFlowtestQuery.graphql.js.flow +3 -3
- package/__flowtests__/__generated__/ReactRelayPaginationContainerFlowtest_viewer.graphql.js.flow +3 -3
- package/__flowtests__/__generated__/ReactRelayRefetchContainerFlowtestQuery.graphql.js.flow +3 -3
- package/__flowtests__/__generated__/ReactRelayRefetchContainerFlowtest_viewer.graphql.js.flow +3 -3
- package/__flowtests__/__generated__/RelayModernFlowtest_badref.graphql.js.flow +2 -2
- package/__flowtests__/__generated__/RelayModernFlowtest_notref.graphql.js.flow +2 -2
- package/__flowtests__/__generated__/RelayModernFlowtest_user.graphql.js.flow +2 -2
- package/__flowtests__/__generated__/RelayModernFlowtest_users.graphql.js.flow +2 -2
- package/buildReactRelayContainer.js.flow +2 -2
- package/hooks.js +1 -1
- package/index.js +1 -1
- package/jest-react/internalAct.js.flow +25 -9
- package/legacy.js +1 -1
- package/lib/ReactRelayQueryFetcher.js +1 -0
- package/lib/ReactRelayQueryRenderer.js +1 -2
- package/lib/jest-react/internalAct.js +24 -4
- package/lib/readContext.js +2 -1
- package/lib/relay-hooks/FragmentResource.js +62 -23
- package/lib/relay-hooks/HooksImplementation.js +29 -0
- package/lib/relay-hooks/MatchContainer.js +1 -0
- package/lib/relay-hooks/QueryResource.js +4 -166
- package/lib/relay-hooks/preloadQuery_DEPRECATED.js +7 -11
- package/lib/relay-hooks/react-cache/RelayReactCache.js +37 -0
- package/lib/relay-hooks/react-cache/getQueryResultOrFetchQuery_REACT_CACHE.js +344 -0
- package/lib/relay-hooks/react-cache/useFragmentInternal_REACT_CACHE.js +540 -0
- package/lib/relay-hooks/react-cache/useFragment_REACT_CACHE.js +51 -0
- package/lib/relay-hooks/react-cache/useLazyLoadQuery_REACT_CACHE.js +56 -0
- package/lib/relay-hooks/react-cache/usePreloadedQuery_REACT_CACHE.js +125 -0
- package/lib/relay-hooks/useFragment.js +15 -1
- package/lib/relay-hooks/useLazyLoadQuery.js +18 -2
- package/lib/relay-hooks/useMutation.js +4 -5
- package/lib/relay-hooks/usePreloadedQuery.js +18 -2
- package/package.json +3 -3
- package/react-relay-hooks.js +2 -2
- package/react-relay-hooks.min.js +2 -2
- package/react-relay-legacy.js +2 -2
- package/react-relay-legacy.min.js +2 -2
- package/react-relay.js +2 -2
- package/react-relay.min.js +2 -2
- package/readContext.js.flow +1 -0
- package/relay-hooks/FragmentResource.js.flow +72 -27
- package/relay-hooks/HooksImplementation.js.flow +45 -0
- package/relay-hooks/MatchContainer.js.flow +8 -1
- package/relay-hooks/QueryResource.js.flow +8 -203
- package/relay-hooks/__flowtests__/__generated__/useFragmentFlowtest_user.graphql.js.flow +2 -2
- package/relay-hooks/__flowtests__/__generated__/useFragmentFlowtest_users.graphql.js.flow +2 -2
- package/relay-hooks/loadQuery.js.flow +2 -1
- package/relay-hooks/preloadQuery_DEPRECATED.js.flow +7 -14
- package/relay-hooks/react-cache/RelayReactCache.js.flow +42 -0
- package/relay-hooks/react-cache/getQueryResultOrFetchQuery_REACT_CACHE.js.flow +424 -0
- package/relay-hooks/react-cache/useFragmentInternal_REACT_CACHE.js.flow +559 -0
- package/relay-hooks/react-cache/useFragment_REACT_CACHE.js.flow +74 -0
- package/relay-hooks/react-cache/useLazyLoadQuery_REACT_CACHE.js.flow +72 -0
- package/relay-hooks/react-cache/usePreloadedQuery_REACT_CACHE.js.flow +153 -0
- package/relay-hooks/useFragment.js.flow +17 -10
- package/relay-hooks/useLazyLoadQuery.js.flow +38 -3
- package/relay-hooks/useMutation.js.flow +3 -3
- package/relay-hooks/usePreloadedQuery.js.flow +30 -2
- package/relay-hooks/useRefetchableFragmentNode.js.flow +26 -11
- package/relay-hooks/useSubscription.js.flow +14 -8
@@ -0,0 +1,540 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
3
|
+
*
|
4
|
+
* This source code is licensed under the MIT license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*
|
7
|
+
*
|
8
|
+
* @emails oncall+relay
|
9
|
+
* @format
|
10
|
+
*/
|
11
|
+
// flowlint ambiguous-object-type:error
|
12
|
+
'use strict';
|
13
|
+
|
14
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
15
|
+
|
16
|
+
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
17
|
+
|
18
|
+
var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));
|
19
|
+
|
20
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
21
|
+
|
22
|
+
var useRelayEnvironment = require('../useRelayEnvironment');
|
23
|
+
|
24
|
+
var getQueryResultOrFetchQuery = require('./getQueryResultOrFetchQuery_REACT_CACHE');
|
25
|
+
|
26
|
+
var invariant = require('invariant');
|
27
|
+
|
28
|
+
var _require = require('react'),
|
29
|
+
useDebugValue = _require.useDebugValue,
|
30
|
+
useEffect = _require.useEffect,
|
31
|
+
useMemo = _require.useMemo,
|
32
|
+
useRef = _require.useRef,
|
33
|
+
useState = _require.useState;
|
34
|
+
|
35
|
+
var _require2 = require('relay-runtime'),
|
36
|
+
areEqualSelectors = _require2.areEqualSelectors,
|
37
|
+
createOperationDescriptor = _require2.createOperationDescriptor,
|
38
|
+
getPendingOperationsForFragment = _require2.getPendingOperationsForFragment,
|
39
|
+
getSelector = _require2.getSelector,
|
40
|
+
getVariablesFromFragment = _require2.getVariablesFromFragment,
|
41
|
+
handlePotentialSnapshotErrors = _require2.handlePotentialSnapshotErrors,
|
42
|
+
recycleNodesInto = _require2.recycleNodesInto;
|
43
|
+
|
44
|
+
var warning = require("fbjs/lib/warning");
|
45
|
+
|
46
|
+
function isMissingData(state) {
|
47
|
+
if (state.kind === 'bailout') {
|
48
|
+
return false;
|
49
|
+
} else if (state.kind === 'singular') {
|
50
|
+
return state.snapshot.isMissingData;
|
51
|
+
} else {
|
52
|
+
return state.snapshots.some(function (s) {
|
53
|
+
return s.isMissingData;
|
54
|
+
});
|
55
|
+
}
|
56
|
+
}
|
57
|
+
|
58
|
+
function getMissingClientEdges(state) {
|
59
|
+
if (state.kind === 'bailout') {
|
60
|
+
return null;
|
61
|
+
} else if (state.kind === 'singular') {
|
62
|
+
var _state$snapshot$missi;
|
63
|
+
|
64
|
+
return (_state$snapshot$missi = state.snapshot.missingClientEdges) !== null && _state$snapshot$missi !== void 0 ? _state$snapshot$missi : null;
|
65
|
+
} else {
|
66
|
+
var edges = null;
|
67
|
+
|
68
|
+
var _iterator = (0, _createForOfIteratorHelper2["default"])(state.snapshots),
|
69
|
+
_step;
|
70
|
+
|
71
|
+
try {
|
72
|
+
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
73
|
+
var snapshot = _step.value;
|
74
|
+
|
75
|
+
if (snapshot.missingClientEdges) {
|
76
|
+
var _edges;
|
77
|
+
|
78
|
+
edges = (_edges = edges) !== null && _edges !== void 0 ? _edges : [];
|
79
|
+
|
80
|
+
var _iterator2 = (0, _createForOfIteratorHelper2["default"])(snapshot.missingClientEdges),
|
81
|
+
_step2;
|
82
|
+
|
83
|
+
try {
|
84
|
+
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
|
85
|
+
var edge = _step2.value;
|
86
|
+
edges.push(edge);
|
87
|
+
}
|
88
|
+
} catch (err) {
|
89
|
+
_iterator2.e(err);
|
90
|
+
} finally {
|
91
|
+
_iterator2.f();
|
92
|
+
}
|
93
|
+
}
|
94
|
+
}
|
95
|
+
} catch (err) {
|
96
|
+
_iterator.e(err);
|
97
|
+
} finally {
|
98
|
+
_iterator.f();
|
99
|
+
}
|
100
|
+
|
101
|
+
return edges;
|
102
|
+
}
|
103
|
+
}
|
104
|
+
|
105
|
+
function handlePotentialSnapshotErrorsForState(environment, state) {
|
106
|
+
if (state.kind === 'singular') {
|
107
|
+
handlePotentialSnapshotErrors(environment, state.snapshot.missingRequiredFields, state.snapshot.relayResolverErrors);
|
108
|
+
} else if (state.kind === 'plural') {
|
109
|
+
var _iterator3 = (0, _createForOfIteratorHelper2["default"])(state.snapshots),
|
110
|
+
_step3;
|
111
|
+
|
112
|
+
try {
|
113
|
+
for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
|
114
|
+
var snapshot = _step3.value;
|
115
|
+
handlePotentialSnapshotErrors(environment, snapshot.missingRequiredFields, snapshot.relayResolverErrors);
|
116
|
+
}
|
117
|
+
} catch (err) {
|
118
|
+
_iterator3.e(err);
|
119
|
+
} finally {
|
120
|
+
_iterator3.f();
|
121
|
+
}
|
122
|
+
}
|
123
|
+
}
|
124
|
+
/**
|
125
|
+
* Check for updates to the store that occurred concurrently with rendering the given `state` value,
|
126
|
+
* returning a new (updated) state if there were updates or null if there were no changes.
|
127
|
+
*/
|
128
|
+
|
129
|
+
|
130
|
+
function handleMissedUpdates(environment, state) {
|
131
|
+
if (state.kind === 'bailout') {
|
132
|
+
return null;
|
133
|
+
} // FIXME this is invalid if we've just switched environments.
|
134
|
+
|
135
|
+
|
136
|
+
var currentEpoch = environment.getStore().getEpoch();
|
137
|
+
|
138
|
+
if (currentEpoch === state.epoch) {
|
139
|
+
return null;
|
140
|
+
} // The store has updated since we rendered (without us being subscribed yet),
|
141
|
+
// so check for any updates to the data we're rendering:
|
142
|
+
|
143
|
+
|
144
|
+
if (state.kind === 'singular') {
|
145
|
+
var currentSnapshot = environment.lookup(state.snapshot.selector);
|
146
|
+
var updatedData = recycleNodesInto(state.snapshot.data, currentSnapshot.data);
|
147
|
+
var updatedCurrentSnapshot = {
|
148
|
+
data: updatedData,
|
149
|
+
isMissingData: currentSnapshot.isMissingData,
|
150
|
+
missingClientEdges: currentSnapshot.missingClientEdges,
|
151
|
+
missingLiveResolverFields: currentSnapshot.missingLiveResolverFields,
|
152
|
+
seenRecords: currentSnapshot.seenRecords,
|
153
|
+
selector: currentSnapshot.selector,
|
154
|
+
missingRequiredFields: currentSnapshot.missingRequiredFields,
|
155
|
+
relayResolverErrors: currentSnapshot.relayResolverErrors
|
156
|
+
};
|
157
|
+
return [updatedData !== state.snapshot.data, {
|
158
|
+
kind: 'singular',
|
159
|
+
snapshot: updatedCurrentSnapshot,
|
160
|
+
epoch: currentEpoch
|
161
|
+
}];
|
162
|
+
} else {
|
163
|
+
var didMissUpdates = false;
|
164
|
+
var currentSnapshots = [];
|
165
|
+
|
166
|
+
for (var index = 0; index < state.snapshots.length; index++) {
|
167
|
+
var snapshot = state.snapshots[index];
|
168
|
+
|
169
|
+
var _currentSnapshot = environment.lookup(snapshot.selector);
|
170
|
+
|
171
|
+
var _updatedData = recycleNodesInto(snapshot.data, _currentSnapshot.data);
|
172
|
+
|
173
|
+
var _updatedCurrentSnapshot = {
|
174
|
+
data: _updatedData,
|
175
|
+
isMissingData: _currentSnapshot.isMissingData,
|
176
|
+
missingClientEdges: _currentSnapshot.missingClientEdges,
|
177
|
+
missingLiveResolverFields: _currentSnapshot.missingLiveResolverFields,
|
178
|
+
seenRecords: _currentSnapshot.seenRecords,
|
179
|
+
selector: _currentSnapshot.selector,
|
180
|
+
missingRequiredFields: _currentSnapshot.missingRequiredFields,
|
181
|
+
relayResolverErrors: _currentSnapshot.relayResolverErrors
|
182
|
+
};
|
183
|
+
|
184
|
+
if (_updatedData !== snapshot.data) {
|
185
|
+
didMissUpdates = true;
|
186
|
+
}
|
187
|
+
|
188
|
+
currentSnapshots.push(_updatedCurrentSnapshot);
|
189
|
+
}
|
190
|
+
|
191
|
+
!(currentSnapshots.length === state.snapshots.length) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Expected same number of snapshots') : invariant(false) : void 0;
|
192
|
+
return [didMissUpdates, {
|
193
|
+
kind: 'plural',
|
194
|
+
snapshots: currentSnapshots,
|
195
|
+
epoch: currentEpoch
|
196
|
+
}];
|
197
|
+
}
|
198
|
+
}
|
199
|
+
|
200
|
+
function handleMissingClientEdge(environment, parentFragmentNode, parentFragmentRef, missingClientEdgeRequestInfo, queryOptions) {
|
201
|
+
var originalVariables = getVariablesFromFragment(parentFragmentNode, parentFragmentRef);
|
202
|
+
var variables = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, originalVariables), {}, {
|
203
|
+
id: missingClientEdgeRequestInfo.clientEdgeDestinationID // TODO should be a reserved name
|
204
|
+
|
205
|
+
});
|
206
|
+
var queryOperationDescriptor = createOperationDescriptor(missingClientEdgeRequestInfo.request, variables, queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.networkCacheConfig); // This may suspend. We don't need to do anything with the results; all we're
|
207
|
+
// doing here is started the query if needed and retaining and releasing it
|
208
|
+
// according to the component mount/suspense cycle; getQueryResultOrFetchQuery
|
209
|
+
// already handles this by itself.
|
210
|
+
|
211
|
+
var _getQueryResultOrFetc = getQueryResultOrFetchQuery(environment, queryOperationDescriptor, {
|
212
|
+
fetchPolicy: queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.fetchPolicy
|
213
|
+
}),
|
214
|
+
_ = _getQueryResultOrFetc[0],
|
215
|
+
effect = _getQueryResultOrFetc[1];
|
216
|
+
|
217
|
+
return effect;
|
218
|
+
}
|
219
|
+
|
220
|
+
function subscribeToSnapshot(environment, state, setState) {
|
221
|
+
if (state.kind === 'bailout') {
|
222
|
+
return function () {};
|
223
|
+
} else if (state.kind === 'singular') {
|
224
|
+
var disposable = environment.subscribe(state.snapshot, function (latestSnapshot) {
|
225
|
+
setState(function (_) {
|
226
|
+
return {
|
227
|
+
kind: 'singular',
|
228
|
+
snapshot: latestSnapshot,
|
229
|
+
epoch: environment.getStore().getEpoch()
|
230
|
+
};
|
231
|
+
});
|
232
|
+
});
|
233
|
+
return function () {
|
234
|
+
disposable.dispose();
|
235
|
+
};
|
236
|
+
} else {
|
237
|
+
var disposables = state.snapshots.map(function (snapshot, index) {
|
238
|
+
return environment.subscribe(snapshot, function (latestSnapshot) {
|
239
|
+
setState(function (existing) {
|
240
|
+
!(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;
|
241
|
+
var updated = (0, _toConsumableArray2["default"])(existing.snapshots);
|
242
|
+
updated[index] = latestSnapshot;
|
243
|
+
return {
|
244
|
+
kind: 'plural',
|
245
|
+
snapshots: updated,
|
246
|
+
epoch: environment.getStore().getEpoch()
|
247
|
+
};
|
248
|
+
});
|
249
|
+
});
|
250
|
+
});
|
251
|
+
return function () {
|
252
|
+
var _iterator4 = (0, _createForOfIteratorHelper2["default"])(disposables),
|
253
|
+
_step4;
|
254
|
+
|
255
|
+
try {
|
256
|
+
for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
|
257
|
+
var d = _step4.value;
|
258
|
+
d.dispose();
|
259
|
+
}
|
260
|
+
} catch (err) {
|
261
|
+
_iterator4.e(err);
|
262
|
+
} finally {
|
263
|
+
_iterator4.f();
|
264
|
+
}
|
265
|
+
};
|
266
|
+
}
|
267
|
+
}
|
268
|
+
|
269
|
+
function getFragmentState(environment, fragmentSelector, isPlural) {
|
270
|
+
if (fragmentSelector == null) {
|
271
|
+
return {
|
272
|
+
kind: 'bailout'
|
273
|
+
};
|
274
|
+
} else if (fragmentSelector.kind === 'PluralReaderSelector') {
|
275
|
+
return {
|
276
|
+
kind: 'plural',
|
277
|
+
snapshots: fragmentSelector.selectors.map(function (s) {
|
278
|
+
return environment.lookup(s);
|
279
|
+
}),
|
280
|
+
epoch: environment.getStore().getEpoch()
|
281
|
+
};
|
282
|
+
} else {
|
283
|
+
return {
|
284
|
+
kind: 'singular',
|
285
|
+
snapshot: environment.lookup(fragmentSelector),
|
286
|
+
epoch: environment.getStore().getEpoch()
|
287
|
+
};
|
288
|
+
}
|
289
|
+
} // fragmentNode cannot change during the lifetime of the component, though fragmentRef may change.
|
290
|
+
|
291
|
+
|
292
|
+
function useFragmentInternal_REACT_CACHE(fragmentNode, fragmentRef, hookDisplayName, queryOptions, fragmentKey) {
|
293
|
+
var _fragmentNode$metadat, _fragmentNode$metadat2;
|
294
|
+
|
295
|
+
var fragmentSelector = useMemo(function () {
|
296
|
+
return getSelector(fragmentNode, fragmentRef);
|
297
|
+
}, [fragmentNode, fragmentRef]);
|
298
|
+
var isPlural = (fragmentNode === null || fragmentNode === void 0 ? void 0 : (_fragmentNode$metadat = fragmentNode.metadata) === null || _fragmentNode$metadat === void 0 ? void 0 : _fragmentNode$metadat.plural) === true;
|
299
|
+
|
300
|
+
if (isPlural) {
|
301
|
+
!(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;
|
302
|
+
} else {
|
303
|
+
!!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;
|
304
|
+
}
|
305
|
+
|
306
|
+
!(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;
|
307
|
+
var environment = useRelayEnvironment();
|
308
|
+
|
309
|
+
var _useState = useState(function () {
|
310
|
+
return getFragmentState(environment, fragmentSelector, isPlural);
|
311
|
+
}),
|
312
|
+
rawState = _useState[0],
|
313
|
+
setState = _useState[1]; // On second look this separate rawState may not be needed at all, it can just be
|
314
|
+
// put into getFragmentState. Exception: can we properly handle the case where the
|
315
|
+
// fragmentRef goes from non-null to null?
|
316
|
+
|
317
|
+
|
318
|
+
var stateFromRawState = function stateFromRawState(state) {
|
319
|
+
if (fragmentRef == null) {
|
320
|
+
return {
|
321
|
+
kind: 'bailout'
|
322
|
+
};
|
323
|
+
} else if (state.kind === 'plural' && state.snapshots.length === 0) {
|
324
|
+
return {
|
325
|
+
kind: 'bailout'
|
326
|
+
};
|
327
|
+
} else {
|
328
|
+
return state;
|
329
|
+
}
|
330
|
+
};
|
331
|
+
|
332
|
+
var state = stateFromRawState(rawState); // This copy of the state we only update when something requires us to
|
333
|
+
// unsubscribe and re-subscribe, namely a changed environment or
|
334
|
+
// fragment selector.
|
335
|
+
|
336
|
+
var _useState2 = useState(state),
|
337
|
+
rawSubscribedState = _useState2[0],
|
338
|
+
setSubscribedState = _useState2[1]; // FIXME since this is used as an effect dependency, it needs to be memoized.
|
339
|
+
|
340
|
+
|
341
|
+
var subscribedState = stateFromRawState(rawSubscribedState);
|
342
|
+
|
343
|
+
var _useState3 = useState(fragmentSelector),
|
344
|
+
previousFragmentSelector = _useState3[0],
|
345
|
+
setPreviousFragmentSelector = _useState3[1];
|
346
|
+
|
347
|
+
var _useState4 = useState(environment),
|
348
|
+
previousEnvironment = _useState4[0],
|
349
|
+
setPreviousEnvironment = _useState4[1];
|
350
|
+
|
351
|
+
if (!areEqualSelectors(fragmentSelector, previousFragmentSelector) || environment !== previousEnvironment) {
|
352
|
+
// Enqueue setState to record the new selector and state
|
353
|
+
setPreviousFragmentSelector(fragmentSelector);
|
354
|
+
setPreviousEnvironment(environment);
|
355
|
+
var newState = stateFromRawState(getFragmentState(environment, fragmentSelector, isPlural));
|
356
|
+
setState(newState);
|
357
|
+
setSubscribedState(newState); // This causes us to form a new subscription
|
358
|
+
// But render with the latest state w/o waiting for the setState. Otherwise
|
359
|
+
// the component would render the wrong information temporarily (including
|
360
|
+
// possibly incorrectly triggering some warnings below).
|
361
|
+
|
362
|
+
state = newState;
|
363
|
+
subscribedState = newState;
|
364
|
+
} // Handle the queries for any missing client edges; this may suspend.
|
365
|
+
// FIXME handle client edges in parallel.
|
366
|
+
|
367
|
+
|
368
|
+
if (((_fragmentNode$metadat2 = fragmentNode.metadata) === null || _fragmentNode$metadat2 === void 0 ? void 0 : _fragmentNode$metadat2.hasClientEdges) === true) {
|
369
|
+
// The fragment is validated to be static (in useFragment) and hasClientEdges is
|
370
|
+
// a static (constant) property of the fragment. In practice, this effect will
|
371
|
+
// always or never run for a given invocation of this hook.
|
372
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
373
|
+
var effects = useMemo(function () {
|
374
|
+
var missingClientEdges = getMissingClientEdges(state); // eslint-disable-next-line no-shadow
|
375
|
+
|
376
|
+
var effects;
|
377
|
+
|
378
|
+
if (missingClientEdges === null || missingClientEdges === void 0 ? void 0 : missingClientEdges.length) {
|
379
|
+
effects = [];
|
380
|
+
|
381
|
+
var _iterator5 = (0, _createForOfIteratorHelper2["default"])(missingClientEdges),
|
382
|
+
_step5;
|
383
|
+
|
384
|
+
try {
|
385
|
+
for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
|
386
|
+
var edge = _step5.value;
|
387
|
+
effects.push(handleMissingClientEdge(environment, fragmentNode, fragmentRef, edge, queryOptions));
|
388
|
+
}
|
389
|
+
} catch (err) {
|
390
|
+
_iterator5.e(err);
|
391
|
+
} finally {
|
392
|
+
_iterator5.f();
|
393
|
+
}
|
394
|
+
}
|
395
|
+
|
396
|
+
return effects;
|
397
|
+
}, [state, environment, fragmentNode, fragmentRef, queryOptions]); // See above note
|
398
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
399
|
+
|
400
|
+
useEffect(function () {
|
401
|
+
if (effects === null || effects === void 0 ? void 0 : effects.length) {
|
402
|
+
var cleanups = [];
|
403
|
+
|
404
|
+
var _iterator6 = (0, _createForOfIteratorHelper2["default"])(effects),
|
405
|
+
_step6;
|
406
|
+
|
407
|
+
try {
|
408
|
+
for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
|
409
|
+
var effect = _step6.value;
|
410
|
+
cleanups.push(effect());
|
411
|
+
}
|
412
|
+
} catch (err) {
|
413
|
+
_iterator6.e(err);
|
414
|
+
} finally {
|
415
|
+
_iterator6.f();
|
416
|
+
}
|
417
|
+
|
418
|
+
return function () {
|
419
|
+
var _iterator7 = (0, _createForOfIteratorHelper2["default"])(cleanups),
|
420
|
+
_step7;
|
421
|
+
|
422
|
+
try {
|
423
|
+
for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
|
424
|
+
var cleanup = _step7.value;
|
425
|
+
cleanup();
|
426
|
+
}
|
427
|
+
} catch (err) {
|
428
|
+
_iterator7.e(err);
|
429
|
+
} finally {
|
430
|
+
_iterator7.f();
|
431
|
+
}
|
432
|
+
};
|
433
|
+
}
|
434
|
+
}, [effects]);
|
435
|
+
}
|
436
|
+
|
437
|
+
if (isMissingData(state)) {
|
438
|
+
// Suspend if an active operation bears on this fragment, either the
|
439
|
+
// fragment's owner or some other mutation etc. that could affect it:
|
440
|
+
!(fragmentSelector != null) ? process.env.NODE_ENV !== "production" ? invariant(false, 'refinement, see invariants above') : invariant(false) : void 0;
|
441
|
+
var fragmentOwner = fragmentSelector.kind === 'PluralReaderSelector' ? fragmentSelector.selectors[0].owner : fragmentSelector.owner;
|
442
|
+
var pendingOperationsResult = getPendingOperationsForFragment(environment, fragmentNode, fragmentOwner);
|
443
|
+
|
444
|
+
if (pendingOperationsResult) {
|
445
|
+
throw pendingOperationsResult.promise;
|
446
|
+
} // Report required fields only if we're not suspending, since that means
|
447
|
+
// they're missing even though we are out of options for possibly fetching them:
|
448
|
+
|
449
|
+
|
450
|
+
handlePotentialSnapshotErrorsForState(environment, state);
|
451
|
+
}
|
452
|
+
|
453
|
+
useEffect(function () {
|
454
|
+
// Check for updates since the state was rendered
|
455
|
+
var currentState = subscribedState;
|
456
|
+
var updates = handleMissedUpdates(environment, subscribedState);
|
457
|
+
|
458
|
+
if (updates !== null) {
|
459
|
+
var didMissUpdates = updates[0],
|
460
|
+
updatedState = updates[1]; // TODO: didMissUpdates only checks for changes to snapshot data, but it's possible
|
461
|
+
// that other snapshot properties may have changed that should also trigger a re-render,
|
462
|
+
// such as changed missing resolver fields, missing client edges, etc.
|
463
|
+
// A potential alternative is for handleMissedUpdates() to recycle the entire state
|
464
|
+
// value, and return the new (recycled) state only if there was some change. In that
|
465
|
+
// case the code would always setState if something in the snapshot changed, in addition
|
466
|
+
// to using the latest snapshot to subscribe.
|
467
|
+
|
468
|
+
if (didMissUpdates) {
|
469
|
+
setState(updatedState);
|
470
|
+
}
|
471
|
+
|
472
|
+
currentState = updatedState;
|
473
|
+
}
|
474
|
+
|
475
|
+
return subscribeToSnapshot(environment, currentState, function (updater) {
|
476
|
+
setState(function (latestState) {
|
477
|
+
var _latestState$snapshot, _currentState$snapsho;
|
478
|
+
|
479
|
+
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)) {
|
480
|
+
// Ignore updates to the subscription if it's for a previous fragment selector
|
481
|
+
// than the latest one to be rendered. This can happen if the store is updated
|
482
|
+
// after we re-render with a new fragmentRef prop but before the effect fires
|
483
|
+
// in which we unsubscribe to the old one and subscribe to the new one.
|
484
|
+
// (NB: it's safe to compare the selectors by reference because the selector
|
485
|
+
// is recycled into new snapshots.)
|
486
|
+
return latestState;
|
487
|
+
} else {
|
488
|
+
return updater(latestState);
|
489
|
+
}
|
490
|
+
});
|
491
|
+
});
|
492
|
+
}, [environment, subscribedState]);
|
493
|
+
var data;
|
494
|
+
|
495
|
+
if (isPlural) {
|
496
|
+
// Plural fragments require allocating an array of the snasphot data values,
|
497
|
+
// which has to be memoized to avoid triggering downstream re-renders.
|
498
|
+
//
|
499
|
+
// Note that isPlural is a constant property of the fragment and does not change
|
500
|
+
// for a particular useFragment invocation site
|
501
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
502
|
+
data = useMemo(function () {
|
503
|
+
if (state.kind === 'bailout') {
|
504
|
+
return [];
|
505
|
+
} else {
|
506
|
+
!(state.kind === 'plural') ? process.env.NODE_ENV !== "production" ? invariant(false, 'Expected state to be plural because fragment is plural') : invariant(false) : void 0;
|
507
|
+
return state.snapshots.map(function (s) {
|
508
|
+
return s.data;
|
509
|
+
});
|
510
|
+
}
|
511
|
+
}, [state]);
|
512
|
+
} else if (state.kind === 'bailout') {
|
513
|
+
// This case doesn't allocate a new object so it doesn't have to be memoized
|
514
|
+
data = null;
|
515
|
+
} else {
|
516
|
+
// This case doesn't allocate a new object so it doesn't have to be memoized
|
517
|
+
!(state.kind === 'singular') ? process.env.NODE_ENV !== "production" ? invariant(false, 'Expected state to be singular because fragment is singular') : invariant(false) : void 0;
|
518
|
+
data = state.snapshot.data;
|
519
|
+
}
|
520
|
+
|
521
|
+
if (process.env.NODE_ENV !== "production") {
|
522
|
+
if (fragmentRef != null && (data === undefined || Array.isArray(data) && data.length > 0 && data.every(function (d) {
|
523
|
+
return d === undefined;
|
524
|
+
}))) {
|
525
|
+
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;
|
526
|
+
}
|
527
|
+
}
|
528
|
+
|
529
|
+
if (process.env.NODE_ENV !== "production") {
|
530
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
531
|
+
useDebugValue({
|
532
|
+
fragment: fragmentNode.name,
|
533
|
+
data: data
|
534
|
+
});
|
535
|
+
}
|
536
|
+
|
537
|
+
return data;
|
538
|
+
}
|
539
|
+
|
540
|
+
module.exports = useFragmentInternal_REACT_CACHE;
|
@@ -0,0 +1,51 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
3
|
+
*
|
4
|
+
* This source code is licensed under the MIT license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*
|
7
|
+
* @emails oncall+relay
|
8
|
+
*
|
9
|
+
* @format
|
10
|
+
*/
|
11
|
+
// flowlint ambiguous-object-type:error
|
12
|
+
'use strict';
|
13
|
+
|
14
|
+
var _require = require('../loadQuery'),
|
15
|
+
useTrackLoadQueryInRender = _require.useTrackLoadQueryInRender;
|
16
|
+
|
17
|
+
var useStaticFragmentNodeWarning = require('../useStaticFragmentNodeWarning');
|
18
|
+
|
19
|
+
var useFragmentInternal = require('./useFragmentInternal_REACT_CACHE');
|
20
|
+
|
21
|
+
var _require2 = require('react'),
|
22
|
+
useDebugValue = _require2.useDebugValue;
|
23
|
+
|
24
|
+
var _require3 = require('relay-runtime'),
|
25
|
+
getFragment = _require3.getFragment;
|
26
|
+
|
27
|
+
function useFragment(fragment, key) {
|
28
|
+
// We need to use this hook in order to be able to track if
|
29
|
+
// loadQuery was called during render
|
30
|
+
useTrackLoadQueryInRender();
|
31
|
+
var fragmentNode = getFragment(fragment);
|
32
|
+
|
33
|
+
if (process.env.NODE_ENV !== "production") {
|
34
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
35
|
+
useStaticFragmentNodeWarning(fragmentNode, 'first argument of useFragment()');
|
36
|
+
}
|
37
|
+
|
38
|
+
var data = useFragmentInternal(fragmentNode, key, 'useFragment()');
|
39
|
+
|
40
|
+
if (process.env.NODE_ENV !== "production") {
|
41
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
42
|
+
useDebugValue({
|
43
|
+
fragment: fragmentNode.name,
|
44
|
+
data: data
|
45
|
+
});
|
46
|
+
}
|
47
|
+
|
48
|
+
return data;
|
49
|
+
}
|
50
|
+
|
51
|
+
module.exports = useFragment;
|
@@ -0,0 +1,56 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
3
|
+
*
|
4
|
+
* This source code is licensed under the MIT license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*
|
7
|
+
*
|
8
|
+
* @emails oncall+relay
|
9
|
+
* @format
|
10
|
+
*/
|
11
|
+
// flowlint ambiguous-object-type:error
|
12
|
+
'use strict';
|
13
|
+
|
14
|
+
var _require = require('../loadQuery'),
|
15
|
+
useTrackLoadQueryInRender = _require.useTrackLoadQueryInRender;
|
16
|
+
|
17
|
+
var useMemoOperationDescriptor = require('../useMemoOperationDescriptor');
|
18
|
+
|
19
|
+
var useRelayEnvironment = require('../useRelayEnvironment');
|
20
|
+
|
21
|
+
var getQueryResultOrFetchQuery = require('./getQueryResultOrFetchQuery_REACT_CACHE');
|
22
|
+
|
23
|
+
var useFragmentInternal = require('./useFragmentInternal_REACT_CACHE');
|
24
|
+
|
25
|
+
var _require2 = require('react'),
|
26
|
+
useEffect = _require2.useEffect;
|
27
|
+
|
28
|
+
function useLazyLoadQuery_REACT_CACHE(gqlQuery, variables, options) {
|
29
|
+
var _options$networkCache;
|
30
|
+
|
31
|
+
useTrackLoadQueryInRender();
|
32
|
+
var environment = useRelayEnvironment();
|
33
|
+
var queryOperationDescriptor = useMemoOperationDescriptor(gqlQuery, variables, (_options$networkCache = options === null || options === void 0 ? void 0 : options.networkCacheConfig) !== null && _options$networkCache !== void 0 ? _options$networkCache : {
|
34
|
+
force: true
|
35
|
+
}); // Get the query going if needed -- this may suspend.
|
36
|
+
|
37
|
+
var _getQueryResultOrFetc = getQueryResultOrFetchQuery(environment, queryOperationDescriptor, {
|
38
|
+
fetchPolicy: options === null || options === void 0 ? void 0 : options.fetchPolicy,
|
39
|
+
renderPolicy: options === null || options === void 0 ? void 0 : options.UNSTABLE_renderPolicy,
|
40
|
+
fetchKey: options === null || options === void 0 ? void 0 : options.fetchKey
|
41
|
+
}),
|
42
|
+
queryResult = _getQueryResultOrFetc[0],
|
43
|
+
effect = _getQueryResultOrFetc[1];
|
44
|
+
|
45
|
+
useEffect(effect); // Read the query's root fragment -- this may suspend.
|
46
|
+
|
47
|
+
var fragmentNode = queryResult.fragmentNode,
|
48
|
+
fragmentRef = queryResult.fragmentRef; // $FlowExpectedError[incompatible-return] Is this a fixable incompatible-return?
|
49
|
+
|
50
|
+
return useFragmentInternal(fragmentNode, fragmentRef, 'useLazyLoadQuery()', {
|
51
|
+
fetchPolicy: options === null || options === void 0 ? void 0 : options.fetchPolicy,
|
52
|
+
networkCacheConfig: options === null || options === void 0 ? void 0 : options.networkCacheConfig
|
53
|
+
});
|
54
|
+
}
|
55
|
+
|
56
|
+
module.exports = useLazyLoadQuery_REACT_CACHE;
|