The Guild LogoThe Guild Monogram
Docs

KitQL Docs

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

Documentation

⚡Let's go All-In!#

1️⃣ In a SvelteKit project, install everything in one cmd!#

(step 0️ if not done, create a sveltekit project with everything true 🙃)

yarn add @kitql/all-in

 

2️⃣ Create a .graphqlrc.yaml at the root of your project#

# Typical File for extension: vscode-graphql & CodeGen! projects: default: schema: # If you have the introspection file already here: - ./src/lib/graphql/schema.json # If not, you can get the schema from the server with some thing like: # - https://countries.trevorblades.com/graphql # More options here https://www.graphql-code-generator.com/docs/config-reference/schema-field documents: - '**/*.gql' extensions: codegen: generates: ./src/lib/graphql/_kitql/graphqlTypes.ts: plugins: - typescript - typescript-operations - typed-document-node - typescript-document-nodes ./src/lib/graphql/_kitql/graphqlStores.ts: plugins: - '@kitql/graphql-codegen' config: importBaseTypesFrom: $lib/graphql/_kitql/graphqlTypes

If you want more example, check the Demo 1 file.

 

3️⃣ update your package.json to generate everything#

"scripts": { "prepare": "svelte-kit sync && npm run gen", "gen": "graphql-codegen --config ./.graphqlrc.yaml", }

 

4️⃣ Install “Watch & Run” plugin#

In your svelte.config.js add a watchAndRun with the following configuration:

import watchAndRun from '@kitql/vite-plugin-watch-and-run' /** @type {import('@sveltejs/kit').Config} */ const config = { kit: { vite: { plugins: [ watchAndRun([ { watch: '**/*.(gql|graphql)', run: 'npm run gen' } ]) ] } } } export default config

 

5️⃣ Create $lib/graphql/kitQLClient.js#

import { KitQLClient } from '@kitql/client'; export const kitQLClient = new KitQLClient({ url: `https://countries.trevorblades.com/graphql`, # Your GraphQL server URL headersContentType: 'application/json', logType: ['client', 'server', 'operationAndvariables'] });

 

6️⃣ Run#

yarn dev

 

7️⃣ Create your first GraphQL operation#

# $lib/graphql/operations/AllContinents_QUERY.gql query AllContinents { continents { name code } }

 

8️⃣ Use your operation#

<!-- For SSR --> <script context="module" lang="ts"> import { KQL_AllContinents } from '$lib/graphql/_kitql/graphqlStores' export async function load({ fetch }) { await KQL_AllContinents.queryLoad({ fetch }) // Filling the store return {} } </script> <!-- Or in a svelte component --> <script lang="ts"> await KQL_AllContinents.query() // Filling the store </script> <!-- Using the store where you want in the app --> <ul> {#each $KQL_AllContinents.data?.continents as continent} <li> <p>{continent?.name}</p> </li> {/each} </ul>