Catch the highlights of GraphQLConf 2023!Click for recordings.Or check out our recap blog post.
v5 (latest)
Integrations
SvelteKit

Integration with SvelteKit

SvelteKit is the fastest way to build svelte apps. (opens in a new tab) 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 (opens in a new tab) 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: globalThis
})
 
export { yogaApp as GET, yogaApp as POST }

Simple example on our GitHub repository here (opens in a new tab).

More examples with our KitQL library here (opens in a new tab).
The best of all GraphQL ecosystem for SvelteKit.