npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

memoized-node-fetch

v1.1.5

Published

A wrapper around node-fetch that caches the request's promise before resolving.

Downloads

38,844

Readme

Memoized Node Fetch

All Contributors

npm GitHub Workflow Status npm

A wrapper around node-fetch (or any other fetch-like function) that returns a single promise until it resolves.

Why?

Sometimes, you have to interface with an API that doesn't respond fast enough. Moreover, you might perform the same request multiple times. So:

  • You overload the API with the same exact requests.
  • You wait for additional time during the API response.

The solution

Return the same promise for the same exact requests until they resolve. This is more useful when you interface with stateless APIs, where you just consume data.

Scenario

User (1) makes a request to the backend. The backend then performs a request to a third-party API and then before it resolves, user (2) makes another request to the backend. The backend then needs to perform the same request, as before, to the third-party API. With this package, instead of performing a new request, you can access and use the same promise for user's (1) request and have user (2) wait for the same request's resolution. This should shorten the wait time for user (2).

Usage

This API is a wrapper around node-fetch.

Install the module: $ npm i memoized-node-fetch

import memoizedNodeFetch from 'memoized-node-fetch';

const fetch = memoizedNodeFetch();

(async () => {
    const fetch1 = fetch('https://jsonplaceholder.typicode.com/todos/1');
    const fetch2 = fetch('https://jsonplaceholder.typicode.com/todos/1');

    // This should return true because both requests return the same promise.
    console.log(fetch1 === fetch2);

    const res1 = await fetch1;
    const res2 = await fetch2;

    console.log(await res1.json());
    console.log(await res2.json());
})();

FAQ

Is this a data cache?

No. This package only caches the promise until it resolves. After the promise resolves, it is removed from the cache, along with the data returned.

How do you know that two requests are the same?

The parameters of the two fetch functions are compared (the url and the RequestOptions), the specific key used for comparing the requests is:

const key = stringToHash(url.toString() + JSON.stringify(options));

The parameters of the request are hashed and stored on a map.

Can I use another fetch-like function?

Of course, you can use your own fetch like this:

function myOwnFetch(url: RequestInfo, options?: RequestInit | undefined): Promise<Response> {
    /* bla bla bla */
}

const fetch = memoizedNodeFetch(myOwnFetch);

/* Use the fetch... */

Can I have multiple promise-cache instances?

Yes! Each time you run the factory function, a new promise-cache is created.

Is this a react-query/swr equivalent?

No. For most cases, you shouldn't use this library instead of react-query or swr. Rather you could use it in tandem with those libraries by substituting the fetcher function with this. Those libraries, although they implement caching, they don't implement it while the fetch is loading (so if you perform the request two times, you'll get two different promises).

Why you didn't use a debounce function?

  1. I don't want to do request deduplication per-se but rather I want to return the same promise for each instance of the request. That won't work easily with the debounce function.
  2. The debounce implementation of lodash/underscore, waits for a specific preset time before running the request. If my promise takes longer to resolve, then I wouldn't reap the benefits of it. In my case, I wait for the promise to resolve before making a duplicate request.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!