Building Storefronts

Medusa Storefront Development

Frontend integration guide for building storefronts with Medusa. Covers SDK usage, React Query patterns, and calling custom API routes.

When to Apply

Load this skill for ANY storefront development task, including:

• Calling custom Medusa API routes from the storefront
• Integrating Medusa SDK in frontend applications
• Using React Query for data fetching
• Implementing mutations with optimistic updates
• Error handling and cache invalidation

Also load building-with-medusa when: Building the backend API routes that the storefront calls

CRITICAL: Load Reference Files When Needed

The quick reference below is NOT sufficient for implementation. You MUST load the reference file before writing storefront integration code.

Load this reference when implementing storefront features:

• Calling API routes? → MUST load references/frontend-integration.md first
• Using SDK? → MUST load references/frontend-integration.md first
• Implementing React Query? → MUST load references/frontend-integration.md first

Rule Categories by Priority

Quick Reference

1. SDK Usage (CRITICAL)

• sdk-always-use - ALWAYS use the Medusa JS SDK for ALL API requests - NEVER use regular fetch()
• sdk-existing-methods - For built-in endpoints, use existing SDK methods (sdk.store.product.list(), sdk.admin.order.retrieve())
• sdk-client-fetch - For custom API routes, use sdk.client.fetch()
• sdk-required-headers - SDK automatically adds required headers (publishable API key for store, auth for admin) - regular fetch() missing these headers causes errors
• sdk-no-json-stringify - NEVER use JSON.stringify() on body - SDK handles serialization automatically
• sdk-plain-objects - Pass plain JavaScript objects to body, not strings
• sdk-locate-first - Always locate where SDK is instantiated in the project before using it

2. React Query Patterns (HIGH)

• query-use-query - Use useQuery for GET requests (data fetching)
• query-use-mutation - Use useMutation for POST/DELETE requests (mutations)
• query-invalidate - Invalidate queries in onSuccess to refresh data after mutations
• query-keys-hierarchical - Structure query keys hierarchically for effective cache management
• query-loading-states - Always handle isLoading, isPending, isError states

3. Data Display (HIGH)

• display-price-format - CRITICAL: Prices from Medusa are stored as-is ($49.99 = 49.99, NOT in cents). Display them directly - NEVER divide by 100

4. Error Handling (MEDIUM)

• error-on-error - Implement onError callback in mutations to handle failures
• error-display - Show error messages to users when mutations fail
• error-rollback - Use optimistic updates with rollback on error for better UX

Critical SDK Pattern

ALWAYS pass plain objects to the SDK - NEVER use JSON.stringify():

// ✅ CORRECT - Plain object
await sdk.client.fetch("/store/reviews", {
  method: "POST",
  body: {
    product_id: "prod_123",
    rating: 5,
  }
})

// ❌ WRONG - JSON.stringify breaks the request
await sdk.client.fetch("/store/reviews", {
  method: "POST",
  body: JSON.stringify({  // ❌ DON'T DO THIS!
    product_id: "prod_123",
    rating: 5,
  })
})

Why this matters:

• The SDK handles JSON serialization automatically
• Using JSON.stringify() will double-serialize and break the request
• The server won't be able to parse the body

Common Mistakes Checklist

Before implementing, verify you're NOT doing these:

SDK Usage:

• [ ] Using regular fetch() instead of the Medusa JS SDK (causes missing header errors)
• [ ] Not using existing SDK methods for built-in endpoints (e.g., using sdk.client.fetch("/store/products") instead of sdk.store.product.list())
• [ ] Using JSON.stringify() on the body parameter
• [ ] Manually setting Content-Type headers (SDK adds them)
• [ ] Hardcoding SDK import paths (locate in project first)
• [ ] Not using sdk.client.fetch() for custom routes

React Query:

• [ ] Not invalidating queries after mutations
• [ ] Using flat query keys instead of hierarchical
• [ ] Not handling loading and error states
• [ ] Forgetting to disable buttons during mutations (isPending)

Data Display:

• [ ] CRITICAL: Dividing prices by 100 when displaying (prices are stored as-is: $49.99 = 49.99, NOT in cents)

Error Handling:

