Quick Start

Quick Start

Installation

First, install the package with your favorite package manager:

npm i cache-fetcher
yarn add cache-fetcher
pnpm add cache-fetcher

Then use it with one of the following ways:

Usage

JavaScript

Import the package:

index.js
import * as cacheFetcher from "cache-fetcher";

then make a request:

index.js
const { data, isLoading, error } = await cacheFetcher.get(
  "https://jsonplaceholder.typicode.com/todos/1"
);

and then do what you want with it, for example:

index.js
if (isloading) console.log("Loading...");
if (error) console.log(error?.message);
 
console.log(data);

Full example:

index.js
import * as cacheFetcher from "cache-fetcher";
 
const { data, isLoading, error } = await cacheFetcher.get(
  "https://jsonplaceholder.typicode.com/todos/1"
);
 
if (isloading) console.log("Loading...");
if (error) console.log(error?.message);
 
console.log(data);

React

Import the useCacheFetcher hook:

Component.jsx
import { useCacheFetcher } from "cache-fetcher/react";

then make a request:

Component.jsx
function Component() {
  const { data, isLoading, error } = useCacheFetcher(
    "https://jsonplaceholder.typicode.com/todos/1"
  );
}

and then do what you want with it:

Component.jsx
function Component() {
  // ...
 
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error?.message}</div>;
 
  return (
    <div>
      <p>{data.title}</p>
    <div>
  )
}

Full example:

Component.jsx
import { useCacheFetcher } from "cache-fetcher/react";
 
function Component() {
  const { data, isLoading, error } = useCacheFetcher(
    "https://jsonplaceholder.typicode.com/todos/1"
  );
 
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error?.message}</div>;
 
  return (
    <div>
      <p>{data.title}</p>
    <div>
  )
}

Solid.js

Import the createCacheFetcher function,

import { createCacheFetcher } from "cache-fetcher/solid";

and make a request.

Component.jsx
function MyComponent() {
  // Let's say you want to fetch some data from this URL
  const url = "https://api.example.com/data";
 
  // Just call the createCacheFetcher function with that URL
  const { data, isLoading, error } = createCacheFetcher(url);
 
  // Now you can handle the various states your data might be in:
  if (isLoading) {
    return <div>Loading...</div>;
  }
 
  if (error) {
    return <div>Error: {error?.message}</div>;
  }
 
  // Render your data!
  return (
    <div>
      <h1>Data Loaded!</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

Full example:

Component.jsx
import { createCacheFetcher } from "cache-fetcher/solid";
 
function MyComponent() {
  // Let's say you want to fetch some data from this URL
  const url = "https://api.example.com/data";
 
  // Just call the createCacheFetcher function with that URL
  const { data, isLoading, error } = createCacheFetcher(url);
 
  // Now you can handle the various states your data might be in:
  if (isLoading) {
    return <div>Loading...</div>;
  }
 
  if (error) {
    return <div>Error: {error?.message}</div>;
  }
 
  // Render your data!
  return (
    <div>
      <h1>Data Loaded!</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}
IntroductionSolid.js