useQuery()

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

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.

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.

⌘I

Introduction

Guides

Extensions

Workflow blocks

Notifications

Dialogs

Components

Forms

Icons

Settings

GraphQL

Data fetching

Server

System

Legacy

Parameters

Returns

Example

​Parameters

​Returns

​Example

Parameters

Returns

Example