xclade
GraphQL API

Performance

GraphQL performance optimization techniques

Performance Optimization

Field Selection

Request only the fields you need to minimize payload size:

# Bad: Over-fetching
query GetProducts {
  products {
    products {
      id
      title
      description
      handle
      variants {
        id
        title
        sku
        inventory_quantity
        calculated_price {
          calculated_amount
          currency_code
        }
      }
      images {
        url
      }
      # ... many more fields
    }
  }
}

# Good: Precise field selection
query GetProducts {
  products(limit: 10) {
    products {
      id
      title
      thumbnail
    }
  }
}

Impact: Reduces payload from ~500KB to ~2KB (250x smaller)

DataLoader Batching

The API automatically batches database queries to prevent N+1 problems:

query GetProductsWithCollections {
  products(limit: 10) {
    products {
      id
      title
      collection {
        id
        title
      }
    }
  }
}

Without DataLoader: 1 query for products + 10 queries for collections = 11 queries
With DataLoader: 1 query for products + 1 batched query for all collections = 2 queries

Query Caching

Use consistent query structures to benefit from caching:

// Good: Consistent query structure
const GET_PRODUCT = gql`
  query GetProduct($id: String!) {
    product(id: $id) {
      id
      title
    }
  }
`;

// Bad: Dynamic query construction
const query = `
  query {
    product(id: "${productId}") {
      id
      title
    }
  }
`;

Pagination Best Practices

Always use limit and offset for large result sets:

query GetProducts($limit: Int, $offset: Int) {
  products(limit: $limit, offset: $offset) {
    products {
      id
      title
    }
    count
    offset
    limit
  }
}

On this page