Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Is your feature request related to a problem? Please describe.

It would be nice to have a simple way to add graphiql to an existing sveltekit project.

Describe the solution you’d like

Create a package @kitql/graphqli that exports a sveltekit handle function doing the work.

Describe alternatives you’ve considered

I can create the package in my own but i thought it would be a nice fit for the kitql stack

Additional context

This is what i currently use.

// src/lib/graphiql.ts
import type { GraphiQLOptions as Options } from '@graphql-yoga/common';
import { renderGraphiQL } from '@graphql-yoga/render-graphiql';
import type { Handle } from '@sveltejs/kit';

type GraphiQLOptions = Omit<Options, 'headers'> & {
	headers?: Record<string, string>;
	path?: string;

export default function graphiql(options: GraphiQLOptions): Handle {
	const { path, headers, ...opts } = {
		path: '/graphiql',

	const body = renderGraphiQL({
		headers: JSON.stringify(headers ?? {})

	return ({ event, resolve }) => {
		if (event.url.pathname !== path) return resolve(event);

		return new Response(body, {
			status: 200,
			headers: {
				'Content-Type': 'text/html'

// src/hooks.ts
import { sequence } from '@sveltejs/kit/hooks';
import graphiql from '$lib/graphiql';
export const handle = sequence(graphiql({
	endpoint: import.meta.env.GRAPHQL_ENDPOINT,
	headers: {

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:21 (12 by maintainers)

github_iconTop GitHub Comments

jycouetcommented, Sep 22, 2022

It’s done, I just need to publish the version. (I’ll try to do it today and close the issue 👍)

david-pluggecommented, Sep 16, 2022

You can get rid of the await like this:

async function getGraphiQLBody(graphiqlOptions) {
  try {
    const { renderGraphiQL: renderGraphiQLOffline } = await import('@graphql-yoga/render-graphiql')
    return renderGraphiQLOffline(graphiqlOptions)
  } catch (err) {
    // user did not add it as a dependency
    const { renderGraphiQL: renderGraphiQLOnline } = await import('@graphql-yoga/common')
    return renderGraphiQLOnline(graphiqlOptions)

export function handleGraphiql(options?: GraphiQLOptions): Promise<Handle> {
  const { graphiQLPath, headers, enabled, ...opts } = {
    title: 'KitQL',
    endpoint: '/graphql',
    graphiQLPath: '/graphiql',
    enabled: true,

  if (!graphiQLPath.startsWith('/')) {
    throw new Error("graphiql graphiQLPath must start with '/'")

  const graphiqlOptions = {
    headers: JSON.stringify(headers ?? {}),

  const bodyPromise = getGraphiQLBody(graphiqlOptions)

  return async ({ event, resolve }) => {
    if (enabled && event.url.pathname === graphiQLPath) {
      return new Response(await bodyPromise, {
        status: 200,
        headers: {
          'Content-Type': 'text/html',

    // Fallback to normal request
    return resolve(event)
Read more comments on GitHub >

github_iconTop Results From Across the Web

GraphiQL & the GraphQL LSP Reference Ecosystem ... - GitHub
GraphiQL is the reference implementation of this monorepo, GraphQL IDE, an official project under the GraphQL Foundation. The code uses the permissive MIT ......
Read more >
Introducing GraphiQL - Gatsby
GraphiQL is the GraphQL integrated development environment (IDE). It's a powerful (and all-around awesome) tool you'll use often while building Gatsby ...
Read more >
GraphQL | A query language for your API
GraphQL makes it easy to build powerful tools like GraphiQL by leveraging your API's type system. Evolve your API without versions. Add new...
Read more >
graphiql - npm
An graphical interactive in-browser GraphQL IDE.. Latest version: 2.2.0, last published: a month ago. Start using graphiql in your project ...
Read more >
GraphiQL - GraphQL .NET
GraphiQL. GraphiQL is an interactive in-browser GraphQL IDE. This is a fantastic developer tool to help you form queries and explore your Schema....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found