You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
2.6 KiB
52 lines
2.6 KiB
4 months ago
|
import { __spreadArray } from "tslib";
|
||
|
import * as React from "rehackt";
|
||
|
import { useApolloClient } from "./useApolloClient.js";
|
||
|
import { getSuspenseCache, unwrapQueryRef, updateWrappedQueryRef, wrapQueryRef, } from "../internal/index.js";
|
||
|
import { useWatchQueryOptions } from "./useSuspenseQuery.js";
|
||
|
import { canonicalStringify } from "../../cache/index.js";
|
||
|
export function useBackgroundQuery(query, options) {
|
||
|
if (options === void 0) { options = Object.create(null); }
|
||
|
var client = useApolloClient(options.client);
|
||
|
var suspenseCache = getSuspenseCache(client);
|
||
|
var watchQueryOptions = useWatchQueryOptions({ client: client, query: query, options: options });
|
||
|
var fetchPolicy = watchQueryOptions.fetchPolicy, variables = watchQueryOptions.variables;
|
||
|
var _a = options.queryKey, queryKey = _a === void 0 ? [] : _a;
|
||
|
// This ref tracks the first time query execution is enabled to determine
|
||
|
// whether to return a query ref or `undefined`. When initialized
|
||
|
// in a skipped state (either via `skip: true` or `skipToken`) we return
|
||
|
// `undefined` for the `queryRef` until the query has been enabled. Once
|
||
|
// enabled, a query ref is always returned regardless of whether the query is
|
||
|
// skipped again later.
|
||
|
var didFetchResult = React.useRef(fetchPolicy !== "standby");
|
||
|
didFetchResult.current || (didFetchResult.current = fetchPolicy !== "standby");
|
||
|
var cacheKey = __spreadArray([
|
||
|
query,
|
||
|
canonicalStringify(variables)
|
||
|
], [].concat(queryKey), true);
|
||
|
var queryRef = suspenseCache.getQueryRef(cacheKey, function () {
|
||
|
return client.watchQuery(watchQueryOptions);
|
||
|
});
|
||
|
var _b = React.useState(wrapQueryRef(queryRef)), wrappedQueryRef = _b[0], setWrappedQueryRef = _b[1];
|
||
|
if (unwrapQueryRef(wrappedQueryRef) !== queryRef) {
|
||
|
setWrappedQueryRef(wrapQueryRef(queryRef));
|
||
|
}
|
||
|
if (queryRef.didChangeOptions(watchQueryOptions)) {
|
||
|
var promise = queryRef.applyOptions(watchQueryOptions);
|
||
|
updateWrappedQueryRef(wrappedQueryRef, promise);
|
||
|
}
|
||
|
var fetchMore = React.useCallback(function (options) {
|
||
|
var promise = queryRef.fetchMore(options);
|
||
|
setWrappedQueryRef(wrapQueryRef(queryRef));
|
||
|
return promise;
|
||
|
}, [queryRef]);
|
||
|
var refetch = React.useCallback(function (variables) {
|
||
|
var promise = queryRef.refetch(variables);
|
||
|
setWrappedQueryRef(wrapQueryRef(queryRef));
|
||
|
return promise;
|
||
|
}, [queryRef]);
|
||
|
return [
|
||
|
didFetchResult.current ? wrappedQueryRef : void 0,
|
||
|
{ fetchMore: fetchMore, refetch: refetch },
|
||
|
];
|
||
|
}
|
||
|
//# sourceMappingURL=useBackgroundQuery.js.map
|