useQuery call in onClickHandler with object of array

Question

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?

TkDodo · Accepted Answer · 2021-03-31 16:06:59Z

8

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

Then you've come to the right place.

I'm using react query.

That is very good 👍

How is the best way to handle this?

I see two options:

you disable the query and imperatively trigger it with refetch:

const { data, refetch } = useQuery(key, fn, { enabled: false })

<button onClick={() => refetch()} ...>

you don't use a query, but a mutation for it. I think that's the better approach, given that the backend likely creates that document when you click on the button. You also don't want to run it automatically, and you don't want to refetch it with the various refetch options that react-query has, there is also no invalidation necessary, so I'd do:

const { mutate } = useMutation(() => downloadTheDocuments())

<button onClick={() => mutate()} ...>

answered Mar 31, 2021 at 16:06

TkDodo

30.4k5 gold badges84 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

useQuery call in onClickHandler with object of array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related