do not return 404 when using query params or trailing slash

dotansimha · Jun 26, 2023 · 185d470 · 185d470
1 parent 2e103b4
commit 185d470
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 3 deletions.
diff --git a/packages/graphql-yoga/src/plugins/plugins.test.ts b/packages/graphql-yoga/src/plugins/plugins.test.ts
@@ -35,7 +35,7 @@ describe('Yoga Plugins', () => {
       plugins: [testPluginToAdd],
       schema,
     })
-    const response = await yoga.fetch('http://localhost:3000/graphql', {
+    const response = await yoga.fetch('http://localhost:3000/graphql/', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',

diff --git a/packages/graphql-yoga/src/plugins/use-graphiql.spec.ts b/packages/graphql-yoga/src/plugins/use-graphiql.spec.ts
@@ -17,6 +17,24 @@ describe('GraphiQL', () => {
       expect(result).toMatch(/<title>Test GraphiQL<\/title>/)
     })
 
+    it('renders graphiql when passing query params and trailing slash', async () => {
+      const yoga = createYoga({
+        graphiql: () => Promise.resolve({ title: 'Test GraphiQL' }),
+      })
+      const response = await yoga.fetch(
+        'http://localhost:3000/graphql/?query=something+awesome',
+        {
+          method: 'GET',
+          headers: {
+            Accept: 'text/html',
+          },
+        },
+      )
+      expect(response.headers.get('content-type')).toEqual('text/html')
+      const result = await response.text()
+      expect(result).toMatch(/<title>Test GraphiQL<\/title>/)
+    })
+
     it('returns error when graphiql is disabled', async () => {
       const yoga = createYoga({
         graphiql: () => Promise.resolve(false),

diff --git a/packages/graphql-yoga/src/plugins/use-graphiql.ts b/packages/graphql-yoga/src/plugins/use-graphiql.ts
@@ -3,6 +3,7 @@ import graphiqlHTML from '../graphiql-html.js'
 import { YogaLogger } from '@graphql-yoga/logger'
 import { FetchAPI } from '../types.js'
 import { Plugin } from './types.js'
+import { isGraphqlEndpoint } from '../utils/url.js'
 
 export function shouldRenderGraphiQL({ headers, method }: Request): boolean {
   return method === 'GET' && !!headers?.get('accept')?.includes('text/html')
@@ -100,7 +101,7 @@ export function useGraphiQL<TServerContext extends Record<string, any>>(
     async onRequest({ request, serverContext, fetchAPI, endResponse, url }) {
       if (
         shouldRenderGraphiQL(request) &&
-        (request.url.endsWith(config.graphqlEndpoint) ||
+        (isGraphqlEndpoint(request.url, config.graphqlEndpoint) ||
           url.pathname === config.graphqlEndpoint ||
           getUrlPattern(fetchAPI).test(url))
       ) {

diff --git a/packages/graphql-yoga/src/plugins/use-unhandled-route.ts b/packages/graphql-yoga/src/plugins/use-unhandled-route.ts
@@ -1,4 +1,5 @@
 import landingPageBody from '../landing-page-html.js'
+import { isGraphqlEndpoint } from '../utils/url.js'
 import { FetchAPI } from '../types.js'
 import type { Plugin } from './types.js'
 
@@ -16,7 +17,7 @@ export function useUnhandledRoute(args: {
   return {
     onRequest({ request, fetchAPI, endResponse, url }) {
       if (
-        !request.url.endsWith(args.graphqlEndpoint) &&
+        !isGraphqlEndpoint(request.url, args.graphqlEndpoint) &&
         url.pathname !== args.graphqlEndpoint &&
         !getUrlPattern(fetchAPI).test(url)
       ) {

diff --git a/packages/graphql-yoga/src/utils/url.ts b/packages/graphql-yoga/src/utils/url.ts
@@ -0,0 +1,6 @@
+export function isGraphqlEndpoint(url: string, graphqlEndpoint: string) {
+  const urlWithoutQuery = url.split('?')[0]
+  const normalizedUrl = urlWithoutQuery.replace(/\/$/, '')
+
+  return normalizedUrl.endsWith(graphqlEndpoint)
+}