SDK Services

Beta

The Storefront SDK is in beta. Content in this section may be updated as the SDK evolves.

Package: propeller-sdk-v2 (npm)

The SDK is a TypeScript library that wraps Propeller's GraphQL API into typed service classes. It works in any JavaScript or TypeScript project: Node.js, React, Vue, Angular, Svelte, server-side scripts or anything else.

This is Layer 1 of the Storefront SDK. You can use it on its own or as the foundation for UI Components (Layer 2) and the Accelerator (Layer 3).

Services

The SDK provides seven typed services:

Service	What it does
`ProductService`	Fetch product details, specifications, media, pricing
`CategoryService`	Fetch category trees, category products with filtering and pagination
`CartService`	Create carts, add/update/remove items, manage addresses
`UserService`	Authentication, user profile, registration
`OrderService`	Order history, order details
`PayMethodService`	Available payment methods
`MenuService`	Navigation menu structure

Each service provides typed methods with typed inputs and outputs. No manual GraphQL query writing needed.

Initialization

import {
  GraphQLClient,
  ProductService,
  CartService,
  CategoryService,
  UserService,
  OrderService,
  PayMethodService,
  MenuService
} from 'propeller-sdk-v2';

const graphqlClient = new GraphQLClient({
  endpoint: '/api/graphql',
  apiKey: '',                  // handled by server-side proxy
  timeout: 30000,
});

const productService = new ProductService(graphqlClient);
const categoryService = new CategoryService(graphqlClient);
const cartService = new CartService(graphqlClient);
const userService = new UserService(graphqlClient);
const orderService = new OrderService(graphqlClient);
const payMethodService = new PayMethodService(graphqlClient);
const menuService = new MenuService(graphqlClient);

Usage examples

Fetching a product

const product = await productService.getProduct({
  productId: 42,
  language: 'NL',
  imageSearchFilters: { ... },
  imageVariantFilters: { ... },
});

// product.names[0].value      → "Logitech MX Keys"
// product.sku                 → "MXK-001"
// product.price.gross         → 119.00
// product.media.images.items  → [{ imageVariants: [{ url: "..." }] }]

Fetching a category with products

const category = await categoryService.getCategory({
  categoryId: 17,
  language: 'NL',
  categoryProductSearchInput: {
    language: 'NL',
    page: 1,
    offset: 12,
    textFilters: [{ name: 'COLOR', values: ['Red'] }],
    sortInputs: [{ field: 'NAME', order: 'ASC' }],
  },
});

// category.products.items      → Product[]
// category.products.itemsFound → 48
// category.products.pages      → 4
// category.products.filters    → AttributeFilter[]

Adding to cart

const cart = await cartService.addItemToCart({
  id: cartId,
  input: {
    productId: product.productId,
    quantity: 2,
  },
  language: 'NL',
  imageSearchFilters: { ... },
  imageVariantFilters: { ... },
});

GraphQL proxy pattern

The SDK sends all requests to a server-side API route (/api/graphql) rather than directly to Propeller's API. This proxy injects the API key server-side so it is never exposed to the browser.

Browser                          Server                    Propeller API
───────                          ──────                    ────────────
productService.getProduct()
  → POST /api/graphql            → Injects API key header
                                  → Forwards to Propeller  → Returns data
                                  ← Passes response back
  ← Receives typed result

When a user is logged in, the proxy also forwards the user's authorization header.

Services​

Initialization​

Usage examples​

Fetching a product​

Fetching a category with products​

Adding to cart​

GraphQL proxy pattern​

See also​