Skip to Content
Build with FinquStorefrontNexus ThemeData Fetching

Data Fetching

Learn how to fetch data from the Finqu Storefront API using the @finqu/storefront-sdk.

Server Components

Use the Finqu SDK in Server Components for direct API access:

// app/my-component.tsx (Server Component)
import { storefrontClient, cachePresets } from '@/lib/storefront';
import { getProduct, getCatalogProducts } from '@finqu/storefront-sdk/server';
 
export default async function ServerComponent() {
  // Using SDK helper
  const { product } = await getProduct(storefrontClient, {
    handle: 'my-product-slug',
  });
 
  // Direct query
  const result = await getCatalogProducts(storefrontClient, {
    first: 10,
    query: 'search term',
  });
 
  const products = result.catalog.products.nodes;
  const totalCount = result.catalog.products.totalCount;
 
  return <div>{product?.title}</div>;
}

Client Components

Use React hooks for client-side data fetching:

'use client';
 
import { useProduct, useCatalogProducts } from '@finqu/storefront-sdk/react';
 
export function ClientComponent() {
  const { product, isLoading } = useProduct({
    id: 123,
  });
 
  const { products } = useCatalogProducts({
    first: 20,
    query: 'shirts',
  });
 
  return <div>{isLoading ? <div>Loading...</div> : <div>{product?.title}</div>}</div>;
}

Caching Strategy

The SDK provides cache presets for different data types:

import { storefrontClient, cachePresets, withLocale } from '@/lib/storefront';
 
// Long-lived data (1 hour)
const menus = await storefrontClient.query(MENU_QUERY, {}, withLocale('en', cachePresets.static));
 
// Product data (1 minute)
const products = await storefrontClient.query(PRODUCTS_QUERY, {}, cachePresets.products);
 
// Dynamic data (no cache)
const cart = await storefrontClient.query(CART_QUERY, {}, cachePresets.dynamic);

Cache Presets

PresetDurationUse Case
static1 hourMenus, navigation, settings
products1 minuteProduct listings, details
dynamicNo cacheCart, user-specific data

Using Locale

Always pass the locale when fetching data:

import { getLocale } from '@/lib/locale';
import { storefrontClient, withLocale } from '@/lib/storefront';
 
export default async function ServerComponent() {
  const locale = await getLocale();
  
  const result = await storefrontClient.query(
    PRODUCTS_QUERY,
    {},
    withLocale(locale, cachePresets.products)
  );
  
  return <div>{/* ... */}</div>;
}

Error Handling

Handle API errors gracefully:

import { storefrontClient } from '@/lib/storefront';
 
export default async function ServerComponent() {
  try {
    const { product } = await getProduct(storefrontClient, {
      handle: 'my-product',
    });
    
    if (!product) {
      return <div>Product not found</div>;
    }
    
    return <div>{product.title}</div>;
  } catch (error) {
    console.error('Failed to fetch product:', error);
    return <div>Error loading product</div>;
  }
}

Common Patterns

Fetching Products

import { getCatalogProducts } from '@finqu/storefront-sdk/server';
import { storefrontClient, cachePresets } from '@/lib/storefront';
 
const result = await getCatalogProducts(storefrontClient, {
  first: 20,
  query: 'shirts',
  sortBy: 'PRICE_ASC',
});
 
const products = result.catalog.products.nodes;

Fetching a Single Product

import { getProduct } from '@finqu/storefront-sdk/server';
import { storefrontClient } from '@/lib/storefront';
 
const { product } = await getProduct(storefrontClient, {
  id: 123,
  // or
  handle: 'product-slug',
});

Fetching Categories

import { getProductGroups } from '@finqu/storefront-sdk/server';
import { storefrontClient, cachePresets } from '@/lib/storefront';
 
const result = await getProductGroups(storefrontClient, {
  first: 10,
});
 
const categories = result.catalog.productGroups.nodes;

Next Steps