Fix up some of the new formatting stuff

src-web/components/GraphQLEditor.tsx

@@ -20,12 +20,12 @@ type Props = Pick<EditorProps, 'heightMode' | 'className' | 'forceUpdateKey'> &
 export function GraphQLEditor({ body, onChange, baseRequest, ...extraEditorProps }: Props) {
   const editorViewRef = useRef<EditorView>(null);
   const { schema, isLoading, error, refetch } = useIntrospectGraphQL(baseRequest);
-  const [currentBody, setCurrentBody] = useState<{ query: string; variables: string }>(() => {
+  const [currentBody, setCurrentBody] = useState<{ query: string; variables: string | undefined }>(() => {
     // Migrate text bodies to GraphQL format
     // NOTE: This is how GraphQL used to be stored
     if ('text' in body) {
       const b = tryParseJson(body.text, {});
-      const variables = JSON.stringify(b.variables ?? '', null, 2);
+      const variables = JSON.stringify(b.variables || undefined, null, 2);
       return { query: b.query ?? '', variables };
     }
 
@@ -33,13 +33,13 @@ export function GraphQLEditor({ body, onChange, baseRequest, ...extraEditorProps
   });
 
   const handleChangeQuery = (query: string) => {
-    const newBody = { query, variables: currentBody.variables };
+    const newBody = { query, variables: currentBody.variables || undefined };
     setCurrentBody(newBody);
     onChange(newBody);
   };
 
   const handleChangeVariables = (variables: string) => {
-    const newBody = { query: currentBody.query, variables };
+    const newBody = { query: currentBody.query, variables: variables || undefined };
     setCurrentBody(newBody);
     onChange(newBody);
   };

src-web/components/core/Editor/extensions.ts

@@ -52,7 +52,7 @@ export const syntaxHighlightStyle = HighlightStyle.define([
     textDecoration: 'underline',
   },
   {
-    tag: [t.paren, t.bracket, t.brace],
+    tag: [t.paren, t.bracket, t.squareBracket, t.brace, t.separator],
     color: 'var(--textSubtle)',
   },
   {

src-web/components/responseViewers/TextViewer.tsx

@@ -142,7 +142,7 @@ export function TextViewer({
     );
   }
 
-  if (formattedBody.isFetching) {
+  if (formattedBody.data == null) {
     return null;
   }
 

src-web/hooks/useFormatText.ts

@@ -12,7 +12,7 @@ export function useFormatText({
   pretty: boolean;
 }) {
   return useQuery({
-    queryKey: [text],
+    queryKey: [text, language, pretty],
     queryFn: async () => {
       if (text === '' || !pretty) {
         return text;

src-web/lib/formatters.ts

@@ -5,7 +5,24 @@ const INDENT = '  ';
 
 export async function tryFormatJson(text: string): Promise<string> {
   if (text === '') return text;
-  return invokeCmd('cmd_format_json', { text });
+
+  try {
+    const result = await invokeCmd<string>('cmd_format_json', { text });
+    return result;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  } catch (err) {
+    console.warn("Failed to format JSON", err);
+    // Nothing
+  }
+
+  try {
+    return JSON.stringify(JSON.parse(text), null, 2);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  } catch (err) {
+    // Nothing
+  }
+
+  return text;
 }
 
 export async function tryFormatXml(text: string): Promise<string> {