Skip to content

Commit 19f94ad

Browse files
dondonzacao
authored andcommitted
Set extensions in history, add prettify
1 parent 5f2124e commit 19f94ad

File tree

4 files changed

+28
-8
lines changed

4 files changed

+28
-8
lines changed

packages/graphiql-react/src/editor/hooks.ts

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,7 @@ type UsePrettifyEditorsArgs = {
212212
};
213213

214214
export function usePrettifyEditors({ caller }: UsePrettifyEditorsArgs = {}) {
215-
const { queryEditor, headerEditor, variableEditor } = useEditorContext({
215+
const { queryEditor, headerEditor, variableEditor, extensionEditor } = useEditorContext({
216216
nonNull: true,
217217
caller: caller || usePrettifyEditors,
218218
});
@@ -233,6 +233,23 @@ export function usePrettifyEditors({ caller }: UsePrettifyEditorsArgs = {}) {
233233
}
234234
}
235235

236+
if (extensionEditor) {
237+
const extensionEditorContent = extensionEditor.getValue();
238+
239+
try {
240+
const prettifiedExtensionEditorContent = JSON.stringify(
241+
JSON.parse(extensionEditorContent),
242+
null,
243+
2,
244+
);
245+
if (prettifiedExtensionEditorContent !== extensionEditorContent) {
246+
extensionEditor.setValue(prettifiedExtensionEditorContent);
247+
}
248+
} catch {
249+
/* Parsing JSON failed, skip prettification */
250+
}
251+
}
252+
236253
if (headerEditor) {
237254
const headerEditorContent = headerEditor.getValue();
238255

@@ -258,7 +275,7 @@ export function usePrettifyEditors({ caller }: UsePrettifyEditorsArgs = {}) {
258275
queryEditor.setValue(prettifiedEditorContent);
259276
}
260277
}
261-
}, [queryEditor, variableEditor, headerEditor]);
278+
}, [queryEditor, variableEditor, headerEditor, extensionEditor]);
262279
}
263280

264281
export type UseAutoCompleteLeafsArgs = {

packages/graphiql-react/src/editor/tabs.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,7 @@ export function getDefaultTabState({
130130
title: operationName || DEFAULT_TITLE,
131131
query,
132132
variables,
133+
extensions,
133134
headers,
134135
operationName,
135136
response: null,
@@ -148,6 +149,7 @@ export function getDefaultTabState({
148149
{
149150
query: query ?? defaultQuery,
150151
variables,
152+
extensions,
151153
headers: headers ?? defaultHeaders,
152154
},
153155
]
@@ -178,6 +180,7 @@ function isTabState(obj: any): obj is TabState {
178180
hasStringKey(obj, 'title') &&
179181
hasStringOrNullKey(obj, 'query') &&
180182
hasStringOrNullKey(obj, 'variables') &&
183+
hasStringOrNullKey(obj, 'extensions') &&
181184
hasStringOrNullKey(obj, 'headers') &&
182185
hasStringOrNullKey(obj, 'operationName') &&
183186
hasStringOrNullKey(obj, 'response')
@@ -226,7 +229,7 @@ export function useSynchronizeActiveTabValues({
226229
operationName,
227230
});
228231
},
229-
[queryEditor, variableEditor, headerEditor, responseEditor],
232+
[queryEditor, variableEditor, extensionEditor, headerEditor, responseEditor],
230233
);
231234
}
232235

packages/graphiql-react/src/history/components.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ export function HistoryItem(props: QueryHistoryItemProps) {
112112
nonNull: true,
113113
caller: HistoryItem,
114114
});
115-
const { headerEditor, queryEditor, variableEditor } = useEditorContext({
115+
const { headerEditor, queryEditor, variableEditor, extensionEditor } = useEditorContext({
116116
nonNull: true,
117117
caller: HistoryItem,
118118
});
@@ -151,12 +151,13 @@ export function HistoryItem(props: QueryHistoryItemProps) {
151151

152152
const handleHistoryItemClick: MouseEventHandler<HTMLButtonElement> =
153153
useCallback(() => {
154-
const { query, variables, headers } = props.item;
154+
const { query, variables, extensions, headers } = props.item;
155155
queryEditor?.setValue(query ?? '');
156156
variableEditor?.setValue(variables ?? '');
157+
extensionEditor?.setValue(extensions ?? '');
157158
headerEditor?.setValue(headers ?? '');
158159
setActive(props.item);
159-
}, [headerEditor, props.item, queryEditor, setActive, variableEditor]);
160+
}, [headerEditor, props.item, queryEditor, setActive, variableEditor, extensionEditor]);
160161

161162
const handleDeleteItemFromHistory: MouseEventHandler<HTMLButtonElement> =
162163
useCallback(

packages/graphiql-toolkit/src/storage/history.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export class HistoryStore {
2828
private shouldSaveQuery(
2929
query?: string,
3030
variables?: string,
31-
extensions?: string,
31+
// extensions?: string, // dz todo: ask about saving strategy for extensions
3232
headers?: string,
3333
lastQuerySaved?: QueryStoreItem,
3434
) {
@@ -80,7 +80,6 @@ export class HistoryStore {
8080
!this.shouldSaveQuery(
8181
query,
8282
variables,
83-
extensions,
8483
headers,
8584
this.history.fetchRecent(),
8685
)

0 commit comments

Comments
 (0)