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.
107 lines
4.5 KiB
107 lines
4.5 KiB
4 months ago
|
import { __assign } from "tslib";
|
||
|
import * as React from "rehackt";
|
||
|
import { mergeOptions } from "../../utilities/index.js";
|
||
|
import { useInternalState } from "./useQuery.js";
|
||
|
import { useApolloClient } from "./useApolloClient.js";
|
||
|
// The following methods, when called will execute the query, regardless of
|
||
|
// whether the useLazyQuery execute function was called before.
|
||
|
var EAGER_METHODS = [
|
||
|
"refetch",
|
||
|
"reobserve",
|
||
|
"fetchMore",
|
||
|
"updateQuery",
|
||
|
"startPolling",
|
||
|
"subscribeToMore",
|
||
|
];
|
||
|
/**
|
||
|
* A hook for imperatively executing queries in an Apollo application, e.g. in response to user interaction.
|
||
|
*
|
||
|
* > Refer to the [Queries - Manual execution with useLazyQuery](https://www.apollographql.com/docs/react/data/queries#manual-execution-with-uselazyquery) section for a more in-depth overview of `useLazyQuery`.
|
||
|
*
|
||
|
* @example
|
||
|
* ```jsx
|
||
|
* import { gql, useLazyQuery } from "@apollo/client";
|
||
|
*
|
||
|
* const GET_GREETING = gql`
|
||
|
* query GetGreeting($language: String!) {
|
||
|
* greeting(language: $language) {
|
||
|
* message
|
||
|
* }
|
||
|
* }
|
||
|
* `;
|
||
|
*
|
||
|
* function Hello() {
|
||
|
* const [loadGreeting, { called, loading, data }] = useLazyQuery(
|
||
|
* GET_GREETING,
|
||
|
* { variables: { language: "english" } }
|
||
|
* );
|
||
|
* if (called && loading) return <p>Loading ...</p>
|
||
|
* if (!called) {
|
||
|
* return <button onClick={() => loadGreeting()}>Load greeting</button>
|
||
|
* }
|
||
|
* return <h1>Hello {data.greeting.message}!</h1>;
|
||
|
* }
|
||
|
* ```
|
||
|
* @since 3.0.0
|
||
|
*
|
||
|
* @param query - A GraphQL query document parsed into an AST by `gql`.
|
||
|
* @param options - Default options to control how the query is executed.
|
||
|
* @returns A tuple in the form of `[execute, result]`
|
||
|
*/
|
||
|
export function useLazyQuery(query, options) {
|
||
|
var _a;
|
||
|
var execOptionsRef = React.useRef();
|
||
|
var optionsRef = React.useRef();
|
||
|
var queryRef = React.useRef();
|
||
|
var merged = mergeOptions(options, execOptionsRef.current || {});
|
||
|
var document = (_a = merged === null || merged === void 0 ? void 0 : merged.query) !== null && _a !== void 0 ? _a : query;
|
||
|
// Use refs to track options and the used query to ensure the `execute`
|
||
|
// function remains referentially stable between renders.
|
||
|
optionsRef.current = options;
|
||
|
queryRef.current = document;
|
||
|
var internalState = useInternalState(useApolloClient(options && options.client), document);
|
||
|
var useQueryResult = internalState.useQuery(__assign(__assign({}, merged), { skip: !execOptionsRef.current }));
|
||
|
var initialFetchPolicy = useQueryResult.observable.options.initialFetchPolicy ||
|
||
|
internalState.getDefaultFetchPolicy();
|
||
|
var result = Object.assign(useQueryResult, {
|
||
|
called: !!execOptionsRef.current,
|
||
|
});
|
||
|
// We use useMemo here to make sure the eager methods have a stable identity.
|
||
|
var eagerMethods = React.useMemo(function () {
|
||
|
var eagerMethods = {};
|
||
|
var _loop_1 = function (key) {
|
||
|
var method = result[key];
|
||
|
eagerMethods[key] = function () {
|
||
|
if (!execOptionsRef.current) {
|
||
|
execOptionsRef.current = Object.create(null);
|
||
|
// Only the first time populating execOptionsRef.current matters here.
|
||
|
internalState.forceUpdateState();
|
||
|
}
|
||
|
// @ts-expect-error this is just too generic to type
|
||
|
return method.apply(this, arguments);
|
||
|
};
|
||
|
};
|
||
|
for (var _i = 0, EAGER_METHODS_1 = EAGER_METHODS; _i < EAGER_METHODS_1.length; _i++) {
|
||
|
var key = EAGER_METHODS_1[_i];
|
||
|
_loop_1(key);
|
||
|
}
|
||
|
return eagerMethods;
|
||
|
}, []);
|
||
|
Object.assign(result, eagerMethods);
|
||
|
var execute = React.useCallback(function (executeOptions) {
|
||
|
execOptionsRef.current =
|
||
|
executeOptions ? __assign(__assign({}, executeOptions), { fetchPolicy: executeOptions.fetchPolicy || initialFetchPolicy }) : {
|
||
|
fetchPolicy: initialFetchPolicy,
|
||
|
};
|
||
|
var options = mergeOptions(optionsRef.current, __assign({ query: queryRef.current }, execOptionsRef.current));
|
||
|
var promise = internalState
|
||
|
.executeQuery(__assign(__assign({}, options), { skip: false }))
|
||
|
.then(function (queryResult) { return Object.assign(queryResult, eagerMethods); });
|
||
|
// Because the return value of `useLazyQuery` is usually floated, we need
|
||
|
// to catch the promise to prevent unhandled rejections.
|
||
|
promise.catch(function () { });
|
||
|
return promise;
|
||
|
}, []);
|
||
|
return [execute, result];
|
||
|
}
|
||
|
//# sourceMappingURL=useLazyQuery.js.map
|