Default request parameter serialization breaks with nested objects

[jonrimmer]

If the request parameter object I pass into a query is an nested object, serialization doesn't work properly, resulting in incorrectly cached results.

Here is a reproduction based on the Pokemon example: https://codesandbox.io/s/concepts-queries-deduping-caching-forked-pom7k?file=/src/App.tsx

Note that all the Pokemon loaded are Bulbasaurs, even though one of them should be a Pikachu.

The change I have made is to change the query's argument to a nested object:

const { data, error, isFetching, refetch } = useGetPokemonByNameQuery({
  attrs: {
    name
  }
});

The problem is in defaultSerializeQueryArgs.ts. It calls JSON.stringify(...) on the query arguments and passes in a sorted Object.keys(queryArgs) as the list of allowed properties. But this will only be the list of properties on the root object. Any property keys on child objects will be missed, and therefore will be stripped out by the JSON serializer.

The query: { attrs: { name: 'Bulbasaur' } } will therefore be serialized as { "attrs": { } }. And the query will for Pikachu will be serialized identically, resulting in the use of the cached Bulbasaur result.

[markerikson]

yayyy actual bug reports! Sounds plausible based on the description. Thanks!

[phryneas]

fixed over in https://github.com/reduxjs/redux-toolkit/pull/1029