Integration with SvelteKit

SvelteKit is a framework for rapidly developing robust, performant web applications using Svelte. You can easily integrate Mesh Serve into your SvelteKit powered application.

Example

SvelteKit is typically used together with Vite with the project structure looking like this. We also assume that you have composed a supergraph.graphql with Mesh Compose.

In this example, we want to integrate Mesh Serve into Vite’s routes, we’ll therefore use the runtime.

npm i @graphql-mesh/serve-runtime

pnpm add @graphql-mesh/serve-runtime

yarn add @graphql-mesh/serve-runtime

bun add @graphql-mesh/serve-runtime

Keeping the aforementioned project layout in mind, create a new server route in my-project/src/routes/graphql/+server.ts to expose the GraphQL server at /graphql and implement using the Mesh Serve runtime like this:

import { createServeRuntime } from '@graphql-mesh/serve-runtime'
 
const serve = createServeRuntime({
  supergraph: 'supergraph.graphql', // working directory is root of the project
  graphqlEndpoint: '/graphql', // matches the server route path
  fetchAPI: { Response } // use the native `Response`
})
 
export { serve as GET, serve as POST }