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.