• [ ] Not implementing onError callbacks
• [ ] Not showing error messages to users
• [ ] Not handling network failures gracefully

How to Use

For detailed patterns and examples, load reference file:

references/frontend-integration.md - SDK usage, React Query patterns, API integration

The reference file contains:

• Step-by-step SDK integration patterns
• Complete React Query examples
• Correct vs incorrect code examples
• Query key best practices
• Optimistic update patterns
• Error handling strategies

When to Use MedusaDocs MCP Server

Use this skill for (PRIMARY SOURCE):

• How to call custom API routes from storefront
• SDK usage patterns (sdk.client.fetch)
• React Query integration patterns
• Common mistakes and anti-patterns

Use MedusaDocs MCP server for (SECONDARY SOURCE):

• Built-in SDK methods (sdk.admin., sdk.store.)
• Official Medusa SDK API reference
• Framework-specific configuration options

Why skills come first:

• Skills contain critical patterns like "don't use JSON.stringify" that MCP doesn't emphasize
• Skills show correct vs incorrect patterns; MCP shows what's possible
• Planning requires understanding patterns, not just API reference

Integration with Backend

⚠️ CRITICAL: ALWAYS use the Medusa JS SDK - NEVER use regular fetch()

When building features that span backend and frontend:

1. Backend (building-with-medusa skill): Module → Workflow → API Route 2. Storefront (this skill): SDK → React Query → UI Components 3. Connection:

• Built-in endpoints: Use existing SDK methods (sdk.store.product.list())
• Custom API routes: Use sdk.client.fetch("/store/my-route")
• NEVER use regular fetch() - missing publishable API key causes errors

Why the SDK is required:

• Store routes need x-publishable-api-key header
• Admin routes need Authorization and session headers
• SDK handles all required headers automatically
• Regular fetch() without headers → authentication/authorization errors

See building-with-medusa for backend API route patterns.

Frontend SDK Integration

Contents

• Frontend SDK Pattern
• Locating the SDK
• Using sdk.client.fetch()
• React Query Pattern
• Query Key Best Practices
• Error Handling
• Optimistic Updates

This guide covers how to integrate Medusa custom API routes with frontend applications using the Medusa SDK and React Query.

Note: API routes are also referred to as "endpoints" - these terms are interchangeable.

Frontend SDK Pattern

Locating the SDK

IMPORTANT: Never hardcode SDK import paths. Always locate where the SDK is instantiated in the project first.

Look for @medusajs/js-sdk

The SDK instance is typically exported as sdk:

import { sdk } from "[LOCATE IN PROJECT]"

Using sdk.client.fetch()

⚠️ CRITICAL: ALWAYS use the Medusa JS SDK for ALL API requests - NEVER use regular fetch()

Why this is critical:

• Store API routes require the publishable API key in headers
• Admin API routes require authentication headers
• Regular fetch() without these headers will cause errors
• The SDK automatically handles all required headers for you

When to use what:

• Existing endpoints (built-in Medusa routes): Use existing SDK methods like sdk.store.product.list(), sdk.admin.order.retrieve()
• Custom endpoints (your custom API routes): Use sdk.client.fetch() for custom routes

⚠️ CRITICAL: The SDK handles JSON serialization automatically. NEVER use JSON.stringify() on the body.

Call custom API routes using the SDK:

import { sdk } from "[LOCATE SDK INSTANCE IN PROJECT]"

// ✅ CORRECT - Pass object directly
const result = await sdk.client.fetch("/store/my-route", {
  method: "POST",
  body: {
    email: "user@example.com",
    name: "John Doe",
  },
})

// ❌ WRONG - Don't use JSON.stringify
const result = await sdk.client.fetch("/store/my-route", {
  method: "POST",
  body: JSON.stringify({  // ❌ DON'T DO THIS!
    email: "user@example.com",
  }),
})

Key points:

• The SDK handles JSON serialization automatically - just pass plain objects
• NEVER use JSON.stringify() - this will break the request
• No need to set Content-Type headers - SDK adds them
• Session/JWT authentication is handled automatically
• Publishable API key is automatically added

Built-in Endpoints vs Custom Endpoints

⚠️ CRITICAL: Use the appropriate SDK method based on endpoint type

