List and selected Item

[val2207]

This project looks so promising but as redux user, I ask myself a lot of questions.

Take this simple situation I have a list with items. Fine I will create a useQuery request to fetch my data and render the list. Great too easy...

Now I wanted to be able to select an item and for example display the label of the selected item at the top on my header bar. Of course my header bar isn't a children of my list. With redux I will simply use an action->reducer->selector that return my current item selected on the top. And my component will be re-render each time the selection change.

But with react-query how I'm supposed to do that ? Use redux as a client state to store the selected ID then use a selector to get the ID and use QueryCache to get all items then filter by the selected one. it seems very complicated for not much. Using a context ? There are some solutions but to me nothing great. So what is the good practice ? What I'm supposed to do ?

I think that split server state and client state on the paper is really promising. But in reality with complex application this is something much more complicated to implement.

[TkDodo]

Hi 👋

I think you are missing an important point a bit: same as you would call useSelector, you call useQuery wherever you want in your app to retrieve the list. if the selected id is client state and you want to store it in redux to make it globally available, that's fine. Here is how I would probably solve your use-case with react-query and redux:

const useMyList = () => useQuery('myList', () => fetchMyList())

const useMySelectedItem = () => {
    const selected = useSelector(state => state.selectedItem)
    const list = useMyList()

   return list.data?.find(item => item.id === selected.id)
}

useMySelectedItem is now subscribed to the selectedItem in redux, as well as the list data coming from react-query.

This is a simple start that should work for many many apps and situations. Of course there are perf / rendering improvements possible, like using tracked queries to avoid re-rendering when only the query status changes (in case you are not needing it), applying useMemo on the find statement to keep referential stability or even using the select option (even though we currently have a discussion on the select option 😄 ) to only subscribe to parts of the state.

The case where you only have a list endpoint, but not a corresponding detail endpoint are further quite rare, so most of the time, the useMySelectedItem hook would not use the query that requests the whole list, but probably just the one that returns a single item.

Hope that explains it a bit :)

[val2207]

Thank you for information. Your example was more or less what I would have done but what bothers me a little bit is that I will have some data inside client state who are in relation with data inside server state. And for me this is a little bit strange. For example if I want to have a notification system in frontend I will use redux or maybe a context and it will be fine because notification has no relation with anything related to the server.

Here in this situation this is not the case. But if you tell me this is okay and this how we are supposed to do I'm okay with that. :)

[TkDodo]

I will have some data inside client state who are in relation with data inside server state

i see this no different as having the information in two different redux slices, the separation is actually a good thing. The frontend can decide which item is selected, but it cannot decide which item exists or what state it is in. That is the server state we have only borrowed to display it, so the distinction is nice

[tusgavomelo]

Hello guys, sorry for bringing this discussion back but I'm facing a similar issue and I'd like your input.
On this example you shared, useMySelectedItem will return undefined because list.data will not be present while useMyList is fetching the list.
This means that useMySelectedItem should be async, which is weird because in this scenario it is supposed to work like a simple redux store selector.
How do you suggest to tackle this?

[TkDodo]

This means that useMySelectedItem should be async, which is weird because in this scenario it is supposed to work like a simple redux store selector.

I would now use the select option to implement it:

const useMyList = (select) => useQuery('myList', () => fetchMyList(), { select })

const useMySelectedItem = () => {
    const selected = useSelector(state => state.selectedItem)
    return useMyList(data => data.find(item => item.id === selected.id))
}

But this doesn't really change anything fundamental. Not sure what you mean with useMySelectedItem should be async. It's a hook, it can't be async. Yes, data can be undefined, it can always be undefined, because it comes from the server and fetching data can fail. We can't know where useMySelectedItem is used. It might trigger a fetch, or it might just retrieve data from the cache, with or without a background refetch.

Even in redux, if you initialize and empty store and then dispatch an action that starts fetching that data, you will have to define your types so that they are potentially undefined, because the data will not just be in the store before you fetched them. It's just the nature of asynchronous data that it can be undefined :)