The data platform that powers your Remix application

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

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 }

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 Remix

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

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.

Remix Example

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