How to rerender component when cache data changes using notifyOnChangeProps

[ernes-to]

Hello,

I have a simple situation here that I was hoping someone could chime in on.

PROBLEM

I have two React components that use the same custom hook which wraps useQuery (see the Codesandbox below). The Posts component renders all posts, and the Tabs component allows the user to click on a button to set a user ID to filter posts by.

When a button is clicked, a new network request is made that returns the filtered posts, and this then is stored in RQ's cache (visible in the devtools). However, the Posts component at this point does not rerender with the new data and still shows all posts previously fetched.

QUESTIONS

1. How can I get Posts to rerender in this case with the new data?
2. I tried setting the notifyOnChangeProps option to ['data'] (and tried 'all' as well) since I can see in the devtools that RQ's data key has actually changed, but the Posts component doesn't react to the data having changed.
3. The way I've gotten this to work is by subscribing Posts to the selectedUserId state and passing that to the usePostsQuery hook. It would be nice if this wasn't necessary and instead there was a way to tell RQ "rerender when the data for a specific query key has changed anywhere", which is what I took notifyOnChangeProps to mean.

DEMO

Codesandbox

[thiswallz]

with some adjustments started to work perfectly, you could avoid passing params in the query from the tab (since it creates different subscriptions , since post has another key),

you can simple react to the selectedUser

here my example:

queries.ts

import { useSnapshot } from 'valtio'
import { selectedUserIdStore, setSelectedUserId } from './store'

...

const fetchPosts: any = async (queryCtx) => {
  const {
    queryKey: [_key, { selectedUserId } = { selectedUserId: null }],
  } = queryCtx

  // All posts, otherwise get posts filtered by a user id
  const url =
  selectedUserId === null ? POSTS_BASE_URL : `${POSTS_BASE_URL}?userId=${selectedUserId}`

  const res = await (await fetch(url)).json()
 
  return res
}

export const usePostsQuery = (opts?: any) => {
  const selectedUserId = useSnapshot(selectedUserIdStore)
  
  return useQuery(
    [...QUERY_KEYS.posts, selectedUserId ],
    fetchPosts,
    opts?.useQueryOptions,
  )
}

tabs.ts

export const Tabs = () => {
  const selectedUserId = useSnapshot(selectedUserIdStore)
  const { status, data } = usePostsQuery()

  console.log('Tab', {
    selectedUserId: selectedUserId.selectedUserId,
    status,
    data,
  })

  return (
    <>
      {USER_IDS.map(({ id, label }) => (
        <button key={id} onClick={() => setSelectedUserId(id)}>
          {label}
        </button>
      ))}
    </>
  )
}

[ernes-to]

Thanks you @thiswallz, that makes sense.