Skip to main content

​
Usage

const {
  data,
  isLoading,
  isError,
  isSuccess,
  error,
  refetch,
  fetchSku,
} = useGetSku({
  id: "sku_123",
  getBearerToken: getToken,
});

​
Input Parameters

ParameterTypeRequiredDescription
idstringYesThe SKU identifier
getBearerToken() => Promise<string>YesFunction returning the auth token
queryOptionsUseQueryOptionsNoReact Query options (e.g. staleTime, enabled)

​
Return Value

PropertyTypeDescription
dataSku | undefinedThe SKU data
isLoadingbooleanTrue while fetching
isErrorbooleanTrue if an error occurred
isSuccessbooleanTrue if the query succeeded
errorError | nullError when isError is true
refetch() => voidRe-run the query
fetchSku(input) => Promise<Sku>Imperatively fetch a SKU with custom params

​
Example Implementation

import { useGetSku } from "@chipi-stack/chipi-react";
import { useAuth } from "@clerk/nextjs";

export function SkuDetail({ skuId }: { skuId: string }) {
  const { getToken } = useAuth();

  const { data: sku, isLoading, error } = useGetSku({
    id: skuId,
    getBearerToken: getToken,
  });

  if (isLoading) return <p>Loading SKU...</p>;
  if (error) return <p>Error: {error.message}</p>;
  if (!sku) return <p>SKU not found</p>;

  return (
    <div>
      <h2>{sku.name}</h2>
      <p>{sku.description}</p>
      <p>Price: {sku.price} MXN</p>
      <p>Category: {sku.category}</p>
    </div>
  );
}
  • useGetSkuList — Fetch a paginated list of available SKUs
  • usePurchaseSku — Purchase a SKU once you have its ID