Configurable GraphiQL logo and favicon (#4114)

enisdenjo · web-flow · commit ccb5c536a811 · 2025-07-11T16:21:54.000+02:00
* favicon and logo

* changeset

* export graphiql type stuff
diff --git a/.changeset/early-buses-learn.md b/.changeset/early-buses-learn.md
@@ -0,0 +1,7 @@
+---
+'@graphql-yoga/render-graphiql': minor
+'graphql-yoga': minor
+'@graphql-yoga/graphiql': minor
+---
+
+Configurable GraphiQL logo and favicon
diff --git a/.changeset/four-trees-crash.md b/.changeset/four-trees-crash.md
@@ -0,0 +1,5 @@
+---
+'graphql-yoga': patch
+---
+
+Export GraphiQLPluginConfig and GraphiQLOptionsOrFactory
diff --git a/packages/graphiql/src/YogaGraphiQL.tsx b/packages/graphiql/src/YogaGraphiQL.tsx
@@ -34,11 +34,11 @@ const getOperationWithFragments = (
 
 export type YogaGraphiQLProps = Partial<GraphiQLProps> &
   Partial<Omit<LoadFromUrlOptions, 'headers'>> & {
-    title?: string;
+    title?: string | React.ReactNode;
     /**
      * Logo to be displayed in the top right corner
      */
-    logo?: React.ReactNode;
+    logo?: string | React.ReactNode;
     /**
      * Extra headers you always want to pass with users' headers input
      */
@@ -172,16 +172,31 @@ export function YogaGraphiQL(props: YogaGraphiQLProps): React.ReactElement {
         >
           <GraphiQL.Logo>
             <div style={{ display: 'flex', alignItems: 'center' }}>
-              <div style={{ width: 40, display: 'flex' }}>{props?.logo || <YogaLogo />}</div>
-              <span>
-                {props?.title || (
-                  <>
-                    Yoga Graph
-                    <em>i</em>
-                    QL
-                  </>
-                )}
-              </span>
+              {typeof props?.logo === 'string' ? (
+                // if the logo is a string, then it's coming when rendering graphiql as a static page (see render-graphiql)
+                <div
+                  style={{ width: 40, display: 'flex' }}
+                  dangerouslySetInnerHTML={{ __html: props.logo }}
+                />
+              ) : (
+                // otherwise, it's used inside react and we can render it as a component
+                <div style={{ width: 40, display: 'flex' }}>{props?.logo || <YogaLogo />}</div>
+              )}
+              {typeof props?.title === 'string' ? (
+                // if the title is a string, then it's coming when rendering graphiql as a static page (see render-graphiql)
+                <span dangerouslySetInnerHTML={{ __html: props.title }} />
+              ) : (
+                // otherwise, it's used inside react and we can render it as a component
+                <span>
+                  {props?.title || (
+                    <>
+                      Yoga Graph
+                      <em>i</em>
+                      QL
+                    </>
+                  )}
+                </span>
+              )}
             </div>
           </GraphiQL.Logo>
         </GraphiQLInterface>
diff --git a/packages/graphql-yoga/src/index.ts b/packages/graphql-yoga/src/index.ts
@@ -1,5 +1,9 @@
 export * from '@graphql-yoga/logger';
-export { type GraphiQLOptions } from './plugins/use-graphiql.js';
+export type {
+  GraphiQLOptions,
+  GraphiQLPluginConfig,
+  GraphiQLOptionsOrFactory,
+} from './plugins/use-graphiql.js';
 export { renderGraphiQL, shouldRenderGraphiQL } from './plugins/use-graphiql.js';
 export { useReadinessCheck } from './plugins/use-readiness-check.js';
 export { type YogaSchemaDefinition, useSchema } from './plugins/use-schema.js';
diff --git a/packages/graphql-yoga/src/plugins/use-graphiql.ts b/packages/graphql-yoga/src/plugins/use-graphiql.ts
@@ -43,10 +43,18 @@ export type GraphiQLOptions = {
    * More info there: https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials
    */
   credentials?: RequestCredentials;
+  /**
+   * The favicon URL to display for the page. Defaults to Yoga logo.
+   */
+  favicon?: string;
   /**
    * The title to display at the top of the page. Defaults to `"Yoga GraphiQL"`.
    */
   title?: string;
+  /**
+   * Logo to be displayed in the top right corner of GraphiQL.
+   */
+  logo?: string;
   /**
    * Protocol for subscriptions
    */
diff --git a/packages/render-graphiql/src/index.ts b/packages/render-graphiql/src/index.ts
@@ -7,7 +7,7 @@ export const renderGraphiQL = (opts?: GraphiQLOptions) => /* HTML */ `
     <head>
       <meta charset="utf-8" />
       <title>${opts?.title || 'Yoga GraphiQL'}</title>
-      <link rel="icon" href="${favicon}" />
+      <link rel="icon" href="${opts?.favicon || favicon}" />
       <style>
         ${css}
       </style>

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'graphql-yoga': patch
 +---
++
 +Export GraphiQLPluginConfig and GraphiQLOptionsOrFactory