⚡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>