Part 4: Making http requests from Elm to IHP

This is part 4 of the series IHP with Elm

We have Elm set up in IHP, initialized values from flags and we are just going through the final part of making our Elm widgets fully interoperable with IHP: HTTP requests.

The architecture is pretty much in place now, so this part should be easy 🙂

Continue from part three

If you haven't done part 3 of this series, do so first.

If you don't want to, you could clone the project source and checkout to this tag to follow along:

Install elm/http

This tutorial only needs one additional package, the official elm/http, so let's just install that right away.

Support json response from /Books

The /Books endpoint currently delivers HTML by default, but we can easily make it return JSON as well.

Add this import in the top of Application/View/Books/Index.hs

Then all we have to do is to add the line json IndexView {..} = toJSON (books |> map bookToJSON) to the bottom of this instance:

It's nice that we can use the same type for the JSON API that we defined for the Elm flags.

A list of Book now maps into a list of BookJSON. In Elm, it can be decoded by the same bookDecoder we generated earlier.

The /Books endpoint will still serve you HTML by default as before. But if you set the header Accept: application/json, it will display the JSON version instead. You can test it with curl:

Add http action in Elm for fetching books in IHP

Let's first create the file elm/Api/Http.elm for a place to make http requests.

To make sure we remember to set the Accept: application/json header, let's define a wrapper around Elm's Http.request and call it ihpRequest.

The getBooksAction function will take in a string and a generic msg type taking in a Result. You could use RemoteData of course, but we'll skip it for this tutorial.

Make an ErrorView module

It can be nice to display some Http errors of various sorts in a standardised way. I like to make a view function for this.

Let's create a new Elm module at elm/ErrorView.elm

Let write this little snippet:

Add interactivity to BookSearch

Let's import the stuff we need at the top of elm/Widget/BookSearch.elm.

We should then make the Model inside a bit more complex, so we can turn it into a record to track both the search-term and search-result.

To update the model, we are making two messages and some update logic.

Whenever the search input changes, we will update the model and at the same time make a query to IHP through the getBooksAction function.

And the view functionality is getting some more logic.

Make Books searchable

Only thing left it to adjust the controller to support the searchTerm parameter.

This will be done in the BooksAction on Web/Controller/Books.hs:

Wrapping up

That should be it. You now have a highly interactive book search functionality without leaving the page.

This widget has an advantage by not demanding IHP data directly from flags.

You can put it anywhere and it will just query the correct IHP endpoint.

This should be a fine starting point for making an IHP app with all the Elm widgets you will need. Good luck 😊

See the complete code on Github.