mirror of
https://github.com/usebruno/bruno.git
synced 2024-12-23 07:09:01 +01:00
Add "Prettify GraphQL" button
The goal is to achieve the same behavior from Insomnia which allow to format a GraphQL query using prettier (see 264177b56f/packages/insomnia/src/ui/components/editors/body/graph-ql-editor.tsx (L260-L266)
).
I moved the `prettier` deps from `devDependencies` to `dependencies` because it's now used within the application.
I was forced to import `prettier/standalone` & `prettier/parser-graphql` (as it is explained here: https://prettier.io/docs/en/browser.html) otherwise I got that error:
> Couldn't resolve parser "graphql". Parsers must be explicitly added to the standalone bundle.
This commit is contained in:
parent
dde6695a43
commit
d1a8f59c79
7
package-lock.json
generated
7
package-lock.json
generated
@ -16530,7 +16530,6 @@
|
||||
"version": "2.8.8",
|
||||
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
|
||||
"integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"prettier": "bin-prettier.js"
|
||||
},
|
||||
@ -20695,6 +20694,7 @@
|
||||
"pdfjs-dist": "^3.11.174",
|
||||
"platform": "^1.3.6",
|
||||
"posthog-node": "^2.1.0",
|
||||
"prettier": "^2.7.1",
|
||||
"qs": "^6.11.0",
|
||||
"query-string": "^7.0.1",
|
||||
"react": "18.2.0",
|
||||
@ -20732,7 +20732,6 @@
|
||||
"html-webpack-plugin": "^5.5.0",
|
||||
"mini-css-extract-plugin": "^2.4.5",
|
||||
"postcss": "^8.4.35",
|
||||
"prettier": "^2.7.1",
|
||||
"style-loader": "^3.3.1",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"webpack": "^5.64.4",
|
||||
@ -20913,12 +20912,14 @@
|
||||
},
|
||||
"packages/bruno-cli": {
|
||||
"name": "@usebruno/cli",
|
||||
"version": "1.9.0",
|
||||
"version": "1.9.2",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@aws-sdk/credential-providers": "^3.425.0",
|
||||
"@usebruno/common": "0.1.0",
|
||||
"@usebruno/js": "0.10.1",
|
||||
"@usebruno/lang": "0.10.0",
|
||||
"aws4-axios": "^3.3.0",
|
||||
"axios": "^1.5.1",
|
||||
"chai": "^4.3.7",
|
||||
"chalk": "^3.0.0",
|
||||
|
@ -53,6 +53,7 @@
|
||||
"pdfjs-dist": "^3.11.174",
|
||||
"platform": "^1.3.6",
|
||||
"posthog-node": "^2.1.0",
|
||||
"prettier": "^2.7.1",
|
||||
"qs": "^6.11.0",
|
||||
"query-string": "^7.0.1",
|
||||
"react": "18.2.0",
|
||||
@ -90,7 +91,6 @@
|
||||
"html-webpack-plugin": "^5.5.0",
|
||||
"mini-css-extract-plugin": "^2.4.5",
|
||||
"postcss": "^8.4.35",
|
||||
"prettier": "^2.7.1",
|
||||
"style-loader": "^3.3.1",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"webpack": "^5.64.4",
|
||||
|
@ -8,8 +8,11 @@
|
||||
import React from 'react';
|
||||
import isEqual from 'lodash/isEqual';
|
||||
import MD from 'markdown-it';
|
||||
import { format } from 'prettier/standalone';
|
||||
import prettierPluginGraphql from 'prettier/parser-graphql';
|
||||
import { getAllVariables } from 'utils/collections';
|
||||
import { defineCodeMirrorBrunoVariablesMode } from 'utils/common/codemirror';
|
||||
import toast from 'react-hot-toast';
|
||||
import StyledWrapper from './StyledWrapper';
|
||||
|
||||
import onHasCompletion from './onHasCompletion';
|
||||
@ -178,6 +181,19 @@ export default class QueryEditor extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
beautifyRequestBody = () => {
|
||||
try {
|
||||
const prettyQuery = format(this.props.value, {
|
||||
parser: 'graphql',
|
||||
plugins: [prettierPluginGraphql]
|
||||
});
|
||||
|
||||
this.editor.setValue(prettyQuery);
|
||||
} catch (e) {
|
||||
toast.error('Error occurred while prettifying GraphQL query');
|
||||
}
|
||||
};
|
||||
|
||||
// Todo: Overlay is messing up with schema hint
|
||||
// Fix this
|
||||
addOverlay = () => {
|
||||
@ -189,13 +205,19 @@ export default class QueryEditor extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<StyledWrapper
|
||||
className="h-full w-full"
|
||||
aria-label="Query Editor"
|
||||
ref={(node) => {
|
||||
this._node = node;
|
||||
}}
|
||||
/>
|
||||
>
|
||||
<button className="btn-add-param text-link pr-2 py-3 mt-2 select-none" onClick={this.beautifyRequestBody}>
|
||||
Prettify GraphQL
|
||||
</button>
|
||||
</StyledWrapper>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user