react-relay 15.0.0 → 16.0.0
Sign up to get free protection for your applications and to get access to all the features.
- package/ReactRelayContext.js +1 -1
- package/ReactRelayQueryFetcher.js.flow +1 -5
- package/ReactRelayQueryRenderer.js.flow +9 -36
- package/ReactRelayTypes.js.flow +1 -0
- package/buildReactRelayContainer.js.flow +3 -1
- package/hooks.js +1 -1
- package/index.js +1 -1
- package/legacy.js +1 -1
- package/lib/ReactRelayContainerUtils.js +0 -11
- package/lib/ReactRelayContext.js +0 -11
- package/lib/ReactRelayFragmentContainer.js +6 -78
- package/lib/ReactRelayFragmentMockRenderer.js +0 -11
- package/lib/ReactRelayLocalQueryRenderer.js +0 -17
- package/lib/ReactRelayPaginationContainer.js +5 -208
- package/lib/ReactRelayQueryFetcher.js +2 -51
- package/lib/ReactRelayQueryRenderer.js +6 -94
- package/lib/ReactRelayQueryRendererContext.js +0 -11
- package/lib/ReactRelayRefetchContainer.js +5 -91
- package/lib/ReactRelayTestMocker.js +9 -85
- package/lib/ReactRelayTypes.js +0 -11
- package/lib/RelayContext.js +0 -21
- package/lib/assertFragmentMap.js +0 -15
- package/lib/buildReactRelayContainer.js +0 -19
- package/lib/getRootVariablesForFragments.js +0 -14
- package/lib/hooks.js +0 -15
- package/lib/index.js +0 -17
- package/lib/isRelayEnvironment.js +1 -18
- package/lib/jest-react/enqueueTask.js +0 -20
- package/lib/jest-react/internalAct.js +0 -38
- package/lib/legacy.js +0 -15
- package/lib/multi-actor/ActorChange.js +0 -11
- package/lib/multi-actor/index.js +0 -11
- package/lib/multi-actor/useRelayActorEnvironment.js +0 -11
- package/lib/relay-hooks/EntryPointContainer.react.js +0 -11
- package/lib/relay-hooks/EntryPointTypes.flow.js +1 -14
- package/lib/relay-hooks/FragmentResource.js +76 -132
- package/lib/relay-hooks/HooksImplementation.js +0 -11
- package/lib/relay-hooks/InternalLogger.js +0 -11
- package/lib/relay-hooks/LRUCache.js +0 -22
- package/lib/relay-hooks/LazyLoadEntryPointContainer_DEPRECATED.react.js +0 -18
- package/lib/relay-hooks/MatchContainer.js +0 -94
- package/lib/relay-hooks/NestedRelayEntryPointBuilderUtils.js +9 -0
- package/lib/relay-hooks/ProfilerContext.js +0 -15
- package/lib/relay-hooks/QueryResource.js +2 -68
- package/lib/relay-hooks/RelayEnvironmentProvider.js +0 -11
- package/lib/relay-hooks/SuspenseResource.js +0 -34
- package/lib/relay-hooks/loadEntryPoint.js +1 -24
- package/lib/relay-hooks/loadQuery.js +2 -106
- package/lib/relay-hooks/preloadQuery_DEPRECATED.js +2 -27
- package/lib/relay-hooks/prepareEntryPoint_DEPRECATED.js +0 -13
- package/lib/relay-hooks/react-cache/RelayReactCache.js +0 -12
- package/lib/relay-hooks/react-cache/getQueryResultOrFetchQuery_REACT_CACHE.js +1 -36
- package/lib/relay-hooks/react-cache/readFragmentInternal_REACT_CACHE.js +3 -27
- package/lib/relay-hooks/react-cache/useFragmentInternal_REACT_CACHE.js +34 -99
- package/lib/relay-hooks/react-cache/useFragment_REACT_CACHE.js +0 -15
- package/lib/relay-hooks/react-cache/useLazyLoadQuery_REACT_CACHE.js +0 -16
- package/lib/relay-hooks/react-cache/usePaginationFragment_REACT_CACHE.js +1 -23
- package/lib/relay-hooks/react-cache/usePreloadedQuery_REACT_CACHE.js +0 -29
- package/lib/relay-hooks/react-cache/useRefetchableFragmentInternal_REACT_CACHE.js +12 -96
- package/lib/relay-hooks/react-cache/useRefetchableFragment_REACT_CACHE.js +0 -14
- package/lib/relay-hooks/useBlockingPaginationFragment.js +0 -42
- package/lib/relay-hooks/useClientQuery.js +0 -18
- package/lib/relay-hooks/useEntryPointLoader.js +0 -69
- package/lib/relay-hooks/useFetchTrackingRef.js +0 -26
- package/lib/relay-hooks/useFragment.js +0 -17
- package/lib/relay-hooks/useFragmentNode.js +2 -32
- package/lib/relay-hooks/useIsMountedRef.js +0 -11
- package/lib/relay-hooks/useIsOperationNodeActive.js +0 -11
- package/lib/relay-hooks/useIsParentQueryActive.js +0 -11
- package/lib/relay-hooks/useLazyLoadQuery.js +0 -18
- package/lib/relay-hooks/useLazyLoadQueryNode.js +0 -35
- package/lib/relay-hooks/useLoadMoreFunction.js +9 -34
- package/lib/relay-hooks/useMemoOperationDescriptor.js +0 -11
- package/lib/relay-hooks/useMemoVariables.js +0 -17
- package/lib/relay-hooks/useMutation.js +0 -11
- package/lib/relay-hooks/usePaginationFragment.js +1 -26
- package/lib/relay-hooks/usePreloadedQuery.js +0 -27
- package/lib/relay-hooks/useQueryLoader.js +0 -74
- package/lib/relay-hooks/useRefetchableFragment.js +0 -16
- package/lib/relay-hooks/useRefetchableFragmentNode.js +14 -97
- package/lib/relay-hooks/useRelayEnvironment.js +0 -11
- package/lib/relay-hooks/useStaticFragmentNodeWarning.js +0 -15
- package/lib/relay-hooks/useSubscribeToInvalidationState.js +0 -25
- package/lib/relay-hooks/useSubscription.js +0 -15
- package/lib/relay-hooks/useUnsafeRef_DEPRECATED.js +0 -17
- package/package.json +2 -2
- 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/relay-hooks/EntryPointContainer.react.js.flow +5 -0
- package/relay-hooks/EntryPointTypes.flow.js.flow +20 -19
- package/relay-hooks/FragmentResource.js.flow +114 -26
- package/relay-hooks/LazyLoadEntryPointContainer_DEPRECATED.react.js.flow +4 -2
- package/relay-hooks/NestedRelayEntryPointBuilderUtils.js.flow +51 -0
- package/relay-hooks/__flowtests__/EntryPointTypes/NestedEntrypoints-flowtest.js.flow +7 -5
- package/relay-hooks/__flowtests__/useBlockingPaginationFragment-flowtest.js.flow +5 -0
- package/relay-hooks/__flowtests__/usePaginationFragment-flowtest.js.flow +5 -0
- package/relay-hooks/__flowtests__/useRefetchableFragment-flowtest.js.flow +2 -0
- package/relay-hooks/loadEntryPoint.js.flow +4 -2
- package/relay-hooks/loadQuery.js.flow +21 -1
- package/relay-hooks/prepareEntryPoint_DEPRECATED.js.flow +4 -2
- package/relay-hooks/react-cache/readFragmentInternal_REACT_CACHE.js.flow +2 -1
- package/relay-hooks/react-cache/useFragmentInternal_REACT_CACHE.js.flow +28 -10
- package/relay-hooks/react-cache/useFragment_REACT_CACHE.js.flow +3 -9
- package/relay-hooks/react-cache/usePaginationFragment_REACT_CACHE.js.flow +28 -57
- package/relay-hooks/react-cache/useRefetchableFragmentInternal_REACT_CACHE.js.flow +19 -12
- package/relay-hooks/react-cache/useRefetchableFragment_REACT_CACHE.js.flow +15 -31
- package/relay-hooks/useBlockingPaginationFragment.js.flow +2 -4
- package/relay-hooks/useClientQuery.js.flow +2 -2
- package/relay-hooks/useFragmentNode.js.flow +2 -2
- package/relay-hooks/useLoadMoreFunction.js.flow +15 -9
- package/relay-hooks/useMutation.js.flow +26 -9
- package/relay-hooks/usePaginationFragment.js.flow +2 -8
- package/relay-hooks/useQueryLoader.js.flow +2 -8
- package/relay-hooks/useRefetchableFragment.js.flow +3 -2
- package/relay-hooks/useRefetchableFragmentNode.js.flow +28 -13
@@ -1,14 +1,3 @@
|
|
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
|
-
* @format
|
9
|
-
* @oncall relay
|
10
|
-
*/
|
11
|
-
|
12
1
|
'use strict';
|
13
2
|
|
14
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
|
@@ -45,138 +34,6 @@ var _require3 = require('relay-runtime'),
|
|
45
34
|
isScalarAndEqual = _require3.isScalarAndEqual;
|
46
35
|
var warning = require("fbjs/lib/warning");
|
47
36
|
var FORWARD = 'forward';
|
48
|
-
/**
|
49
|
-
* Extends the functionality of RelayFragmentContainer by providing a mechanism
|
50
|
-
* to load more data from a connection.
|
51
|
-
*
|
52
|
-
* # Configuring a PaginationContainer
|
53
|
-
*
|
54
|
-
* PaginationContainer accepts the standard FragmentContainer arguments and an
|
55
|
-
* additional `connectionConfig` argument:
|
56
|
-
*
|
57
|
-
* - `Component`: the component to be wrapped/rendered.
|
58
|
-
* - `fragments`: an object whose values are `graphql` fragments. The object
|
59
|
-
* keys determine the prop names by which fragment data is available.
|
60
|
-
* - `connectionConfig`: an object that determines how to load more connection
|
61
|
-
* data. Details below.
|
62
|
-
*
|
63
|
-
* # Loading More Data
|
64
|
-
*
|
65
|
-
* Use `props.relay.hasMore()` to determine if there are more items to load.
|
66
|
-
*
|
67
|
-
* ```
|
68
|
-
* hasMore(): boolean
|
69
|
-
* ```
|
70
|
-
*
|
71
|
-
* Use `props.relay.isLoading()` to determine if a previous call to `loadMore()`
|
72
|
-
* is still pending. This is convenient for avoiding duplicate load calls.
|
73
|
-
*
|
74
|
-
* ```
|
75
|
-
* isLoading(): boolean
|
76
|
-
* ```
|
77
|
-
*
|
78
|
-
* Use `props.relay.loadMore()` to load more items. This will return null if
|
79
|
-
* there are no more items to fetch, otherwise it will fetch more items and
|
80
|
-
* return a Disposable that can be used to cancel the fetch.
|
81
|
-
*
|
82
|
-
* `pageSize` should be the number of *additional* items to fetch (not the
|
83
|
-
* total).
|
84
|
-
*
|
85
|
-
* ```
|
86
|
-
* loadMore(pageSize: number, callback: ?(error: ?Error) => void): ?Disposable
|
87
|
-
* ```
|
88
|
-
*
|
89
|
-
* A complete example:
|
90
|
-
*
|
91
|
-
* ```
|
92
|
-
* class Foo extends React.Component {
|
93
|
-
* ...
|
94
|
-
* _onEndReached() {
|
95
|
-
* if (!this.props.relay.hasMore() || this.props.relay.isLoading()) {
|
96
|
-
* return;
|
97
|
-
* }
|
98
|
-
* this.props.relay.loadMore(10);
|
99
|
-
* }
|
100
|
-
* ...
|
101
|
-
* }
|
102
|
-
* ```
|
103
|
-
*
|
104
|
-
* # Connection Config
|
105
|
-
*
|
106
|
-
* Here's an example, followed by details of each config property:
|
107
|
-
*
|
108
|
-
* ```
|
109
|
-
* ReactRelayPaginationContainer.createContainer(
|
110
|
-
* Component,
|
111
|
-
* {
|
112
|
-
* user: graphql`fragment FriendsFragment on User {
|
113
|
-
* friends(after: $afterCursor first: $count) @connection {
|
114
|
-
* edges { ... }
|
115
|
-
* pageInfo {
|
116
|
-
* startCursor
|
117
|
-
* endCursor
|
118
|
-
* hasNextPage
|
119
|
-
* hasPreviousPage
|
120
|
-
* }
|
121
|
-
* }
|
122
|
-
* }`,
|
123
|
-
* },
|
124
|
-
* {
|
125
|
-
* direction: 'forward',
|
126
|
-
* getConnectionFromProps(props) {
|
127
|
-
* return props.user && props.user.friends;
|
128
|
-
* },
|
129
|
-
* getFragmentVariables(vars, totalCount) {
|
130
|
-
* // The component presumably wants *all* edges, not just those after
|
131
|
-
* // the cursor, so notice that we don't set $afterCursor here.
|
132
|
-
* return {
|
133
|
-
* ...vars,
|
134
|
-
* count: totalCount,
|
135
|
-
* };
|
136
|
-
* },
|
137
|
-
* getVariables(props, {count, cursor}, fragmentVariables) {
|
138
|
-
* return {
|
139
|
-
* id: props.user.id,
|
140
|
-
* afterCursor: cursor,
|
141
|
-
* count,
|
142
|
-
* },
|
143
|
-
* },
|
144
|
-
* query: graphql`
|
145
|
-
* query FriendsQuery($id: ID!, $afterCursor: ID, $count: Int!) {
|
146
|
-
* node(id: $id) {
|
147
|
-
* ...FriendsFragment
|
148
|
-
* }
|
149
|
-
* }
|
150
|
-
* `,
|
151
|
-
* }
|
152
|
-
* );
|
153
|
-
* ```
|
154
|
-
*
|
155
|
-
* ## Config Properties
|
156
|
-
*
|
157
|
-
* - `direction`: Either "forward" to indicate forward pagination using
|
158
|
-
* after/first, or "backward" to indicate backward pagination using
|
159
|
-
* before/last.
|
160
|
-
* - `getConnectionFromProps(props)`: PaginationContainer doesn't magically know
|
161
|
-
* which connection data you mean to fetch more of (a container might fetch
|
162
|
-
* multiple connections, but can only paginate one of them). This function is
|
163
|
-
* given the fragment props only (not full props), and should return the
|
164
|
-
* connection data. See the above example that returns the friends data via
|
165
|
-
* `props.user.friends`.
|
166
|
-
* - `getFragmentVariables(previousVars, totalCount)`: Given the previous variables
|
167
|
-
* and the new total number of items, get the variables to use when reading
|
168
|
-
* your fragments. Typically this means setting whatever your local "count"
|
169
|
-
* variable is to the value of `totalCount`. See the example.
|
170
|
-
* - `getVariables(props, {count, cursor})`: Get the variables to use when
|
171
|
-
* fetching the pagination `query`. You may determine the root object id from
|
172
|
-
* props (see the example that uses `props.user.id`) and may also set whatever
|
173
|
-
* variables you use for the after/first/before/last calls based on the count
|
174
|
-
* and cursor.
|
175
|
-
* - `query`: A query to use when fetching more connection data. This should
|
176
|
-
* typically reference one of the container's fragment (as in the example)
|
177
|
-
* to ensure that all the necessary fields for sub-components are fetched.
|
178
|
-
*/
|
179
|
-
|
180
37
|
function createGetConnectionFromProps(metadata) {
|
181
38
|
var path = metadata.path;
|
182
39
|
!path ? process.env.NODE_ENV !== "production" ? invariant(false, 'ReactRelayPaginationContainer: Unable to synthesize a ' + 'getConnectionFromProps function.') : invariant(false) : void 0;
|
@@ -204,9 +61,6 @@ function findConnectionMetadata(fragments) {
|
|
204
61
|
for (var fragmentName in fragments) {
|
205
62
|
var fragment = fragments[fragmentName];
|
206
63
|
var connectionMetadata = fragment.metadata && fragment.metadata.connection;
|
207
|
-
// HACK: metadata is always set to `undefined` in classic. In modern, even
|
208
|
-
// if empty, it is set to null (never undefined). We use that knowlege to
|
209
|
-
// check if we're dealing with classic or modern
|
210
64
|
if (fragment.metadata !== undefined) {
|
211
65
|
isRelayModern = true;
|
212
66
|
}
|
@@ -241,8 +95,6 @@ function createContainerWithFragments(Component, fragments, connectionConfig) {
|
|
241
95
|
var getFragmentVariables = connectionConfig.getFragmentVariables || createGetFragmentVariables(metadata);
|
242
96
|
return _class = /*#__PURE__*/function (_React$Component) {
|
243
97
|
(0, _inheritsLoose2["default"])(_class, _React$Component);
|
244
|
-
// $FlowFixMe[missing-local-annot]
|
245
|
-
|
246
98
|
function _class(props) {
|
247
99
|
var _props$__rootIsQueryR, _this;
|
248
100
|
_this = _React$Component.call(this, props) || this;
|
@@ -346,13 +198,7 @@ function createContainerWithFragments(Component, fragments, connectionConfig) {
|
|
346
198
|
this._rerenderIfStoreHasChanged();
|
347
199
|
}
|
348
200
|
}
|
349
|
-
}
|
350
|
-
|
351
|
-
/**
|
352
|
-
* When new props are received, read data for the new props and subscribe
|
353
|
-
* for updates. Props may be the same in which case previous data and
|
354
|
-
* subscriptions can be reused.
|
355
|
-
*/;
|
201
|
+
};
|
356
202
|
_proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
|
357
203
|
var _this2 = this;
|
358
204
|
var _nextProps$__rootIsQu;
|
@@ -362,15 +208,8 @@ function createContainerWithFragments(Component, fragments, connectionConfig) {
|
|
362
208
|
var nextIDs = getDataIDsFromObject(fragments, nextProps);
|
363
209
|
var prevRootVariables = getRootVariablesForFragments(fragments, this.props);
|
364
210
|
var nextRootVariables = getRootVariablesForFragments(fragments, nextProps);
|
365
|
-
|
366
|
-
// If the environment has changed or props point to new records then
|
367
|
-
// previously fetched data and any pending fetches no longer apply:
|
368
|
-
// - Existing references are on the old environment.
|
369
|
-
// - Existing references are based on old variables.
|
370
|
-
// - Pending fetches are for the previous records.
|
371
211
|
if (relayContext.environment !== this.state.prevContext.environment || !areEqual(prevRootVariables, nextRootVariables) || !areEqual(prevIDs, nextIDs)) {
|
372
212
|
this._cleanup();
|
373
|
-
// Child containers rely on context.relay being mutated (for gDSFP).
|
374
213
|
if (RelayFeatureFlags.ENABLE_CONTAINERS_SUBSCRIBE_ON_COMMIT === true) {
|
375
214
|
this._resolver = createFragmentSpecResolver(relayContext, containerName, fragments, nextProps, rootIsQueryRenderer);
|
376
215
|
} else {
|
@@ -399,12 +238,9 @@ function createContainerWithFragments(Component, fragments, connectionConfig) {
|
|
399
238
|
this._cleanup();
|
400
239
|
};
|
401
240
|
_proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
|
402
|
-
// Short-circuit if any Relay-related data has changed
|
403
241
|
if (nextState.data !== this.state.data || nextState.relayProp !== this.state.relayProp || nextState.resolverGeneration !== this.state.resolverGeneration) {
|
404
242
|
return true;
|
405
243
|
}
|
406
|
-
// Otherwise, for convenience short-circuit if all non-Relay props
|
407
|
-
// are scalar and equal
|
408
244
|
var keys = Object.keys(nextProps);
|
409
245
|
for (var ii = 0; ii < keys.length; ii++) {
|
410
246
|
var key = keys[ii];
|
@@ -431,8 +267,6 @@ function createContainerWithFragments(Component, fragments, connectionConfig) {
|
|
431
267
|
};
|
432
268
|
_proto._rerenderIfStoreHasChanged = function _rerenderIfStoreHasChanged() {
|
433
269
|
var data = this.state.data;
|
434
|
-
// External values could change between render and commit.
|
435
|
-
// Check for this case, even though it requires an extra store read.
|
436
270
|
var maybeNewData = this._resolver.resolve();
|
437
271
|
if (data !== maybeNewData) {
|
438
272
|
this.setState({
|
@@ -443,26 +277,14 @@ function createContainerWithFragments(Component, fragments, connectionConfig) {
|
|
443
277
|
_proto._subscribeToNewResolverAndRerenderIfStoreHasChanged = function _subscribeToNewResolverAndRerenderIfStoreHasChanged() {
|
444
278
|
var data = this.state.data;
|
445
279
|
var maybeNewData = this._resolver.resolve();
|
446
|
-
|
447
|
-
// Event listeners are only safe to add during the commit phase,
|
448
|
-
// So they won't leak if render is interrupted or errors.
|
449
280
|
this._resolver.setCallback(this.props, this._handleFragmentDataUpdate);
|
450
|
-
|
451
|
-
// External values could change between render and commit.
|
452
|
-
// Check for this case, even though it requires an extra store read.
|
453
281
|
if (data !== maybeNewData) {
|
454
282
|
this.setState({
|
455
283
|
data: maybeNewData
|
456
284
|
});
|
457
285
|
}
|
458
|
-
}
|
459
|
-
|
460
|
-
/**
|
461
|
-
* Render new data for the existing props/context.
|
462
|
-
*/;
|
286
|
+
};
|
463
287
|
_proto._getConnectionData = function _getConnectionData() {
|
464
|
-
// Extract connection data and verify there are more edges to fetch
|
465
|
-
// eslint-disable-next-line no-unused-vars
|
466
288
|
var _this$props = this.props,
|
467
289
|
_ = _this$props.componentRef,
|
468
290
|
restProps = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, _excluded);
|
@@ -549,16 +371,6 @@ function createContainerWithFragments(Component, fragments, connectionConfig) {
|
|
549
371
|
var prevData = _this3._resolver.resolve();
|
550
372
|
_this3._resolver.setVariables(getFragmentVariables(fragmentVariables, paginatingVariables.totalCount), operation.request.node);
|
551
373
|
var nextData = _this3._resolver.resolve();
|
552
|
-
|
553
|
-
// Workaround slightly different handling for connection in different
|
554
|
-
// core implementations:
|
555
|
-
// - Classic core requires the count to be explicitly incremented
|
556
|
-
// - Modern core automatically appends new items, updating the count
|
557
|
-
// isn't required to see new data.
|
558
|
-
//
|
559
|
-
// `setState` is only required if changing the variables would change the
|
560
|
-
// resolved data.
|
561
|
-
// TODO #14894725: remove PaginationContainer equal check
|
562
374
|
if (!areEqual(prevData, nextData)) {
|
563
375
|
_this3.setState({
|
564
376
|
data: nextData,
|
@@ -584,13 +396,11 @@ function createContainerWithFragments(Component, fragments, connectionConfig) {
|
|
584
396
|
}).mergeMap(function (payload) {
|
585
397
|
return Observable.create(function (sink) {
|
586
398
|
onNext(payload, function () {
|
587
|
-
sink.next();
|
399
|
+
sink.next();
|
588
400
|
sink.complete();
|
589
401
|
});
|
590
402
|
});
|
591
|
-
})
|
592
|
-
// use do instead of finally so that observer's `complete` fires after cleanup
|
593
|
-
["do"]({
|
403
|
+
})["do"]({
|
594
404
|
error: cleanup,
|
595
405
|
complete: cleanup,
|
596
406
|
unsubscribe: cleanup
|
@@ -610,12 +420,8 @@ function createContainerWithFragments(Component, fragments, connectionConfig) {
|
|
610
420
|
if (this._queryFetcher) {
|
611
421
|
this._queryFetcher.dispose();
|
612
422
|
}
|
613
|
-
}
|
614
|
-
|
615
|
-
// $FlowFixMe[missing-local-annot]
|
616
|
-
;
|
423
|
+
};
|
617
424
|
_proto.render = function render() {
|
618
|
-
// eslint-disable-next-line no-unused-vars
|
619
425
|
var _this$props3 = this.props,
|
620
426
|
componentRef = _this$props3.componentRef,
|
621
427
|
__relayContext = _this$props3.__relayContext,
|
@@ -631,16 +437,7 @@ function createContainerWithFragments(Component, fragments, connectionConfig) {
|
|
631
437
|
return _class;
|
632
438
|
}(React.Component), (0, _defineProperty2["default"])(_class, "displayName", containerName), _class;
|
633
439
|
}
|
634
|
-
|
635
|
-
/**
|
636
|
-
* Wrap the basic `createContainer()` function with logic to adapt to the
|
637
|
-
* `context.relay.environment` in which it is rendered. Specifically, the
|
638
|
-
* extraction of the environment-specific version of fragments in the
|
639
|
-
* `fragmentSpec` is memoized once per environment, rather than once per
|
640
|
-
* instance of the container constructed/rendered.
|
641
|
-
*/
|
642
440
|
function createContainer(Component, fragmentSpec, connectionConfig) {
|
643
|
-
// $FlowFixMe[incompatible-return]
|
644
441
|
return buildReactRelayContainer(Component, fragmentSpec, function (ComponentClass, fragments) {
|
645
442
|
return createContainerWithFragments(ComponentClass, fragments, connectionConfig);
|
646
443
|
});
|
@@ -1,14 +1,3 @@
|
|
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
|
-
* @format
|
9
|
-
* @oncall relay
|
10
|
-
*/
|
11
|
-
|
12
1
|
'use strict';
|
13
2
|
|
14
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
|
@@ -45,7 +34,6 @@ var ReactRelayQueryFetcher = /*#__PURE__*/function () {
|
|
45
34
|
};
|
46
35
|
_proto.getFetchResult = function getFetchResult() {
|
47
36
|
if (this._didFetchFinish) {
|
48
|
-
// We don't reset '_didFetchFinish' because another callback may be set
|
49
37
|
if (this._error != null) {
|
50
38
|
return {
|
51
39
|
error: this._error
|
@@ -67,8 +55,6 @@ var ReactRelayQueryFetcher = /*#__PURE__*/function () {
|
|
67
55
|
preservePreviousReferences = _ref$preservePrevious === void 0 ? false : _ref$preservePrevious;
|
68
56
|
var reference = environment.retain(operation);
|
69
57
|
var error = function error() {
|
70
|
-
// We may have partially fulfilled the request, so let the next request
|
71
|
-
// or the unmount dispose of the references.
|
72
58
|
_this._selectionReferences = _this._selectionReferences.concat(reference);
|
73
59
|
};
|
74
60
|
var complete = function complete() {
|
@@ -78,8 +64,6 @@ var ReactRelayQueryFetcher = /*#__PURE__*/function () {
|
|
78
64
|
_this._selectionReferences = _this._selectionReferences.concat(reference);
|
79
65
|
};
|
80
66
|
var unsubscribe = function unsubscribe() {
|
81
|
-
// Let the next request or the unmount code dispose of the references.
|
82
|
-
// We may have partially fulfilled the request.
|
83
67
|
_this._selectionReferences = _this._selectionReferences.concat(reference);
|
84
68
|
};
|
85
69
|
if (!isRelayModernEnvironment(environment)) {
|
@@ -100,12 +84,9 @@ var ReactRelayQueryFetcher = /*#__PURE__*/function () {
|
|
100
84
|
_proto.setOnDataChange = function setOnDataChange(onDataChange) {
|
101
85
|
!this._fetchOptions ? process.env.NODE_ENV !== "production" ? invariant(false, 'ReactRelayQueryFetcher: `setOnDataChange` should have been called after having called `fetch`') : invariant(false) : void 0;
|
102
86
|
if (typeof onDataChange === 'function') {
|
103
|
-
// Mutate the most recent fetchOptions in place,
|
104
|
-
// So that in-progress requests can access the updated callback.
|
105
87
|
this._fetchOptions.onDataChangeCallbacks = this._fetchOptions.onDataChangeCallbacks || [];
|
106
88
|
this._fetchOptions.onDataChangeCallbacks.push(onDataChange);
|
107
89
|
if (this._didFetchFinish) {
|
108
|
-
// We don't reset '_didFetchFinish' because another callback may be set
|
109
90
|
if (this._error != null) {
|
110
91
|
onDataChange({
|
111
92
|
error: this._error
|
@@ -117,17 +98,7 @@ var ReactRelayQueryFetcher = /*#__PURE__*/function () {
|
|
117
98
|
}
|
118
99
|
}
|
119
100
|
}
|
120
|
-
}
|
121
|
-
|
122
|
-
/**
|
123
|
-
* `fetch` fetches the data for the given operation.
|
124
|
-
* If a result is immediately available synchronously, it will be synchronously
|
125
|
-
* returned by this function.
|
126
|
-
*
|
127
|
-
* Otherwise, the fetched result will be communicated via the `onDataChange` callback.
|
128
|
-
* `onDataChange` will be called with the first result (**if it wasn't returned synchronously**),
|
129
|
-
* and then subsequently whenever the data changes.
|
130
|
-
*/;
|
101
|
+
};
|
131
102
|
_proto.fetch = function fetch(fetchOptions, cacheConfigOverride) {
|
132
103
|
var _this2 = this;
|
133
104
|
var environment = fetchOptions.environment,
|
@@ -143,7 +114,6 @@ var ReactRelayQueryFetcher = /*#__PURE__*/function () {
|
|
143
114
|
operation: operation
|
144
115
|
};
|
145
116
|
if (onDataChange && this._fetchOptions.onDataChangeCallbacks.indexOf(onDataChange) === -1) {
|
146
|
-
// $FlowFixMe[incompatible-use]
|
147
117
|
this._fetchOptions.onDataChangeCallbacks.push(onDataChange);
|
148
118
|
}
|
149
119
|
var operationOverride = cacheConfigOverride ? createOperationDescriptor(operation.request.node, operation.request.variables, cacheConfigOverride) : operation;
|
@@ -154,27 +124,17 @@ var ReactRelayQueryFetcher = /*#__PURE__*/function () {
|
|
154
124
|
_this2._pendingRequest = null;
|
155
125
|
}).subscribe({
|
156
126
|
next: function next() {
|
157
|
-
// If we received a response,
|
158
|
-
// Make a note that to notify the callback when it's later added.
|
159
127
|
_this2._didFetchFinish = true;
|
160
128
|
_this2._error = null;
|
161
|
-
|
162
|
-
// Only notify of the first result if `next` is being called **asynchronously**
|
163
|
-
// (i.e. after `fetch` has returned).
|
164
129
|
_this2._onQueryDataAvailable({
|
165
130
|
notifyFirstResult: fetchHasReturned
|
166
131
|
});
|
167
132
|
},
|
168
133
|
error: function error(err) {
|
169
|
-
// If we received a response when we didn't have a change callback,
|
170
|
-
// Make a note that to notify the callback when it's later added.
|
171
134
|
_this2._didFetchFinish = true;
|
172
135
|
_this2._error = err;
|
173
136
|
_this2._snapshot = null;
|
174
137
|
var onDataChangeCallbacks = _this2._fetchOptions && _this2._fetchOptions.onDataChangeCallbacks;
|
175
|
-
|
176
|
-
// Only notify of error if `error` is being called **asynchronously**
|
177
|
-
// (i.e. after `fetch` has returned).
|
178
138
|
if (fetchHasReturned) {
|
179
139
|
if (onDataChangeCallbacks) {
|
180
140
|
onDataChangeCallbacks.forEach(function (onDataChange) {
|
@@ -204,7 +164,7 @@ var ReactRelayQueryFetcher = /*#__PURE__*/function () {
|
|
204
164
|
return this.fetch({
|
205
165
|
environment: this._fetchOptions.environment,
|
206
166
|
operation: this._fetchOptions.operation,
|
207
|
-
onDataChange: null
|
167
|
+
onDataChange: null
|
208
168
|
}, cacheConfigOverride);
|
209
169
|
};
|
210
170
|
_proto.dispose = function dispose() {
|
@@ -214,8 +174,6 @@ var ReactRelayQueryFetcher = /*#__PURE__*/function () {
|
|
214
174
|
_proto.disposeRequest = function disposeRequest() {
|
215
175
|
this._error = null;
|
216
176
|
this._snapshot = null;
|
217
|
-
|
218
|
-
// order is important, dispose of pendingFetch before selectionReferences
|
219
177
|
if (this._pendingRequest) {
|
220
178
|
this._pendingRequest.dispose();
|
221
179
|
}
|
@@ -247,18 +205,11 @@ var ReactRelayQueryFetcher = /*#__PURE__*/function () {
|
|
247
205
|
environment = _this$_fetchOptions.environment,
|
248
206
|
onDataChangeCallbacks = _this$_fetchOptions.onDataChangeCallbacks,
|
249
207
|
operation = _this$_fetchOptions.operation;
|
250
|
-
|
251
|
-
// `_onQueryDataAvailable` can be called synchronously the first time and can be called
|
252
|
-
// multiple times by network layers that support data subscriptions.
|
253
|
-
// Wait until the first payload to call `onDataChange` and subscribe for data updates.
|
254
208
|
if (this._snapshot) {
|
255
209
|
return;
|
256
210
|
}
|
257
211
|
this._snapshot = environment.lookup(operation.fragment);
|
258
|
-
|
259
|
-
// Subscribe to changes in the data of the root fragment
|
260
212
|
this._rootSubscription = environment.subscribe(this._snapshot, function (snapshot) {
|
261
|
-
// Read from this._fetchOptions in case onDataChange() was lazily added.
|
262
213
|
if (_this3._fetchOptions != null) {
|
263
214
|
var maybeNewOnDataChangeCallbacks = _this3._fetchOptions.onDataChangeCallbacks;
|
264
215
|
if (Array.isArray(maybeNewOnDataChangeCallbacks)) {
|
@@ -1,14 +1,3 @@
|
|
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
|
-
* @format
|
9
|
-
* @oncall relay
|
10
|
-
*/
|
11
|
-
|
12
1
|
'use strict';
|
13
2
|
|
14
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
|
@@ -22,42 +11,18 @@ var ReactRelayQueryRendererContext = require('./ReactRelayQueryRendererContext')
|
|
22
11
|
var areEqual = require("fbjs/lib/areEqual");
|
23
12
|
var React = require('react');
|
24
13
|
var _require = require('relay-runtime'),
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
deepFreeze = _require2.deepFreeze,
|
29
|
-
getRequest = _require2.getRequest;
|
30
|
-
/**
|
31
|
-
* React may double-fire the constructor, and we call 'fetch' in the
|
32
|
-
* constructor. If a request is already in flight from a previous call to the
|
33
|
-
* constructor, just reuse the query fetcher and wait for the response.
|
34
|
-
*/
|
14
|
+
createOperationDescriptor = _require.createOperationDescriptor,
|
15
|
+
deepFreeze = _require.deepFreeze,
|
16
|
+
getRequest = _require.getRequest;
|
35
17
|
var requestCache = {};
|
36
18
|
var queryRendererContext = {
|
37
19
|
rootIsQueryRenderer: true
|
38
20
|
};
|
39
|
-
/**
|
40
|
-
* @public
|
41
|
-
*
|
42
|
-
* Orchestrates fetching and rendering data for a single view or view hierarchy:
|
43
|
-
* - Fetches the query/variables using the given network implementation.
|
44
|
-
* - Normalizes the response(s) to that query, publishing them to the given
|
45
|
-
* store.
|
46
|
-
* - Renders the pending/fail/success states with the provided render function.
|
47
|
-
* - Subscribes for updates to the root data and re-renders with any changes.
|
48
|
-
*/
|
49
21
|
var ReactRelayQueryRenderer = /*#__PURE__*/function (_React$Component) {
|
50
22
|
(0, _inheritsLoose2["default"])(ReactRelayQueryRenderer, _React$Component);
|
51
23
|
function ReactRelayQueryRenderer(props) {
|
52
24
|
var _this;
|
53
25
|
_this = _React$Component.call(this, props) || this;
|
54
|
-
|
55
|
-
// Callbacks are attached to the current instance and shared with static
|
56
|
-
// lifecyles by bundling with state. This is okay to do because the
|
57
|
-
// callbacks don't change in reaction to props. However we should not
|
58
|
-
// "leak" them before mounting (since we would be unable to clean up). For
|
59
|
-
// that reason, we define them as null initially and fill them in after
|
60
|
-
// mounting to avoid leaking memory.
|
61
26
|
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_handleDataChange", function (params) {
|
62
27
|
var error = params.error == null ? null : params.error;
|
63
28
|
var snapshot = params.snapshot == null ? null : params.snapshot;
|
@@ -66,8 +31,6 @@ var ReactRelayQueryRenderer = /*#__PURE__*/function (_React$Component) {
|
|
66
31
|
if (prevRequestCacheKey) {
|
67
32
|
delete requestCache[prevRequestCacheKey];
|
68
33
|
}
|
69
|
-
|
70
|
-
// Don't update state if nothing has changed.
|
71
34
|
if (snapshot === prevState.snapshot && error === prevState.error) {
|
72
35
|
return null;
|
73
36
|
}
|
@@ -112,38 +75,13 @@ var ReactRelayQueryRenderer = /*#__PURE__*/function (_React$Component) {
|
|
112
75
|
_proto.componentDidMount = function componentDidMount() {
|
113
76
|
var _this2 = this;
|
114
77
|
if (this._maybeHiddenOrFastRefresh === true) {
|
115
|
-
// This block only runs if the component has previously "unmounted"
|
116
|
-
// due to it being hidden by the Offscreen API, or during fast refresh.
|
117
|
-
// At this point, the current cached resource will have been disposed
|
118
|
-
// by the previous cleanup, so instead of attempting to
|
119
|
-
// do our regular commit setup, so that the query is re-evaluated
|
120
|
-
// (and potentially cause a refetch).
|
121
78
|
this._maybeHiddenOrFastRefresh = false;
|
122
|
-
// eslint-disable-next-line react/no-did-mount-set-state
|
123
79
|
this.setState(function (prevState) {
|
124
80
|
var newState = resetQueryStateForUpdate(_this2.props, prevState);
|
125
81
|
var requestCacheKey = newState.requestCacheKey,
|
126
82
|
queryFetcher = newState.queryFetcher;
|
127
83
|
if (requestCacheKey != null && requestCache[requestCacheKey] != null) {
|
128
|
-
|
129
|
-
var fetchResult = queryFetcher.getFetchResult();
|
130
|
-
if (fetchResult != null) {
|
131
|
-
var _fetchResult$snapshot, _fetchResult$error;
|
132
|
-
var snapshot = (_fetchResult$snapshot = fetchResult.snapshot) !== null && _fetchResult$snapshot !== void 0 ? _fetchResult$snapshot : null;
|
133
|
-
var error = (_fetchResult$error = fetchResult.error) !== null && _fetchResult$error !== void 0 ? _fetchResult$error : null;
|
134
|
-
var prevRequestCacheKey = prevState.requestCacheKey;
|
135
|
-
if (prevRequestCacheKey != null) {
|
136
|
-
delete requestCache[prevRequestCacheKey];
|
137
|
-
}
|
138
|
-
newState.renderProps = getRenderProps(error, snapshot, queryFetcher, prevState.retryCallbacks);
|
139
|
-
newState.snapshot = snapshot;
|
140
|
-
newState.requestCacheKey = null;
|
141
|
-
} else {
|
142
|
-
queryFetcher.setOnDataChange(_this2._handleDataChange);
|
143
|
-
}
|
144
|
-
} else {
|
145
|
-
queryFetcher.setOnDataChange(_this2._handleDataChange);
|
146
|
-
}
|
84
|
+
queryFetcher.setOnDataChange(_this2._handleDataChange);
|
147
85
|
}
|
148
86
|
return newState;
|
149
87
|
});
|
@@ -153,7 +91,6 @@ var ReactRelayQueryRenderer = /*#__PURE__*/function (_React$Component) {
|
|
153
91
|
retryCallbacks = _this$state.retryCallbacks,
|
154
92
|
queryFetcher = _this$state.queryFetcher,
|
155
93
|
requestCacheKey = _this$state.requestCacheKey;
|
156
|
-
// We don't need to cache the request after the component commits
|
157
94
|
if (requestCacheKey) {
|
158
95
|
delete requestCache[requestCacheKey];
|
159
96
|
}
|
@@ -170,21 +107,16 @@ var ReactRelayQueryRenderer = /*#__PURE__*/function (_React$Component) {
|
|
170
107
|
};
|
171
108
|
});
|
172
109
|
};
|
173
|
-
|
174
|
-
// Re-initialize the ReactRelayQueryFetcher with callbacks.
|
175
|
-
// If data has changed since constructions, this will re-render.
|
176
110
|
if (this.props.query) {
|
177
111
|
queryFetcher.setOnDataChange(this._handleDataChange);
|
178
112
|
}
|
179
113
|
};
|
180
114
|
_proto.componentDidUpdate = function componentDidUpdate(_prevProps, prevState) {
|
181
|
-
// We don't need to cache the request after the component commits
|
182
115
|
var _this$state2 = this.state,
|
183
116
|
queryFetcher = _this$state2.queryFetcher,
|
184
117
|
requestCacheKey = _this$state2.requestCacheKey;
|
185
118
|
if (requestCacheKey) {
|
186
119
|
delete requestCache[requestCacheKey];
|
187
|
-
// HACK
|
188
120
|
delete this.state.requestCacheKey;
|
189
121
|
}
|
190
122
|
if (this.props.query && queryFetcher !== prevState.queryFetcher) {
|
@@ -202,9 +134,6 @@ var ReactRelayQueryRenderer = /*#__PURE__*/function (_React$Component) {
|
|
202
134
|
var _this$state3 = this.state,
|
203
135
|
renderProps = _this$state3.renderProps,
|
204
136
|
relayContext = _this$state3.relayContext;
|
205
|
-
// Note that the root fragment results in `renderProps.props` is already
|
206
|
-
// frozen by the store; this call is to freeze the renderProps object and
|
207
|
-
// error property if set.
|
208
137
|
if (process.env.NODE_ENV !== "production") {
|
209
138
|
deepFreeze(renderProps);
|
210
139
|
}
|
@@ -220,7 +149,6 @@ function getLoadingRenderProps() {
|
|
220
149
|
return {
|
221
150
|
error: null,
|
222
151
|
props: null,
|
223
|
-
// `props: null` indicates that the data is being fetched (i.e. loading)
|
224
152
|
retry: null
|
225
153
|
};
|
226
154
|
}
|
@@ -228,7 +156,6 @@ function getEmptyRenderProps() {
|
|
228
156
|
return {
|
229
157
|
error: null,
|
230
158
|
props: {},
|
231
|
-
// `props: {}` indicates no data available
|
232
159
|
retry: null
|
233
160
|
};
|
234
161
|
}
|
@@ -243,8 +170,6 @@ function getRenderProps(error, snapshot, queryFetcher, retryCallbacks) {
|
|
243
170
|
snapshot: syncSnapshot
|
244
171
|
});
|
245
172
|
} else if (error && typeof retryCallbacks.handleRetryAfterError === 'function') {
|
246
|
-
// If retrying after an error and no synchronous result available,
|
247
|
-
// reset the render props
|
248
173
|
retryCallbacks.handleRetryAfterError(error);
|
249
174
|
}
|
250
175
|
}
|
@@ -273,12 +198,8 @@ function resetQueryStateForUpdate(props, prevState) {
|
|
273
198
|
prevPropsEnvironment: props.environment,
|
274
199
|
prevPropsVariables: props.variables,
|
275
200
|
queryFetcher: queryFetcher
|
276
|
-
}, fetchQueryAndComputeStateFromProps(props, queryFetcher, prevState.retryCallbacks
|
277
|
-
// passing no requestCacheKey will cause it to be recalculated internally
|
278
|
-
// and we want the updated requestCacheKey, since variables may have changed
|
279
|
-
));
|
201
|
+
}, fetchQueryAndComputeStateFromProps(props, queryFetcher, prevState.retryCallbacks));
|
280
202
|
}
|
281
|
-
|
282
203
|
function fetchQueryAndComputeStateFromProps(props, queryFetcher, retryCallbacks, requestCacheKey) {
|
283
204
|
var environment = props.environment,
|
284
205
|
query = props.query,
|
@@ -292,11 +213,8 @@ function fetchQueryAndComputeStateFromProps(props, queryFetcher, retryCallbacks,
|
|
292
213
|
environment: genericEnvironment
|
293
214
|
};
|
294
215
|
if (typeof requestCacheKey === 'string' && requestCache[requestCacheKey]) {
|
295
|
-
// This same request is already in flight.
|
296
|
-
|
297
216
|
var snapshot = requestCache[requestCacheKey].snapshot;
|
298
217
|
if (snapshot) {
|
299
|
-
// Use the cached response
|
300
218
|
return {
|
301
219
|
error: null,
|
302
220
|
relayContext: relayContext,
|
@@ -305,7 +223,6 @@ function fetchQueryAndComputeStateFromProps(props, queryFetcher, retryCallbacks,
|
|
305
223
|
requestCacheKey: requestCacheKey
|
306
224
|
};
|
307
225
|
} else {
|
308
|
-
// Render loading state
|
309
226
|
return {
|
310
227
|
error: null,
|
311
228
|
relayContext: relayContext,
|
@@ -322,11 +239,7 @@ function fetchQueryAndComputeStateFromProps(props, queryFetcher, retryCallbacks,
|
|
322
239
|
onDataChange: null,
|
323
240
|
operation: operation
|
324
241
|
});
|
325
|
-
|
326
|
-
// Use network data first, since it may be fresher
|
327
242
|
var _snapshot = querySnapshot || storeSnapshot;
|
328
|
-
|
329
|
-
// cache the request to avoid duplicate requests
|
330
243
|
requestCacheKey = requestCacheKey || getRequestCacheKey(request.params, props.variables);
|
331
244
|
requestCache[requestCacheKey] = {
|
332
245
|
queryFetcher: queryFetcher,
|
@@ -366,9 +279,8 @@ function fetchQueryAndComputeStateFromProps(props, queryFetcher, retryCallbacks,
|
|
366
279
|
error: null,
|
367
280
|
relayContext: _relayContext,
|
368
281
|
renderProps: getEmptyRenderProps(),
|
369
|
-
requestCacheKey: null
|
282
|
+
requestCacheKey: null
|
370
283
|
};
|
371
284
|
}
|
372
285
|
}
|
373
|
-
|
374
286
|
module.exports = ReactRelayQueryRenderer;
|