8000 Add support for onPrettifyQuery callback to enable customised query formatting by i-like-robots · Pull Request #3640 · graphql/graphiql · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Add support for onPrettifyQuery callback to enable customised query formatting #3640

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed

Add support for onPrettifyQuery callback to enable customised query formatting #3640

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5a94726
Add basic support for onPrettifyQuery callback to enable customised q…
i-like-robots Jul 2, 2024
8173438
Add changeset for onPrettifyQuery callback addition
i-like-robots Jul 2, 2024
0bc748a
Merge branch 'main' into main
dimaMachina Aug 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/add-on-prettify-callback.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@graphiql/react": minor
"graphiql": minor
---

Add support for onPrettifyQuery callback to enable customised query formatting
16 changes: 12 additions & 4 deletions packages/graphiql-react/src/editor/hooks.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -204,14 +204,20 @@
}, [queryEditor, schema]);
}

type UsePrettifyEditorsArgs = {
export type UsePrettifyEditorsArgs = {
/**
* This is only meant to be used internally in `@graphiql/react`.
*/
caller?: Function;
/**
* Invoked when the prettify callback is invoked
* @param query The current value of the query editor.
* @returns {string} The formatted query
*/
onPrettifyQuery?: (query: string) => string;
};

export function usePrettifyEditors({ caller }: UsePrettifyEditorsArgs = {}) {
export function usePrettifyEditors({ caller, onPrettifyQuery }: UsePrettifyEditorsArgs = {}) {
const { queryEditor, headerEditor, variableEditor } = useEditorContext({
nonNull: true,
caller: caller || usePrettifyEditors,
Expand Down Expand Up @@ -252,13 +258,15 @@

if (queryEditor) {
const editorContent = queryEditor.getValue();
const prettifiedEditorContent = print(parse(editorContent));
const prettifiedEditorContent = typeof 'function'
? onPrettifyQuery(editorContent)
: print(parse(editorContent));

Check warning on line 263 in packages/graphiql-react/src/editor/hooks.ts

View check run for this annotation

Codecov / codecov/patch

packages/graphiql-react/src/editor/hooks.ts#L262-L263 

Added lines #L262 - L263 were not covered by tests

if (prettifiedEditorContent !== editorContent) {
queryEditor.setValue(prettifiedEditorContent);
}
}
}, [queryEditor, variableEditor, headerEditor]);
}, [queryEditor, variableEditor, headerEditor, onPrettifyQuery]);
}

export type UseAutoCompleteLeafsArgs = {
Expand Down
7 changes: 5 additions & 2 deletions packages/graphiql-react/src/editor/query-editor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ import {
useCompletion,
useCopyQuery,
UseCopyQueryArgs,
UsePrettifyEditorsArgs,
useKeyMap,
useMergeQuery,
usePrettifyEditors,
Expand All @@ -52,7 +53,8 @@ import {
import { normalizeWhitespace } from './whitespace';

export type UseQueryEditorArgs = WriteableEditorProps &
Pick<UseCopyQueryArgs, 'onCopyQuery'> & {
Pick<UseCopyQueryArgs, 'onCopyQuery'> &
Pick<UsePrettifyEditorsArgs, 'onPrettifyQuery'> & {
/**
* Invoked when a reference to the GraphQL schema (type or field) is clicked
* as part of the editor or one of its tooltips.
Expand All @@ -74,6 +76,7 @@ export function useQueryEditor(
onClickReference,
onCopyQuery,
onEdit,
onPrettifyQuery,
readOnly = false,
}: UseQueryEditorArgs = {},
caller?: Function,
Expand Down Expand Up @@ -101,7 +104,7 @@ export function useQueryEditor(
const plugin = usePluginContext();
const copy = useCopyQuery({ caller: caller || useQueryEditor, onCopyQuery });
const merge = useMergeQuery({ caller: caller || useQueryEditor });
const prettify = usePrettifyEditors({ caller: caller || useQueryEditor });
const prettify = usePrettifyEditors({ caller: caller || useQueryEditor, onPrettifyQuery });
const ref = useRef<HTMLDivElement>(null);
const codeMirrorRef = useRef<CodeMirrorType>();

Expand Down
5 changes: 3 additions & 2 deletions packages/graphiql/src/components/GraphiQL.tsx
View file BCAA
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,7 @@ type AddSuffix<Obj extends Record<string, any>, Suffix extends string> = {

export type GraphiQLInterfaceProps = WriteableEditorProps &
AddSuffix<Pick<UseQueryEditorArgs, 'onEdit'>, 'Query'> &
Pick<UseQueryEditorArgs, 'onCopyQuery'> &
Pick<UseQueryEditorArgs, 'onCopyQuery' | 'onPrettifyQuery'> &
AddSuffix<Pick<UseVariableEditorArgs, 'onEdit'>, 'Variables'> &
AddSuffix<Pick<UseHeaderEditorArgs, 'onEdit'>, 'Headers'> &
Pick<UseResponseEditorArgs, 'responseTooltip'> & {
Expand Down Expand Up @@ -261,7 +261,7 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {

const copy = useCopyQuery({ onCopyQuery: props.onCopyQuery });
const merge = useMergeQuery();
const prettify = usePrettifyEditors();
const prettify = usePrettifyEditors({ onPrettifyQuery: props.onPrettifyQuery });

const { theme, setTheme } = useTheme();

Expand Down Expand Up @@ -663,6 +663,7 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
keyMap={props.keyMap}
>
>
>
>
readOnly={props.readOnly}
/>
Expand Down
Loading
0