HTMX - Read URL Search Params / Query String and pass into fetch request

Question

Very simple landing page, thought it would be a good place to start playing with HTMX. The objective is really simple:

Landing page with a query string in the URL. onLoad it fires a request to server, sending the params from the query string along. Server does its thing and sends back a success or error HTML snippet.

I do not need a button or form, all the info I need comes from the queryString. Users get redirected to this page from another app.

Question 1: How can I get the searchParms into the hx-get?

I must be missing something but I couldn't find any other way than using some JS.

HTMX:

<div
  hx-get="https://jsonplaceholder.typicode.com/users"
  hx-vals="js:{id: id, comment: comment}"
  hx-trigger="load"
  hx-target="#result"
></div>
<div id="result" class="m-8 p-8 bg-slate-200">Loading…</div>

JS:

function getParams() {
  // const urlParams = new URLSearchParams(window.location.search);
  const urlParams = new URLSearchParams('id=4&comment=25');
  const id = urlParams.get('id');
  const comment = urlParams.get('comment');

  return { id: id, comment: comment };
}

const { id, comment } = getParams();

Sample:

https://stackblitz.com/edit/stackblitz-starters-9z2kgg?file=index.html

Question 2: I would have thought the entire idea behind HTMX was that for the very largest part I don't need to write the JS. Or is this a case where I would look at Hyperscript?

Question 3: hx-trigger="load" on a div looks odd to me, surely that's not exactly how it's thought to be done?

In production I would of course do the entire parsing of the queryString and writing the HTML response in the backend - but for that I need to get the params from the queryString back there first. What am I missing?

Answer 1

After digging into this I would like to present a more elegant solution:

HTMX adds additional headers to HTTP request headers. You can inspect these and tailor your response. In particular the HX-Current-URL is of interest here.

If you don't serve from or have access to your web server directly and interact with and/or have access to an endpoint you can read the request url from this additional header HTMX appends:

const requestUrl = request.headers.get("HX-Current-URL")!;

And you can then extract the query string, in this example id:

const postId = new URL(requestUrl).searchParams.get("id");

And then append the id to your fetch call, e.g.:

const res = await fetch(
  `https://jsonplaceholder.typicode.com/posts/${postId}`
);

This way on page load you can feed the query string variables from your current URL into a fetch call to any API.

<div hx-get="/api/getPost" hx-trigger="load" hx-target="#result"></div>
<div id="result" class="m-8 p-8 bg-slate-200">Loading…</div>