Skip to content

Commit ccb5c53

Browse files
enisdenjoenisdenjo
authored
Configurable GraphiQL logo and favicon (#4114)
* favicon and logo * changeset * export graphiql type stuff
1 parent d99f5ca commit ccb5c53

File tree

6 files changed

+53
-14
lines changed

6 files changed

+53
-14
lines changed

‎.changeset/early-buses-learn.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'@graphql-yoga/render-graphiql': minor
3+
'graphql-yoga': minor
4+
'@graphql-yoga/graphiql': minor
5+
---
6+
7+
Configurable GraphiQL logo and favicon

‎.changeset/four-trees-crash.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'graphql-yoga': patch
3+
---
4+
5+
Export GraphiQLPluginConfig and GraphiQLOptionsOrFactory

‎packages/graphiql/src/YogaGraphiQL.tsx‎

Lines changed: 27 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,11 @@ const getOperationWithFragments = (
3434

3535
export type YogaGraphiQLProps = Partial<GraphiQLProps> &
3636
Partial<Omit<LoadFromUrlOptions, 'headers'>> & {
37-
title?: string;
37+
title?: string | React.ReactNode;
3838
/**
3939
* Logo to be displayed in the top right corner
4040
*/
41-
logo?: React.ReactNode;
41+
logo?: string | React.ReactNode;
4242
/**
4343
* Extra headers you always want to pass with users' headers input
4444
*/
@@ -172,16 +172,31 @@ export function YogaGraphiQL(props: YogaGraphiQLProps): React.ReactElement {
172172
>
173173
<GraphiQL.Logo>
174174
<div style={{ display: 'flex', alignItems: 'center' }}>
175-
<div style={{ width: 40, display: 'flex' }}>{props?.logo || <YogaLogo />}</div>
176-
<span>
177-
{props?.title || (
178-
<>
179-
Yoga Graph
180-
<em>i</em>
181-
QL
182-
</>
183-
)}
184-
</span>
175+
{typeof props?.logo === 'string' ? (
176+
// if the logo is a string, then it's coming when rendering graphiql as a static page (see render-graphiql)
177+
<div
178+
style={{ width: 40, display: 'flex' }}
179+
dangerouslySetInnerHTML={{ __html: props.logo }}
180+
/>
181+
) : (
182+
// otherwise, it's used inside react and we can render it as a component
183+
<div style={{ width: 40, display: 'flex' }}>{props?.logo || <YogaLogo />}</div>
184+
)}
185+
{typeof props?.title === 'string' ? (
186+
// if the title is a string, then it's coming when rendering graphiql as a static page (see render-graphiql)
187+
<span dangerouslySetInnerHTML={{ __html: props.title }} />
188+
) : (
189+
// otherwise, it's used inside react and we can render it as a component
190+
<span>
191+
{props?.title || (
192+
<>
193+
Yoga Graph
194+
<em>i</em>
195+
QL
196+
</>
197+
)}
198+
</span>
199+
)}
185200
</div>
186201
</GraphiQL.Logo>
187202
</GraphiQLInterface>

‎packages/graphql-yoga/src/index.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
export * from '@graphql-yoga/logger';
2-
export { type GraphiQLOptions } from './plugins/use-graphiql.js';
2+
export type {
3+
GraphiQLOptions,
4+
GraphiQLPluginConfig,
5+
GraphiQLOptionsOrFactory,
6+
} from './plugins/use-graphiql.js';
37
export { renderGraphiQL, shouldRenderGraphiQL } from './plugins/use-graphiql.js';
48
export { useReadinessCheck } from './plugins/use-readiness-check.js';
59
export { type YogaSchemaDefinition, useSchema } from './plugins/use-schema.js';

‎packages/graphql-yoga/src/plugins/use-graphiql.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,18 @@ export type GraphiQLOptions = {
4343
* More info there: https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials
4444
*/
4545
credentials?: RequestCredentials;
46+
/**
47+
* The favicon URL to display for the page. Defaults to Yoga logo.
48+
*/
49+
favicon?: string;
4650
/**
4751
* The title to display at the top of the page. Defaults to `"Yoga GraphiQL"`.
4852
*/
4953
title?: string;
54+
/**
55+
* Logo to be displayed in the top right corner of GraphiQL.
56+
*/
57+
logo?: string;
5058
/**
5159
* Protocol for subscriptions
5260
*/

‎packages/render-graphiql/src/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export const renderGraphiQL = (opts?: GraphiQLOptions) => /* HTML */ `
77
<head>
88
<meta charset="utf-8" />
99
<title>${opts?.title || 'Yoga GraphiQL'}</title>
10-
<link rel="icon" href="${favicon}" />
10+
<link rel="icon" href="${opts?.favicon || favicon}" />
1111
<style>
1212
${css}
1313
</style>

0 commit comments

Comments
 (0)