I am using React-PDF to create PDFs within my React application. My application is set up using RTK Query and works just as expected.
However, I am currently implementing my multipage PDF logic. Therefore I would like to use something like this:
function ComponentWithPDFEmbedded() {
return (
<div className="myClass">
<PDFViewer>
<PDFDoc />
</PDFViewer>
</div>
);
}
function PDFDoc() {
const {data} = useGetOverviewData();
return (
<Document>
<CoverPage title={data.title}/>
{data.pages.map((d) => <DetailPage key={d.id} id={d.id} />)}
<AnotherDetailPage />
</Document>
);
}
function DetailPage({id}){
const {data} = useGetDetailData({id});
return (
<Page>
<View>
<Text>{data.title}</Text>
</View>
</Page>
);
}
However, this does not work as React-PDF seems to render in an iframe besides the React document tree. I am getting errors like this:
could not find react-redux context value; please ensure the component is wrapped in a <Provider>
Passing through the data as props is not really an option unfortunately, as the problem is quite a bit more complex with different queries and subviews. Any ideas how to access RTK Queries within the PDFDoc?
Thank you so much in advance!