URL-Encoded Form Data | Effect Http Client

HttpClientRequest.bodyUrlParams() sends data as URL-encoded form data (application/x-www-form-urlencoded).

This is the same format browsers use for simple HTML forms. It’s the right choice for login endpoints, search forms, or any API that expects key-value pairs.

1
import {
2
  FetchHttpClient,
3
  HttpClient,
4
  HttpClientRequest,
5
} from "effect/unstable/http";
6
import { Effect } from "effect";
7

8
function login(username: string, password: string) {
9
  return Effect.gen(function* () {
10
    const client = yield* HttpClient.HttpClient;
11

12
    const request = HttpClientRequest.post("https://httpbin.org/post").pipe(
13
      HttpClientRequest.bodyUrlParams({
14
        username,
15
        password,
16
        grant_type: "password",
17
      }),
18
    );
19

20
    const response = yield* client.execute(request);
21
    const data = yield* response.json;
22

23
    return data;
24
  }).pipe(Effect.provide(FetchHttpClient.layer));
25
}
26

27
// Test it
28
Effect.runPromise(login("emilys", "secret123")).then((data) => {
29
  console.log("Content-Type sent:", data.headers["Content-Type"]);
30
  console.log("Form data received:", data.form);
31
});

Output:

1
Content-Type sent: application/x-www-form-urlencoded
2
Form data received: { grant_type: 'password', password: 'secret123', username: 'emilys' }

We’re using httpbin.org/post here because it echoes back everything it receives: the headers, form data, files, and raw body. This lets us verify exactly what was sent.

bodyUrlParams accepts the same input format as setUrlParams: an object, an array of tuples, or a URLSearchParams instance. It sets the Content-Type header to application/x-www-form-urlencoded automatically.

Stay in the loop