Skip to content
A collection of helper functions for server communication using RemoteData
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
src/RemoteData Update tasks Jan 29, 2019
.gitignore Add initial version Mar 18, 2017
LICENSE Add license file May 18, 2018 Set model to `Loading` before fetching Mar 21, 2017
elm.json Bump version Jan 29, 2019


A collection of helper functions for loading JSON data from a server using RemoteData.

API Documentation

There is an example for each of the functions in the module documentation.

A simple full usage example can be found right here on this readme.


RemoteData is a type representing the state of some remote server data. It looks like this:

type RemoteData e a
    = NotAsked
    | Loading
    | Failure e
    | Success a

In this package, we deal with the more specialized version of the type, called WebData:

type alias WebData a =
    RemoteData Http.Error a

This means the Failure case will always have an error from the elm-lang/http package.

For more information, please refer to the package documentation for RemoteData.

Example usage

Using RemoteData.Http looks like this. Play with the code on Ellie.

module Main exposing (..)

import Html exposing (Html, button, text)
import Html.Events exposing (onClick)
import Json.Decode
import RemoteData exposing (RemoteData(..), WebData)
import RemoteData.Http

{-| Store the data as a `WebData a` type in your model
type alias Model =
    { cat : WebData Cat

{-| Add a message with a `WebData a` parameter
type Msg
    = HandleCatResponse (WebData Cat)
    | GetCat

init : ( Model, Cmd Msg )
init =
    ( { cat = NotAsked }
    , Cmd.none

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        HandleCatResponse data ->
            ( { model | cat = data }
            , Cmd.none

        GetCat ->
            ( { model | cat = Loading }
            , RemoteData.Http.get "/api/cats/1" HandleCatResponse catDecoder

view : Model -> Html Msg
view model =
    case of
        Loading ->
            text "Loading cat data, please stand by..."

        Success cat ->
            text ("Received cat: " ++ toString cat)

        Failure error ->
            text ("Oh noes, cat loading failed with error: " ++ toString error)

        NotAsked ->
            button [ onClick GetCat ] [ text "Get cat data from the server" ]

main =
        { init = init
        , update = update
        , view = view
        , subscriptions = \_ -> Sub.none

{- This stuff is just to make it compile...
Replace with your real type and decoder.
type alias Cat =

catDecoder = "this isn't a real decoder"

There is a function to make a command or a task for each of the HTTP verbs, and also the same with some additional configuration.

Take a look at the module documentation.


This is made by Ossi Hanhinen and licensed under BSD (3-clause).

You can’t perform that action at this time.