Common use case with RTK Query

[liornz]

I have a question about what seems to me like a common use case without a clear answer in the docs.

Lets assume we have an app that shows a list of posts.
We have a component called PostsList that subscribers to an endpoint getPosts.
It gets all posts and renders the PostDetails components and provides them the individual posts as props.
So far the PostDetails doesn't need to subscribe to any endpoint. Now, each PostDetails component can also update the individual post it is rendering. After triggering the mutation the individual post needs to be refetched, but not the entire list (which can contain tens of thousands of posts).

The PostDetails component can subscribe to the getPostById endpoint but this would mean each time the component is rendered, this endpoint will be called, however, this is not needed because as I said the PostDetails component normally gets the post data as props from the PostsList component. It is also unwanted because we have lots of posts and there is no need to send individual getPostById queries. It's covered by the one call to getPosts...

So the question is how to achieve this nicely.
What I did is this - I added a conditional call to the getPostById in the PostDetails (using the skip option).
I have a local skip state in the PostDetails component.
By default it is skip: true. After the mutation is triggered (the user updates a field of one of the posts) I wait for the query to succeed (by calling unwrap on it) then set the skip to false.
The PostDetails component checks if it has data from the getPostById endpoint, if so use that data for the render otherwise take the post data from the props.
In the api definition of corse I set provides Tags and invalidates tags, so the mutations will invalidate the cache for the post they update.

What I have achieved is that on first render we use the data frpm the props and avoid sending individual getPostById requests, but after the first mutation we do rely on the getPostById after each mutation to fetch the new data and update the UI.

I think this is a common use case but I didn't find an answer in the docs what is the preferred way to approach it.

The selectFromResult option doesn't seem to help me here either because 1. I can just send the individual post data as props, and 2. It still remains open how I cause the individual post to be refetched after the update post mutation.

I would be glad for any feedback.
Thanks,

Lior.

[phryneas]

You will have to at some point update that list - RTK Query is a "document cache" and even if you call that getPostById endpoint, that will only give you that one result, but not update the list for you.

You can do that manually with the technique described in the docs as "optimistic update", but I'd rather really recommend to re-fetch that list by invalidation.

Honestly, my question would be why you fetch so many items - just fetch what you need for displaying the list? You will need to filter and sort on the server anyways since at some point that list will definitely outgrow the "deliver all items to the browser" approach.

[phryneas]

PS: I also wouldn't do that dance with "get the item from the parent list, skip it and on change trigger the request".

Just call useGetPostByIdQuery in your component. It won't eat up your server resources. It could even help you save them - your getPosts endpoint could now only deliver information about the items that are required to show up in the list (probably something like id and title) and leave all the other properties out, in the end probably saving you lots of traffic.

[liornz]

I tried to simplify the situation but my actual case is more complex.
I also write the server and in this case I have a list of items based on a complex and time-consuming aggregation pipeline. Each group of items includes an array of Post-like items all the data of which need to be displayed.
I do not want to refetch the entire list because this will retrigger a time-consuming and resource-consuming process.
Since each items-group includes a few dozens Post-like items and I fetch a large list of group-items to avoid repeating this too often, it means, if the PostDetails component (its not really a post but never mind) would subscribe to the getPostById query, I will end up sending hundreds if not thousands of individual requests..
That is the reason that the top-level component gets the entire list of groups and it fetches a relatively large number of groups, each including a large list of Post-like items and I pass the Post-like items (having lots of fields) as props - I mean, I already have the full data, why call another endpoint to individually fetch what I already have and need for the list anyway.

[phryneas]

At that point, I would probably take a look at the backend if there are optimizations to be done there, instead of the UI. I mean, you can optimize the frontend all you want, but what if a user just keeps re-requesting that same data, e.g. by hammering F5?

Maybe a facade service on the server side might make a world of difference?

[liornz]

I think part of the confusion is because in my case there is no special details view that is different than the rows in the list.
Each item in my list is displayed as a row in a table. To generate the table/list view I already need all the details of each item in the list. So the "PostDetails" component is simply a row in a table and that's why I get all the data for one page (all the filtering and sorting is indeed done on the, server) in the parent component, map over the items and pass them to a Row component that shows all the details of each item.
In this case I don't think it makes sense First to fetch just ids and then make individual calls to get the full data of each item.

[liornz]

If I had a table/list that showed only basic information on each item and then after selecting one item a detailed view opened that showed more info on each item, then I would definitely go for the approach that the detailed view should subscribe to the getIndividualItem endpoint. But since in my case the individual item is just a row in the list it makes a lot of sense to fetch the list (for one page) then pass the items as props to the rows to show them. If one row is updated by, that row component, I just want to refetch it to reflect the changes in the UI.

[liornz]

Looking at a question of someone else here I think what would help is if the query hooks, like the mutation hooks, would give a trigger function that would allow to send the request upon an event!!

[phryneas]

How would that be different from

const [arg, setArg] = useState()
const result = useQuery(arg)

?

(But yeah, there is useLazyQuery, which has a trigger function)

[liornz]

Thank you!
I missed that. The useLazyQuery is exactly what I was looking for...