⚡KitQL

We make use of amazing Open Source projects:

Configuration

Hooks

The idea is to bring functionalities with hooks, something like:

hooks.server.ts

import { dev } from '$app/environment'
import { kitqlServer } from '$lib/graphql/kitqlServer'
import { handleGraphiql, handleGraphql } from '@kitql/all-in'
import { sequence } from '@sveltejs/kit/hooks'
 
const graphiQLPath = dev ? '/api/playql' : undefined
 
export const handle = sequence(
  // create the graphql endpoint
  handleGraphql<IKitQLContext, RequestEvent>({
    graphiQLPath,
    ...kitqlServer
  }),
 
  // enable graphiql in dev mode
  handleGraphiql({
    enabled: dev,
    graphiQLPath
  })
)

You could use only graphiql here for example!

Side note: if you want offline support for graphiql, add @graphql-yoga/render-graphiql as dependency, KitQL will pick it up automatically if it's there

Now, let's build the kitqlServer const 👇

`kitqlServer`

This is the file where you will create your KitQL Server. To start, it should look like:

src/lib/graphql/kitqlServer.ts

import { type KitQLHandleGraphQL, useKitqlModules } from '@kitql/all-in'
import type { RequestEvent } from '@sveltejs/kit'
 
import { modules } from './$kitql/_appModules'
 
const plugins = []
plugins.push(useKitqlModules(modules))
 
export type IKitQLContext = ReturnType<typeof getContext>
function getContext({ request }: RequestEvent) {
  // get the cookie or the token...
  const coolInfo = request.headers.get('Authorization')
 
  // get the user from the coolInfo (redis or db or ...)
  const user = { id: 7, name: 'JYC' }
 
  return {
    request,
    user
  }
}
 
export const kitqlServer: KitQLHandleGraphQL<IKitQLContext, RequestEvent> = {
  plugins,
  context: getContext
}

Now, we just need to generate everything... to have typings & modules.

Generators

Type-codegen

Create a config file graphql.config.cjs with the following content:

graphql.config.cjs

const kitqlConfig = require('@kitql/all-in/cjs.cjs')
 
const scalars = {
  Date: '../helpers/scalarTypes#CodegenDate',
  DateTime: 'Date'
}
 
/** @type {import('@kitql/all-in').KitQLProjects} */
const config = {
  projects: {
    init: kitqlConfig({
      scalars
      // projectLocation: './packages/init' // if you are in a mono-repo
    })
  }
}
 
module.exports = config

Vite plugins

You should add the following plugins to your vite.config.ts. Like this, no need to generate manualy things, it will be generated on demand when you run your project.

vite.config.ts

import { kitql } from '@kitql/all-in'
import { sveltekit } from '@sveltejs/kit/vite'
import houdini from 'houdini/vite'
import type { UserConfig } from 'vite'
 
const config: UserConfig = {
  plugins: [
    kitql({
      projectName: 'init'
      // prismaFileForEnums: './prisma/schema.prisma'
    }),
    houdini(),
    sveltekit()
  ]
}
 
export default config

GraphiQL offline mode

if you want to have it offline, you need to add @graphql-yoga/render-graphiql as dependency. and you should use handleGraphiqlOffline handle.

Go back to Get Started.

Demo Init GraphQL Client - Houdini