react-api-cache v1.1.0

react-api-cache

React component library to help cache API data, resulting in increased performance and decreased mobile data usage. Save trips to the server if unnecessary.

Installation

To install, you can use npm or yarn:

$ npm install react-api-cache
$ yarn add react-api-cache

Examples

Todos within Toggle:

In 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 Toggle

Todos 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 Todos

Seems 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!

Public Methods

.png)

License

react-api-cache is released under the MIT license.