Vue Storefront is now Alokai! Learn More
Creating New API Methods

Creating New API Methods

When building your Storefront, you may need additional functionality beyond the Unified Data Methods. Alokai provides an out-of-the-box custom extension for adding new API methods.

Complete Guide

For the complete guide on extensions, hooks, advanced patterns, and frontend integration, see the Extending the Middleware guide.

Quick Reference

Every Alokai project includes a pre-configured custom extension for adding API methods. Here's the basic workflow:

1

Define Types in apps/storefront-middleware/api/custom-methods/types.ts:

export interface MyMethodArgs {
  id: string;
}

export interface MyMethodResponse {
  data: any;
}

2

Implement Method in apps/storefront-middleware/api/custom-methods/custom.ts:

import type { IntegrationContext } from '@/types';
import type { MyMethodArgs, MyMethodResponse } from './types';

export async function myMethod(
  context: IntegrationContext,
  args: MyMethodArgs,
): Promise<MyMethodResponse> {
  const { data } = await context.client.get(`/endpoint/${args.id}`);
  return { data };
}

3

Export Method in apps/storefront-middleware/api/custom-methods/index.ts:

export { myMethod } from './custom';

Your method is now available in the SDK:

const result = await sdk.customExtension.myMethod({ id: '123' });

Args Should Be Objects

Always make your args parameter an object, not individual parameters. This ensures compatibility and allows you to add fields later without breaking changes.

Learn More