Read a Google Sheet in React

How do you read a Google Sheet in React?

Fetch it from an endpoint that serves the sheet as JSON. What you must not do is call Google's API directly from the browser with a key — anything shipped to the client is public, and a leaked API key is someone else's quota to burn.

That is the trap this question usually walks into. The fix is to keep the credential out of the browser entirely: put a public, read-only endpoint in front of the sheet and let the client fetch that.

Fetching in a component

Nothing exotic — it is a normal JSON fetch, and the values come back typed:

import { useEffect, useState } from 'react'

export function Listings() {
  const [rows, setRows] = useState([])

  useEffect(() => {
    fetch('https://pastesheet.com/api/your-endpoint-id?status=active&limit=50')
      .then((r) => r.json())
      .then((res) => setRows(res.data))
  }, [])

  return (
    <ul>
      {rows.map((row) => (
        <li key={row.id}>{row.name} — {row.price}</li>
      ))}
    </ul>
  )
}

Public data only

A client-side fetch means the endpoint is reachable by anyone who opens dev tools. That is fine for a public catalog, a directory, or an FAQ — which is what most sheet-backed React apps are showing anyway.

If the data is not public, do not fetch it from the browser. Call a private endpoint from your server (a Next.js route handler, an API route) with a bearer key, and pass the rows down as props.

What it costs

MCP is included on the Free plan. Connect any public endpoint over MCP with no Google Cloud project and no credit card. Private endpoints and the account-wide workspace server need a paid plan (from Starter ($9/mo)) for the keys and OAuth they authenticate with.

Pro adds full-text search and aggregation (count, sum, avg, group_by) that your AI agent can call through query_rows.

Frequently asked questions

Related guides