Skip Navigation

Scott Spence

The new KitQL SvelteKit GraphQL client

1 min read

This is a private post 🤫

This means it's probably incomplete and not intended for public consumption.

Hey! Thanks for stopping by! Just a word of warning, this post is almost 2 years old, . If there's technical information in here it's more than likely out of date.

The latest version of KitQL dropped yesterday!

I’ve written about Getting Started with KitQL and GraphCMS in the past and there’s a few things that have changed between the two versions. Most notable to those are that KitQL has merged with Houdini. There’s migrations guides for both!

Get set up

I this guide I’ll be using the

# install dependencies
pnpm i @kitql/all-in graphql
# make folders for config
mkdir -p src/lib/graphql/operations
# create config files
touch {houdini.config.js,.graphqlrc.yaml} src/lib/graphql/client.ts

Set up GraphQL:

# Typical File for extension: vscode-graphql & CodeGen!
        # headers:
        #   Authorization: 'Bearer ${TOKEN}'
      - ./$houdini/graphql/schema.gql
      - '**/*.gql'
      - ./$houdini/graphql/documents.gql

Set up the Client:

import type { RequestHandlerArgs } from '$houdini'
import { HoudiniClient } from '$houdini'

async function fetchQuery({
  text = '',
  variables = {},
}: RequestHandlerArgs) {
  const url =
    import.meta.env.VITE_GRAPHQL_ENDPOINT ||

  const result = await fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    body: JSON.stringify({
      query: text,

  return await result.json()

export const houdiniClient = new HoudiniClient(fetchQuery)

There's a reactions leaderboard you can check out too.

Copyright © 2017 - 2024 - All rights reserved Scott Spence