The Guild LogoThe Guild Monogram
Docs

KitQL Docs

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

Documentation

Migrating to 0.7.0#

Lot’s changed in v0.7.0. Hopefully this guide should help you understand those changes as well as show you what you should update to work with the new features. If you want some more context about the "why", please have a look at the blog post we wrote.


What changed#

The biggest change for KitQL users is that generated stores are done from Houdini now instead of KitQL Client package.


Here is the list of things to update:

  1. Bump your @kitlql/all-in version to 0.7.x

  2. The file .graphqlrc.yaml doesn't hold any client info for generation 👇

  3. Configure Houdini, follow this guide. And comeback here!

  4. To migrate a big project, you can in houdini.config.js add disableMasking: true

  5. Usage update 👇



.graphqlrc.yaml file#

  • If you were using KitQL only in a client context, you should probably strip down your .graphqlrc.yaml file down to
# file .graphqlrc.yaml projects: # You can add multiple projects and generate with -p args default: # 👇 For vscode-graphql and intellisense schema: - ./src/lib/graphql/schema.json # - ./src/**/*.graphql - ./$houdini/graphql/schema.graphql documents: - ./src/**/*.gql - ./$houdini/graphql/documents.gql

Do not forget to remove the generate cmd of your package.json. (graphql-codegen --config ./.graphqlrc.yaml)



  • If you were already using the server side, follow the config here.

Usage update#

  1. functions .query() & .queryLoad() were renamed to .fetch()
  2. prefix KQL_ is now GQL_
  3. $lib/graphql/_kitql/graphqlStores is most of the case replaced by $houdini
  4. variables inputs STOREQueryVariables is now STORE$input
  5. Fragment XXXFragment => xXX$data

Before:

<script context="module" lang="ts"> import { KQL_FirstQuery } from '$lib/graphql/_kitql/graphqlStores' export async function load({ fetch, url, params, session, stuff }) { await KQL_FirstQuery.queryLoad({ fetch }) return {} } </script> {$GQL_FirstQuery.data.hello}

After:

<script context="module" lang="ts"> import { browser } from '$app/env' import { GQL_FirstQuery } from '$houdini' import type { Load } from '@sveltejs/kit' export const load: Load = async (event) => { await GQL_FirstQuery.fetch({ event }) return {} } </script> <script> $: browser && GQL_FirstQuery.fetch() </script> {$GQL_FirstQuery.data.hello}

You can check the usage of queries here.