Setting a Base URL | Effect Http Client

A common need when working with APIs is setting a base URL so you don’t repeat the full domain in every request. You can do this by customizing the client with HttpClient.mapRequest and HttpClientRequest.prependUrl.

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

8
function fetchFromApi() {
9
  return Effect.gen(function* () {
10
    // Create a client with a base URL baked in
11
    const client = (yield* HttpClient.HttpClient).pipe(
12
      HttpClient.mapRequest(
13
        HttpClientRequest.prependUrl("https://dummyjson.com"),
14
      ),
15
    );
16

17
    // Now all requests are relative to the base URL
18
    const usersResponse = yield* client.get("/users/1");
19
    const user = yield* usersResponse.json;
20

21
    const productsResponse = yield* client.get("/products/1");
22
    const product = yield* productsResponse.json;
23

24
    return { user, product };
25
  }).pipe(Effect.provide(FetchHttpClient.layer));
26
}
27

28
// Test it
29
Effect.runPromise(fetchFromApi()).then(({ user, product }) => {
30
  console.log("User:", user.firstName, user.lastName);
31
  console.log("Product:", product.title, `- $${product.price}`);
32
});

Output:

1
User: Emily Johnson
2
Product: Essence Mascara Lash Princess - $9.99

In the example above, we create a client with a base URL baked in using mapRequest and prependUrl. Every request made through this client only needs a relative path. "/users/1" becomes "https://dummyjson.com/users/1" automatically.

Stay in the loop