Graphiql
See original GitHub issueIs 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: {
...
}
}));
Issue Analytics
- State:
- Created a year ago
- Comments:21 (12 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
It’s done, I just need to publish the version. (I’ll try to do it today and close the issue 👍)
You can get rid of the await like this: