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 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`	User profile, user data
`LoginService`	Authentication, login, token management
`OrderService`	Order history, order details
`PayMethodService`	Available payment methods
`MenuService`	Navigation menu structure
`AddressService`	Address CRUD operations for contacts, customers and companies
`FavoriteListService`	Favorite list management, add/remove items

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

Initialization

import {
  GraphQLClient,
  ProductService,
  CartService,
  CategoryService,
  UserService,
  LoginService,
  OrderService,
  PayMethodService,
  MenuService,
  AddressService,
  FavoriteListService
} 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 loginService = new LoginService(graphqlClient);
const orderService = new OrderService(graphqlClient);
const payMethodService = new PayMethodService(graphqlClient);
const menuService = new MenuService(graphqlClient);
const addressService = new AddressService(graphqlClient);
const favoriteListService = new FavoriteListService(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​