Skip to main content
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.
  1. Create a new .graphql file within your application and include the GraphQL query you want to run.
  2. Import the query into your app.
  3. Run the query using the runQuery function or the useQuery hook.

​
Exploring the GraphQL schema

To inspect the App SDK’s GraphQL schema, run npx attio 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 npx attio 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:
get-person-contact-details.graphql
query getPersonContactDetails($recordId: String!) {
  person(id: $recordId) {
    name {
      full_name
    }
    email_addresses
    phone_numbers
    company {
      name
    }
  }
}
This query retrieves 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. 
import type {App} from "attio"
import {showToast, runQuery} from "attio/client"
import getPersonContactDetails from "./get-person-contact-details.graphql"

export const addToSequenceAction: App.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 record action above must be included in app.ts
The App SDK includes useQuery hook for querying within React components.

​
Example: Get a text attributes value on a company record

First, create a new .graphql file within your application and include the following GraphQL query.
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.
import type {App} from "attio"
import {showToast, runQuery} from "attio/client"
import getTextAttributeValue from "./get-text-attribute-value.graphql"

export const getStockPriceAction: App.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 as {value: string}).value

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

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