Fetchy

A modern client-side fetch utility for fetching API's in Javascript. Under the hood, Fetchy is a simple wrapper around fetch. I found myself reusing a set of fetch wrappers and decided to formalize them as their own module on NPM

Install

NPM:

npm install @zachacious/fetchy --save-dev

Yarn:

yarn add @zachacious/fetchy --dev

Features

• Handles error catching and returns a nice easily consumeable object

{
    error: '', // Error message(String) or null
    response: {} // The fetched response or null
}

• Supports GraphQL
• Supports retries. Set # of retries and the delay between retries.
• Supports events. You can subscribe to a fetchy request and listen for responses

Future Features

• Support caching responses in IndexedDB
  • Support loading cached data then rehydrating in the background
• Support Node

Usage

// Import the module
import fetchy from "fetchy";

// API
Fetchy(options) // api or graphql request
Fetchy.subscribe(String name, Function callback); // subscribe to a fetch
Fetchy.subscribeOnce(String name, Function callback); // subscribe to a fetch for one time only
Fetchy.unsubscribe(String name, Function callback); // unsubscribe from a fetch

// Available options
{
    url: String, // The url to fetch
    name: String, // Used for event subscriptions
    retries: Number, // Number of retries to attempt,
    retryDelay: Number, // Delay between retries(ms)
    httpOptions: {
        Fetch options here
        ...such as method, headers, body, etc
    },
    query: String, // GraphQL query
    variables: {} // GraphQL variables
}

Example

import fetchy from "@zachacious/fetchy";

// Subscribe Once
fetchy.subscribeOnce("RestAPIFetch", function (data) {
  console.log("RestAPIFetch Callback", data);
});
// Subscribe - listen to all calls
fetchy.subscribe("GraphQLFetch", function (data) {
  console.log("GraphQL Callback", data);
});

// Simple rest api fetch
const response = await fetchy({
  name: "RestAPIFetch",
  url: "http://fakeapi.jsonparseronline.com/profile/",
  retries: 5,
  retryDelay: 1000,
});

// GraphQL fetch
fetchy({
  name: "GraphQLFetch",
  url: "https://api.mocki.io/v2/c4d7a195/graphql",
  retries: 5,
  retryDelay: 1000,
  httpOptions: {
    method: "POST",
  },
  query: `
    query($id: String) {
        user(id: $id) {
            id
            name
            email
        }
    }
`,
  variables: {
    id: "Hello World",
  },
}).then(function (data) {
  console.log("GraphQL fetch.then");
});

Development

• Clone the repo
• cd into the root directory

Dependencies

 npm install // Install dependencies

Test

npm test // run tests

Lint

npm run lint // run linting

Develop & Watch

npm run dev // build dev version

Build

npm run build // build production version

demo

Run /demo/index.html and check the console to test the build

Maintainence

This project shouldn't require a lot of maintainence, but I'll do my best to keep things updated. If I fall behind, feel free to give me a swift kick in the a$$. In the mean time, feel free to pitch in and submit a PR or an issue.