Component level data is not updating after OnError rollback (infinite query)

[zorro1rr]

Hi all I've been setting up optimistic updates for a messaging feature. I have everything working nice except I would like to setup a rollback onError.

The console.log at the bottom confirms the failed message has been filtered out of the returned newData. I created some white space at the bottom of the code block at the relevant onError section for readability

const useSendChatMessage = () => {
  const queryClient = useQueryClient();

  const _sendMessage = (data: ISendChatMessageData) => {
    return new Promise((resolve, reject) => {
      axios
        .post('fakeapi', data)
        .then(res => {
          resolve(res);
        })
        .catch(err => {
          reject(err);
        });
    });
  };

  return useMutation({
    mutationFn: (data: ISendChatMessageData) => _sendMessage(data),
    onMutate: newMessage => {
      queryClient.setQueryData(
        ['conversation_messages', newMessage.conversationUUID],
        (old: any) => {
          // make a copy of the cache - not advised to mutate the cache directly
          const newData = {...old};
          // Adding new message to cache immediately to serve as temporary placeholder in cache
          const _newMessage = {
            conversationUUID: newMessage.conversationUUID,
            message: newMessage.message,
            createdByAlias: newMessage.createdByAlias,
          };
          const newPages = newData?.pages?.map((page: any, index: number) => {
            return {
              ...page,
              // add the new message to the first page
              items: index === 0 ? [_newMessage, ...page.items] : page.items,
            };
          });
          newData.pages = newPages;
          return newData;
        },
      );
      newMessage.callback && newMessage.callback();
    },
    // On success, remove our temporary cache and replace it with returned response
    onSuccess: newMessageResponse => {
      queryClient.setQueryData(
        ['conversation_messages', newMessageResponse?.conversationUuid],
        (old: any) => {
          // make a copy of the cache - not advised to mutate the cache directly
          const newData = {...old};
          const newPages = newData?.pages?.map((page: any, index: number) => {
            // remove the temporary message from the first page
            if (index === 0) {
              page.items = page.items.filter((message: any) => {
                return (
                  message.conversationUUID !==
                  newMessageResponse?.conversationUuid
                );
              });
            }
            // replace temporary with message response on the first page
            page.items =
              index === 0 ? [newMessageResponse, ...page.items] : page.items;
            return page;
          });
          newData.pages = newPages;

          return newData;
        },
      );
      queryClient.invalidateQueries(['chat_channels']);
    },
    
    




    // rollback on error -- having problems with this actually rolling back - not crashing app but not rolling back either
   
 onError: (error, args) => {
      Toast.show({
        props: {
          message: 'Error Sending Message!',
        },
      });

      queryClient.setQueryData(
        ['conversation_messages', args.conversationUUID],
        (oldData: any) => {
          const newData = {...oldData};
          const newPages = newData?.pages?.map((page: any, index: number) => {
            if (index === 0) {
              page.items = page.items.filter((message: any) => {
                if (!message.uuid) {
                  console.log('got 1');
                }
                return message.uuid;
              });
            }
            return page;
          });
          newData.pages = newPages;
          console.log('newData', newData.pages[0].items);
          return newData;
        },
      );
      queryClient.invalidateQueries(['chat_channels']);
    },
  });
};

export default useSendChatMessage;

At the component level:

const ChatItems: React.FC<ChatItemsProps> = ({
  conversationUuid,
  chatHeight,
  refHandler,
}: ChatItemsProps) => {
  const {
    data: messages,
    fetchNextPage,
    isLoading,
  } = useMessages(conversationUuid);

  console.log('messages', messages);

is not firing after the rollback function runs

I'm confused why the cache is not updating like it does for me during the mutation. Please help, thank you!

[Birkbjo]

You should probably snapshot your old value in onMutate and return it. See the docs.
Doing that would make your code a lot easier - rather than having to filter in onError - you would just do something like queryClient.setQueryData(previousValue).

As to why it doesn't work, I think it's because currently you're mutating the page in your map. You're only doing a shallow copy of the "cache", and when you're mapping you're not returning a new object of the page.

[Birkbjo]

I would probably do something along these lines:

const useSendChatMessage = () => {
    const queryClient = useQueryClient();

    const _sendMessage = (data: ISendChatMessageData) => {
        return new Promise((resolve, reject) => {
            axios
                .post("fakeapi", data)
                .then((res) => {
                    resolve(res);
                })
                .catch((err) => {
                    reject(err);
                });
        });
    };

    return useMutation({
        mutationFn: (data: ISendChatMessageData) => _sendMessage(data),
        onMutate: async (newMessage) => {
            const queryKey = [
                "conversation_messages",
                newMessage.conversationUUID,
            ];
            const previousData = queryClient.getQueryData(queryKey);
            await queryClient.cancelQueries(queryKey);
            queryClient.setQueryData<InfiniteData<Array<NewMessage>>(
                ["conversation_messages", newMessage.conversationUUID],
                (old) => {
                    const _newMessage = {
                        conversationUUID: newMessage.conversationUUID,
                        message: newMessage.message,
                        createdByAlias: newMessage.createdByAlias,
                    };
                    const newPages = old?.pages?.map(
                        (page: any, index: number) => {
                            return {
                                ...page,
                                // add the new message to the first page
                                items:
                                    index === 0
                                        ? [_newMessage, ...page.items]
                                        : page.items,
                            };
                        }
                    );

                    return {
                        ...old,
                        pages: newPages,
                    };
                }
            );
            newMessage.callback && newMessage.callback();
            return { previousData };
        },
        // On success, remove our temporary cache and replace it with returned response
        onSuccess: (newMessageResponse) => {
            queryClient.setQueryData<InfiniteData<Array<NewMessage>>(
                ["conversation_messages", newMessageResponse?.conversationUuid],
                (old) => {
                  // replace temp with new message
                    const newPages = old?.pages?.map(
                        (page: any, index: number) => {
                          let items = page.items;
                          if(index === 0) {
                             items = page.items.map((item: any) =>
                                 item.conversationUUID ===
                                 newMessageResponse?.conversationUuid
                                     ? newMessageResponse
                                     : item
                             );
                                
                          } 
                          return {
                            ...page,
                            items
                          }
                        }
                    );
                    return {
                      ...old,
                      pages: newPages
                    };
                }
            );
            queryClient.invalidateQueries(["chat_channels"]);
        },

        // rollback on error -- having problems with this actually rolling back - not crashing app but not rolling back either

        onError: (error, args, { previousData }) => {
            Toast.show({
                props: {
                    message: "Error Sending Message!",
                },
            });

            queryClient.setQueryData(
                ["conversation_messages", args.conversationUUID],
                previousData
            );
            queryClient.invalidateQueries(["chat_channels"]);
        },
    });
};

[zorro1rr]

Ah, yes I should have referenced the docs! It's working great now! Thank you for the guidance and explanation!