Handle loading/errors

As we saw in the previous step, the response data is captured using RemoteData. The data can be in one of the following states

  • Loading : Indicates whether the request is in flight. If it is in Loading state, then the request hasn't finished. Typically this information can be used to display a loading spinner.

  • Failure : Indicates the request has failed. Current implementation shows a placeholder message.

  • Success: Indicates the request has succeeded. This information can be used to render the information.

The render function is equipped to handle the above states. It renders

  • Loading : Shows a loading spinner

  • Failure : Shows a custom error

  • Success : Renders the list of todos

renderTodos : PrivateTodo -> Html Msg
renderTodos privateData =
div [ class "tasks_wrapper" ] <|
case privateData.todos of
RemoteData.NotAsked ->
[ text "" ]
RemoteData.Success todos ->
[ todoListWrapper privateData.visibility todos ]
RemoteData.Loading ->
[ span [ class "loading_text" ]
[ text "Loading todos ..." ]
]
RemoteData.Failure err ->
[ text "Error loading todos" ]
Did you find this page helpful?
Start with GraphQL on Hasura for Free
  • ArrowBuild apps and APIs 10x faster
  • ArrowBuilt-in authorization and caching
  • Arrow8x more performant than hand-rolled APIs
Promo
footer illustration
Brand logo
© 2024 Hasura Inc. All rights reserved
Github
Titter
Discord
Facebook
Instagram
Youtube
Linkedin
graphql-handbook