@sapphire/fetch
Version:
Tiny wrapper around globalThis.fetch for improved TypeScript and data type support
163 lines (119 loc) • 6.05 kB
Markdown
<div align="center">
# /fetch
**Tiny wrapper around Node's global `fetch` for improved TypeScript and data type support**
[](https://github.com/sapphiredev/utilities/blob/main/LICENSE.md)
[](https://bundlephobia.com/result?p=@sapphire/fetch)
[](https://www.npmjs.com/package/@sapphire/fetch)
</div>
**Table of Contents**
- [Description](#description)
- [Features](#features)
- [Installation](#installation)
- [Usage](#usage)
- [`GET`ting JSON data](#getting-json-data)
- [`GET`ting Buffer data (images, etc.)](#getting-buffer-data-images-etc)
- [`POST`ing JSON data](#posting-json-data)
- [Buy us some doughnuts](#buy-us-some-doughnuts)
- [Contributors](#contributors)
## Description
Node has a great global `fetch` (powered by [undici]) for making API calls, but because it focuses solely on bringing the [Fetch API][fetch-mdn] to Node.js, it doesn't provide specific error messages and handling for different return types (JSON, Buffer, plain text, etc). This is where `/fetch` comes in. The syntax is more restrictive than that of [undici], but that makes it consistent and easier to use in TypeScript.
## Features
- Written in TypeScript
- Fully tested
- Exported `enum` for the common return data types
- Throws distinctive errors when the API returns a "not ok" status code to make them easier to understand
- Enforces casting the return type when requesting JSON data, to ensure your return data is strictly typed
- Uses global `fetch`, which for NodeJS is [undici] and for browsers is the [Fetch API][fetch-mdn]
## Installation
You can use the following command to install this package, or replace `npm install` with your package manager of choice.
```sh
npm install /fetch
```
## Usage
> [!NOTE]
> While this section uses `import`, it maps 1:1 with CommonJS' require syntax. For example,
>
> ```ts
> import { fetch } from '/fetch';
> ```
>
> is the same as
>
> ```ts
> const { fetch } = require('/fetch');
> ```
> [!IMPORTANT]
> When providing a serializable object to the `body` option, `/fetch` will automatically call `JSON.stringify` on the object. This means you can pass an object directly to the `body` option without having to call `JSON.stringify` yourself.
> If the body is _not_ serializable (such as a `File`, `Buffer`, or `Blob`), the body will be sent as-is.
> Serializability is calculated based on:
>
> - If the body is `null`
> - If the body's `.constructor` property is `undefined`
> - If the body's `.constructor.name` property is `Object`
> - If the body has a function property named `toJSON`
> [!WARNING]
> Because `/fetch` aims to be as close to global fetch as possible, it doesn't support proxy options that a library like undici does. If you want to use a proxy, you should use undici directly.
### `GET`ting JSON data
```typescript
// Import the fetch function
import { fetch, FetchResultTypes } from '/fetch';
interface JsonPlaceholderResponse {
userId: number;
id: number;
title: string;
completed: boolean;
}
// Fetch the data. No need to call `.json()` after making the request!
const data = await fetch<JsonPlaceholderResponse>('https://jsonplaceholder.typicode.com/todos/1', FetchResultTypes.JSON);
// Do something with the data
console.log(data.userId);
```
### `GET`ting Buffer data (images, etc.)
```typescript
// Import the fetch function
import { fetch, FetchResultTypes } from '/fetch';
// Fetch the data. No need to call `.buffer()` after making the request!
const sapphireLogo = await fetch('https://github.com/sapphiredev.png', FetchResultTypes.Buffer);
// sapphireLogo is the `Buffer` of the image
console.log(sapphireLogo);
```
### `POST`ing JSON data
```typescript
// Import the fetch function
import { fetch, FetchResultTypes, FetchMethods } from '/fetch';
// Post the data. No need to call `.json()` after making the request!
const responseData = await fetch(
'https://jsonplaceholder.typicode.com/todos',
{
method: FetchMethods.Post,
headers: {
'Content-Type': 'application/json'
},
body: { name: 'John Doe' }
},
FetchResultTypes.JSON
);
// Do something with the response data
console.log(responseData);
```
---
## Buy us some doughnuts
Sapphire Community is and always will be open source, even if we don't get donations. That being said, we know there are amazing people who may still want to donate just to show their appreciation. Thank you very much in advance!
We accept donations through Open Collective, Ko-fi, PayPal, Patreon and GitHub Sponsorships. You can use the buttons below to donate through your method of choice.
| Donate With | Address |
| :-------------: | :-------------------------------------------------: |
| Open Collective | [Click Here](https://sapphirejs.dev/opencollective) |
| Ko-fi | [Click Here](https://sapphirejs.dev/kofi) |
| Patreon | [Click Here](https://sapphirejs.dev/patreon) |
| PayPal | [Click Here](https://sapphirejs.dev/paypal) |
## Contributors
Please make sure to read the [Contributing Guide][contributing] before making a pull request.
Thank you to all the people who already contributed to Sapphire!
<a href="https://github.com/sapphiredev/utilities/graphs/contributors">
<img src="https://contrib.rocks/image?repo=sapphiredev/utilities" />
</a>
[contributing]: https://github.com/sapphiredev/.github/blob/main/.github/CONTRIBUTING.md
<!-- LINKS -->
[fetch-mdn]: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
[undici]: https://github.com/nodejs/undici