Skip to main content

​
Cache and storage

The client exposes a reactive cache: 
const { cache } = client

cache.get('cache-key') // CacheEntry<QueryResult> | null
cache.invalidate('browse') // invalidate keys containing 'browse'
cache.persist() // save to storage
cache.restore() // restore from storage
cache.clear() // clear all
cache.stats.entries // current entry count

​
Storage adapters

import { localStorageAdapter, fileStorage } from '@commerce-blocks/sdk'

// Browser (returns null if unavailable)
const browserAdapter = localStorageAdapter('my-cache-key')

// Node.js
import fs from 'fs'
const nodeAdapter = fileStorage('./cache.json', fs)
Custom adapter. Implement StorageAdapter: 
const adapter: StorageAdapter = {
  read: () => sessionStorage.getItem('key'),
  write: (data) => sessionStorage.setItem('key', data),
  remove: () => sessionStorage.removeItem('key'),
}

​
Signals

The SDK provides framework-agnostic reactive primitives (via @preact/signals-core). These work in any JavaScript environment with no framework dependency required: 
import { signal, computed, effect, batch } from '@commerce-blocks/sdk'
You don’t need to use signals directly. Every controller provides a subscribe() method and the SDK exports a standalone subscribe() utility that work without any signal imports. See Framework Integration for patterns in React, Vue, Svelte, and more.

​
Singleton access

After initialization, access the client anywhere: 
import { getClient, isInitialized } from '@commerce-blocks/sdk'

if (isInitialized()) {
  const { data: client } = getClient()
  // Use client
}

​
Technical details

  • Runtime: Browser (ESM)
  • TypeScript: Full type definitions included
  • Dependencies: @preact/signals-core
  • Bundle: Tree-shakeable ES modules
  • Caching: Built-in LRU cache with configurable TTL

​
Next steps