多次调用graphql突变后保持多个加载状态

Question

I'm using react and react apollo in my application and have a question. I have a page that contains list of users. Every item contains "+" button. When I click on item I want to display spinner until the mutation will finished.

Could you suggest me better solution for keeping loading for each mutation call? Now I just store it into array, but I think it can be solved better

Answer 1

You need to store the relation between one loading process and the corresponding user item.

I suggest (without knowing your requirements) to have a loadings array, where you add a loading item containing the user id onClick, and remove the loading item when done. A loading item may also contain other info if necessary.

You also probably need to store the relation between the (probably asynchronous) process and the loading item (or the user item ), so you know which loading item has finished.

You might do that by

1. receiving a process id from the process when you invoke it, and store that id inside the loading item together with the user item id ,
2. or you might store the loading id as a closure when you invoke the process , and remove the corresponding loading item , eg inside a .then((xyz)=>{... removeLoading(processId)...}) .