The Guild LogoThe Guild Monogram

KitQL Docs

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



Two ways#

In a component#

<script lang="ts"> import { browser } from '$app/env' import { KQL_AllContinents } from '$lib/graphql/_kitql/graphqlStores' $: browser && KQL_AllContinents.query() </script> <!-- Just use the store here, or anywhere else! --> {JSON.stringify($, null, 2)}


In context module#

If you do this in the route, you will have the data in SSR mode out of the box!

<script context="module" lang="ts"> import { KQL_AllContinents } from '$lib/graphql/_kitql/graphqlStores' export async function load({ fetch }) { await KQL_AllContinents.queryLoad({ fetch }) return {} } </script> <!-- Just use the store here, or anywhere else! --> {JSON.stringify($, null, 2)}


Advance information#

On a client side navigation, you don't want your .query(...) in load function to be awaited. That's why we created .queryLoad(...) that will do the correct awaiting for you!

FYI, check the graph 👇 showing what is meant by client navigation. (here from about page to home page)

To have this working well, you should add globally (in __layout.svelte) the following code:

<script lang="ts"> import { KQL__Init } from '$lib/graphql/_kitql/graphqlStores' KQL__Init() </script>




  • cache-first (default): Will go first into the cache and if it's empty or outdated it will go to the network.
  • cache-and-network: Will grab from the cache AND will do a network call in the background.
  • network-only: Will only go to the network.
  • cache-only: Will only go to the cache. (offline scenarios)

To be used like 👇

await KQL_AllContinents.query({ settings: { policy: 'cache-and-network' } })


Reset Cache#

You can do it query by query like 👇


Or everything in one cmd 👇