How to pass query string parameters with bs-fetch?

Question

What is the proper way to pass query string parameters to bs-fetch?

Currently, I have:

Fetch.fetch("https://example.com/api?param1=value1&param2=value2")

Obviously, this is not sustainable for larger parameter lists.

Is there a better way to do this?

Answer 1

i don't think there's something builtin for that. just make your own query builder function, something like this

let payload = Js.Dict.empty();

Js.Dict.set(payload, "email", Js.Json.string("email@email.co"));

Js.Dict.set(payload, "password", Js.Json.string("secret"));

let query =
  Js.Dict.keys(payload)
  |> Array.fold_left(
       (query, key) =>
         switch (Js.Dict.get(payload, key)) {
         | Some(value) =>
           query ++ key ++ "=" ++ Js.Json.stringify(value) ++ "&"
         | _ => query
         },
       "?"
     );

here's a link to the playground.

Answer 2

re:fetch supports query params by way of either

request("https://example.com/api",
  ~queryParams=[
    ("param1", "value1"),
    ("param2", "value2")
  ])
|> fetch;

or

request("https://example.com/api")
|> Request.param("param1", "value1")
|> Request.param("param2", "value2")
|> fetch;

Beware that the library is experimental though. Alternatively, you could just swipe the query builder code, which has been battle-tested at least a little bit (there's a subtle bug in @monssef's implementation when there's an empty list, and it also doesn't do proper encoding):

[@bs.val] external encodeURIComponent : string => string = "";

let _buildUrl = (url, params) => {
  let encodeParam = ((key, value)) =>
    encodeURIComponent(key) ++ "=" ++ encodeURIComponent(value);

  let params =
      params |> List.map(encodeParam)
             |> String.joinWith("&");

  switch params {
  | "" => url
  | _ => {j|$url?$params|j}
  };
};