Cache & de-deduplicate queries and mutations across a React application's components
React Remote State
Cache & de-deduplicate queries and mutations across a React application’s components with a convenient API mirroring React.useState. Immediately update the local cache with setState and let React Remote State call your mutation in the background with debounce or throttle options.
Use the entity function to create separate cache scopes, set onQuerySuccess and onMutateSuccess callbacks, and automatically update
!! in progress and not production ready !!
import useRemoteState, { entity } from 'react-remote-state';
const post = entity({
defaultValue: '',
query: (id: string) => API.getPost(id),
mutate: (post) => API.updatePost(post),
});
const PostEditor = ({ id }) => {
const [post, setPost] = useRemoteState(post(id));
return (
<textarea
value={post}
onChange={e => setPost(e.target.value)}
/>
);
};
Usage
Deriving multiple entities from queries or mutations
Often, API calls overlap in the data that is returned. For example, querying for a list of users may include the same data as querying for a single user by id. Use entity.onQuerySuccess to return other entities that can be derived from the query result. For example:
import { entity } from 'react-remote-state';
export const friendEntity = entity({
query: (id) => fetch(`/friends/${id}`)
});
export const friendList = entity({
query: () => fetch(`/friends`),
onQuerySuccess: (friends) => friends.map(friend => friendEntity(friend.id)(friend))
});
When a component queries friendList, the cache will also be updated for each individual friendEntity by id, so that a component that uses the individual query will already have data loaded.