How to handle optimistic updates during cache invalidation?

[Brma1048]

I’m having trouble implementing optimistic updates correctly.

I have a chat app that polls the server every 10 seconds to check for new messages. When new data is available, I invalidate the cache tags for both the messenger and the conversation so they can fetch the latest data.

When I send a message, I perform an optimistic update so the message appears immediately in the conversation. Once the request succeeds, I replace the optimistic message with the actual response from the server.

This works fine — except when an optimistic update happens at the same time the conversation data is invalidated by the polling process. In that case, the optimistic message never appears in the chat because the invalidation triggers a refetch before the optimistic update is applied.

Is there any way to add the optimistic update also during cache invalidation?

[markerikson]

That sounds a bit confusing. An optimistic update (ie api.util.updateQueryData()) will be applied immediately, separate from the fact that you've kicked off a refetch. So, the data in the cache should contain the optimistic value, and be available for use in the UI.

Can you show the code you're trying to use here?

[Brma1048]

@markerikson Yes, that’s exactly what I was thinking as well.

Here is a part of my code

      hasCommunicationChanges: builder.query<boolean, { communicationsHash: string }>({
         query: params => ({ url: apiEndpoints.messenger.hasCommunicationChanges(), params }),
         onQueryStarted: onCommunicationChangesQueryStarted,
      }),
      sendMessage: builder.mutation<MessageBaseType, SendMessageRequestType>({
         query: ({ communicationId, message }) => ({
            url: apiEndpoints.messenger.sendMessage(),
            method: 'POST',
            data: {
               message: message.message,
               communicationId: communicationId.toString(),
            },
         }),
         onQueryStarted: onSendMessageStarted,
      }),
      getCommunicationDetails: builder.query<
         CommunicationDetailType,
         GetCommunicationDetailsRequestType
      >({
         query: ({ identifierName, identifierValue }) => ({
            url: apiEndpoints.messenger.getCommunicationDetails(),
            params: {
               emailId: identifierName === 'emailId' ? identifierValue : undefined,
               communicationId: identifierName === 'communicationId' ? identifierValue : undefined,
            },
         }),
         keepUnusedDataFor: 60 * 15, // Keep data for 15 minutes
         providesTags: ['Conversation'],
         onQueryStarted: onCommunicationDetailsQueryStarted,
      }),

export const onCommunicationChangesQueryStarted = async (
   _arg: { communicationsHash: string },
   { queryFulfilled, dispatch }: any
) => {
   const { data: hasChanges } = await queryFulfilled;

   // When we have changes, we need to invalidate the cache for both the conversations and the communications list to refetch the data
   if (hasChanges) {
      dispatch(api.util.invalidateTags(['Communications']));
      dispatch(api.util.invalidateTags(['Conversation']));
   }
};

export const onSendMessageStarted = async (
   params: SendMessageRequestType,
   { dispatch, queryFulfilled, getState }: any
) => {
   const { filter, searchText, paymentType } = getState().messenger;

   // Add a temporary unique identifier to the message for reliable matching
   // This won't be sent to the server but will help us match the optimistic update with the response
   const messageWithTempId = {
      ...params.message,
      tempId: `${Date.now()}-${uuidv4()}`,
   };

   // Create a patch to update the cache optimistically
   // This is done immediately and independently for each message
   const communicationDetailPatchResult = dispatch(
      messengerApi.util.updateQueryData(
         'getCommunicationDetails',
         {
            identifierValue: params.communicationId.toString(),
            identifierName: params.identifier,
         },
         (draft: any) => {
            draft.messageItems.push(messageWithTempId);
         }
      )
   );

   // Create a patch to update the cache optimistically
   const communicationsPatchResult = dispatch(
      messengerApi.util.updateQueryData(
         'getCommunicationsEndless',
         {
            search: searchText,
            filter: filter,
            filterTrustedCheckoutCommunications: paymentType === 'TrustedCheckout',
            filterDirectCheckoutCommunications: paymentType === 'DirectCheckout',
         },
         draft => {
            // Find the communication in the paginated data
            const pageIndex = draft.pages.findIndex(page =>
               page.communications.some(item => item.id === params.communicationId)
            );

            if (pageIndex === -1) return;

            const commIndex = draft.pages[pageIndex].communications.findIndex(
               item => item.id === params.communicationId
            );

            if (commIndex === -1) return;

            const communication = draft.pages[pageIndex].communications[commIndex];

            communication.lastUpdate = new Date().toISOString();
            // Remove the communication from the array and put it at the top of the list with the updated lastUpdate field
            draft.pages[pageIndex].communications.splice(commIndex, 1);
            draft.pages[0].communications.unshift(communication);
         }
      )
   );

   try {
      const res = await queryFulfilled;

      // When the query is successful, update the message with the actual response
      dispatch(
         messengerApi.util.updateQueryData(
            'getCommunicationDetails',
            {
               identifierValue: params.communicationId.toString(),
               identifierName: params.identifier,
            },
            draft => {
               // Find the message by its temporary ID instead of timestamp
               const index = draft.messageItems.findIndex(
                  m => m.tempId === messageWithTempId.tempId
               );

               if (index !== -1) {
                  // Replace the optimistic update with the actual response
                  draft.messageItems[index] = res.data;
               }
            }
         )
      );
   } catch (error) {
      // If the mutation fails, revert the optimistic update for this specific message only
      communicationDetailPatchResult.undo();
      communicationsPatchResult.undo();
   }
};

export const onCommunicationDetailsQueryStarted = async (
   _arg: GetCommunicationDetailsRequestType,
   { dispatch, queryFulfilled }: any
) => {
   // Wait for the query to complete
   const { data: communicationDetails } = await queryFulfilled;

   // We want to mark the conversation as read if it is unread and we have the id of the conversation
   if (communicationDetails?.id && communicationDetails?.unread) {
            dispatch(
               messengerApiBase.endpoints.updateCommunicationStatus.initiate({
                  communicationId: communicationDetails.id,
                  operation: 'markAsRead',
               })
            )
   }
};

I’m calling useHasCommunicationChangesQuery with a polling interval of 10 seconds. When this query returns true, I invalidate the cache key for the conversation so that the newest data is refetched (which triggers useGetCommunicationDetailsQuery).

When I start sending a message using useSendMessageMutation while useGetCommunicationDetailsQuery is still fetching the latest data, the optimistic update from useSendMessageMutation never appears on the screen.

[Brma1048]

Here is a video, as you can see it works fine for the first message, but when i try to add an optimistic update while fetching the newest conversation data (you can see a blue skeleton at the top while fetching) than the message does not appear, when the fetching is over and then i send a message it works fine (as you can see with the last message again).

trim.F6500748-BB5F-46E6-98D3-46708D1589EB.MOV