From 74cc7ec8616f4ab0a1d54af3e325530915ae47d6 Mon Sep 17 00:00:00 2001 From: Valentin Cocaud Date: Tue, 4 Jun 2024 11:41:51 +0200 Subject: [PATCH 1/3] Add all serializable options for GraphiQL --- packages/graphiql/src/YogaGraphiQL.tsx | 44 +++++++++------ .../graphql-yoga/src/plugins/use-graphiql.ts | 56 +++++++++++++++++++ 2 files changed, 82 insertions(+), 18 deletions(-) diff --git a/packages/graphiql/src/YogaGraphiQL.tsx b/packages/graphiql/src/YogaGraphiQL.tsx index 640f0df97b..4b32ebab15 100644 --- a/packages/graphiql/src/YogaGraphiQL.tsx +++ b/packages/graphiql/src/YogaGraphiQL.tsx @@ -32,17 +32,7 @@ const getOperationWithFragments = ( }; }; -export type YogaGraphiQLProps = Omit< - GraphiQLProps, - | 'fetcher' - | 'isHeadersEditorEnabled' - | 'defaultEditorToolsVisibility' - | 'onToggleDocs' - | 'toolbar' - | 'onSchemaChange' - | 'query' - | 'onEditQuery' -> & +export type YogaGraphiQLProps = GraphiQLProps & Partial> & { title?: string; /** @@ -98,6 +88,15 @@ export function YogaGraphiQL(props: YogaGraphiQLProps): React.ReactElement { const urlLoader = useMemo(() => new UrlLoader(), []); const fetcher = useMemo(() => { + if (props.fetcher) { + if (props.endpoint) { + // eslint-disable-next-line no-console + console.warn( + 'You are using a custom fetcher and an endpoint. The endpoint will be ignored.', + ); + } + return props.fetcher; + } const executor = urlLoader.getExecutorAsync(endpoint, { subscriptionsProtocol: SubscriptionProtocol.GRAPHQL_SSE, subscriptionsEndpoint: endpoint, // necessary because graphql-sse in graphql-tools url-loader defaults to endpoint+'/stream' @@ -123,7 +122,7 @@ export function YogaGraphiQL(props: YogaGraphiQLProps): React.ReactElement { }, }); }; - }, [urlLoader, endpoint]) as Fetcher; + }, [urlLoader, endpoint, props.fetcher]) as Fetcher; const [params, setParams] = useUrlSearchParams( { @@ -138,25 +137,34 @@ export function YogaGraphiQL(props: YogaGraphiQLProps): React.ReactElement { showAttribution: true, }); + if (props.query && !props.onEditQuery) { + // eslint-disable-next-line no-console + console.warn( + 'If you provide `query` prop, you should also provide `onEditQuery` prop to handle query changes.', + ); + } + return (
{ + {...props} + onEditQuery={(query, ast) => { setParams({ query, }); setQuery(query); + props.onEditQuery?.(query, ast); }} > diff --git a/packages/graphql-yoga/src/plugins/use-graphiql.ts b/packages/graphql-yoga/src/plugins/use-graphiql.ts index b72620dbe3..e3147fbf98 100644 --- a/packages/graphql-yoga/src/plugins/use-graphiql.ts +++ b/packages/graphql-yoga/src/plugins/use-graphiql.ts @@ -62,6 +62,62 @@ export type GraphiQLOptions = { * Whether to use the GET HTTP method for queries when querying the original schema */ useGETForQueries?: boolean; + /** + * "external" fragments that will be included in the query document (depending on usage) + */ + externalFragments?: string; + /** + * The maximum number of executed operations to store. + * @default 20 + */ + maxHistoryLength?: number; + /** + * Whether target GraphQL server support deprecation of input values. + * @default false + */ + inputValueDeprecation?: boolean; + /** + * Custom operation name for the introspection query. + */ + introspectionQueryName?: string; + /** + * Whether to include schema description in introspection query. + * @default false + */ + schemaDescription?: boolean; + /** + * Editor theme + * @default "graphiql" + */ + editorTheme?: string; + /** + * Sets the key map to use when using the editor. + * @default 'sublime' + */ + keyMap?: 'sublime' | 'emacs' | 'vim'; + defaultEditorToolsVisibility?: boolean | 'variables' | 'headers'; + isHeadersEditorEnabled?: boolean; + disableTabs?: boolean; + /** + * Whether to include `isRepeatable` flag on directives. + * @default false + */ + directiveIsRepeatable?: boolean; + experimentalFragmentVariables?: boolean; + /** + * Set to `true` in order to convert all GraphQL comments (marked with # sign) to descriptions (""") + * GraphQL has built-in support for transforming descriptions to comments (with `print`), but not while + * parsing. Turning the flag on will support the other way as well (`parse`) + */ + commentDescriptions?: boolean; + /** + * Timeout in milliseconds + */ + timeout?: number; + /** + * Retry attempts + */ + retry?: number; }; export type GraphiQLRendererOptions = { From eacb45b82ee162742dda89242685bcc5a1ca701c Mon Sep 17 00:00:00 2001 From: Valentin Cocaud Date: Tue, 4 Jun 2024 11:53:02 +0200 Subject: [PATCH 2/3] fix fetcher prop optional --- packages/graphiql/src/YogaGraphiQL.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/graphiql/src/YogaGraphiQL.tsx b/packages/graphiql/src/YogaGraphiQL.tsx index 4b32ebab15..e451d1f912 100644 --- a/packages/graphiql/src/YogaGraphiQL.tsx +++ b/packages/graphiql/src/YogaGraphiQL.tsx @@ -32,7 +32,7 @@ const getOperationWithFragments = ( }; }; -export type YogaGraphiQLProps = GraphiQLProps & +export type YogaGraphiQLProps = Partial & Partial> & { title?: string; /** From 179ae8b898e95d874182c012145a36d1d30e93f4 Mon Sep 17 00:00:00 2001 From: Valentin Cocaud Date: Tue, 4 Jun 2024 14:04:45 +0200 Subject: [PATCH 3/3] changeset --- .changeset/kind-fireants-rush.md | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 .changeset/kind-fireants-rush.md diff --git a/.changeset/kind-fireants-rush.md b/.changeset/kind-fireants-rush.md new file mode 100644 index 0000000000..2ca2878256 --- /dev/null +++ b/.changeset/kind-fireants-rush.md @@ -0,0 +1,11 @@ +--- +'graphql-yoga': minor +'@graphql-yoga/graphiql': minor +--- + +Allow for full customization of the GraphiQL page. + +Props from the `YogaGraphiQL` are now forwarded to the underlying GraphiQL components. + +The `graphiql` option field type of the Yoga server as also been updated to document which options +are configurable from the server side. Only serializable options are available.