kitten.sh
1import type { VNode } from 'preact';
2import type { AnyVariables } from '@urql/core';
3
4import type { UseQueryArgs, UseQueryState, UseQueryExecute } from '../hooks';
5import { useQuery } from '../hooks';
6
7/** Props accepted by {@link Query}.
8 *
9 * @remarks
10 * `QueryProps` are the props accepted by the {@link Query} component,
11 * which is identical to {@link UseQueryArgs}.
12 *
13 * The result, the {@link QueryState} object, will be passed to
14 * a {@link QueryProps.children} function, passed as children
15 * to the `Query` component.
16 */
17export type QueryProps<
18 Data = any,
19 Variables extends AnyVariables = AnyVariables,
20> = UseQueryArgs<Variables, Data> & {
21 children(arg: QueryState<Data, Variables>): VNode<any>;
22};
23
24/** Object that {@link QueryProps.children} is called with.
25 *
26 * @remarks
27 * This is an extented {@link UseQueryState} with an added
28 * {@link QueryState.executeQuery} method, which is usually
29 * part of a tuple returned by {@link useQuery}.
30 */
31export interface QueryState<
32 Data = any,
33 Variables extends AnyVariables = AnyVariables,
34> extends UseQueryState<Data, Variables> {
35 /** Alias to {@link useQuery}’s `executeQuery` function. */
36 executeQuery: UseQueryExecute;
37}
38
39/** Component Wrapper around {@link useQuery} to run a GraphQL query.
40 *
41 * @remarks
42 * `Query` is a component wrapper around the {@link useQuery} hook
43 * that calls the {@link QueryProps.children} prop, as a function,
44 * with the {@link QueryState} object.
45 */
46export function Query<
47 Data = any,
48 Variables extends AnyVariables = AnyVariables,
49>(props: QueryProps<Data, Variables>): VNode<any> {
50 const query = useQuery<Data, Variables>(props);
51 return props.children({ ...query[0], executeQuery: query[1] });
52}