Local development data - mockData.json vs hooks

When developing Custom Blocks locally, you’ll encounter two different “data sources”:

• mockData.json (local-only, developer-controlled)
• Hooks that fetch data from Tapcart APIs (network-backed)

mockData.json

mockData.json lives next to your block’s code.jsx file.

It is read by the local dev server and makes values available via useVariables().

Typical uses:

• Rendering customer/device/cart values without needing real app state
• Developing UI logic that depends on variables

Example:

{
  "customer": {
    "id": "<UUID>",
    "firstName": "Taylor"
  },
  "device": {
    "locale": "en-US"
  },
  "cart": {
    "items": []
  }
}

Network-backed hooks (Tapcart APIs)

Hooks like useCollection fetch real data from Tapcart APIs using environment context (appId, apiUrl, locale, etc.).

Examples:

• useCollection(...)

Important:

• mockData.json does not mock or override network-backed hook results.
• If your example depends on a network-backed hook, local preview may require a valid project/app context.

Key takeaway

Use mockData.json to test blocks that rely on useVariables().

If your block uses hooks like useCollection, those calls still fetch real data from Tapcart APIs.

Back to Examples