Get updates via , Github, or RSS | About

Episode 54: SPA - HTTP Requests Feb 22, 2018

It’s time to add some data to our Single Page Application. Because we’re building a Hacker News clone, we’ll use the official Hacker News API to fetch data. We can do this with some simple HTTP requests using elm-lang/http. In this episode we’ll setup our application to automatically load the Top Stories whenever the user launches the application on the home page, or navigates to it from within the app.



type StoryId
    = StoryId String

storyIdDecoder : Decoder StoryId
storyIdDecoder = (StoryId << toString)

topStories : Http.Request (List StoryId)
topStories =
    Http.get "" (Decode.list storyIdDecoder)

setRoute : Location -> Model -> ( Model, Cmd Msg )
setRoute location model =
        -- …
        case route of
            Route.Home ->
                    cmd =
                        Http.send TopStoriesFetched topStories
                    ( { model | page = Home }, cmd )