The Guild LogoThe Guild Monogram
Docs

GraphQL Code Generator

Generate anything from GraphQL schema / operations!

Contact Us

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:


  • Svelte Apollo
  • SvelteKit Native

 

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

yarn add graphql-codegen-svelte-apollo yarn add @graphql-codegen/typescript yarn add @graphql-codegen/typescript-operations

2. Configure the plugin

Create or update your codegen.yaml file as follows:

schema: http://my-graphql-api.com/graphql # Or schema: ./src/schema.graphql documents: './src/**/*.gql' generates: ./graphql/generated.ts: plugins: - typescript - typescript-operations - graphql-codegen-svelte-apollo

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:

{ "scripts": { "generate": "graphql-codegen" } }

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

yarn 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.

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

 


 

SvelteKit Native#

logoKitQL

With KitQL Codegen, 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

yarn add @kitql/graphql-codegen @kitql/client

2. Configure the plugin

Create or update your codegen.yaml file as follows:

schema: http://my-graphql-api.com/graphql # Or schema: ./src/schema.graphql documents: './src/**/*.gql' generates: ./graphql/generated.ts: plugins: - typescript - typescript-operations - typed-document-node - '@kitql/graphql-codegen'

3. Run the codegen and update your code

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

{ "scripts": { "generate": "graphql-codegen" } }

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

yarn 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.

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