Skip to Content
Yoga

Integration with SvelteKit

SvelteKit is the fastest way to build svelte apps. It is very simple, and let you build frontend & backend in a single place.

You can add GraphQL Yoga with a few lines of code and get the benefits of GraphQL & SvelteKit at the same time. Envelop ecosystem for example!

Installation

In a SvelteKit project:

npm i graphql-yoga graphql

Example

Create your graphql endpoint

Create the file src/routes/api/graphql/+server.ts:

src/routes/api/graphql/+server.ts
import { createSchema, createYoga } from 'graphql-yoga' import type { RequestEvent } from '@sveltejs/kit' const yogaApp = createYoga<RequestEvent>({ schema: createSchema({ typeDefs: ` type Query { hello: String } `, resolvers: { Query: { hello: () => 'SvelteKit - GraphQL Yoga' } } }), // Needed to be defined explicitly because our endpoint lives at a different path other than `/graphql` graphqlEndpoint: '/api/graphql', // Needed to let Yoga use sveltekit's Response object fetchAPI: { Response } }) export { yogaApp as GET, yogaApp as POST, handler as OPTIONS }

Simple example on our GitHub repository here.

More examples with our KitQL library here.
The best of all GraphQL ecosystem for SvelteKit.

Last updated on