SvelteKit Integration#

Install#

yarn add graphql graphql-ez @graphql-ez/sveltekit
yarn add -D @types/node

pnpm add graphql graphql-ez @graphql-ez/sveltekit
pnpm add -D @types/node

npm install graphql graphql-ez @graphql-ez/sveltekit
npm install -D @types/node

Usage#

If you add plugins like Altair or Voyager which require a new explicit path to visit, you will need to create your endpoint as Fallthrough Routes, for example /src/routes/api/[...any].ts, otherwise, you can create it as any endpoint you prefer, for example: /src/routes/api/graphql.ts.

Endpoint module

// "/src/routes/..."

import { ezApp } from '../ez';

const { handler } = ezApp.buildApp();

export const get = handler;

export const post = handler;

EZ App module

import { CreateApp } from '@graphql-ez/sveltekit';

export const ezApp = CreateApp({
  // You can use any valid GraphQL Schema
  schema,
  ez: {
    plugins: [
      // EZ Plugins
    ],
  },
  envelop: {
    plugins: [
      // Envelop Plugins
    ],
  },
  // Other Options
});

If you define your endpoint as [...any] or similar, is recommended to specify the option path in your EZ app:

CreateApp({
  //...
  path: '/graphql',
});

Build Custom Context#

import { CreateApp, SvelteKitContextArgs, InferContext } from '@graphql-ez/sveltekit';

function buildContext({ req, sveltekit }: SvelteKitContextArgs) {
  // IncomingHeaders
  req.headers;

  // ServerRequest
  sveltekit.req;

  return {
    foo: 'bar',
  };
}

// This snippet allows you to infer the context returned by your 'buildContext' and add it to the EZContext interface
declare module 'graphql-ez' {
  interface EZContext extends InferContext<typeof buildContext> {}
}

export const ezApp = CreateApp({
  // ...
  buildContext,
});