CubeCom Pro Docs
Developers

Build a configurator

Step-by-step tutorial building a custom configurator UI from the GraphQL API.

Learn how to build a custom configurator UI using React and the CubeCom Pro GraphQL API.

Step 1: Query Product and Initial State

const GET_PRODUCT_QUERY = `
  query GetProductDetail($productId: String!) {
    product(id: $productId) {
      id
      name
      key
    }
    productRevisionDetail(id: $productId) {
      id
      choices {
        id
        key
        name
        required
        values {
          id
          key
          name
          metadataJson
        }
      }
    }
  }
`;

Step 2: Resolve on Selection Change

async function resolveSelection(productId: string, selections: Record<string, string>) {
  const query = `
    query Resolve($input: ConfigurationStateInput!) {
      resolveConfiguration(input: $input) {
        valid
        violations
        availabilityJson
        threeD {
          rootObjectAssetRevisionId
          activeObjectAssetRevisionIds
          activeMaterialAssetRevisionIds
          activeTextureAssetRevisionIds
          effects {
            operation
            targetKey
            materialAssetRevisionId
            linkedAssetKey
          }
        }
        commerce {
          sku
          variantReference
          provider
        }
      }
    }
  `;

  const response = await fetch('/api/cubecom/resolve', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      productId,
      selectionsJson: JSON.stringify(selections)
    })
  });

  return response.json();
}

On this page