useShowpadAPIStore
import { useShowpadAPIStore } from '@bbc/front-end-kit/vue/showpad'
The useShowpadAPIStore is a wrapper for the Showpad REST API. It manages authentication tokens and provides a reactive interface for making direct HTTP calls to Showpad services.
Tips
This store is automatically initialized by useSpStore. While it can be used independently, it is designed to be accessed through the main useSpStore to ensure consistent state management across the application. For most use cases, use the unified methods on useSpStore directly — they handle the SDK/API fallback logic automatically.
Overview
While the SDK is the preferred method for most interactions, the REST API often provides features before they are available in the SDK. This store acts as the fallback backend for useSpStore.
Translation Layer
Like its SDK counterpart, this store serves as a translation layer between the application codebase and the Showpad REST API. Showpad's API endpoints are known to introduce breaking changes without warning or deprecation, which can silently break functionality across projects.
By routing all REST API interactions through this single store, the rest of the codebase is fully shielded from those changes. When an endpoint changes its contract, the fix is limited to this file — the store's public API stays the same, only the internal HTTP translation needs updating.
Any changes to the store's own public API will always go through a proper deprecation cycle with internal translations, so consuming components can migrate at their own pace.
Getting started
import { useShowpadAPIStore } from '@bbc/front-end-kit/vue/showpad'
const showpadAPIStore = useShowpadAPIStore()
// Initialize the API connection
await showpadAPIStore.init({ apiConfig: { accessToken: '...' } })
API
State & Properties
loaded
Boolean flag indicating if the API store is initialized and authenticated.
Values: Ref<Boolean>
loading
Boolean flag indicating if an API initialization or request is in progress.
Values: Ref<Boolean>
loadStage
Current description of the API initialization phase.
Values: Ref<String | null>
apiConfig
The current API configuration, including the accessToken.
Values: Ref<Object | null>
error
Reactive reference to the last error that occurred during an API operation. Set automatically when init() fails. Check this after initialization to handle authentication or connectivity errors gracefully.
Values: Ref<any | null>
Methods
init ({ apiConfig })
Initializes the store with the provided API configuration (usually obtained via the SDK in useSpStore). Sets loading to true for the duration, and updates error if an exception is thrown.
Parameters:
apiConfig(Object): The configuration object containing access tokens and base URLs.
Returns: Promise<void>
getAssetsByQuery (query, { limit, offset })
Searches for assets using a ShowQL query string against the Showpad V4 REST API. Requires the store to be initialized with a valid accessToken.
Parameters:
query(String): A ShowQL query string to filter assets.limit(Number, optional): Maximum number of results to return. Defaults to20.offset(Number, optional): Number of results to skip for pagination. Defaults to0.
Returns: Promise<Array> — The list of matching asset items, or an empty array if none found.
Throws: If the store is not initialized or the API request fails.