The data platform that powers your Remix application

Build and scale your Remix application backed by your own GraphQL API.

Why Grafbase?

Grafbase accelerates backend development by providing a GraphQL API at the edge.
Making changes to your API is as easy as opening a pull request with schema changes.
All changes are available at their own deployment API endpoint for use in development.

Accelerate Remix development
with Grafbase

Collaborate

Build your own database with Grafbase right inside your projects source code.

Optimize

Grafbase monitors and detects changes to your GraphQL API, schema, and usage giving you real-time insights into how you can build the best Remix applications.

Scale

Grafbase automatically scales as your Remix application grows.

Testimonials

?
Lee Robinson@leeerob

I'll be chatting with @fbjork about @grafbase and creating instant serverless GraphQL backends tomorrow at 10am PT. Get notified when we go live → https://youtu.be/JMizhu3ut-M

?
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 🔥

?
Roy Barber@roybarberuk

This looks awesome! @nextjs + @grafbase on @vercel will be 🔥🔥🔥

Grafbase + Remix

Remix gives you all the tools you need to build production scale applications. Whether you need to fetch data on the server, at build time when creating a static export, or caching on demand, Remix has you covered.

Configure your GraphQL server to fetch the data on server side.

import { GraphQLClient } from 'graphql-request'

let client: GraphQLClient

declare global {
  var __client: GraphQLClient | undefined
}

const createClient = () => {
  const { GRAFBASE_API_URL, GRAFBASE_API_KEY } = process.env

  if (!GRAFBASE_API_URL || !GRAFBASE_API_KEY) {
    throw new Error('GRAFBASE_API_URL and GRAFBASE_API_KEY must be set')
  }

  return new GraphQLClient(GRAFBASE_API_URL, {
    headers: { 'x-api-key': GRAFBASE_API_KEY }
  })
}

if (process.env.NODE_ENV === 'production') {
  client = createClient()
} else {
  if (!global.__client) {
    global.__client = createClient()
  }
  client = global.__client
}

export { client }
Configure your GraphQL server to fetch the data on server side.

import { GraphQLClient } from 'graphql-request'

let client: GraphQLClient

declare global {
  var __client: GraphQLClient | undefined
}

const createClient = () => {
  const { GRAFBASE_API_URL, GRAFBASE_API_KEY } = process.env

  if (!GRAFBASE_API_URL || !GRAFBASE_API_KEY) {
    throw new Error('GRAFBASE_API_URL and GRAFBASE_API_KEY must be set')
  }

  return new GraphQLClient(GRAFBASE_API_URL, {
    headers: { 'x-api-key': GRAFBASE_API_KEY }
  })
}

if (process.env.NODE_ENV === 'production') {
  client = createClient()
} else {
  if (!global.__client) {
    global.__client = createClient()
  }
  client = global.__client
}

export { client }

Start building with Remix

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

Grafbase Concepts

Learn the concepts of Grafbase and how to define your own custom data structure for use within your Remix application.

The Guide

Learn how to integrate the Grafbase GraphQL API with Remix in a few simple steps.

Remix Starter

Want to see what it looks like in a project already hooked up?

Get Started

Get early access to the Grafbase beta.