How to use the react-cache.createResource function in react-cache

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>

import React, { useState, useEffect } from 'react';
import { fetch } from '../full-suspense/fetch';
import { createResource } from 'react-cache';
import { cache } from '../full-suspense/cache';

const ArtistTopTracksResource = createResource(id =>
  fetch(`https://api.spotify.com/v1/artists/${id}/top-tracks?market=US`)
    .then(res => res.json())
    .then(
      ({ tracks }) => tracks,
      error => {
        throw new Error(error);
      }
    )
);

export const AudioResource = createResource(
  src => {
    const audio = new Audio(src);
    return new Promise((resolve, reject) => {
      audio.onerror = reject;
      audio.onloadeddata = () => resolve(audio);

import React, { useState } from 'react';
import { fetch } from '../fetch';
import { createResource } from 'react-cache';
import { cache } from '../cache';
import ListItem from './SuspenseListItem';

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

function ArtistRelatedArtists(props) {
  const [currentId, setCurrent] = useState(null);
  const related = ArtistRelatedArtistsResource.read(cache, props.id);
  return (
    <div>
      <h3>Related Artists</h3></div>

import { fetch } from '../full-suspense/fetch';
import { createResource } from 'react-cache';
import { cache } from '../full-suspense/cache';

const ArtistTopTracksResource = createResource(id =>
  fetch(`https://api.spotify.com/v1/artists/${id}/top-tracks?market=US`)
    .then(res => res.json())
    .then(
      ({ tracks }) => tracks,
      error => {
        throw new Error(error);
      }
    )
);

export const AudioResource = createResource(
  src => {
    const audio = new Audio(src);
    return new Promise((resolve, reject) => {
      audio.onerror = reject;
      audio.onloadeddata = () => resolve(audio);
    });
  },
  src => src
);

function Player({ url, onPause }) {
  const audio = AudioResource.read(cache, url);
  useEffect(
    () => {
      audio.play();
      return () => {

import React, { useState, useEffect } from 'react';
import { fetch } from '../full-suspense/fetch';
import { createResource } from 'react-cache';
import { cache } from '../full-suspense/cache';

const ArtistTopTracksResource = createResource(id =>
  fetch(`https://api.spotify.com/v1/artists/${id}/top-tracks?market=US`)
    .then(res => res.json())
    .then(
      ({ tracks }) => tracks,
      error => {
        throw new Error(error);
      }
    )
);

export const AudioResource = createResource(
  src => {
    const audio = new Audio(src);
    return new Promise((resolve, reject) => {
      audio.onerror = reject;
      audio.onloadeddata = () => resolve(audio);

import React from 'react';
import { fetch } from '../fetch';
import { createResource } from 'react-cache';
import { cache } from '../cache';
import { Track, AudioResource } from './SuspenseTrack';

const ArtistTopTracksResource = createResource(id =>
  fetch(`https://api.spotify.com/v1/artists/${id}/top-tracks?market=US`)
    .then(res => res.json())
    .then(({ tracks }) => tracks)
);

class ArtistTopTracks extends React.Component {
  render() {
    const tracks = ArtistTopTracksResource.read(cache, this.props.id);
    tracks.slice(0, 1).forEach(track => {
      AudioResource.preload(cache, track.preview_url);
    });
    return (
      <div>
        <h3>Top Tracks</h3>
        {tracks.slice(0, 3).map(track =&gt; (
          <track></div>

import styled from "styled-components";
import { Helmet } from "react-helmet";
import throttle from "lodash.throttle";
import { createCache, createResource } from "react-cache";
import { execute } from "./utils/executor";
import { fetchDoc } from "./utils/fetcher";
import { parse } from "./utils/md-parser";
import Editor from "./editor";
import Contributors from "./contributors";
import TabFrame from "./tab-frame";
import { highlightColor } from "./theme";
import LogoComp from "./logo";

window.React = React;
const cache = createCache();
const docsResource = createResource(fetchDoc);

const Container = styled.div`
  max-width: 900px;
  flex-direction: column;
  flex: 1 1 auto;
  padding-left: 70px;
  @media (max-width: 700px) {
    padding-left: 10px;
  }
`;

const Name = styled.div`
  font-size: 30px;
  font-weight: 400;
`;

import { fetch } from '../full-suspense/fetch';
import { createResource } from 'react-cache';
import { cache } from '../full-suspense/cache';

const ArtistTopTracksResource = createResource(id =>
  fetch(`https://api.spotify.com/v1/artists/${id}/top-tracks?market=US`)
    .then(res => res.json())
    .then(
      ({ tracks }) => tracks,
      error => {
        throw new Error(error);
      }
    )
);

export const AudioResource = createResource(
  src => {
    const audio = new Audio(src);
    return new Promise((resolve, reject) => {
      audio.onerror = reject;
      audio.onloadeddata = () => resolve(audio);
    });
  },
  src => src
);

function Player({ url, onPause }) {
  const audio = AudioResource.read(cache, url);
  useEffect(
    () => {
      audio.play();
      return () => {

import React from 'react';
import { createResource } from 'react-cache';
import { cache } from '../cache';

export const ImgResource = createResource(
  ({ src }) => {
    const image = new Image();

    return new Promise((resolve, reject) => {
      image.onload = resolve;
      image.onerror = reject;
      image.src = src;
    });
  },
  ({ src }) => src
);

export const Img = props => {
  ImgResource.read(cache, props);

  return <img alt="yolo">;