The data platform that powers your SvelteKit application

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

Grafbase + SvelteKit

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

Fetch data on the client from your Grafbase project using a GraphQL client like urql.
<script lang="ts">
  import { getContextClient, queryStore, gql } from "@urql/svelte"

  const GetTodos = gql`
    query TodoLists {
      todoListCollection {
        edges {
          node {
            id
            title
            todos {
              id
              title
              complete
            }
          }
        }
      }
    }`
  
  $: todoLists = queryStore({
    client: getContextClient(),
    query: GetTodos
  })
</script>

<div class="flex gap-6">
  {#if $todoLists.fetching}
    <p>Loading...</p>
  {:else}
    {#each $todoLists.data.todoListCollection.edges as todoList}
      <TodoList todoList={todoList?.node} />
    {/each}
    <TodoListNew />
  {/if}
</div>
Fetch data on the client from your Grafbase project using a GraphQL client like urql.
<script lang="ts">
  import { getContextClient, queryStore, gql } from "@urql/svelte"

  const GetTodos = gql`
    query TodoLists {
      todoListCollection {
        edges {
          node {
            id
            title
            todos {
              id
              title
              complete
            }
          }
        }
      }
    }`
  
  $: todoLists = queryStore({
    client: getContextClient(),
    query: GetTodos
  })
</script>

<div class="flex gap-6">
  {#if $todoLists.fetching}
    <p>Loading...</p>
  {:else}
    {#each $todoLists.data.todoListCollection.edges as todoList}
      <TodoList todoList={todoList?.node} />
    {/each}
    <TodoListNew />
  {/if}
</div>

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 SvelteKit

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

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.

SvelteKit Example

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