Querying Attio data

The App SDK provides a GraphQL API for querying data within Attio. You can use this API to retrieve Attio’s standard and custom records, information about the current user, and other relevant data.

How to use GraphQL in your app

Data can be queried using GraphQL by following these steps.

Create a new .graphql file within your application and include the GraphQL query you want to run.
Import the query into your app.
Run the query using the runQuery function or the useQuery hook.

Exploring the GraphQL schema

To inspect the App SDK’s GraphQL schema, run npm run dev and press o. This opens a local GraphiQL instance in read-only mode, where you can browse available types and operations.

Query execution against workspace data is not yet supported in the playground.

Type generation

Running npm run dev will watch for updates to .graphql files and automatically generate TypeScript types for them. These types will be used to type the runQuery and useQuery functions with responses that match your query.

Making requests directly to the Attio REST API

The App SDK GraphQL API is read-only and client-side only. If you would like to read or write Attio data from server-side code, you can use the Attio REST API with ATTIO_API_TOKEN from within your server functions

Example: Get a person’s contact details

First, create a new .graphql file within your application and include the following GraphQL query:

src/app/extensions/add-to-sequence/get-person-contact-details.graphql

query getPersonContactDetails($recordId: String!) {
  person(id: $recordId) {
    name {
      full_name
    }
    email_addresses
    phone_numbers
    company {
      name
    }
  }
}

This query retrieves the person’s full name, email addresses, phone numbers, and associated company name. After defining the query, you can import and run it within your app.

src/app/extensions/add-to-sequence/extension.tsx

import {Extensions, showToast, runQuery} from "attio/client"
import getPersonContactDetails from "./get-person-contact-details.graphql"

export default Extensions.defineExtension({
  type: "record-action",
  id: "add-to-sequence",
  label: "Add to Sequence",
  // Here, we are restricting the action to person records only
  objects: "people",
  onTrigger: async ({recordId}) => {
    const {person} = await runQuery(getPersonContactDetails, {recordId})

    if (!person) {
      showToast({
        variant: "error",
        title: "Person not found",
      })
      return
    }

    // Process the retrieved contact details
  },
})

The App SDK includes the useQuery hook for querying within React components.

Example: Get a text attribute’s value on a company record

First, create a new .graphql file within your application and include the following GraphQL query.

src/app/extensions/get-stock-price/get-text-attribute-value.graphql

query getTextAttributeValue($recordId: String!, $slug: String!) {
  company(id: $recordId) {
    attribute(slug: $slug) {
      __typename
      ... on TextValue {
        value
      }
    }
  }
}

After defining the query, you can import and run it within your app. Be sure to pass the slug of the attribute you’d like to access.

You can find the slug of an attribute in: Settings > Data > Objects > Attributes > (three dots menu) > Copy slug.

src/app/extensions/get-stock-price/extension.tsx

import {Extensions, showToast, runQuery} from "attio/client"
import getTextAttributeValue from "./get-text-attribute-value.graphql"

export default Extensions.defineExtension({
  type: "record-action",
  id: "get-stock-price",
  label: "Get Stock Price",
  // Here, we are restricting the action to company records only
  objects: "companies",
  onTrigger: async ({recordId}) => {
    const values = await runQuery(getTextAttributeValue, {recordId, slug: "ticker"})
    const ticker = values.company?.attribute

    if (!ticker) {
      showToast({
        variant: "error",
        title: "Ticker not found",
      })
      return
    }

    // Process the retrieved ticker details and fetch stock price
  },
})

Introduction

Guides

Extensions

Workflow blocks

Notifications

Dialogs

Components

Forms

Icons

Settings

GraphQL

Data fetching

Server

System

Legacy

How to use GraphQL in your app

Exploring the GraphQL schema

Type generation

Making requests directly to the Attio REST API

Example: Get a person’s contact details

Example: Get a text attribute’s value on a company record

​How to use GraphQL in your app

​Exploring the GraphQL schema

​Type generation

​Making requests directly to the Attio REST API

​Example: Get a person’s contact details

​Example: Get a text attribute’s value on a company record

How to use GraphQL in your app

Exploring the GraphQL schema

Type generation

Making requests directly to the Attio REST API

Example: Get a person’s contact details

Example: Get a text attribute’s value on a company record