[RTK-Query] Batch store update with API invalidation

[krumpyzoid]

I have a reload button which does two things:

• Invalidate a query tag
• Refresh time range in the store

I tried two approaches:

• Having the handleReload onClick handler dispatch both calls (tried both orders of dispatch calls)
• Having the slice responsible for handling the time range react to the invalidateTag dispatch through extraReducers

In both cases, I end up with a lot of duplicated queries, because refreshing the time range will already refetch all the queries that depend on the time range as query args, and then reload all queries with the invalidated tags.

Is there a way to prevent this by "batching" the two operations ?

[markerikson]

Can you clarify the question? What does "batch" mean behavior-wise in this case?

[krumpyzoid]

onClick={() => {
  dispatch(API.util.invalidateTags(['Reload']));
  dispatch(refreshDates());
}}

When I run this, all the queries that rely on the dates get fired twice:

• Once because the Reload tag was invalidated
• Once because the dates query params changed

I would love if possible, that the queries are fired only once, with the updated dates.

Additional context:

• Reload is a tag for every query that needs to be reloaded when the user presses Reload
• dispatch(refreshDates()) will only refresh the dates when the user is using a from date range, not if he's using an absolute time range

So when the user is in absolute time range, the queries will fire only once as the date args will not be updated. This makes it a bit tricker to handle. I could make something like tag Reload what does not use the dates, ReloadInAbsolute what uses dates, and only invalidate the Reload tag if the time range is from, but invalidate both tags if the time range is absolute. It'd work but add a lot of complexity for something that I kind of expected out of the box.