Using GraphQL

​

API

The Attio client SDK provides a typesafe way to query record data via GraphQL.

There are two main functions for this. Which you choose to use is a design decision of your app.

​

runQuery

An imperative asynchronous function to query record data.

​

useQuery

A suspenseful hook to query record data.

​

Writing GraphQL Queries

When you run npx attio dev to develop your app, you will be prompted to Press "o" to open GraphQL Explorer.. If you do press o, it will open an instance of GraphiQL.

GraphiQL will help you explore the schema as well as autocomplete your query as you type.

​

Query composing example

​

Example Queries

​

TypeScript Code-Gen

runQuery() and useQuery() will accept just a string as your query, but if you write your query in a separate file with the .graphql or .gql extension, you can then import your query into your TypeScript file. If you pass the imported query to these functions, your results will be strongly typed. The code generator will look for query files as long as you are runnning npx attio dev.

Let’s look at an example:

query getCurrentUser {
  currentUser {
    id
    name
    email
  }
}

​

Advanced Usage

​

Fragments

Some queries can return multiple types of objects. The way this is handled in GraphQL is with fragments and by querying __typename and then switching on its value.

The record query takes a record id and an object type and returns the matching object. Those variables happen to be exactly what the onTrigger() function on our record action is given.

query getRecord($recordId: String!, $object: String!) {
  record(id: $recordId, object: $object) {
    id
    __typename
    url
    ...PersonFragment
    ...CompanyFragment
    ...DealFragment
    ...UserFragment
    ...WorkspaceFragment
  }
}

fragment PersonFragment on Person {
personName: name {
full_name
}
}

fragment CompanyFragment on Company {
companyName: name
}

fragment DealFragment on Deal {
dealName: name
}

fragment UserFragment on UserRecord {
person {
...PersonFragment
}
}

fragment WorkspaceFragment on WorkspaceRecord {
workspaceName: name
}