The new KitQL SvelteKit GraphQL client
This is a private post 🤫
This means it's probably incomplete and not intended for public consumption.
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!
projects:
default:
schema:
- https://rickandmortyapi.com/graphql
# headers:
# Authorization: 'Bearer ${TOKEN}'
- ./$houdini/graphql/schema.gql
documents:
- '**/*.gql'
- ./$houdini/graphql/documents.gql
Set up the Client:
import type { RequestHandlerArgs } from '$houdini'
import { HoudiniClient } from '$houdini'
async function fetchQuery({
fetch,
text = '',
variables = {},
session,
metadata,
}: RequestHandlerArgs) {
const url =
import.meta.env.VITE_GRAPHQL_ENDPOINT ||
'https://rickandmortyapi.com/graphql'
const result = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
query: text,
variables,
}),
})
return await result.json()
}
export const houdiniClient = new HoudiniClient(fetchQuery)
Year to date analytics for this post
Entries This Year
145
Jan 1, 2023 - Apr 1, 2023
Visitors This Year
155
Jan 1, 2023 - Apr 1, 2023
Views This Year
286
Jan 1, 2023 - Apr 1, 2023