Update query data without triggering active updates

[gitcatrat]

Hi team!

Is there a way to update query data without triggering an UI update even though that query is active on screen?

Seems like an odd request but imagine this:

• reddit feed, i.e list of items [{id: '123', title: 'React rocks!', votes: 623}]
• each item has upvote button that increments upvotes count

If user clicks upvote, I wouldn't want to update/refetch/rerender whole list but use local state in single item component because it could be very expensive and wasteful depending on feed complexity. But if user navigates away and comes back, I want upvote count to be accurate (i.e include your +1 in query data).

Example code:

<Feed>
  <SinglePost /> {/* upvote button should rerender only this component */}
  <SinglePost />
  <SinglePost />
  {/* could be hundreds if infinite scroll (and thousands in-memory) */}
</Feed>

function SinglePost(props) {
  const [tempVotes, setTempVotes] = useState(0);  
  const votes = props.votes + tempVotes;
  function onVote() {
    setTempVotes(tempVotes + 1);
    // do mutation without triggering parent feed refresh but update query data
  }
  return <div><button onClick={onVote}>{votes}</button> {props.title}</div>;
}

I found refetchActive option on queryClient.invalidateQueries that does seem to do something like that but that option is not available on queryClient.setQueryData and other similar APIs. Does it seem like a good idea or is there already a way?

[TkDodo]

I don't think so. refetchActive is about refetching the active queries, not about rerendering. If you have an observer (subscription via useQuery), it will re-render if data changes, be it via a refetch or via manually calling setQueryData. Otherwise, we would show an inconsistent ui.

render optimizations are a different topic. If re-rendering all the posts in the list is too expensive, you'd have to memoize them (React.memo comes to mind).

You can also have each SinglePost subscribe to what it needs via the select option of your query. Then, if you update the list, only the posts that have actually updated (the one with the new like) will re-render. I've outlined this approach here: https://tkdodo.eu/blog/react-query-data-transformations#3-using-the-select-option

[gitcatrat]

I personally think that skipEvent (better name needed) would give more control, i'e you could control either per query or setQueryData call (and possibly other APIs) if you want to notify subscribers (which are React components in most cases).

const options = { skipEvent: true };
queryClient.setQueryData(queryKey, updater, options)

But I guess if it hasn't happened in several years, it's not something that everybody needs. Thanks anyway!

[TkDodo]

if you want to have a component to retrieve query data, but not subscribe to it, you can do:

const data = queryClient.getQueryData(key)

if the component renders for whatever reason, it will get the latest data, otherwise, it won't re-render on it's own. I don't think it would solve your problem though. I would do:

const useFeed = (select) => useQuery(['feed'], () => fetchFeed(), { select })
const useSinglePost = (id) => useFeed(data => data.find(post => post.id === id))

then, in the feed view:

const { data } = useFeed()

data?.map(post => <SinglePost id={post.id} />

and in SinglePost:

const SinglePost = React.memo(({ id }) => {
  const { data } = useSinglePost(id)
  
  // render data here
})

because we then only pass an id to SinglePost, it's easy to memoize with React.memo. If you now call queryClient.setQueryData, the feed will re-render because the feed items changed, but the children won't because the ids are the same. Then, only the child that is subscribed to the id with the select option will re-render itself, all other SinglePosts won't.

Actually, you can even also get rid of the React.memo if you have the Feed only subscribe to the ids, because they don't change if you like something, only if you add / delete something:

const { data } = useFeed(posts => posts.map(post => post.id))

data?.map(postId => <SinglePost id={postId} />)

so now if you update with setQueryData, not even the Feed should re-render, only the one SinglePost that was updated.