Create reatom/web-fetch

[artalar]

We need a meta package on top of reatomAsync, which will accepts all fetch parameters and a few more options to extends Request.

Some feature examples

const getUser = reatomAsync(() =>
  fetch("/api/user").then((r): Promise<User> => {
    throwReatomError(!r.ok, r.statusText);
    return r.headers.get("content-type") === "application/json" ? r.json() : r;
  })
);
const getUser = reatomFetch<User>("/api/user");
const getUser = reatomFetch("/api/user", { validate: User.check });
const getUser = reatomFetch({
  url: "/api/user",
  validate: User.check,
});

By default the first passed argument should be stringified to the body.

const postUser = reatomAsync((ctx, user: User) =>
  fetch({
    url: "/api/user",
    method: "POST",
    body: JSON.stringify(user),
  })
);
const postUser = reatomFetch.post<User>("/api/user");

For dynamic paths or the need for some mappings, it should be possible to pass the request creation function.

const getUser = reatomFetch<User, string>((ctx, id) => `/api/user/${id}`);
const getList = reatomFetch<List, string, 'price' | 'orders'>((ctx, filter, sortBy) => ({
  url: '/api/list',
  searchParams: { filter, sortBy },
}))

Something for inspiration: https://github.com/developit/redaxios

[krulod]

Usage examples look nice, but the interface seems to be limited to JSON-based server APIs that use non-200 status codes. I'd love to implement @reatom/fetch if you clarify how it handles less common cases.

Maybe we should make reatomFetch a high-order function that accepts API-specific configuration and returns a function used to define concrete fetchers? Another possible path is to focus on the happy common path, but provide a way to fine-tune the module:

const getUser = reatomFetch(...) // common fetcher

const myFetch = createReatomFetch({
  parse: resp => ...,
})

const getUser = myFetch(...) // specific fetcher

[BANOnotIT]

I also want to point that package name should be discussed: @reatom/web-fetch or just @reatom/fetch since node's fetch support is on index 1 (experimental) which means it might not support it in future and we can't rely on it (like we should not have relied on experimental decorators back then).

[artalar]

@krulod you could rely on https://github.com/developit/redaxios/blob/master/src/index.js

[artalar]

@BANOnotIT you are right, probably 🤔

[artalar]

fyi
https://twitter.com/JessePence5/status/1698789006568550469