toggle auto fetch (#5516)

* fix automatic fetch

* simplify gql state
This commit is contained in:
Jack Kavanagh 2022-12-13 18:33:37 +01:00 committed by GitHub
parent adff1ca22b
commit b39ee5bc4b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -11,6 +11,7 @@ import prettier from 'prettier';
import React, { FC, useEffect, useRef, useState } from 'react'; import React, { FC, useEffect, useRef, useState } from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { useLocalStorage } from 'react-use';
import { jarFromCookies } from '../../../../common/cookies'; import { jarFromCookies } from '../../../../common/cookies';
import { markdownToHTML } from '../../../../common/markdown-to-html'; import { markdownToHTML } from '../../../../common/markdown-to-html';
@ -163,7 +164,6 @@ interface State {
operations: string[]; operations: string[];
hideSchemaFetchErrors: boolean; hideSchemaFetchErrors: boolean;
variablesSyntaxError: string; variablesSyntaxError: string;
automaticFetch: boolean;
explorerVisible: boolean; explorerVisible: boolean;
activeReference: null | ActiveReference; activeReference: null | ActiveReference;
documentAST: null | DocumentNode; documentAST: null | DocumentNode;
@ -193,18 +193,6 @@ export const GraphQLEditor: FC<Props> = ({
documentAST = null; documentAST = null;
} }
let automaticFetch = true;
try {
const automaticFetchStringified = window.localStorage.getItem('graphql.automaticFetch');
if (automaticFetchStringified) {
automaticFetch = JSON.parse(automaticFetchStringified);
}
} catch (err) {
if (err instanceof Error) {
console.warn('Could not parse value of graphql.automaticFetch from localStorage:', err.message);
}
}
const [state, setState] = useState<State>({ const [state, setState] = useState<State>({
body: { body: {
query: requestBody.query || '', query: requestBody.query || '',
@ -216,10 +204,14 @@ export const GraphQLEditor: FC<Props> = ({
variablesSyntaxError: '', variablesSyntaxError: '',
activeReference: null, activeReference: null,
explorerVisible: false, explorerVisible: false,
automaticFetch,
documentAST, documentAST,
disabledOperationMarkers: [], disabledOperationMarkers: [],
}); });
const [automaticFetch, setAutoFetch] = useLocalStorage<boolean>(
'graphql.automaticFetch',
true
);
const [schema, setSchema] = useState<GraphQLSchema | null>(null); const [schema, setSchema] = useState<GraphQLSchema | null>(null);
const [schemaFetchError, setSchemaFetchError] = useState<{ const [schemaFetchError, setSchemaFetchError] = useState<{
message: string; message: string;
@ -230,6 +222,9 @@ export const GraphQLEditor: FC<Props> = ({
const editorRef = useRef<CodeEditorHandle>(null); const editorRef = useRef<CodeEditorHandle>(null);
useEffect(() => { useEffect(() => {
if (!automaticFetch) {
return;
}
let isMounted = true; let isMounted = true;
const init = async () => { const init = async () => {
setSchemaIsFetching(true); setSchemaIsFetching(true);
@ -249,7 +244,7 @@ export const GraphQLEditor: FC<Props> = ({
return () => { return () => {
isMounted = false; isMounted = false;
}; };
}, [environmentId, request._id, request.url, workspaceId]); }, [automaticFetch, environmentId, request._id, request.url, workspaceId]);
const { editorIndentWithTabs, editorIndentSize } = useSelector(selectSettings); const { editorIndentWithTabs, editorIndentSize } = useSelector(selectSettings);
const beautifyRequestBody = () => { const beautifyRequestBody = () => {
@ -475,8 +470,7 @@ export const GraphQLEditor: FC<Props> = ({
</DropdownItem> </DropdownItem>
<DropdownItem <DropdownItem
onClick={() => { onClick={() => {
setState(state => ({ ...state, automaticFetch: !state.automaticFetch })); setAutoFetch(!automaticFetch);
window.localStorage.setItem('graphql.automaticFetch', state.automaticFetch.toString());
}} }}
stayOpenAfterClick stayOpenAfterClick
> >