⚡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
pnpm add @kitql/all-in
npm install @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>