Graphiql

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',
		...options
	};

	const body = renderGraphiQL({
		...opts,
		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: {
		...
	}
}));

[jycouet]

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

[david-plugge]

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,
    ...options,
  }

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

  const graphiqlOptions = {
    ...opts,
    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)
  }
}