How to use react-cache - 10 common examples

import React from 'react';
import ListItem from './ListItem';
import { fetchArtistListJSON } from '../api';
import { Logo } from './Icon/Logo';
import { unstable_createResource } from 'react-cache';
import { Spinner } from './Spinner';

const ArttistListResource = unstable_createResource(fetchArtistListJSON);

class Search extends React.Component {
  state = {
    // toggles whether to show or hide the inline loading spinner
    // just like native iOS!
    currentId: null,
  };

  render() {
    return (
      <div>
        
        }&gt;
          {ArttistListResource.read().map(item =&gt; (
            </div>

* Network failure handling - I've tried:
 * - ErrorBoundaries: The first error thrown by the api promise is catched but the ones
 * thrown after by react-cache due to cache miss after trying to remount the node
 * finally bring down the app.
 *
 * For the moment, when I createResource, I return a function that swallows its own errors
 * (by returning promise.catch()) and if an error has occured, the resolved object will
 * contain a attribute "error" with a truthy value.
 *
 * This value is then checked at rendering to choose whether to render data or error.
 */
const CourseResource = createResource(courseId =>
  fakeApi(`/course/${courseId}`).catch(error => ({ error }))
);

const NextLessonResource = createResource(courseId =>
  fakeApi(`/course/${courseId}/nextLesson`).catch(error => ({ error }))
);

const Course = ({ courseId, delayMs, ...remainingProps }) => {
  NextLessonResource.preload(courseId); // avoid serial requests
  const courseData = CourseResource.read(courseId);
  return courseData && !courseData.error ? (
    <div>
      
      }
      &gt;
        
      
      <div></div></div>

import React from 'react';
import { fetch } from '../fetch';
import { createResource } from 'react-cache';
import { cache } from '../cache';
import { Spinner } from '../components/Spinner';
import { Img } from './Img';
const ArtistTopTracks = React.lazy(() => import('./ArtistTopTracks'));
// const ArtistAlbums = React.lazy(() => import('./ArtistAlbums'));
const ArtistRelatedArtists = React.lazy(() => import('./ArtistRelatedArtists'));

const ArtistResource = createResource(id =>
  fetch(`https://api.spotify.com/v1/artists/${id}`)
    .then(res => res.json())
    .then(
      artist => artist,
      error => {
        throw new Error(error);
      }
    )
);

function ArtistHeading(props) {
  const artist = ArtistResource.read(cache, props.id);
  return (
    <div>
      {artist.images &amp;&amp;
      artist.images.length &gt; 0 &amp;&amp;</div>

export function initCache() {
  // `createCache` accepts an invalidator function in first argument: https://github.com/facebook/react/blob/master/packages/react-cache/src/ReactCache.js#L152
  cache = createCache(initCache);
}

import * as React from "react";
import * as ReactDOM from "react-dom";
import { unstable_createResource as createResource } from "react-cache";
import { unstable_scheduleCallback } from "scheduler";
import { getText } from "./getText";

const readText = createResource(getText);

function Text({ value }) {
  return <span>{value}</span>;
}

function AsyncText({ value }) {
  value = readText.read(value);
  return

import { unstable_createResource as createResource } from "react-cache";

import {
  fetchHackerNews,
  fetchHackerNewsComments,
  Story,
  Comment
} from "./hackerNews";

export const storiesResource = createResource(fetchHackerNews);

export const commentsResource = createResource(
  fetchHackerNewsComments,
  ids => ids.sort().join()
);

import './styles.css';
import React, { Suspense } from 'react';
import { unstable_createResource as createResource } from 'react-cache';
import styled from 'styled-components';

import { fetchContributors } from './api';
import Details from './Details';
import Spinner, { SIZES } from './Spinner';
import * as styles from './UserPage.style';

const UserDetailsResource = createResource(fetchContributors);

const Container = styled.div`${styles.container}`;

const Repositories = React.lazy(() => import('./Repositories'));

const Contributors = () => {
  const users = UserDetailsResource.read();
  return users.map(user => (
    
      <details name="{user.name}">
      }&gt;
        
      
    
  ));
};</details>

import React, {Suspense} from 'react';
import {unstable_createResource as createResource} from 'react-cache';
import './kitties.css';

const catApiResource = createResource(async() => {
  const response = await fetch('https://api.thecatapi.com/v1/images/search');
  const [result] = await response.json();
  const img = new Image();
  const src = await new Promise(resolve => {
    img.onload = () => resolve(result.url);
    img.src = result.url;
  });
  return src;
});

const KittyImage = ({ID}) => {
  const url = catApiResource.read(ID);
  return <img alt="randomKitty" src="{url}">;
};

export default class Kitties extends React.Component {

<svg style="{{" viewBox="0 0 24 24">
      <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"></path>
      <path fill="none" d="M0 0h24v24H0z"></path>
    </svg>
    <a href="{`mailto:${email}`}">{email}</a>
  
);

const ImageResource = unstable_createResource(
  src =&gt;
    new Promise(resolve =&gt; {
      const img = new Image();
      img.onload = () =&gt; resolve(src);
      img.src = src;
    })
);

function Img({src, alt, ...rest}) {
  return <img alt="{alt}" src="{ImageResource.read(src)}">;
}

function UserPicture({source}) {
  return (
    }&gt;

import React, { Suspense } from "react";
import { unstable_createResource as createResource } from "react-cache";
import { fetchMovieDetails, fetchMovieReviews } from "../api";
import Icon from "./Icon";
import Spinner from "./Spinner";
import "./MoviePage.css";

const movieDetailsFetcher = createResource(fetchMovieDetails);
const movieReviewsFetcher = createResource(fetchMovieReviews);

function Rating({ label, score, icon }) {
  if (typeof score !== "number" || score < 0) return null;
  return (
    <div>
      <div>{label}</div>
      {icon &amp;&amp; (
        <div>
          
        </div>
      )}
      <div>{score}%</div>
    </div>
  );
}