Usage with Redux and Redux ORM

[ghost]

I've been looking into SWR and the features look really nice. I like the idea of caching as well as optimistic updates. However, I'm currently using redux alongside redux orm to manage related data models in the frontend. For example, I have a Table model with a Row model foreign keyed to it such that if I want to have a master > detail pattern to update the table title or the row contents I can easily select either in a detail component.

Is there a way to effectively transition from Redux actions with axios to useSWR while maintaining the ability to manage related data models?

[sergiodxa]

I think the best you could do is to start using SWR in new parts or updates parts of your app and don’t use Redux there.

But if you still want to update your store there is an onSuccess callback you can pass to useSWR, there you will receive the data and you can use it to dispatch a Redux action.

[ghost]

If we ignore redux for a moment, what would you normally do in SWR to handle relational data. Take the Table and Row relation and assume I have an endpoint for each that supports CREATE, READ, UPDATE, and DELETE.

[sergiodxa]

SWR is used only to read (GET) data, for other CRUD operations you can handle them outside SWR however you want. And if you want to update the SWR cache after a request you can call the mutate function SWR exports passing the key and the new data, there is an example for that in the README I believe.

[ghost]

Hmmmm ok that makes sense, so I could probably leave all my Redux actions as they are at least for the CREATE, UPDATE, and DELETE. However, I'd need to clear the stale data from the ORM when useSWR fetches the data. Is there a way to first determine if the data is stale and if so dispatch an action on fetch for my READ actions? That way I can refresh the stale ORM data.

[ghost]

Addtionally I would assume useSWR revalidates by sending a request on mount. If this is the case, how is it any different from calling axios or another HTTP client on mount and overwriting the existing data with the new data?

[sergiodxa]

For your first question I’m not sure since I don’t use Redux

For the second one, yes it trigger a new fetch in mount, the difference is that if the data is already in the cache it will return it immediately while it’s revalidating to ensure is updated, also if two or more component read from the same key it will only trigger one revalidation request.

[ghost]

The only problem is this would mean more requests. Instead of just changing the slice of data for let's say a DELETE where we'd just remove an item from the store and check the status, you'd have to actually first send a DELETE and regardless of status send a GET request to retrieve the new data. Compounded this would be way more work.

[sergiodxa]

You don’t need to send a GET request, if you already know the status of the DELETE you can run mutate against the related key with the updated list or pass a function which will receive the data on that key and you can use it to update it, then pass a third argument to mutate with a false to prevent a GET request.

mutate(key, currentData => newData, false)