diff --git a/.changeset/eighty-crabs-stare.md b/.changeset/eighty-crabs-stare.md
new file mode 100644
index 0000000000..80bdc5130c
--- /dev/null
+++ b/.changeset/eighty-crabs-stare.md
@@ -0,0 +1,5 @@
+---
+'@graphql-yoga/common': patch
+---
+
+Fixed graphiql ignoring options if `GraphiQLOptionFactory` returns Promise
diff --git a/packages/graphql-yoga/src/plugins/useGraphiQL.spec.ts b/packages/graphql-yoga/src/plugins/useGraphiQL.spec.ts
new file mode 100644
index 0000000000..840cb74337
--- /dev/null
+++ b/packages/graphql-yoga/src/plugins/useGraphiQL.spec.ts
@@ -0,0 +1,34 @@
+import { createYoga } from '../server'
+
+describe('GraphiQL', () => {
+  describe('when received an option factory that returns Promise', () => {
+    it('should respect graphiql option', async () => {
+      const yoga = createYoga({
+        graphiql: () => Promise.resolve({ title: 'Test GraphiQL' }),
+      })
+      const response = await yoga.fetch('http://localhost:3000/graphql', {
+        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),
+      })
+      const response = await yoga.fetch('http://localhost:3000/graphql', {
+        method: 'GET',
+        headers: {
+          Accept: 'text/html',
+        },
+      })
+      expect(response.headers.get('content-type')).not.toEqual('text/html')
+      expect(response.status).toEqual(406)
+    })
+  })
+})
diff --git a/packages/graphql-yoga/src/plugins/useGraphiQL.ts b/packages/graphql-yoga/src/plugins/useGraphiQL.ts
index fd3ea69032..199c802a15 100644
--- a/packages/graphql-yoga/src/plugins/useGraphiQL.ts
+++ b/packages/graphql-yoga/src/plugins/useGraphiQL.ts
@@ -107,7 +107,7 @@ export function useGraphiQL<TServerContext extends Record<string, any>>(
         config.graphqlEndpoint === url.pathname
       ) {
         logger.debug(`Rendering GraphiQL`)
-        const graphiqlOptions = graphiqlOptionsFactory(
+        const graphiqlOptions = await graphiqlOptionsFactory(
           request,
           serverContext as TServerContext,
         )