How to best keepPreviousData but only when parts of the query key match

[paulblyth]

Hello! We have a few instances of useQuery with keepPreviousData true for pagination of tables, however, we've now got a situation where when we change context there's a flash of incorrect data until the new data is fetched.

Let me use a tangible example. Let's say we're displaying a list of users that belong to a team and we have a useQuery implementation like so:

const { data } = useQuery([teamId, page], () => fetchUsers(teamId, page), { keepPreviousData: true });

What we want is for keepPreviousData to only return cached data if that cached data also satisfies the teamId key, is there a way to do that?

[TkDodo]

interesting. I don't think we have such a feature yet. What we would need is to make keepPreviousData accept a function that gets passed the previous context, which contains the key, so that you could do:

keepPreviousData: ({ queyKey }) => queryKey[0] === teamdId)

I'm not so sure if that api wouldn't be confusing. It would be the only function that gets something passed relating to the previous query state. I think you can do this manually for now by storing the previous teamId in a ref or so, e.g. with: https://usehooks.com/usePrevious/