Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 56 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,57 @@ const { statusCode, body } = await request('https://api.example.com/data');
const data = await body.json();
```

### Keep `fetch` and `FormData` together

When you send a `FormData` body, keep `fetch` and `FormData` from the same
implementation.

Use one of these patterns:

```js
// Built-in globals
const body = new FormData()
body.set('name', 'some')
await fetch('https://example.com', {
method: 'POST',
body
})
```

```js
// undici module imports
import { fetch, FormData } from 'undici'

const body = new FormData()
body.set('name', 'some')
await fetch('https://example.com', {
method: 'POST',
body
})
```

If you want the installed `undici` package to provide the globals, call
`install()` first:

```js
import { install } from 'undici'

install()

const body = new FormData()
body.set('name', 'some')
await fetch('https://example.com', {
method: 'POST',
body
})
```

`install()` replaces the global `fetch`, `Headers`, `Response`, `Request`, and
`FormData` implementations with undici's versions, so they all match.

Avoid mixing a global `FormData` with `undici.fetch()`, or `undici.FormData`
with the built-in global `fetch()`.

### Version Compatibility

You can check which version of undici is bundled with your Node.js version:
Expand Down Expand Up @@ -263,6 +314,11 @@ The `install()` function adds the following classes to `globalThis`:
- `CloseEvent`, `ErrorEvent`, `MessageEvent` - WebSocket events
- `EventSource` - Server-sent events client

When you call `install()`, these globals come from the same undici
implementation. For example, global `fetch` and global `FormData` will both be
undici's versions, which is the recommended setup if you want to use undici
through globals.

This is useful for:
- Polyfilling environments that don't have fetch
- Ensuring consistent fetch behavior across different Node.js versions
Expand Down
8 changes: 8 additions & 0 deletions docs/docs/api/Fetch.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,14 @@ This API is implemented as per the standard, you can find documentation on [MDN]

If any parameters are passed to the FormData constructor other than `undefined`, an error will be thrown. Other parameters are ignored.

When you use `FormData` as a request body, keep `fetch` and `FormData` from the
same implementation. Use the built-in global `FormData` with the built-in
global `fetch()`, and use `undici`'s `FormData` with `undici.fetch()`.

If you want the installed `undici` package to provide the globals, call
[`install()`](/docs/api/GlobalInstallation.md) so `fetch`, `Headers`,
`Response`, `Request`, and `FormData` are installed together as a matching set.

## Response

This API is implemented as per the standard, you can find documentation on [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Response)
Expand Down
48 changes: 48 additions & 0 deletions docs/docs/api/GlobalInstallation.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,54 @@ The `install()` function adds the following classes to `globalThis`:
| `MessageEvent` | WebSocket message event |
| `EventSource` | Server-sent events client |

## Using `FormData` with `fetch`

If you send a `FormData` body, use matching implementations for `fetch` and
`FormData`.

These two patterns are safe:

```js
// Built-in globals from Node.js
const body = new FormData()
await fetch('https://example.com', {
method: 'POST',
body
})
```

```js
// Globals installed from the undici package
import { install } from 'undici'

install()

const body = new FormData()
await fetch('https://example.com', {
method: 'POST',
body
})
```

After `install()`, `fetch`, `Headers`, `Response`, `Request`, and `FormData`
all come from the installed `undici` package, so they work as a matching set.

If you do not want to install globals, import both from `undici` instead:

```js
import { fetch, FormData } from 'undici'

const body = new FormData()
await fetch('https://example.com', {
method: 'POST',
body
})
```

Avoid mixing a global `FormData` with `undici.fetch()`, or `undici.FormData`
with the built-in global `fetch()`. Keeping them paired avoids surprising
multipart behavior across Node.js and undici versions.

## Use Cases

Global installation is useful for:
Expand Down
93 changes: 90 additions & 3 deletions docs/docs/best-practices/undici-vs-builtin-fetch.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,93 @@ When you install undici from npm, you get the full library with all of its
additional APIs, and potentially a newer release than what your Node.js version
bundles.

## Keep `fetch` and `FormData` from the same implementation

When you send a `FormData` body, keep `fetch` and `FormData` together from the
same implementation.

Use one of these patterns:

### Built-in globals

```js
const body = new FormData()
body.set('name', 'some')
body.set('someOtherProperty', '8000')

await fetch('https://example.com', {
method: 'POST',
body
})
```

### `undici` module imports

```js
import { fetch, FormData } from 'undici'

const body = new FormData()
body.set('name', 'some')
body.set('someOtherProperty', '8000')

await fetch('https://example.com', {
method: 'POST',
body
})
```

### `undici.install()` globals

If you want the installed `undici` package to provide the globals, call
[`install()`](/docs/api/GlobalInstallation.md):

```js
import { install } from 'undici'

install()

const body = new FormData()
body.set('name', 'some')
body.set('someOtherProperty', '8000')

await fetch('https://example.com', {
method: 'POST',
body
})
```

`install()` replaces the global `fetch`, `Headers`, `Response`, `Request`, and
`FormData` implementations with undici's versions, and also installs undici's
`WebSocket`, `CloseEvent`, `ErrorEvent`, `MessageEvent`, and `EventSource`
globals.

Avoid mixing implementations in the same request, for example:

```js
import { fetch } from 'undici'

const body = new FormData()

await fetch('https://example.com', {
method: 'POST',
body
})
```

```js
import { FormData } from 'undici'

const body = new FormData()

await fetch('https://example.com', {
method: 'POST',
body
})
```

Those combinations may behave differently across Node.js and undici versions.
Using matching pairs keeps multipart handling predictable.

## When you do NOT need to install undici

If all of the following are true, you can rely on the built-in globals and skip
Expand Down Expand Up @@ -119,12 +206,12 @@ You can always check the exact bundled version at runtime with
`process.versions.undici`.

Installing undici from npm does not replace the built-in globals. If you want
your installed version to override the global `fetch`, use
[`setGlobalDispatcher`](/docs/api/GlobalInstallation.md) or import `fetch`
your installed version to replace the global `fetch` and related classes, use
[`install()`](/docs/api/GlobalInstallation.md). Otherwise, import `fetch`
directly from `'undici'`:

```js
import { fetch } from 'undici'; // uses your installed version, not the built-in
import { fetch } from 'undici' // uses your installed version, not the built-in
```

## Further reading
Expand Down
Loading