Option to disable or differentiate if returned data does not match query variables

[niekert]

Thank you for building RTK(Q)! Really enjoying it so far.

Today I ran into what I found strange behavior where I noticed that the data returned from useQuery did not return the data that matched the query variables. For example:

const { data } = apiSlice.useTodoQuery({ id: 2 });

// Here `data.id` would be `1` instead of expected 2.
console.log(data);

After a long debug session, I realized that this is Intended behavior. It is explained in the docs but that was not immediately obvious to me (maybe I didn't read properly).

I am looking for the best way to disable this behavior or differentiate if data comes from different query variables.

My use case is a useQuery that sets a pollInterval.
When data is being refreshed on the poll interval (or window refocus) I don't want to display a generic / skeleton loader everytime it polls but still display the data that matches the current query variables.

But also I'd like to disable the behavior that data from different query variables is displayed. Because it kind of looks like the UI is lagging behind when navigating between urls.

I can't figure out if there's a way to differentiate between these two cases with the current flags returned from the useQuery hook. I was wondering if there is a way to disable this type of behavior, meaning that data returned from useQuery will always be data that matches the active query variables.

Coming from react-query land, this behavior was not immediately obvious and kind of confusing. If a contribution to improve the documentation is welcomed I'd be happy to try contribute.

For reference here are 2 codesandboxes with the behaviors of RTKQ and react-query:

• Redux toolkit: https://codesandbox.io/s/rtk-behavior-svu2w?file=/src/App.tsx
• React query: https://codesandbox.io/s/react-query-data-behavior-9pi81?file=/src/App.tsx

[phryneas]

The easiest way of achieving that would simply be to reset your component's identity - after all you probably also don't want to keep other local state around for it.

That could be done just by adding a key prop: <PersonLoader id={selectedPerson} key={selectedPerson} />.

Another point would be just to use a selector

apiSlice.useGetPersonQuery({ id }, { pollingInterval: 2000 }); // just to make the request
const selector = useMemo(() => api.endpoints.getPerson.select(id), [id])
const result = useSelector(selector) // and getting the data

Generally, this has been asked for a few times (e.g. #1339) and we'll probably add a boolean flag on result in a future version, but as of right now, this is intended behaviour.

[niekert]

Thanks, resetting the component identity does solve my use case here! Sorry for the duplicate question, I did some searching but didn't land on any issues in the repo :)