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.