Approach to update data after mutation

[petrovmiroslav]

Hello everyone!
Sorry for my English.
I'd like to make things clear, whether I understand it right how to use ReactQuery.
For example, I have two entities:

type User = {
  userId: number,
  userName: string 
}

type Post = {
  postId: number;
  postContent: string;
  author: User
}

On a profile page there are user info, some user lists and some post list.

const userQueryResult = useQuery({
  queryKey: ["users", { userId: props.userId }],
  // ...
});

const topUsersInfiniteQueryResult = useInfiniteQuery({
  queryKey: ["users", "top", "infinite"],
  // ...
});

const userPostsInfiniteQueryResult = useInfiniteQuery({
  queryKey: ["posts", "userPosts", "infinite", { userId: props.userId }],
  // ...
});

const popularPostsInfiniteQueryResult = useInfiniteQuery({
  queryKey: ["posts", "popular", "infinite"],
  // ...
});

Also, there is a form to change user info on the page.
After a user fetches 100 pages of posts and then changes userName, what should be done to userName changes everywhere?

Should I invalidate all queries where the user data might contain? But in that case the 100 pages of posts will refetch again. Is that OK?

Or should I use setQueriesData and check all users in all pages in all infinite query caches, which has the complexity of O(n³)?

Or is there another approach?

Thank you!

[TkDodo]

those are the two options, yeah, both have advantages and disadvantages.

But in that case the 100 pages of posts will refetch again

if a user has the time to scroll down 99 times, then yeah, that's what happens. in v5, you'll have the option to provide maxPages to limit that: https://tanstack.com/query/v5/docs/react/guides/infinite-queries#what-if-i-want-to-limit-the-number-of-pages

[petrovmiroslav]

Thank you for the answer!