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

@whatwg-node/fetch

v0.9.17

Published

Cross Platform Smart Fetch Ponyfill

Downloads

27,840,654

Readme

@whatwg-node/fetch

A ponyfill package for the Fetch Standard. If your JavaScript environment doesn't implement this standard natively, this package automatically ponyfills the missing parts, and export them as a module; otherwise it exports the native ones without touching the environment's internals. It also exports some additional standard APIs that are required by the Fetch Standard.

Installation

yarn add @whatwg-node/fetch

Why Fetch API and why this ponyfill in general?

If you are building a JavaScript library, and you want it to support all JavaScript environments not only Node.js. Fetch API is the best choice for you. Because it's a standard, and it's implemented by the most environments out there expect Node.js :). So you can use Fetch API in your library, and your users can use it in their browsers, Deno, Bun, Cloudflare Works, and in Node.js.

This is how we support all JavaScript environments in GraphQL Yoga. In GraphQL Yoga, we don't care which JavaScript environment you prefer, we support all of them.

Why we should still use these for Node.js even if it already implements them natively

Even if newer Node.js already implements Fetch API and Data Text Encoding API natively, we still recommend to use this package, because this package implements them for Node.js in more efficient way.

  • See problems with the global fetch/undici in Node.js
    • We offer a patched version of node-fetch that doesn't use undici and Node.js streams internally, so it's more efficient than the native one.
  • See problems with text encoding API in Node.js
    • We use Buffer instead of the native one, because Buffer is faster than the native one unfortunately.
  • Body.formData() is not implemented by Node.js, so we implement it with busboy internally. So you can consume incoming multipart(file uploads) requests with .formData in Node.js.
  • fetch implementation of Node.js uses undici and it doesn't support HTTP 2, our implementation supports it natively thanks to node-libcurl.

Faster HTTP Client in Node.js with HTTP/2 support

If you install node-libcurl seperately, @whatwg-node/fetch will select libcurl instead of node:http which is faster.

See benchmarks

Handling file uploads with Fetch API

import { Request } from '@whatwg-node/fetch'

// See how you can handle file uploads with Fetch API
http.createServer(async (req, res) => {
  const request = new Request(req)
  const formData = await request.formData()
  const file = formData.get('file')
  // ...
})

If you want to limit the size of the multipart form data, you can use createFetch. See the API section for more details.

API

The following are exported by this package:

WHATWG Fetch Standard

Web Streams API

URL Standard

Data Types

Data Encoding/Decoding API

Web Crypto API

Create variations of the implementation

  • createFetch

createFetch allows you to create an API with some specific flags that are not available in the actual API.

Limit the multipart form data size

This is useful if you parse the multipart request bodies with .formData().

import { createFetch } from '@whatwg-node/fetch'

const fetchAPI = createFetch({
  formDataLimits: {
    // Maximum allowed file size (in bytes)
    fileSize: 1000000,
    // Maximum allowed number of files
    files: 10,
    // Maximum allowed size of content (operations, variables etc...)
    fieldSize: 1000000,
    // Maximum allowed header size for form data
    headerSize: 1000000
  }
})

// See how you can handle file uploads with Fetch API
http.createServer(async (req, res) => {
  const request = new Request(req)
  const formData = await request.formData()
  const file = formData.get('file')
  // ...
})