The Guild LogoThe Guild Monogram
Docs

KitQL Docs

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

Documentation

⚑KitQL#

We make use of amazing Open Source projects:

  • Yoga
  • Code Generator
  • Modules
  • Envelop

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


kitqlServer#

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.


Generators#

Type-codegen#

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

Module-codegen#

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.