Data Not Showing Up

How to debug blank pages, missing data, and API routes that return empty.

What Does "Data Not Showing Up" Look Like?

The page loads without errors but something is missing:

  • Lists are empty
  • Cards show no content
  • Charts have no data points
  • Tables have no rows
  • The API returns [] or null

Understanding the Data Flow

Data flows through a chain. If any link breaks, data will not appear:

The data flow chaintext
Database (PostgreSQL on Neon)
  -> SQL query in API route (app/api/...)
    -> fetch() call in page or component
      -> Render in JSX

If data is missing, one of these steps is broken.

Step 1: Check the Browser Network Tab

The Network tab shows you exactly what the API returns:

How to check API responsestext
1. Open Chrome DevTools (F12 or Cmd+Option+I)
2. Click the 'Network' tab
3. Reload the page
4. Look for API calls (filter by 'Fetch/XHR')
5. Click on the request to see the Response
6. Check if the response contains data or is empty

This tells you where the problem is:

What Network Tab ShowsProblem Is In
API returns [] (empty array)Server / database query
API returns data but page is blankFrontend rendering code
API call returns 500 errorServer error (see Server-Side Errors)
No API call is madeFrontend code is not calling the API

Step 2: Debug the API Route

If the API returns empty data, the query might be wrong:

Debug an empty API response
Claude prompt
my-app-name: The dashboard page loads but shows no data. The list is completely empty. I checked the browser Network tab and the API call to /api/dashboard returns an empty array: [] Can you check the API route and database query to find why no data is being returned?

Step 3: Debug the Frontend

If the API returns data but the page is still blank:

API returns data but page is blank
Claude prompt
my-app-name: I checked the Network tab and the API at /api/items returns data correctly. But the page still shows nothing. Can you check the component that renders the items list and make sure it is correctly reading the API response?

Local vs. Deployed

Remember: local development does not have database access. Data will only appear in:

  • PR preview environments (isolated Neon database branch)
  • Production (the live app)

If you are testing locally and see no data, this is expected. Push your changes, create a PR, and test on the preview URL.

Testing API Routes Locally

You can still test API route logic locally, even without a database:

Test API routesbash
# Start the dev server
pnpm dev:your-app-name

# Test the API in another terminal
curl http://localhost:3000/api/your-route

# If you see [] or null, check the API route logic
# Note: Database queries will fail locally (this is expected)

Common Causes

  • Wrong API endpoint URL — typo in the fetch URL
  • Database query returns wrong columns — SELECT does not include the needed fields
  • Data format mismatch — API returns { data: [...] } but the component expects [...]
  • Missing error handling — the fetch fails silently and no data is shown
  • Environment variable not set — DATABASE_URL missing in Railway (check deploy settings)

Quiz

Quiz

Your page loads without errors but the list is empty. The API returns []. Where is the problem?