The Guild LogoThe Guild Monogram

KitQL Docs

A set of tools, helping you building efficient apps in a fast way.



We make use of amazing Open Source projects:

  • Yoga
  • Code Generator
  • Modules
  • Envelop



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' export const handle = sequence( // Add graphql handleGraphql(kitqlServer), // Add graphiql handleGraphiql({ enabled: dev, }) )

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 instance πŸ‘‡


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

import { createServer } from '@graphql-yoga/common' import type { RequestEvent } from '@sveltejs/kit' import { kitQLModules } from '@kitql/all-in' // This should be fully generated πŸ₯³ import { modules } from './_kitql/_appModules' // export type IKitQLContext ables to use it in code gen, and have resolvers fully typed! // config: // contextType: $graphql/kitQLServer#IKitQLContext export type IKitQLContext = { request: Request user?: { id: number name: string } } 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) const user = { id: 1, name: 'John' } return { request, user, } } const plugins = [] plugins.push(kitQLModules(modules)) export const kitqlServer = createServer<IKitQLContext>({ context: getContext, plugins, })

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



Create a config file .graphqlrc.yaml with the following content:

projects: # You can add multiple projects and generate with -p args default: # πŸ‘‡ For vscode-graphql and intellisense schema: - ./src/lib/modules/**/typedefs/*.graphql - ./$houdini/graphql/schema.graphql documents: - ./src/lib/modules/**/graphql/*.gql - ./$houdini/graphql/documents.gql # πŸ‘‡ For code generation extensions: codegen: generates: ./src/lib/graphql/_kitql/graphqlTypes.ts: plugins: - typescript ./src/lib/modules/: preset: graphql-modules presetConfig: baseTypesPath: ../graphql/ _kitql/graphqlTypes.ts importBaseTypesFrom: $graphql/ _kitql/graphqlTypes filename: _kitql/moduleTypes.ts plugins: - typescript - typescript-resolvers config: contextType: $graphql/kitQLServer#IKitQLContext useTypeImports: true


Create a config file .kitql.yaml with the following content:

generates: ./src/lib/graphql/$kitql: modules: - ./src/lib/modules/* actions: # createEnumsModule: # prismaFile: ./prisma/schema.prisma mergeModuleTypedefs: true mergeModuleResolvers: true mergeContexts: true mergeModules: true moduleOutputFolder: $kitql importBaseTypesFrom: $graphql/$kitql/graphqlTypes

We will probably move this somewhere else! (Vite Plugin?! Come and motivate us πŸ˜…)

Package scripts#

Update your gen script so that we generate modules, houdini and codegen.

{ // ... "scripts": { "prepare": "svelte-kit sync && npm run gen", "gen": "npm run gen:modules && yarn gen:types", "gen:modules": "node ./node_modules/@kitql/module-codegen/index.js", "gen:types": "graphql-codegen --config ./.graphqlrc.yaml" } // ... }

Go back to Get Started.