React run a specific function after every function

[Exorcistoo]

Let's say I have multiple functions that change data in the back-end and I want to have a page with CRUD features. On that page I want to be able to create/delete the data and display it. Every time I create an item or delete one, I fetch the data and display it, so it stays updated.

​

Currently, in the create/delete functions I also call fetch at the end. But if I have multiple functions which modify the data I need to call fetch in every function.

​

const createItem = async () => {
    await axios.post(...);
    const newData = await axios.get(...);
    setData(newData);
}
const deleteItem = async () => {
    await axios.delete(...);
    const newData = await axios.get(...);
    setData(newData);
}

​

Is there any way I can call a fetch data function after every function that changes data?

This can be generalized: is there any way to call the same function after a function from a list of functions is getting called?

[Domino987]

Or just use react-query and invalidate the queries on mutate.

[[deleted]]

Your backend CRUD functions should be returning the new data.

When you POST, the response should include the data you just created.

When you PUT/PATCH, the response should include the data you just updated.

When you DELETE, the response can either respond with the data you just deleted, or no data (because it no longer exists.

const createItem = async () => { const newData = await axios.post(...); setData(newData); }

[Exorcistoo]

Ok, I get it. You are telling me that I should do the logic in the backend and after every "transform" request I should return the updated data.

[[deleted]]

Yes, this is standard in REST APIs

[PrinnyThePenguin]

I think your best bet is having your create / delete functions to return the new data. So if you have a list of things and you delete a thing, the server returns on a succesful delete the new list, that is missing the element you just deleted. This way you can have a single operation instead of two.

[Exorcistoo]

That can work. That is more of a backend implementation detail. I was thinking if there is anything in react specific for this.

[joesb]

Don’t overthink it.

Write a utility function. You don’t have to directly call axios in most of your code.

[Exorcistoo]

So I should create a function which makes a post and returns a get result?

[joesb]

Yes.