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

# useQuery()

> A suspenseful hook to run a GraphQL query

<Note>
  Not to be confused with the popular [TanStack `useQuery()`](https://tanstack.com/query/latest/docs/framework/react/reference/useQuery) or
  [Apollo `useQuery()`](https://www.apollographql.com/tutorials/lift-off-part1/10-the-usequery-hook)
  hooks; this hook is custom to the Attio runtime for running GraphQL queries against the [Attio
  GraphQL Schema](../graphql/graphql).
</Note>

```ts theme={"system"}
import {useQuery} from "attio/client"
```

<Warning>
  While the query is running, the component that uses this hook will "suspend".

  You *MUST* wrap the component in a [`<React.Suspense/>`](https://react.dev/reference/react/Suspense) component
  and give it a `fallback` component to render until the query has completed.
</Warning>

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()`](../graphql/run-query) with [`useAsyncCache()`](../data-fetching/use-async-cache) instead.

## Parameters

<ParamField path="query" type="string" required>
  A GraphQL query string.

  <Tip>
    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](../graphql/graphql#typescript-code-generation).
  </Tip>
</ParamField>

<ParamField path="variables" type="Record<string, any>">
  The named variables your query accepts. If your query has no variables, you needn't pass any.
</ParamField>

## Returns

<ResponseField name=" " type="Record<string, any>">
  The structured JSON as defined by your query.
</ResponseField>

## Example

```tsx theme={"system"}
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 />`](../components/loading-state) component as the `fallback` for a consistent loading experience.