Docs
Guides
Svelte / Kit

Guide: Svelte / Kit

GraphQL Code Generator and the community provide typed code generation for Apollo, SvelteKit native, and other clients.

Plugins and available options vary depending on the selected codegen; for this reason, you will find guides for each of them below:

All the following guides query the schema below:

schema.graphql
type Author {
  id: Int!
  firstName: String!
  lastName: String!
  posts(findTitle: String): [Post]
}
 
type Post {
  id: Int!
  title: String!
  author: Author
}
 
type Query {
  posts: [Post]
}

Svelte Apollo

Thank to the community-built plugin (opens in a new tab) graphql-codegen-svelte-apollo, GraphQL Code Generator generates full-typed Apollo GraphQL services for Svelte.

and the following reference script:

<script lang="ts">
  import { query } from 'svelte-apollo'
 
  const postsQueryDocument = gql`
    query Posts {
      posts {
        id
        title
        author {
          id
          firstName
          lastName
        }
      }
    }
  `
 
  const posts = query(postsQueryDocument)
</script>
 
<!-- UI … -->
{posts.data}

Just a few configuration steps are required to get observable Apollo queries with Typescript typings:

1. Install the graphql-codegen-svelte-apollo plugin

pnpm add -D graphql-codegen-svelte-apollo @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/cli typescript graphql

2. Configure the plugin

Create or update your codegen.ts file as follows:

codegen.ts
import type { CodegenConfig } from '@graphql-codegen/cli'
 
const config: CodegenConfig = {
  schema: 'http://my-graphql-api.com/graphql',
  documents: './src/**/*.gql',
  generates: {
    './graphql/generated.ts': {
      plugins: ['typescript', 'typescript-operations', 'graphql-codegen-svelte-apollo']
    }
  }
}
export default config
💡

schema and documents values

schema can be:

  • your target GraphQL API URL ("/graphql" included)
  • your SDL file. (eg: ./src/schema.graphql)

documents is a glob expression to your .graphql, .gql files.

3. Run the codegen and update your code

Assuming that, as recommended, your package.json has the following script:

package.json
{
  "scripts": {
    "generate": "graphql-codegen"
  }
}

Running the following generates the graphql/generated.ts file.

pnpm run generate

We can now update our code as follows:

<script lang="ts">
  import { Posts } from '../graphql/generated'
 
  $: posts = Posts()
  // `posts` is fully typed!
</script>
 
<!-- UI … -->
{$posts.data}

For more advanced configuration (ex: async queries), please refer to the plugin documentation and the GitHub repository README (opens in a new tab).

For a different organization of the generated files, please refer to the "Generated files colocation" page.

SvelteKit Native

logoKitQL

With KitQL Codegen (opens in a new tab), you get SSR (Server Side Rendering) & Caching out-of-the-box with svelte stores.

Just a few configuration steps are required to get SvelteKit stores fully typed + All Operations fully typed:

1. Install the plugin

pnpm add @kitql/client
pnpm add -D @kitql/graphql-codegen

2. Configure the plugin

Create or update your codegen.ts file as follows:

codegen.ts
import type { CodegenConfig } from '@graphql-codegen/cli'
 
const config: CodegenConfig = {
  schema: 'http://my-graphql-api.com/graphql',
  documents: './src/**/*.gql',
  generates: {
    './graphql/generated.ts': {
      plugins: ['typescript', 'typescript-operations', 'typed-document-node', '@kitql/graphql-codegen']
    }
  }
}
export default config

3. Run the codegen and update your code

Assuming that, as recommended, your package.json has the following script:

package.json
{
  "scripts": {
    "generate": "graphql-codegen"
  }
}

Running the following generates the graphql/generated.ts file.

pnpm run generate

We can now update our code as follows:

<script context="module" lang="ts">
  import { PostsQuery } from '../graphql/generated'
 
  export async function load({ fetch }) {
    await PostsQuery({ fetch }) // This line do the query in SSR mode
    // now you have `PostsQueryStore` store available and fully typed!
    return {}
  }
</script>
 
<!-- UI … -->
{$PostsQueryStore.data}

For more advanced configuration, please refer to the KitQL documentation (opens in a new tab).

For a different organization of the generated files, please refer to the "Generated files colocation" page.

AngularDart/Flutter