Is it possible to refetch a key on a button click?

[gmcamposano]

This is relatively straight forward question which I think does not need an example -- as it will be hard to do for the following:
I have an invoice number in my app which is used in 3 different stores.. so when when 1 store saves that invoice number, the others should be able to print different invoice numbers.

What am i trying to do?
Whenever the user clicks on the print button, refetches the invoice_number key so that every stores always print the latest version of the invoice number

What is happening now?
It can happen that 2 stores end up printing the same invoice number because it the value changed in the backend but not in the frontend... so they printed the same number.

What I have tried:
I tried the const getInvoice = useQuery({ queryKey: ["invoice_number"] }) and then ran getInoice.refetch() whenever the print button is clicked - but did not work
I also tried invalidating the query whenever the button is clicked - but it doesnt do anything.

[TkDodo]

This is relatively straight forward question which I think does not need an example

Sorry to say that I don't understand the problem and it would be a lot easier with a running reproduction in e.g. codesandbox or stackblitz.

[gmcamposano]

Sure. Here you go: https://codesandbox.io/s/determined-monad-n5xfdh?file=/src/App.js
In my current app, i am doing to almost the same thing as in this demo app. Instead of mutating, i am invalidatingQueries to get the latest data before the user prints the invoice. But what is happening now is that i am getting the stale version of the document which i am trying to print, and when I cancel the print dialog, it then updates the data - so you can say that the version i am printing is the outdated one.
So: If I invalidate a query, or in this minimal example, mutate before I print, how can I get the state of the document after the key has refetched?

[TkDodo]

step 1: return queryClient.invalidateQueries(["invoices"]); from the onSuccess of the mutation, so that the mutation stays in loading state until the invalidation is finished
step 2: trigger whatever side-effect you want in onSuccess of mutate:

newData.mutate(
  { name: "gabriel" },
  {
    onSuccess: () => window.print()
  }
);

https://codesandbox.io/s/friendly-tess-cu85e3?file=/src/App.js

this technically works - in the onSuccess callback, it is guaranteed that the values in the react-query cache are already up to date, however, since your side-effect is window.print, you would need to wait until react has finished rendering, which is not something you can do from within the button click callback (unless you do setTimeout)

so probably, some sort of useEffect is needed

[gmcamposano]

To avoid using side effects...I came up with this -- which seems to be working. This seems to do the trick. I cannot say i understand why it works, maybe you have an idea on the why... but it is working. If you have the time, can you please explain the why part?

 const handleImprimir = async () => {
    ...other code here...
    await queryClient.invalidateQueries(['ncf'])
    await queryClient.prefetchQuery(['ncf'])
    window.print()
  }

[TkDodo]

the second await gives react enough time to re-render in between. It's no guarantee though. It's like calling setTimeout(() => window.print(), 100) and hope that it's ready by then 😅