React component library to help cache API data, resulting in increased performance and decreased mobile data usage. Save trips to the server if unnecessary.
To install, you can use npm or yarn:
$ npm install react-api-cache
$ yarn add react-api-cacheIn this example we have a Todos component which fetches todos from an API on mount. If we didn't have a cache, we'd make a request every time the toggle is subsequently opened.
Hook Usage:
import React from 'react'
import { useCache } from 'react-api-cache'
import Toggle from './Toggle'
export default (props) => {
const { actions } = useCache()
return (
<Toggle title="Todos">
<Todos cacheActions={actions} />
</Toggle>
)
}Component Usage:
import React from 'react'
import Cache from 'react-api-cache'
import Toggle from './Toggle'
export default React.PureComponent {
render() {
return (
<Cache>
{({ store, actions }) => (
<Toggle title="Todos">
<Todos cacheActions={actions} />
</Toggle>
)}
</Cache>
)
}
}Toggle Component:
import React from 'react'
class Toggle extends React.Component {
state = {
open: true,
}
toggle = () => this.setState((prevState) => ({
open: !prevState.open,
}))
render() {
return (
<div>
<h2 onClick={this.toggle}>
<span>{this.props.title}</span>
<span>
{`[${this.state.open ? '+' : '-'}]`}
</span>
</h2>
{this.state.open && this.props.children}
</div>
)
}
}
export default ToggleTodos Component:
import React from 'react'
const url = 'https://jsonplaceholder.typicode.com/todos?_start=0&_limit=100'
const params = {
_start: 0,
_limit: 100,
}
class Todos extends React.Component {
state = {
loaded: false,
todos: [],
}
componentDidMount() {
const { hasCache, getCache } = this.props.cacheActions
if (hasCache(url, params)) {
this.setTodos(getCache(url, params).data)
} else {
fetch(url, params)
.then((res) => res.json())
.then(this.setTodos)
}
}
setTodos = (todos) => this.setState({
loaded: true,
todos,
}, () => {
this.props.cacheActions.setCache(url, params, todos)
})
render() {
if (!this.state.loaded) {
return <div>Loading...</div>
}
return (
<div>
{this.state.todos.map((todo) => (
<div key={todo.id}>
{todo.title}
</div>
))}
</div>
)
}
}
export default TodosSeems like a lot, but most of it is boilerplate for components unrelated to usage of this library. This is the most important section:
// ...
componentDidMount() {
const { hasCache, getCache } = this.props.cacheActions
if (hasCache(url, params)) {
this.setTodos(getCache(url, params).data)
} else {
fetch(url, params)
.then((res) => res.json())
.then(this.setTodos)
}
}
setTodos = (todos) => this.setState({
loaded: true,
todos,
}, () => {
this.props.cacheActions.setCache(url, params, todos)
})
// ...As seen above, on mount of our component we check if a cache exists for the URL & params combination we're requesting. If the combination exists, we immediately set state from our cache. If now, we pull data from the API. Pretty simple, but fairly powerful!
| Name | Type | Description |
|---|---|---|
| hasCache | (url, params) => boolean | Returns true if a cache exists for the url and params combination passed in. |
| getCache | (url, params) => { params, data } | Returns the cache that matches the url and params combination passed in. This method is considered unsafe and should be used following thehasCache method returning true. |
| setCache | (url, params, data) => void | Saves cache to store using url, params, and data passed in. This method is considered unsafe and should be used following thehasCache method returning true. |
| destroyCache | (?url, ?params) => void | Removes the cache from the store that matches the url and params combination passed in. url and params are both optional and if omitted, the entire cache will be destroyed. This method is considered unsafe and should be used following thehasCache method returning true. |
react-api-cache is released under the MIT license.