The data platform that powers your Fresh application

Build your next-gen GraphQL powered application with Deno, Fresh, and Grafbase.

Grafbase + Fresh

Send no JavaScript to the client with Fresh and GraphQL.

Fetch data inside Fresh handlers at the edge.
import { Handlers, PageProps } from '$fresh/server.ts'

const GetPostBySlugQuery = /* GraphQL */ `
  query GetPostBySlug($slug: String!) {
    post(by: { slug: $slug }) {
      id
      title
    }
  }
`

export const handler: Handlers = {
  async GET(_, ctx) {
    const { slug } = ctx.params

    const response = await fetch('http://localhost:4000/graphql', {
      method: 'POST',
      headers: {
        'content-type': 'application/json'
      },
      body: JSON.stringify({
        query: GetPostBySlugQuery,
        variables: {
          slug
        }
      })
    })

    if (!response.ok) {
      return ctx.render(null)
    }

    const { data } = await response.json()

    return ctx.render(data)
  }
}

export default function PostPage({ data }: PageProps) {
  return <h1>{data.post.title}</h1>
}
Fetch data inside Fresh handlers at the edge.
import { Handlers, PageProps } from '$fresh/server.ts'

const GetPostBySlugQuery = /* GraphQL */ `
  query GetPostBySlug($slug: String!) {
    post(by: { slug: $slug }) {
      id
      title
    }
  }
`

export const handler: Handlers = {
  async GET(_, ctx) {
    const { slug } = ctx.params

    const response = await fetch('http://localhost:4000/graphql', {
      method: 'POST',
      headers: {
        'content-type': 'application/json'
      },
      body: JSON.stringify({
        query: GetPostBySlugQuery,
        variables: {
          slug
        }
      })
    })

    if (!response.ok) {
      return ctx.render(null)
    }

    const { data } = await response.json()

    return ctx.render(data)
  }
}

export default function PostPage({ data }: PageProps) {
  return <h1>{data.post.title}</h1>
}

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

Start building with Fresh

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

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.

Fresh Example

See how Grafbase works with Deno, Fresh and TypeScript in this example.