invalidateQueries not functioning in my app

[MikeBish13]

Would somebody be willing to take a look at the following app and possibly point out where I'm going wrong (newbie to React Query)? https://codesandbox.io/s/priceless-waterfall-k085q

It's an app to add/edit/update/delete invoices. My issue is within InvoiceForm.js when a user adds or updates an invoice. I am using useMutation and invalidateQueries as per the docs, but the individual invoice or the list of invoices don't seem to be updating.

Any help much appreciated.

[TkDodo]

first thing that pops up is that you create the queryClient inside the app function, which gets re-rendered on every router change:

function App() {
  const queryClient = new QueryClient();

all the examples to it outside to have a stable client. The client holds the cache, so that will delete all your data ;)

[MikeBish13]

did you save the above codesandbox?

Yes I've saved it, so it should be showing.

so, idk, either provide a steps-to-reproduce explanation, or a more minimal example please. I can assure you that invalidateQueries works - have a look at the provided examples where it's being used :)

Issue 1: On the front page of the app, click 'Add Invoice'. Fill out the form with any data and click 'Save and Send'. This creates a new invoice using useMutation. The form modal will disappear and you will see the list of invoices but without the new invoice. Click refresh and the new invoice will show.

Issue 2: Click an existing invoice. Click 'Edit' button. Change something within the form and click 'Save Changes'. The form modal disappears and you are shown that particular invoice, but not with the updated data. Click refresh and the invoice updates.

The code for both issues is in components/InvoiceForm.js.

[TkDodo]

I'm really trying to help here, but I can't. I'm getting Failed to fetch all the time, the api calls go to localhost:3004

the code looks fine - the react-query-devools can maybe help?

[MikeBish13]

I'm really sorry - newbie error! I had assumed that uploading the repo to Codesandbox the JSON.server data was somehow running externally on their server, but it's obviously still running off my localhost so it can only work for me.

I really appreciate your help and sorry for wasting you time. I'll try and figure it out myself.

[MikeBish13]

I've just exchanged the localhost server for an external mock API in the app. Would you mind taking a quick look to see if you can reproduce the errors explained above? https://codesandbox.io/s/priceless-waterfall-k085q

Hopefully that works!

[MikeBish13]

I think I solved the problem! My function calls to the API didn't include the async/await keywords. So I'm assuming that the code which returned the user to the original page was fired before the edit/add/delete calls to the API were completed, hence the data that was shown wasn't updated. Would this be correct?

Question - if the above is correct then when the user is returned to the original page, surely the data would be updated at some point and so added to the cache, and then this would be updated on the page at some point in time?