UNPKG

3.09 kBJavaScriptView Raw
1import * as React from "rehackt";
2import { assertWrappedQueryRef, getWrappedPromise, unwrapQueryRef, updateWrappedQueryRef, wrapQueryRef, } from "../internal/index.js";
3import { useApolloClient } from "./useApolloClient.js";
4import { wrapHook } from "./internal/index.js";
5/**
6 * A React hook that returns a `refetch` and `fetchMore` function for a given
7 * `queryRef`.
8 *
9 * This is useful to get access to handlers for a `queryRef` that was created by
10 * `createQueryPreloader` or when the handlers for a `queryRef` produced in
11 * a different component are inaccessible.
12 *
13 * @example
14 * ```tsx
15 * const MyComponent({ queryRef }) {
16 * const { refetch, fetchMore } = useQueryRefHandlers(queryRef);
17 *
18 * // ...
19 * }
20 * ```
21 * @since 3.9.0
22 * @param queryRef - A `QueryRef` returned from `useBackgroundQuery`, `useLoadableQuery`, or `createQueryPreloader`.
23 */
24export function useQueryRefHandlers(queryRef) {
25 var unwrapped = unwrapQueryRef(queryRef);
26 return wrapHook("useQueryRefHandlers", _useQueryRefHandlers, unwrapped ?
27 unwrapped["observable"]
28 // in the case of a "transported" queryRef object, we need to use the
29 // client that's available to us at the current position in the React tree
30 // that ApolloClient will then have the job to recreate a real queryRef from
31 // the transported object
32 // This is just a context read - it's fine to do this conditionally.
33 // This hook wrapper also shouldn't be optimized by React Compiler.
34 // eslint-disable-next-line react-compiler/react-compiler
35 // eslint-disable-next-line react-hooks/rules-of-hooks
36 : useApolloClient())(queryRef);
37}
38function _useQueryRefHandlers(queryRef) {
39 assertWrappedQueryRef(queryRef);
40 var _a = React.useState(queryRef), previousQueryRef = _a[0], setPreviousQueryRef = _a[1];
41 var _b = React.useState(queryRef), wrappedQueryRef = _b[0], setWrappedQueryRef = _b[1];
42 var internalQueryRef = unwrapQueryRef(queryRef);
43 // To ensure we can support React transitions, this hook needs to manage the
44 // queryRef state and apply React's state value immediately to the existing
45 // queryRef since this hook doesn't return the queryRef directly
46 if (previousQueryRef !== queryRef) {
47 setPreviousQueryRef(queryRef);
48 setWrappedQueryRef(queryRef);
49 }
50 else {
51 updateWrappedQueryRef(queryRef, getWrappedPromise(wrappedQueryRef));
52 }
53 var refetch = React.useCallback(function (variables) {
54 var promise = internalQueryRef.refetch(variables);
55 setWrappedQueryRef(wrapQueryRef(internalQueryRef));
56 return promise;
57 }, [internalQueryRef]);
58 var fetchMore = React.useCallback(function (options) {
59 var promise = internalQueryRef.fetchMore(options);
60 setWrappedQueryRef(wrapQueryRef(internalQueryRef));
61 return promise;
62 }, [internalQueryRef]);
63 return {
64 refetch: refetch,
65 fetchMore: fetchMore,
66 subscribeToMore: internalQueryRef.observable.subscribeToMore,
67 };
68}
69//# sourceMappingURL=useQueryRefHandlers.js.map
\No newline at end of file