Skip to content

useGraphQL

useGraphQL<TData, TVariables>(client, query, options?): UseGraphQLState<TData>

Defined in: packages/fetch-kit/src/react/use-graphql.ts:43

React hook for declarative GraphQL queries.

Like useFetch: aborts the in-flight request on unmount or deps change, and drops stale responses on the floor. Pairs well with the client’s response cache + dedupe — multiple components requesting the same query share one in-flight request and one cache entry.

TData = unknown

Expected data shape

TVariables = Record<string, unknown>

Variables shape

Client

string

UseGraphQLOptions<TData, TVariables> = {}

UseGraphQLState<TData>

const { data, loading, error, refetch } = useGraphQL<{ me: User }>(
api,
`query Me { me { id name } }`,
);