Is it possible to force a network operation with listenerApi.dispatch() of a query's initiate():

[steinarb]

react 19.0.0
@reduxjs/toolkit 2.5.0

I have the following component in my component tree to start and run polling of notifications.

import { useGetLoginQuery, useGetNotificationQuery, api } from '../api';

export default function Notifier() {
    const { data: loginResponse = {}, isSuccess: loginIsSuccess } = useGetLoginQuery();
    useGetNotificationQuery(loginResponse.username, {
        skip: !loginIsSuccess,
        pollingInterval: 60000,
        refetchOnMountOrArgChange: true,
    });

    // No rendering in this component
    //
    // The purpose of the Notifier component to trigger RTK queries
    // to the notificiation endpoint
    return null;
}

The notification is taken care of by an RTK query listener:

listeners.startListening({
    matcher: api.endpoints.getNotification.matchFulfilled,
    effect: (action, listenerApi) => {
        const notifications = action.payload;
        if (notifications.length) {
            const notification = notifications[0];

            if (notification.message) {
                // Update the balance after payment
                const loginResponse = listenerApi.getState().loginResponse;
                listenerApi.dispatch(api.endpoints.getAccount.initiate(loginResponse.username));
                if (Notification) {
                    spawnNotification(notification);
                } else {
                    console.log('Notification not supported by browser');
                }
            }
        }
    }
});

The notification works as expected but the "Update the balance after payment" bit does not work.

What I had hoped to do was to trigger a new network operation and have the component using the account query re-render and show the updated balance.

What happens is that there is a redux action of type "api/internalSubscriptions/subscriptionsUpdated" dispatched, but then nothing more happens.

Is there a way to forcibly trigger the network operation in a way that will cause the component using the query to re-render when data arrives?

Thanks!

[steinarb]

Figured out how to do it:

1. Introduced a new tag in the query I wanted reloaded:

    endpoints: (builder) => ({
        ...
        getAccount: builder.query({ query: username => '/account/' + username, providesTags: ['PaymentMade', 'JobEdit'] }),
        ...
   

2. In the listener, instead of trying to start a query, I dispatch an action that invalidates the tag:

   listeners.startListening({
       matcher: api.endpoints.getNotification.matchFulfilled,
       effect: (action, listenerApi) => {
           const notifications = action.payload;
           if (notifications.length) {
               const notification = notifications[0];
   
               if (notification.message) {
                   // Update the balance after payment
                   listenerApi.dispatch(api.util.invalidateTags(['PaymentMade']));
                   if (Notification) {
                       spawnNotification(notification);
                   } else {
                       console.log('Notification not supported by browser');
                   }
               }
           }
       }
   });
   

With this, the account balance is automatically updated when payment notification is picked up by the poller in the Notification component.