starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-04-23 17:18:32 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Fix infinite GraphQL render loop

Browse Source
This commit is contained in:
Gregory Schier
2025-04-17 14:45:33 -07:00
parent 45fcea1954
commit 1ab937aae4
1 changed files with 13 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src-web/hooks/useIntrospectGraphQL.ts
View File

@@ -1,6 +1,7 @@
import type { HttpRequest } from '@yaakapp-internal/models'; import type { HttpRequest } from '@yaakapp-internal/models';
import { buildClientSchema, getIntrospectionQuery, type IntrospectionQuery } from 'graphql'; import type { GraphQLSchema, IntrospectionQuery } from 'graphql';
import { useCallback, useEffect, useMemo, useState } from 'react'; import { buildClientSchema, getIntrospectionQuery } from 'graphql';
import { useCallback, useEffect, useState } from 'react';
import { minPromiseMillis } from '../lib/minPromiseMillis'; import { minPromiseMillis } from '../lib/minPromiseMillis';
import { getResponseBodyText } from '../lib/responseBody'; import { getResponseBodyText } from '../lib/responseBody';
import { sendEphemeralRequest } from '../lib/sendEphemeralRequest'; import { sendEphemeralRequest } from '../lib/sendEphemeralRequest';
@@ -17,12 +18,13 @@ export function useIntrospectGraphQL(
baseRequest: HttpRequest, baseRequest: HttpRequest,
options: { disabled?: boolean } = {}, options: { disabled?: boolean } = {},
) { ) {
// Debounce the request because it can change rapidly and we don't // Debounce the request because it can change rapidly, and we don't
// want to send so too many requests. // want to send so too many requests.
const request = useDebouncedValue(baseRequest); const request = useDebouncedValue(baseRequest);
const activeEnvironment = useActiveEnvironment(); const activeEnvironment = useActiveEnvironment();
const [isLoading, setIsLoading] = useState<boolean>(false); const [isLoading, setIsLoading] = useState<boolean>(false);
const [error, setError] = useState<string>(); const [error, setError] = useState<string>();
const [schema, setSchema] = useState<GraphQLSchema | null>(null);
const { value: introspection, set: setIntrospection } = useKeyValue<IntrospectionQuery | null>({ const { value: introspection, set: setIntrospection } = useKeyValue<IntrospectionQuery | null>({
key: ['graphql_introspection', baseRequest.id], key: ['graphql_introspection', baseRequest.id],
@@ -51,7 +53,9 @@ export function useIntrospectGraphQL(
const bodyText = await getResponseBodyText(response); const bodyText = await getResponseBodyText(response);
if (response.status < 200 || response.status >= 300) { if (response.status < 200 || response.status >= 300) {
return setError(`Request failed with status ${response.status}.\nThe response body is:\n\n${bodyText}`); return setError(
`Request failed with status ${response.status}.\nThe response text is:\n\n${bodyText}`,
);
} }
if (bodyText === null) { if (bodyText === null) {
@@ -84,12 +88,14 @@ export function useIntrospectGraphQL(
await setIntrospection(null); await setIntrospection(null);
}, [setIntrospection]); }, [setIntrospection]);
const schema = useMemo(() => { useEffect(() => {
if (introspection == null) { if (introspection == null) {
return introspection; return;
} }
try { try {
return buildClientSchema(introspection); const schema = buildClientSchema(introspection);
setSchema(schema);
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
} catch (e: any) { } catch (e: any) {
setError('message' in e ? e.message : String(e)); setError('message' in e ? e.message : String(e));