graphql-patterns

GraphQL Patterns for Shopify APIs

Query Structure

Always use the #graphql tag for syntax highlighting:

export const QUERY_NAME = `#graphql
  query QueryName($var: Type!) {
    # ...
  }
`;

Pagination

Shopify uses cursor-based pagination:

query GetProducts($first: Int!, $after: String) {
  products(first: $first, after: $after) {
    pageInfo {
      hasNextPage
      endCursor
    }
    edges {
      node {
        id
        title
      }
    }
  }
}

Common Admin API Patterns

Products

query GetProduct($id: ID!) {
  product(id: $id) {
    id
    title
    handle
    status
    variants(first: 10) {
      edges {
        node {
          id
          title
          price
          inventoryQuantity
        }
      }
    }
  }
}

mutation ProductUpdate($input: ProductInput!) {
  productUpdate(input: $input) {
    product {
      id
      title
    }
    userErrors {
      field
      message
    }
  }
}

Orders

query GetOrders($first: Int!, $query: String) {
  orders(first: $first, query: $query) {
    edges {
      node {
        id
        name
        totalPriceSet {
          shopMoney {
            amount
            currencyCode
          }
        }
        lineItems(first: 10) {
          edges {
            node {
              title
              quantity
            }
          }
        }
      }
    }
  }
}

Metafields

mutation MetafieldsSet($metafields: [MetafieldsSetInput!]!) {
  metafieldsSet(metafields: $metafields) {
    metafields {
      id
      namespace
      key
      value
    }
    userErrors {
      field
      message
    }
  }
}

Metaobjects

query MetaobjectByHandle($handle: MetaobjectHandleInput!) {
  metaobjectByHandle(handle: $handle) {
    id
    handle
    type
    fields {
      key
      value
    }
  }
}

mutation MetaobjectUpsert($handle: MetaobjectHandleInput!, $metaobject: MetaobjectUpsertInput!) {
  metaobjectUpsert(handle: $handle, metaobject: $metaobject) {
    metaobject {
      id
      handle
    }
    userErrors {
      field
      message
    }
  }
}