Shopify GrapQL query tutorial

Learn how to interact with Shopify GraphQL data.

You can connect to Shopify by creating a GraphQL or REST API resource in Retool. This guide provides examples using the GraphQL API.

Retrieve customers

The following GraphQL query retrieves the name, email, address, and order count for the first 20 customers.

query {
  customers(first: 20) {
    edges {
      node {
        displayName
        email
        defaultAddress {
          name
          address1
          address2
          city
          province
          country
          zip
        }
        ordersCount
      }
    }
  }
}

To use this data in a Table component, access the .node property of each result. The following example shows how to destructure the query results (here, named getCustomers). Use this example as the Data source of Table.

{{ getCustomers.data.customers.edges.map(customer => customer.node) }}

Retrieve orders

The following GraphQL query retrieves the product names, quantity, email, and price for the first 10 orders in your Shopify store.

query {
  orders(first: 10) {
    edges {
      node {
        email
        lineItems(first: 10) {
          edges {
            node {
              product {
                title
              }
              quantity
            }
          }
        }
        totalPriceSet {
          shopMoney {
            amount
          }
        }
      }
    }
  }
}

To access these results in a Table component, destructure the results by mapping the edges field.

{{ getOrders.data.orders.edges.map(order => order.node) }}

To display the nested values directly, rather than as objects, set the column's Mapped value field. For example, to use the amount field as a table column, set its mapped value to {{ self.shopMoney.amount }}.

Server-side pagination

Shopify’s GraphQL API supports server-side pagination using GraphQL relay based cursor pagination.

1. Update your query

Add the cursor field under edges, and the following variables in the customers query.

(first: $first, last: $last, after: $afterPage, before: $beforePage)

For example, an updated getCustomers query might resemble the following.

query ($first: Int, $last: Int, $afterPage: String, $beforePage: String) {
  customers(
    first: $first
    last: $last
    after: $afterPage
    before: $beforePage
  ) {
    edges {
      cursor
      node {
        displayName
        email
        defaultAddress {
          name
          address1
          address2
          city
          province
          country
          zip
        }
        ordersCount
      }
    }
  }
}

After you add these variables to your GraphQL query, assign values by filling in the Variables section in the query editor. Set the following variables, where table1 is the name of your table.

Key	Value
first	{{ table1.pagination.beforeCursor ? null : table1.pagination.pageSize }}
last	{{ table1.pagination.beforeCursor ? table1.pagination.pageSize : null }}
afterPage	{{ table1.pagination.afterCursor }}
beforePage	{{ table1.pagination.beforeCursor }}

See the guide to server-side pagination for more information.

2. Configure table server-side pagination

In the Add-ons section of the table's Inspector, select Pagination, then Enable server-side pagination. Under Pagination type, select GraphQL Relay cursor based. Fill in the input fields with the following values.

Field	Value
Previous page cursor	{{ _.first(getCustomers.data.customers.edges).cursor }}
Next page cursor	{{ _.last(getCustomers.data.customers.edges).cursor }}
Has more data	{{ _.last(getCustomers.data.customers.edges).cursor ? true : false }}