diff --git a/src-web/hooks/useIntrospectGraphQL.ts b/src-web/hooks/useIntrospectGraphQL.ts index 02f97bc3..f551d6d7 100644 --- a/src-web/hooks/useIntrospectGraphQL.ts +++ b/src-web/hooks/useIntrospectGraphQL.ts @@ -1,6 +1,7 @@ import type { HttpRequest } from '@yaakapp-internal/models'; -import { buildClientSchema, getIntrospectionQuery, type IntrospectionQuery } from 'graphql'; -import { useCallback, useEffect, useMemo, useState } from 'react'; +import type { GraphQLSchema, IntrospectionQuery } from 'graphql'; +import { buildClientSchema, getIntrospectionQuery } from 'graphql'; +import { useCallback, useEffect, useState } from 'react'; import { minPromiseMillis } from '../lib/minPromiseMillis'; import { getResponseBodyText } from '../lib/responseBody'; import { sendEphemeralRequest } from '../lib/sendEphemeralRequest'; @@ -17,12 +18,13 @@ export function useIntrospectGraphQL( baseRequest: HttpRequest, 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. const request = useDebouncedValue(baseRequest); const activeEnvironment = useActiveEnvironment(); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(); + const [schema, setSchema] = useState(null); const { value: introspection, set: setIntrospection } = useKeyValue({ key: ['graphql_introspection', baseRequest.id], @@ -51,7 +53,9 @@ export function useIntrospectGraphQL( const bodyText = await getResponseBodyText(response); 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) { @@ -84,12 +88,14 @@ export function useIntrospectGraphQL( await setIntrospection(null); }, [setIntrospection]); - const schema = useMemo(() => { + useEffect(() => { if (introspection == null) { - return introspection; + return; } + try { - return buildClientSchema(introspection); + const schema = buildClientSchema(introspection); + setSchema(schema); // eslint-disable-next-line @typescript-eslint/no-explicit-any } catch (e: any) { setError('message' in e ? e.message : String(e));