fetch-with-timeout-and-cache

Extending fetch api to include timeouts, a client side cache and tries to avoid multiples requests and create resilients apps.

Table of Contents

• Installation
• Usage
• Properties
• Example

Install

npm install --save fetch-with-timeout-and-cache

Usage

import React, { useState, useEffect } from 'react';
import fetchTC from 'fetch-with-timeout-and-cache'

interface Post {
  id: number;
  title: string;
  body: string;
}

function App() {
  const [posts, setPosts] = useState<Post[]>([]);

  useEffect(() => {
    fetchTC('https://jsonplaceholder.typicode.com/posts',
      {
        timeout: 1300,
      },
      {
        key: 'posts',
        ms: 30000,
      })
      .then(response => response.json())
      .then((data: Post[]) => setPosts(data));
  }, []);

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Example with retry

import React, { useState, useEffect } from "react";
import fetchTC from "../../src/index";

interface Post {
  id: number;
  title: string;
  body: string;
}

function App() {
  const [posts, setPosts] = useState<Post[]>([]);

  useEffect(() => {
    fetchTC({
      resource: "https://mock.codes/500",
      cacheOptions: {
        key: "mocks",
        ms: 30000,
      },
      retryOptions: {
        delay: 2000,
        retries: 2,
      },
    })
      .then((response) => response.json())
      .then((data: Post[]) => setPosts(data));
  }, []);

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Properties

| Name | Description | Default | | ------------ | ----------------------------------------------------------------------------------------------------------------------------------- | --------- | | resource | This defines the resource that you wish to fetch | | | options | An object containing any custom settings that you want to apply to the request. Use the property timeout to define a custom timeout | undefined | | cacheOptions | Define the cache options if you want it | undefined | | retryOptions | Define the retry options in case of internal server erros | undefined |

License

MIT © rafaelguinho