Skip to main content
The @colossal-sh/storefront-sdk provides React hooks and components for building storefronts. It wraps the Colossal Storefront GraphQL API. For a reference implementation, see the Storefront Starter Template.

​
Installation

npm install @colossal-sh/storefront-sdk

​
Setup

Initialize the client and wrap your app in the required providers: 
// main.tsx
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { CartProvider, initStorefrontClient } from "@colossal-sh/storefront-sdk";

initStorefrontClient();

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <CartProvider storeUid="your-store-uid" currency="USD">
        {/* Your storefront components */}
      </CartProvider>
    </QueryClientProvider>
  );
}

​
Store

Fetch project details by UID or for the current context.
NameTypePurpose
useStore({ uid })HookFetch store details by UID
useCurrentStore()HookFetch the current store
fetchStore({ uid })MethodServer-side store fetch
fetchCurrentStore()MethodServer-side current store fetch
import { useStore, useCurrentStore } from "@colossal-sh/storefront-sdk";

// By UID
const { data } = useStore({ uid: "store-uid" });
const store = data?.storeDetails;

// Current store
const { data } = useCurrentStore();
const store = data?.currentStore;
For SSR or data loaders: 
import { fetchStore, fetchCurrentStore } from "@colossal-sh/storefront-sdk";

const storeData = await fetchStore({ uid: "store-uid" });
const currentData = await fetchCurrentStore();
​
store
Store

​
Explore main parts of Colossal SDK

Products

Fetch and display products with simplified or full data hooks.

Cart

Manage shopping carts with add, update, and remove operations.

Checkout

Create checkout sessions and redirect to hosted checkout.