Skip to main content
Not to be confused with the popular TanStack useQuery() of 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 parallel! Sometimes this is desired, but sometimes you might want to run them in parallel.

​
Parameters

​
query : string

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 with 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.

​
Running in parallel

If you need to run multiple GraphQL queries in parallel, this can be accomplished with a combination of runQuery() and useAsyncCache() like so: 
import React from "react"
import {runQuery, TextBlock, useAsyncCache} from "attio/client"
import getPersonName from "./get-person-name.graphql"
import getCurrentUser from "./get-current-user.graphql"

export function MeetPerson({ recordId }: { recordId: string }) {
  // Will run in parallel and suspend until both queries have returned
  const { values } = useAsyncCache({
    currentUserResult: async () => await runQuery(getCurrentUser),
    personResult: async () => await runQuery(getPersonName, { recordId })
  })
  const currentUserName : string =
    values.currentUserResult.currentUser.name
  const personName : string | null | undefined =
    values.personResult.person?.name?.full_name

return (

<TextBlock>
  {personName ?? "Unknown"} would like to meet with {currentUserName}.
</TextBlock>
) }