From 8092f100ae62710bece1666589eda0455dc04009 Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Sat, 14 Dec 2024 03:41:13 +0800 Subject: [PATCH] upd --- .../graphiql-react/src/editor/context.tsx | 22 +- packages/graphiql-react/src/plugin.tsx | 26 +-- packages/graphiql-react/src/schema.tsx | 194 +++++++++--------- packages/graphiql-react/src/utility/resize.ts | 10 +- 4 files changed, 126 insertions(+), 126 deletions(-) diff --git a/packages/graphiql-react/src/editor/context.tsx b/packages/graphiql-react/src/editor/context.tsx index 3bca26ca2a..81bd501ebe 100644 --- a/packages/graphiql-react/src/editor/context.tsx +++ b/packages/graphiql-react/src/editor/context.tsx @@ -324,17 +324,17 @@ export function EditorContextProvider(props: EditorContextProviderProps) { const setShouldPersistHeaders = // eslint-disable-line react-hooks/exhaustive-deps -- false positive, function is optimized by react-compiler, no need to wrap with useCallback (persist: boolean) => { - if (persist) { - storage?.set(STORAGE_KEY_HEADERS, headerEditor?.getValue() ?? ''); - const serializedTabs = serializeTabState(tabState, true); - storage?.set(STORAGE_KEY_TABS, serializedTabs); - } else { - storage?.set(STORAGE_KEY_HEADERS, ''); - clearHeadersFromTabs(storage); - } - setShouldPersistHeadersInternal(persist); - storage?.set(PERSIST_HEADERS_STORAGE_KEY, persist.toString()); - }; + if (persist) { + storage?.set(STORAGE_KEY_HEADERS, headerEditor?.getValue() ?? ''); + const serializedTabs = serializeTabState(tabState, true); + storage?.set(STORAGE_KEY_TABS, serializedTabs); + } else { + storage?.set(STORAGE_KEY_HEADERS, ''); + clearHeadersFromTabs(storage); + } + setShouldPersistHeadersInternal(persist); + storage?.set(PERSIST_HEADERS_STORAGE_KEY, persist.toString()); + }; const lastShouldPersistHeadersProp = useRef(); useEffect(() => { diff --git a/packages/graphiql-react/src/plugin.tsx b/packages/graphiql-react/src/plugin.tsx index 60622eae2c..8354805a16 100644 --- a/packages/graphiql-react/src/plugin.tsx +++ b/packages/graphiql-react/src/plugin.tsx @@ -152,19 +152,19 @@ export function PluginContextProvider(props: PluginContextProviderProps) { const { onTogglePluginVisibility, children } = props; const setVisiblePlugin: PluginContextType['setVisiblePlugin'] = // eslint-disable-line react-hooks/exhaustive-deps -- false positive, function is optimized by react-compiler, no need to wrap with useCallback plugin => { - const newVisiblePlugin = plugin - ? plugins.find( - p => (typeof plugin === 'string' ? p.title : p) === plugin, - ) || null - : null; - internalSetVisiblePlugin(current => { - if (newVisiblePlugin === current) { - return current; - } - onTogglePluginVisibility?.(newVisiblePlugin); - return newVisiblePlugin; - }); - }; + const newVisiblePlugin = plugin + ? plugins.find( + p => (typeof plugin === 'string' ? p.title : p) === plugin, + ) || null + : null; + internalSetVisiblePlugin(current => { + if (newVisiblePlugin === current) { + return current; + } + onTogglePluginVisibility?.(newVisiblePlugin); + return newVisiblePlugin; + }); + }; useEffect(() => { if (props.visiblePlugin) { diff --git a/packages/graphiql-react/src/schema.tsx b/packages/graphiql-react/src/schema.tsx index fe067abaf5..20346f3e90 100644 --- a/packages/graphiql-react/src/schema.tsx +++ b/packages/graphiql-react/src/schema.tsx @@ -174,125 +174,125 @@ export function SchemaContextProvider({ */ const introspect = // eslint-disable-line react-hooks/exhaustive-deps -- false positive, function is optimized by react-compiler no need to wrap with useCallback () => { - /** - * Only introspect if there is no schema provided via props. If the - * prop is passed an introspection result, we do continue but skip the - * introspection request. - */ - if (isSchema(props.schema) || props.schema === null) { - return; - } - - const counter = ++counterRef.current; - - const maybeIntrospectionData = props.schema; - - async function fetchIntrospectionData() { - if (maybeIntrospectionData) { - // No need to introspect if we already have the data - return maybeIntrospectionData; - } - - const parsedHeaders = parseHeaderString(headersRef.current); - if (!parsedHeaders.isValidJSON) { - setFetchError('Introspection failed as headers are invalid.'); + /** + * Only introspect if there is no schema provided via props. If the + * prop is passed an introspection result, we do continue but skip the + * introspection request. + */ + if (isSchema(props.schema) || props.schema === null) { return; } - const fetcherOpts: FetcherOpts = parsedHeaders.headers - ? { headers: parsedHeaders.headers } - : {}; - - const fetch = fetcherReturnToPromise( - fetcher( - { - query: introspectionQuery, - operationName: introspectionQueryName, - }, - fetcherOpts, - ), - ); - - if (!isPromise(fetch)) { - setFetchError('Fetcher did not return a Promise for introspection.'); - return; - } + const counter = ++counterRef.current; - setIsFetching(true); - setFetchError(null); + const maybeIntrospectionData = props.schema; - let result = await fetch; + async function fetchIntrospectionData() { + if (maybeIntrospectionData) { + // No need to introspect if we already have the data + return maybeIntrospectionData; + } + + const parsedHeaders = parseHeaderString(headersRef.current); + if (!parsedHeaders.isValidJSON) { + setFetchError('Introspection failed as headers are invalid.'); + return; + } + + const fetcherOpts: FetcherOpts = parsedHeaders.headers + ? { headers: parsedHeaders.headers } + : {}; - if ( - typeof result !== 'object' || - result === null || - !('data' in result) - ) { - // Try the stock introspection query first, falling back on the - // sans-subscriptions query for services which do not yet support it. - const fetch2 = fetcherReturnToPromise( + const fetch = fetcherReturnToPromise( fetcher( { - query: introspectionQuerySansSubscriptions, + query: introspectionQuery, operationName: introspectionQueryName, }, fetcherOpts, ), ); - if (!isPromise(fetch2)) { - throw new Error( - 'Fetcher did not return a Promise for introspection.', + + if (!isPromise(fetch)) { + setFetchError('Fetcher did not return a Promise for introspection.'); + return; + } + + setIsFetching(true); + setFetchError(null); + + let result = await fetch; + + if ( + typeof result !== 'object' || + result === null || + !('data' in result) + ) { + // Try the stock introspection query first, falling back on the + // sans-subscriptions query for services which do not yet support it. + const fetch2 = fetcherReturnToPromise( + fetcher( + { + query: introspectionQuerySansSubscriptions, + operationName: introspectionQueryName, + }, + fetcherOpts, + ), ); + if (!isPromise(fetch2)) { + throw new Error( + 'Fetcher did not return a Promise for introspection.', + ); + } + result = await fetch2; } - result = await fetch2; - } - setIsFetching(false); + setIsFetching(false); - if (result?.data && '__schema' in result.data) { - return result.data as IntrospectionQuery; - } + if (result?.data && '__schema' in result.data) { + return result.data as IntrospectionQuery; + } - // handle as if it were an error if the fetcher response is not a string or response.data is not present - const responseString = - typeof result === 'string' ? result : formatResult(result); - setFetchError(responseString); - } + // handle as if it were an error if the fetcher response is not a string or response.data is not present + const responseString = + typeof result === 'string' ? result : formatResult(result); + setFetchError(responseString); + } - fetchIntrospectionData() - .then(introspectionData => { - /** - * Don't continue if another introspection request has been started in - * the meantime or if there is no introspection data. - */ - if (counter !== counterRef.current || !introspectionData) { - return; - } + fetchIntrospectionData() + .then(introspectionData => { + /** + * Don't continue if another introspection request has been started in + * the meantime or if there is no introspection data. + */ + if (counter !== counterRef.current || !introspectionData) { + return; + } - try { - const newSchema = buildClientSchema(introspectionData); - setSchema(newSchema); - // Optional chaining inside try-catch isn't supported yet by react-compiler - if (onSchemaChange) { - onSchemaChange(newSchema); + try { + const newSchema = buildClientSchema(introspectionData); + setSchema(newSchema); + // Optional chaining inside try-catch isn't supported yet by react-compiler + if (onSchemaChange) { + onSchemaChange(newSchema); + } + } catch (error) { + setFetchError(formatError(error)); + } + }) + .catch(error => { + /** + * Don't continue if another introspection request has been started in + * the meantime. + */ + if (counter !== counterRef.current) { + return; } - } catch (error) { - setFetchError(formatError(error)); - } - }) - .catch(error => { - /** - * Don't continue if another introspection request has been started in - * the meantime. - */ - if (counter !== counterRef.current) { - return; - } - setFetchError(formatError(error)); - setIsFetching(false); - }); - }; + setFetchError(formatError(error)); + setIsFetching(false); + }); + }; /** * Trigger introspection automatically diff --git a/packages/graphiql-react/src/utility/resize.ts b/packages/graphiql-react/src/utility/resize.ts index 25dbf5c6e9..8d2aefd80f 100644 --- a/packages/graphiql-react/src/utility/resize.ts +++ b/packages/graphiql-react/src/utility/resize.ts @@ -74,11 +74,11 @@ export function useDragResize({ const setHiddenElementWithCallback = // eslint-disable-line react-hooks/exhaustive-deps -- false positive, function is optimized by react-compiler, no need to wrap with useCallback (element: ResizableElement | null) => { - if (element !== hiddenElement) { - setHiddenElement(element); - onHiddenElementChange?.(element); - } - }; + if (element !== hiddenElement) { + setHiddenElement(element); + onHiddenElementChange?.(element); + } + }; const firstRef = useRef(null); const dragBarRef = useRef(null);