diff --git a/.changeset/sixty-papayas-sin.md b/.changeset/sixty-papayas-sin.md new file mode 100644 index 00000000..6fc70bab --- /dev/null +++ b/.changeset/sixty-papayas-sin.md @@ -0,0 +1,5 @@ +--- +'@hono/graphql-server': minor +--- + +feat: add GraphiQL support diff --git a/packages/graphql-server/README.md b/packages/graphql-server/README.md index 66a1bd2a..a8caf992 100644 --- a/packages/graphql-server/README.md +++ b/packages/graphql-server/README.md @@ -42,6 +42,7 @@ app.use( graphqlServer({ schema, rootResolver, + graphiql: true, // if `true`, presents GraphiQL when the GraphQL endpoint is loaded in a browser. }) ) diff --git a/packages/graphql-server/src/index.ts b/packages/graphql-server/src/index.ts index fdf0cdb5..bf6960a9 100644 --- a/packages/graphql-server/src/index.ts +++ b/packages/graphql-server/src/index.ts @@ -33,7 +33,7 @@ type Options rootResolver?: RootResolver pretty?: boolean validationRules?: ReadonlyArray - // graphiql?: boolean + graphiql?: boolean } // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -44,7 +44,7 @@ export const graphqlServer = ) => { // GraphQL HTTP only supports GET and POST methods. @@ -68,6 +68,9 @@ export const graphqlServer = {} +export const respondWithGraphiQL = (c: Context) => { + // https://github.com/graphql/graphiql/blob/85edb9e0505db8ff963c9ad4674bc8fa2e02a35a/examples/graphiql-cdn/index.html + return c.html(` + + + + GraphiQL + + + + + + + + + + + + + + +
Loading...
+ + + +`) +} diff --git a/packages/graphql-server/test/index.test.ts b/packages/graphql-server/test/index.test.ts index 43f81702..9f2cd543 100644 --- a/packages/graphql-server/test/index.test.ts +++ b/packages/graphql-server/test/index.test.ts @@ -174,6 +174,13 @@ describe('GraphQL Middleware - GET functionality', () => { schema: TestSchema, }) ) + app.use( + '/graphql-with-graphiql', + graphqlServer({ + schema: TestSchema, + graphiql: true, + }) + ) it('Allows GET with variable values', async () => { const query = { @@ -276,6 +283,21 @@ describe('GraphQL Middleware - GET functionality', () => { }, }) }) + + it('Errors when query is not provided and GraphiQL is disabled', async () => { + const res = await app.request('http://localhost/graphql', { + method: 'GET', + }) + expect(res.status).toBe(400) + }) + + it('Renders GraphiQL when query is not provided and GraphiQL is enabled', async () => { + const res = await app.request('http://localhost/graphql-with-graphiql', { + method: 'GET', + }) + expect(res.status).toBe(200) + expect(await res.text()).toContain('
') + }) }) describe('GraphQL Middleware - POST functionality', () => {