How to handle crossover between client and server state?

[kiastorm]

I'm building a Map component, querying an API for map and GeoJSON data.

The map has multiple layers that can be toggled between visible/hidden on the client side.

The layers data displayed here is data returned from useQuery, stored in the cache, but, when I toggle the layers its visible state is stored on the client side. Each layer has a visibleByDefault attribute as well as boundary co-ordinates (layer will only have the ability to be visible within this boundary) specified in the API response

I know the answer is probably simple, but I'm a little confused as of how to implement this? Do I create some client state, hiddenLayers, and
1 - on fetch success, add ID of all layers where visibleByDefault === true
2 - when a user toggles a layer add ID

[sergiodxa]

You use React Query to fetch server-data only and the visibility of the buttons is a UI state (except you want to persist it) so it should not come from RQ and instead your component should have it as a normal state.

[kiastorm]

Right, I understand that. I suppose my question is, how would this look using React's built in state management? I also dont want to persist it, if the user refreshes it should go back to its initial state.

Apologies, I'm not really sure if I'm articulating my problem in the best way.

I just want to see an example of how the UI state would look in the scenario I mentioned.

Data is fetched successfully using RQ, now, one of my component takes a 'layers' prop. Each layer is expected to have a 'isVisible' attribute, but that is not included in the 'layer' objects in the API response. In Redux, the API response data and the local state data could all become one object. In RQ, it is two separate objects - what does this look like?

Do I now store the data returned from RQ, onSuccess, in local state in order to add visibility toggle functionality?

[sergiodxa]

I would make each button have it's own const [isVisible, setIsVisible] = React.useState(visibleByDefault) state, and the parent of all button can fetch the data and pass if the button should have visibleByDefault as true or false.

[kiastorm]

Outside of the layers-select panel I need to know which layers where isVisible === true so that I can conditionally render them in the map component. layers-select and map are siblings, so do I store an array 'layers', which is a clone of that which is in the cache, in their parents state and pass it down to both children?

Thanks a lot for your input, by the way

[woh-dev]

I'm new to react-query and struggling with this intersection of server state and client state as well. My scenario (simplified) is as follows:

Let's say I fetch a list of dogs and a list of cats from the server. I get those as arrays like so:

 const dogs = useQuery('dogs', () => API.fetchAnimals('dogs'))
//  ['Fido', 'Rufus', 'Snowy', 'Jumper']
 const cats = useQuery('cats', () => API.fetchAnimals('cats'))
// ['Garfield', 'Sox', 'Midnight' ]

return (
  <div>
    <SelectFromList data={dogs} />
    <SelectFromList data={cats} />
    <button onClick={handleSubmit}>Submit</button>
  </div>
)

In the SelectFromList component a user should be able to click on an animal and toggle a "selected" boolean True or False.

When they click on the "Submit" button it should send all their animal selections to the server.

Assume that the list of Cats and the list of Dogs might change on query refetches. How would you go about implementing this in a world where Server State and Client State are separate?

[woh-dev]

And so then when the user clicks "Submit" how do you send all the selections and deselections to the server?

[TkDodo]

the hook exposes selected, so you know which ones are currently selected at all times.

[kiastorm]

Since posting this I have a better understanding of how to work with RQ and I think this is the answer you're looking for:

You can use useMemo and useCallback hooks to bring your client-state and server-state together and derive the data you want.

Hope this helps :)

  const [selectedDogIds, setSelectedDogIds] = useState([]);
  const [selectedCatIds, setSelectedCatIds] = useState([]);

  const dogs = useQuery('dogs', () => API.fetchAnimals('dogs'));
  const cats = useQuery('cats', () => API.fetchAnimals('cats'));

  const { mutate: submitAnimals } = useMutation('submitAnimals', (variables) => API.postSelectedAnimals(variables));

  const handleSelectDog = (selectedDogId) => setSelectedDogs((prev) => [...prev, selectedDogId]);
  const handleSelectCat = (selectedCatId) => setSelectedCat((prev) => [...prev, selectedCatId]);

  const selectedDogs = useMemo(() => dogs.data.filter((dog) => selectedDogIds.includes(dog.id)), [dogs, selectedDogIds]);
  const selectedCats = useMemo(() => cats.data.filter((cat) => selectedCatIds.includes(cat.id)), [cats, selectedCatIds]);

  const handleSubmit = useCallback(() => {
    const variables = {
      selected: [selectedDogs, selectedCats],
    };

    submitAnimals(variables);
  }, [selectedDogs, selectedCats]);

  
  return (
    <div>
      {selectedDogs.map((dog) => (
        <p>{dog.name}</p>
      ))}
      {selectedCats.map((cat) => (
        <p>{cat.name}</p>
      ))}
      <p></p>
      <SelectFromList data={dogs} onSelect={handleSelectDog} />
      <SelectFromList data={cats} onSelect={handleSelectCat} />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );

You could also abstract this all away into your own custom hook, that could be used something like this

const {
  dogs,
  cats,
  handleSelectDog,
  handleSelectCat,
  submitSelectedAnimals
  } = useAnimalSelection();

return (
  <SelectFromList data={cats} onSelect={handleSelectCat} />
  <SelectFromList data={dogs} onSelect={handleSelectDog} />
  <button onClick={submitSelectedAnimals}>Submit</button>
)

[woh-dev]

Thanks @TkDodo and @kiastorm this is helping me think this through.

@kiastorm I see what you're doing with the selectedDogs array but in my case I want to render the dogs and cats list with checkboxes next to each item so that the selection can be toggled on or off by the user. Using an array as you are doing in this example doesn't feel like the correct approach for my use case.

I'm testing doing a permutation of your approach but with an object that has key/value pairs for tracking selection based on the id.

[kiastorm]

I solved this by creating a new state object derived from the data in the cache and then wrote logic in a useEffect that keeps them in sync whenever the cached data changes. If you or anyone reading figures out a better way then let us know 👍