Triggering Queries within a React-PDF Document

35 views Asked by At

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!

0

There are 0 answers