stuck-chocolate

A bit of help using a spreader function to update a toggle with optimistic updating

Trying to use a spreader function to use optimistic toggling. I would explain with super detailed code but its a bit late and I've been trying to sort this for quite awhile. Ok. Everything in my code works perfectly, API calls, optimistic updating looks and functions great. I'm not trying to add something (as in a to do list or a list of names/users) I am trying to toggle an existing list. If I don't use the spreader, when I click a button all I get is that button, if I do, every time I click it appends the array adding another toggle, mind you with the correct state. Please. Please help. I just want to have my existing list of buttons update optimistically and spread in the old products without creating a new button every time I click one. If anyone has any ideas let me know. If you need to look at my code, see the interactions, I'd be happy to share but right now I must sleep. Thanks in advance all.

7 Replies

ratty-blush•4y ago

I am trying to toggle an existing list. If I don't use the spreader, when I click a button all I get is that button, if I do, every time I click it appends the array adding another toggle, mind you with the correct state.

Having a hard time understanding what you mean here. Could you reword?

stuck-chocolateOP•4y ago

Yea no worries, to be honest I wrote this when I was super tired and didn't really look at it again. Okay. I have a list of products, they take a form of giant buttons with two states - In Stock, and Out of Stock. To set the data using the useMutation function, it actually works. It sends the put request and a couple seconds later it updates the status on the site using my onSuccess: invalidate queries. The problem comes when I use optimistic updates. I have a list of products as I said, and when I click them and make the setter function updatedProducts (the returned object from the API I'm using) it removes all of the products and consolidates that. Works perfectly, just consolidates it and removes all of the other ones. Makes sense because I'm setting the new value of the cache equal to just one object. My next logical thought is that I need to use a callback function of sorts, grab the previous products from that, and spread them in. Only issue doing that is that now NEW buttons are created, again, mind you with the correct state, but it keeps adding and adding and adding. I just want to have my existing list of buttons update optimistically and spread in the old products without creating a new button every time I click one. Thanks so much for your help.

onMutate: (updatedProduct)=>{
                queryClient.setQueryData(['products'], (prevProducts)=>[updatedProduct, ...prevProducts])
            }},

onMutate: (updatedProduct)=>{
                queryClient.setQueryData(['products'], (prevProducts)=>[updatedProduct, ...prevProducts])
            }},

this also makes a ton of sense why this is happening. spread includes the old product button. but there has to be another way around this. i read about some key filters or something along those lines inside of react query but i dont for the life of me understand it. my next solution was going to be to map through the buttons, find one with a matching state to the ID of the returned object, and just delete it from the array, but there has to be a better way. thanks! @Jack Fischer

ratty-blush•4y ago

Well consider that the optimistic update has to have the same (conceptual) logic as whatever's happening in your backend. We can assume the backend is finding that product by ID and manipulating it. So,

map through the buttons, find one with a matching state to the ID of the returned object, and just delete it from the array

is probably reasonable

stuck-chocolateOP•4y ago

Yea, it is, I can see it all happening in the backend as expected

ratty-blush•4y ago

It might be as simple as filtering prevProducts for where it's not the changed ID and then merging into the list, or map prevProducts and return the element by default but an element with the property changed where necssary Right yeah so if your SQL query is something like update where, then that's doing that lookup by ID and changing something. So you still have to do that manually in the optimistic update, whereas the database does it for you for free you're kinda implementing your own database functions on prevProducts

stuck-chocolateOP•4y ago

the API in this case returns an object of just the product that was updated its not an SQL database, just to let you know, its an external API

ratty-blush•4y ago

ahh

Gaming

Programming

A bit of help using a spreader function to update a toggle with optimistic updating

Did you find this page helpful?