Render PDF in new tab with dynamic data fetched from API

[jazzyxeon]

Hi, I'm building a PDF report functionality whereby:

1. a user will click "Download Report" that triggers an async function
2. The async function fetches data from an API
3. Updates data state
4. Open PDF in new tab

The problem is that there's a race condition between updating data state and opening the url in a new tab. The very first time the page loads and user clicks on the button, PDF will be empty. The second click will populate the PDF though.

The following is a simplified version of the code :

import {
	Page,
	Text,
	View,
	Document,
	Font,
	StyleSheet,
	BlobProvider,
} from "@react-pdf/renderer";

const MyDocument = (props) => (
	<Document title="report.pdf">
		<Page size="A4" style={styles.page}>
			<View style={styles.letterHead}>
				<Text style={styles.title}>Report title</Text>
				<Text>Some date</Text>
			</View>
			{props.children}
		</Page>
	</Document>
);
const Orders = (props) => {
	const [orderSummary, setOrderSummary] = useState([]);

	const downloadReport = async (url) => {
		const report = await reports.get();

		const order = ... // transform JSON into View and Text with the data

		setOrderSummary(order);
		window.open(url, "_blank");
	};
return (
		<Fragment>
			...
					<BlobProvider document={<MyDocument children={orderSummary} />}>
						{({ url }) => {
							return (
								<div
									className="button"
									onClick={() => downloadReport(url)}
								>
									Download Report
								</div>
							);
						}}
					</BlobProvider>
			...
		</Fragment>
	);

I also tried using

	const [instance, updateInstance] = usePDF({
		document: <MyDocument data={props.data} />,
	});

and put updateInstance in useEffect with the data state as dependency but it still only renders the data from second click onward - i.e. first click after page load is always blank.

I saw other discussions here and here, but I don't want to download the file immediately. I want users to be able to read it and download it only if necessary.

I'd appreciate any help on this one. Thanks!