react-relay 0.0.0-main-4dad5fbf → 0.0.0-main-c3b70bc3
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/hooks.js +1 -1
- package/index.js +1 -1
- package/legacy.js +1 -1
- package/package.json +2 -2
- package/relay-hooks/useLazyLoadQuery.js.flow +62 -13
- package/relay-hooks/useRelayEnvironment.js.flow +22 -0
package/ReactRelayContext.js
CHANGED
package/hooks.js
CHANGED
package/index.js
CHANGED
package/legacy.js
CHANGED
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-relay",
|
|
3
3
|
"description": "A framework for building GraphQL-driven React applications.",
|
|
4
|
-
"version": "0.0.0-main-
|
|
4
|
+
"version": "0.0.0-main-c3b70bc3",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"graphql",
|
|
7
7
|
"relay",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"fbjs": "^3.0.2",
|
|
21
21
|
"invariant": "^2.2.4",
|
|
22
22
|
"nullthrows": "^1.1.1",
|
|
23
|
-
"relay-runtime": "0.0.0-main-
|
|
23
|
+
"relay-runtime": "0.0.0-main-c3b70bc3"
|
|
24
24
|
},
|
|
25
25
|
"peerDependencies": {
|
|
26
26
|
"react": "^16.9.0 || ^17 || ^18 || ^19"
|
|
@@ -32,23 +32,72 @@ const {
|
|
|
32
32
|
export type UseLazyLoadQueryHookType = hook <TVariables: Variables, TData>(
|
|
33
33
|
gqlQuery: Query<TVariables, TData>,
|
|
34
34
|
variables: TVariables,
|
|
35
|
-
options?:
|
|
36
|
-
fetchKey?: string | number,
|
|
37
|
-
fetchPolicy?: FetchPolicy,
|
|
38
|
-
networkCacheConfig?: CacheConfig,
|
|
39
|
-
UNSTABLE_renderPolicy?: RenderPolicy,
|
|
40
|
-
}>,
|
|
35
|
+
options?: Options,
|
|
41
36
|
) => TData;
|
|
42
37
|
|
|
38
|
+
type Options = {
|
|
39
|
+
/**
|
|
40
|
+
* Determines if cached data should be used, and when to send a network request based on the cached data that is currently available in the Relay store (for more details, see our [Fetch Policies](../../guided-tour/reusing-cached-data/fetch-policies) and [Garbage Collection](../../guided-tour/reusing-cached-data/presence-of-data) guides):
|
|
41
|
+
* * "store-or-network": _*(default)*_ *will* reuse locally cached data and will *only* send a network request if any data for the query is missing. If the query is fully cached, a network request will *not* be made.
|
|
42
|
+
* * "store-and-network": *will* reuse locally cached data and will *always* send a network request, regardless of whether any data was missing from the local cache or not.
|
|
43
|
+
* * "network-only": *will* *not* reuse locally cached data, and will *always* send a network request to fetch the query, ignoring any data that might be locally cached in Relay.
|
|
44
|
+
* * "store-only": *will* *only* reuse locally cached data, and will *never* send a network request to fetch the query. In this case, the responsibility of fetching the query falls to the caller, but this policy could also be used to read and operate on data that is entirely [local](../../guided-tour/updating-data/local-data-updates).
|
|
45
|
+
*/
|
|
46
|
+
+fetchPolicy?: FetchPolicy,
|
|
47
|
+
/**
|
|
48
|
+
* A `fetchKey` can be passed to force a re-evaluation of the current query and variables when the component re-renders, even if the variables didn't change, or even if the component isn't remounted (similarly to how passing a different `key` to a React component will cause it to remount). If the `fetchKey` is different from the one used in the previous render, the current query will be re-evaluated against the store, and it might be refetched depending on the current `fetchPolicy` and the state of the cache.
|
|
49
|
+
*/
|
|
50
|
+
+fetchKey?: string | number,
|
|
51
|
+
/**
|
|
52
|
+
* Default value: `{force: true}`. Object containing cache config options for the *network layer*. Note that the network layer may contain an *additional* query response cache which will reuse network responses for identical queries. If you want to bypass this cache completely (which is the default behavior), pass `{force: true}` as the value for this option.
|
|
53
|
+
*/
|
|
54
|
+
+networkCacheConfig?: CacheConfig,
|
|
55
|
+
/**
|
|
56
|
+
* Undocumented option.
|
|
57
|
+
*/
|
|
58
|
+
+UNSTABLE_renderPolicy?: RenderPolicy,
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
/**
|
|
62
|
+
* Hook used to fetch a GraphQL query during render. This hook can trigger multiple nested or waterfalling round trips if used without caution, and waits until render to start a data fetch (when it can usually start a lot sooner than render), thereby degrading performance. Instead, prefer [`usePreloadedQuery`](../use-preloaded-query).
|
|
63
|
+
*
|
|
64
|
+
* @example
|
|
65
|
+
* const React = require('React');
|
|
66
|
+
*
|
|
67
|
+
* const {graphql, useLazyLoadQuery} = require('react-relay');
|
|
68
|
+
*
|
|
69
|
+
* function App() {
|
|
70
|
+
* const data = useLazyLoadQuery(
|
|
71
|
+
* graphql`
|
|
72
|
+
* query AppQuery($id: ID!) {
|
|
73
|
+
* user(id: $id) {
|
|
74
|
+
* name
|
|
75
|
+
* }
|
|
76
|
+
* }
|
|
77
|
+
* `,
|
|
78
|
+
* {id: 4},
|
|
79
|
+
* {fetchPolicy: 'store-or-network'},
|
|
80
|
+
* );
|
|
81
|
+
*
|
|
82
|
+
* return <h1>{data.user?.name}</h1>;
|
|
83
|
+
* }
|
|
84
|
+
*
|
|
85
|
+
* @returns - `data`: Object that contains data which has been read out from the Relay store; the object matches the shape of specified query.
|
|
86
|
+
* - The Flow type for data will also match this shape, and contain types derived from the GraphQL Schema. For example, the type of `data` above is: `{| user: ?{| name: ?string |} |}`.
|
|
87
|
+
*/
|
|
43
88
|
hook useLazyLoadQuery<TVariables: Variables, TData>(
|
|
89
|
+
/**
|
|
90
|
+
* GraphQL query specified using a `graphql` template literal.
|
|
91
|
+
*/
|
|
44
92
|
gqlQuery: Query<TVariables, TData>,
|
|
93
|
+
/**
|
|
94
|
+
* Object containing the variable values to fetch the query. These variables need to match GraphQL variables declared inside the query.
|
|
95
|
+
*/
|
|
45
96
|
variables: TVariables,
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
UNSTABLE_renderPolicy?: RenderPolicy,
|
|
51
|
-
}>,
|
|
97
|
+
/**
|
|
98
|
+
* options object
|
|
99
|
+
*/
|
|
100
|
+
options?: Options,
|
|
52
101
|
): TData {
|
|
53
102
|
const environment = useRelayEnvironment();
|
|
54
103
|
|
|
@@ -71,4 +120,4 @@ hook useLazyLoadQuery<TVariables: Variables, TData>(
|
|
|
71
120
|
}
|
|
72
121
|
|
|
73
122
|
// $FlowFixMe[react-rule-hook-incompatible]
|
|
74
|
-
module.exports =
|
|
123
|
+
module.exports = useLazyLoadQuery;
|
|
@@ -17,6 +17,28 @@ const ReactRelayContext = require('./../ReactRelayContext');
|
|
|
17
17
|
const invariant = require('invariant');
|
|
18
18
|
const {useContext} = require('react');
|
|
19
19
|
|
|
20
|
+
/**
|
|
21
|
+
* Hook used to access a Relay environment that was set by a [`RelayEnvironmentProvider`](../relay-environment-provider):
|
|
22
|
+
*
|
|
23
|
+
* @example
|
|
24
|
+
* const React = require('React');
|
|
25
|
+
*
|
|
26
|
+
* const {useRelayEnvironment} = require('react-relay');
|
|
27
|
+
*
|
|
28
|
+
* function MyComponent() {
|
|
29
|
+
* const environment = useRelayEnvironment();
|
|
30
|
+
*
|
|
31
|
+
* const handler = useCallback(() => {
|
|
32
|
+
* // For example, can be used to pass the environment to functions
|
|
33
|
+
* // that require a Relay environment.
|
|
34
|
+
* commitMutation(environment, ...);
|
|
35
|
+
* }, [environment])
|
|
36
|
+
*
|
|
37
|
+
* return (...);
|
|
38
|
+
* }
|
|
39
|
+
*
|
|
40
|
+
* module.exports = MyComponent;
|
|
41
|
+
*/
|
|
20
42
|
hook useRelayEnvironment(): IEnvironment {
|
|
21
43
|
const context = useContext(ReactRelayContext);
|
|
22
44
|
invariant(
|