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 to the latest

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

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 help link

.graphqlrc.yaml file

• If you were using KitQL only in a client context, you should probably strip down your .graphqlrc.yaml file down to

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:

import { load_FirstQuery } from '$houdini'
 
import type { Load } from './$types'
 
export const load: Load = async event => {
  return {
    ...(await load_FirstQuery({ event }))
  }
}

<script lang="ts">
  import { browser } from '$app/env'
 
  $: browser && GQL_FirstQuery.fetch()
</script>
 
{$GQL_FirstQuery.data.hello}

Then, the best is to directly check Houdini's Doc.