I'm using react query.

There is an array of documents (just describing data, no real blobs) with an option to download. They have an onClick handler which calls a function which handles the download.

And in case the user clicks on the download button there is a http request getDocumentById to get the document you want to download.

The Problem is, I can not call my custom query hook in that handleDownload function. But the only place I have my specific document Id is in that function.

const parseDocuments = () => {
    return documents.map(document => ({
      ...document,
      name: document.fileName,
      date: formatDateForUI(new Date(document.created)),
      downloadDocumentHandler: () => downloadFileClickHandler(document),
      read: document.read
    }));
  }

function handleDownload(document) {
  <here I need to call the getDocumentById>
}

return (
  <DocumentsTable documents={parseDocuments()} headers={headers} accountId={accountId} />
)

How is the best way to handle this?

I'm using react query.

There is an array of documents (just describing data, no real blobs) with an option to download. They have an onClick handler which calls a function which handles the download.

And in case the user clicks on the download button there is a http request getDocumentById to get the document you want to download.

The Problem is, I can not call my custom query hook in that handleDownload function. But the only place I have my specific document Id is in that function.

const parseDocuments = () => {
    return documents.map(document => ({
      ...document,
      name: document.fileName,
      date: formatDateForUI(new Date(document.created)),
      downloadDocumentHandler: () => downloadFileClickHandler(document),
      read: document.read
    }));
  }

function handleDownload(document) {
  <here I need to call the getDocumentById>
}

return (
  <DocumentsTable documents={parseDocuments()} headers={headers} accountId={accountId} />
)

How is the best way to handle this?

• javascript
• reactjs
• react-query

1 Answer 1

I've got a problem I don't know the answer.

Then you've e to the right place.

I'm using react query.

That is very good