diff --git a/.changeset/rare-seals-decide.md b/.changeset/rare-seals-decide.md new file mode 100644 index 0000000000..e3cbadee69 --- /dev/null +++ b/.changeset/rare-seals-decide.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-techdocs-react': patch +--- + +Fix a bug that caused the header to not render when generating a document for the first time diff --git a/plugins/techdocs-react/src/context.tsx b/plugins/techdocs-react/src/context.tsx index 4f427e0031..608dbc59b3 100644 --- a/plugins/techdocs-react/src/context.tsx +++ b/plugins/techdocs-react/src/context.tsx @@ -21,8 +21,10 @@ import React, { useState, memo, ReactNode, + useEffect, } from 'react'; import useAsync, { AsyncState } from 'react-use/lib/useAsync'; +import useAsyncRetry from 'react-use/lib/useAsyncRetry'; import { CompoundEntityRef, @@ -117,14 +119,14 @@ export const TechDocsReaderPageProvider = memo( const techdocsApi = useApi(techdocsApiRef); const config = useApi(configApiRef); - const metadata = useAsync(async () => { - return techdocsApi.getTechDocsMetadata(entityRef); - }, [entityRef]); - const entityMetadata = useAsync(async () => { return techdocsApi.getEntityMetadata(entityRef); }, [entityRef]); + const metadata = useAsyncRetry(async () => { + return techdocsApi.getTechDocsMetadata(entityRef); + }, [entityRef]); + const [title, setTitle] = useState(defaultTechDocsReaderPageValue.title); const [subtitle, setSubtitle] = useState( defaultTechDocsReaderPageValue.subtitle, @@ -133,7 +135,19 @@ export const TechDocsReaderPageProvider = memo( defaultTechDocsReaderPageValue.shadowRoot, ); - const value = { + useEffect(() => { + if (shadowRoot && !metadata.value && !metadata.loading) { + metadata.retry(); + } + }, [ + metadata.value, + metadata.loading, + shadowRoot, + metadata.retry, + metadata, + ]); + + const value: TechDocsReaderPageValue = { metadata, entityRef: toLowercaseEntityRefMaybe(entityRef, config), entityMetadata,