The data platform that powers your SolidJS application

Build performant, powerful and productive frontends with SolidJS and GraphQL.

Grafbase + SolidJS

SolidJS 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, SolidJS has you covered.

Fetch data on the server inside SolidStart routes.
import { GraphQLClient, gql } from 'graphql-request'
import { useRouteData } from 'solid-start'
import { createServerData$ } from 'solid-start/server'

export const grafbase = new GraphQLClient('GRAFBASE_API_URL', {
  headers: { 'x-api-key': '...' }
})

const GetAllPosts = gql`
  { 
    postCollection(first: 100) {
      edges {
        node {
          id
          title
          slug
        }
      }
    }
  }
`

export const routeData = () => {
  return createServerData$(async () => {
    const { postCollection } = await grafbase.request(GetAllPosts)

    return postCollection
  })
}

const App = () => {
  const { edges } = useRouteData<typeof routeData>()

  return (
    <Layout>
      <For each={edges()}>
        {(edge) => !!edge?.node && <Post {...edge.node} />}
      </For>
    </Layout>
  )
}

export default App
Fetch data on the server inside SolidStart routes.
import { GraphQLClient, gql } from 'graphql-request'
import { useRouteData } from 'solid-start'
import { createServerData$ } from 'solid-start/server'

export const grafbase = new GraphQLClient('GRAFBASE_API_URL', {
  headers: { 'x-api-key': '...' }
})

const GetAllPosts = gql`
  { 
    postCollection(first: 100) {
      edges {
        node {
          id
          title
          slug
        }
      }
    }
  }
`

export const routeData = () => {
  return createServerData$(async () => {
    const { postCollection } = await grafbase.request(GetAllPosts)

    return postCollection
  })
}

const App = () => {
  const { edges } = useRouteData<typeof routeData>()

  return (
    <Layout>
      <For each={edges()}>
        {(edge) => !!edge?.node && <Post {...edge.node} />}
      </For>
    </Layout>
  )
}

export default App

Testimonials

?
boba fetterman@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 🔥

?
Roy Barber@roybarberuk

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

Build a Solid backend with Grafbase

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

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.

SolidStart Example

See how Grafbase works with SolidJS, SolidStart and TypeScript in this example.