Mock Empty Collection Response

Empty Collection Response

An empty collection response occurs when a query returns no results. This is an important edge case that every frontend must handle gracefully. The response should maintain the same structure as a non-empty response.

Response Structure

{
  "data": [],
  "meta": {
    "total": 0,
    "page": 1,
    "perPage": 20,
    "totalPages": 0
  }
}

Why This Matters

Empty states are one of the most overlooked UI states. A well-designed empty state:

• Clearly communicates that no data was found
• Provides actionable next steps (adjust filters, create first item, etc.)
• Maintains layout consistency so the page does not "jump"
• Differs between "no results for this filter" and "no data exists yet"

Structural Consistency

Notice that the response maintains the exact same structure as a populated response. The data field is an empty array (not null or missing), and the meta block is present with zeroed values. This consistency is critical for client-side parsing — the frontend code can always safely access response.data.length without null checks.

Testing Empty States

When testing with this mock, verify that your UI:

1. Shows a meaningful empty state message
2. Hides pagination controls when totalPages is 0
3. Does not show "Loading..." indefinitely
4. Handles the transition from populated to empty (e.g., after deleting the last item)