import { sdk } from "[LOCATE SDK INSTANCE IN PROJECT]"

// ✅ CORRECT - Built-in endpoint: Use existing SDK method
const products = await sdk.store.product.list({
  limit: 10,
  offset: 0
})

// ✅ CORRECT - Custom endpoint: Use sdk.client.fetch()
const reviews = await sdk.client.fetch("/store/products/prod_123/reviews")

// ❌ WRONG - Using regular fetch for ANY endpoint
const products = await fetch("http://localhost:9000/store/products")
// ❌ Error: Missing publishable API key header!

// ❌ WRONG - Using regular fetch for custom endpoint
const reviews = await fetch("http://localhost:9000/store/products/prod_123/reviews")
// ❌ Error: Missing publishable API key header!

// ❌ WRONG - Using sdk.client.fetch() for built-in endpoint when SDK method exists
const products = await sdk.client.fetch("/store/products")
// ❌ Less type-safe than using sdk.store.product.list()

Why this matters:

• Store routes require x-publishable-api-key header - SDK adds it automatically
• Admin routes require Authorization and session cookie headers - SDK adds them automatically
• Regular fetch() doesn't include these headers → API returns authentication/authorization errors
• Using existing SDK methods provides better type safety and autocomplete

React Query Pattern

Use useQuery for GET requests and useMutation for POST/DELETE:

import { sdk } from "[LOCATE SDK INSTANCE IN PROJECT]"
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"

function MyComponent({ userId }: { userId: string }) {
  const queryClient = useQueryClient()

  // GET request - fetching data
  const { data, isLoading } = useQuery({
    queryKey: ["my-data", userId],
    queryFn: () => sdk.client.fetch(`/store/my-route?userId=${userId}`),
    enabled: !!userId,
  })

  // POST request - mutation with cache invalidation
  const mutation = useMutation({
    mutationFn: (input: { email: string }) =>
      sdk.client.fetch("/store/my-route", { method: "POST", body: input }),
    onSuccess: () => {
      // Invalidate and refetch related queries
      queryClient.invalidateQueries({ queryKey: ["my-data"] })
    },
  })

  if (isLoading) return <p>Loading...</p>

  return (
    <div>
      <p>{data?.title}</p>
      <button
        onClick={() => mutation.mutate({ email: "test@example.com" })}
        disabled={mutation.isPending}
      >
        {mutation.isPending ? "Loading..." : "Submit"}
      </button>
      {mutation.isError && <p>Error occurred</p>}
    </div>
  )
}

Key states: isLoading, isPending, isSuccess, isError, error

Query Key Best Practices

Structure query keys for effective cache management:

// Good: Hierarchical structure
queryKey: ["products", productId]
queryKey: ["products", "list", { page, filters }]

// Invalidate all product queries
queryClient.invalidateQueries({ queryKey: ["products"] })

// Invalidate specific product
queryClient.invalidateQueries({ queryKey: ["products", productId] })

Error Handling

Handle API errors gracefully:

const mutation = useMutation({
  mutationFn: (input) => sdk.client.fetch("/store/my-route", {
    method: "POST",
    body: input
  }),
  onError: (error) => {
    console.error("Mutation failed:", error)
    // Show error message to user
  },
})

// In component
{mutation.isError && (
  <p className="error">
    {mutation.error?.message || "An error occurred"}
  </p>
)}

Optimistic Updates

Update UI immediately before server confirms:

const mutation = useMutation({
  mutationFn: (newItem) =>
    sdk.client.fetch("/store/items", { method: "POST", body: newItem }),
  onMutate: async (newItem) => {
    // Cancel outgoing refetches
    await queryClient.cancelQueries({ queryKey: ["items"] })

    // Snapshot previous value
    const previousItems = queryClient.getQueryData(["items"])

    // Optimistically update
    queryClient.setQueryData(["items"], (old) => [...old, newItem])

    // Return context with snapshot
    return { previousItems }
  },
  onError: (err, newItem, context) => {
    // Rollback on error
    queryClient.setQueryData(["items"], context.previousItems)
  },
  onSettled: () => {
    // Refetch after mutation
    queryClient.invalidateQueries({ queryKey: ["items"] })
  },
})