The data platform that powers your React application

Easily create user interfaces with React and GraphQL.

Grafbase + React

React gives you all the tools you need to build production-scale applications. Whether you work with a server-side rendering framework or build a single page application, React has you covered.

Fetch request with Typescript and Vite
import React, { useEffect, useState } from 'react'
import ReactDOM from 'react-dom'

type Message = {
  id: string
  author: string
  body: string
  createdAt: string
}

type Data = {
  data: {
    messageCollection: { edges: { node: Message }[] }
  }
}

const App = () => {
  const [data, setData] = useState<Data>()

  const GetAllMessagesQuery = /* GraphQL */ `
    query GetAllMessages($first: Int!) {
      messageCollection(first: $first) {
        edges {
          node {
            id
            author
            body
            createdAt
          }
        }
      }
    }
  `

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('http://localhost:4000/graphql', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          query: GetAllMessagesQuery,
          variables: {
            first: 100
          }
        })
      })

      const result = (await response.json()) as Data
      setData(result)
    }

    fetchData()
  })

  return (
    <div>
      <h3>Grafbase Messages</h3>
      {data && (
        <>
          <ul>
            {data.data.messageCollection?.edges?.map(({ node }) => (
              <li key={node.id}>
                {node.author} - {node.body} - {node.createdAt}
              </li>
            ))}
          </ul>
        </>
      )}
    </div>
  )
}

export default App

ReactDOM.render(<App />, document.getElementById('root'))
Fetch request with Typescript and Vite
import React, { useEffect, useState } from 'react'
import ReactDOM from 'react-dom'

type Message = {
  id: string
  author: string
  body: string
  createdAt: string
}

type Data = {
  data: {
    messageCollection: { edges: { node: Message }[] }
  }
}

const App = () => {
  const [data, setData] = useState<Data>()

  const GetAllMessagesQuery = /* GraphQL */ `
    query GetAllMessages($first: Int!) {
      messageCollection(first: $first) {
        edges {
          node {
            id
            author
            body
            createdAt
          }
        }
      }
    }
  `

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('http://localhost:4000/graphql', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          query: GetAllMessagesQuery,
          variables: {
            first: 100
          }
        })
      })

      const result = (await response.json()) as Data
      setData(result)
    }

    fetchData()
  })

  return (
    <div>
      <h3>Grafbase Messages</h3>
      {data && (
        <>
          <ul>
            {data.data.messageCollection?.edges?.map(({ node }) => (
              <li key={node.id}>
                {node.author} - {node.body} - {node.createdAt}
              </li>
            ))}
          </ul>
        </>
      )}
    </div>
  )
}

export default App

ReactDOM.render(<App />, document.getElementById('root'))

Testimonials

?
Simon Grimm@schlimmson

Tried @grafbase and was impressed how easy & fast it was to create your serverless GraphQL API + local instance 🔥

?
Rasmus Hjulskov@RasmusHjulskov

Current fantasy tech stack 🚀: - @nextjs - @tailwindcss - @typescript - @trpcio - @grafbase - @ClerkDev

?
Kate@whoiskatrin

As an engineer, I'm always on the lookout for tools that make my job easier and more efficient. @grafbase has quickly become a go-to for me in my #GraphQL development work. Its real-time query execution and intuitive schema management have saved me countless hours of debugging

?
Roy@royboy789

Done playing with @Cloudflare Pages & Workers, for now. Now to learn some @grafbase and see how if it can play a role, because it is pretty nifty!

?
Bobby Blastbeats@tubbo

not sure if @grafbase is so good that it will actually obviate my entire job, or if it's good enough that i can use it at work without someone questioning my existence. either way, i am sold on the concept of "upload some SDL and query shit, stop worrying about the DB infra".

?
Ben@nurodev

Damn, trying out the @grafbase beta & it's super slick! Feels like what @planetscaledata is doing for databases, @Grafbase is going for #GraphQL 🔥

Start building with React

We’ve made it super easy to get started integrating Grafbase with React.

Quickstart

Learn the basics of Grafbase and deploy to production in only a few short steps.

Developer Guides

Learn how to use Grafbase with frontend frameworks, external APIs, and more.

React Examples

See how Grafbase works with React in a few different examples.