JavaScript SDK

Use the OneBasket SDK to call the Storefront API from JavaScript and TypeScript applications.

@onebasket/sdk is a typed client for the Storefront API. It is generated from the same OpenAPI documents as the API reference, so function names match the operation ids shown there.

The SDK currently covers the Baskets and Catalogues APIs.

Install

npm i @onebasket/sdk

Configure

The SDK reads the base URL and the API key from environment variables.

.env

ONEBASKET_API_URL=
ONEBASKET_API_KEY=

Next.js only exposes variables with the NEXT_PUBLIC_ prefix to the browser:

.env

NEXT_PUBLIC_ONEBASKET_API_URL=
NEXT_PUBLIC_ONEBASKET_API_KEY=

Choose a wrapper

The SDK ships one wrapper for each data-fetching library. Import from the wrapper that matches your application, for example @onebasket/sdk/react-query.

Wrapper	Library
`angular`	Angular `HttpClient`
`axios`	Axios
`axios-functions`	Axios, as standalone functions
`fetch`	The Fetch API
`react-query`	TanStack Query for React
`svelte-query`	TanStack Query for Svelte
`vue-query`	TanStack Query for Vue
`swr`	SWR
`zod`	Zod schemas for request and response validation

React Query example

Import QueryClient and QueryClientProvider from the SDK wrapper, not from @tanstack/react-query. Add the provider near the top of your component tree.

app.tsx

import { QueryClient, QueryClientProvider } from '@onebasket/sdk/react-query';

const queryClient = new QueryClient();

export function Root() {
  return (
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  );
}

Then use the generated hooks. Each hook is named after an operation id.

product-list.tsx

import { useGetProducts } from '@onebasket/sdk/react-query';

export function ProductList() {
  const { data, isLoading, error } = useGetProducts({ page: 1, pageSize: 10 });

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return <p>{data?.results.length} products found</p>;
}

Without the SDK

Every endpoint is a plain REST call, so any HTTP client works. Each endpoint page in the API reference shows a request sample in cURL, JavaScript, Python, Go, Java and C#.