Custom equality check for determining argument changes in useQuery from rtk-query/react #1768
Description
This issue is referring to how stableArg is determined in buildHooks.ts/useQuerySubscription:
The problem
In the examples below,
useQueryis pseudo code to refer to an arbitrary query hook generated by @reduxjs/toolkit/query/react.
The current implementation performs a shallow equality check to allow the hook consumer to pass in inline objects without having to manually memoize these:
useQuery({foo: 123, bar: "baz"}) // This is stableHowever, if the consumer wants to use a nested object, the shallow equality will not be able to understand that no change has been made:
useQuery({nested: {foo: 123, bar: "baz"}}); // This is not stableTo work around this the consumer would have to manually memoize the query argument, which easily becomes very verbose in larger projects with lots of queries and views, requiring an extra statement per query.
const stableArg = useMemo(() => ({nested: {foo: 123, bar: "baz"}}), []);
useQuery(stableArg);Suggested solution
I suggest to provide the option to use any kind of equality checking:
useQuery({nested: {foo: 123, bar: "baz"}}, {equalsFn: deepEquals}); // This is stableIn the above example, useQuery would determine whether the argument has changed by calling the provided deepEquals function, instead of the default shallowEquals function.
Additionally, a central configuration could be provided, to modify the default equality checking function for all queries:
createApi({
baseQuery: ...,
endpoints: ...,
useQueryArgEqualsFn: deepEquals
})