Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.attio.com/llms.txt

Use this file to discover all available pages before exploring further.

Not to be confused with the popular TanStack useQuery() or Apollo useQuery() hooks; this hook is custom to the Attio runtime for running GraphQL queries against the Attio GraphQL Schema.
import {useQuery} from "attio/client"
While the query is running, the component that uses this hook will “suspend”.You MUST wrap the component in a <React.Suspense/> component and give it a fallback component to render until the query has completed.
If you use more than one useQuery() hook in a component, they will be executed in sequence, not in parallel. For parallel queries, use runQuery() with useAsyncCache() instead.

​
Parameters

​
query
string
required
A GraphQL query string.
If you’re using TypeScript and [default] import this value from a .graphql or .gql file, the variables and return value will be strongly typed.Read more.
​
variables
Record<string, any>
The named variables your query accepts. If your query has no variables, you needn’t pass any.

​
Returns

​
Record<string, any>
The structured JSON as defined by your query.

​
Example

import React, {Suspense} from "react"
import {useQuery, TextBlock, LoadingState} from "attio/client"
import getPersonName from "./get-person-name.graphql"

function PersonGreeting({recordId}: {recordId: string}) {
  const {person} = useQuery(getPersonName, {recordId})
  const name = person?.name?.full_name ?? "Unknown"
  return <TextBlock>Hello, {name}!</TextBlock>
}

export function PersonCard({recordId}: {recordId: string}) {
  return (
    <Suspense fallback={<LoadingState />}>
      <PersonGreeting recordId={recordId} />
    </Suspense>
  )
}
Use the <LoadingState /> component as the fallback for a consistent loading experience.