Replace Debug.toString in example

Author: emiliano-at-prima

example/Main.elm

@@ -1,13 +1,14 @@
 module Main exposing (..)
 
-import Html exposing (Html, div, text)
+import Browser
+import GraphQL.Client.Http as GraphQLClient
 import GraphQL.Request.Builder exposing (..)
 import GraphQL.Request.Builder.Arg as Arg
 import GraphQL.Request.Builder.Variable as Var
-import GraphQL.Client.Http as GraphQLClient
-import Task exposing (Task)
-import Browser
+import Html exposing (Html, div, text)
 import Http
+import Task exposing (Task)
+
 
 {-| Responses to `starWarsRequest` are decoded into this type.
 -}
@@ -22,31 +23,32 @@ type alias FilmSummary =
 will later be encoded into the following GraphQL query document:
 
 fragment filmPlanetsFragment on Film {
-  planetConnection(first: $pageSize) {
-    edges {
-      node {
-        name
-      }
-    }
-  }
+planetConnection(first: $pageSize) {
+edges {
+node {
+name
+}
+}
+}
 }
 
 query ($filmID: ID!, $pageSize: Int = 3) {
-  film(filmID: $filmID) {
-    title
-    characterConnection(first: $pageSize) {
-      edges {
-        node {
-          name
-        }
-      }
-    }
-    ...filmPlanetsFragment
-  }
+film(filmID: $filmID) {
+title
+characterConnection(first: $pageSize) {
+edges {
+node {
+name
+}
+}
+}
+...filmPlanetsFragment
+}
 }
 
 This query is sent along with variable values extracted from the record passed
 to `request`, and the response is decoded into a `FilmSummary`.
+
 -}
 starWarsRequest : Request Query FilmSummary
 starWarsRequest =
@@ -67,24 +69,24 @@ starWarsRequest =
                     )
                 )
     in
-        extract
-            (field "film"
-                [ ( "filmID", Arg.variable filmID ) ]
-                (object FilmSummary
-                    |> with (field "title" [] (nullable string))
-                    |> with
-                        (field "characterConnection"
-                            [ ( "first", Arg.variable pageSize ) ]
-                            (connectionNodes (extract (field "name" [] (nullable string))))
-                        )
-                    |> with (fragmentSpread planetsFragment)
-                )
+    extract
+        (field "film"
+            [ ( "filmID", Arg.variable filmID ) ]
+            (object FilmSummary
+                |> with (field "title" [] (nullable string))
+                |> with
+                    (field "characterConnection"
+                        [ ( "first", Arg.variable pageSize ) ]
+                        (connectionNodes (extract (field "name" [] (nullable string))))
+                    )
+                |> with (fragmentSpread planetsFragment)
             )
-            |> queryDocument
-            |> request
-                { filmID = "1"
-                , pageSize = Nothing
-                }
+        )
+        |> queryDocument
+        |> request
+            { filmID = "1"
+            , pageSize = Nothing
+            }
 
 
 {-| A function that helps you extract node objects from paginated Relay connections.
@@ -150,10 +152,44 @@ init () =
 view : Model -> Browser.Document Msg
 view model =
     { title = "Example"
-    , body = [ model |> Debug.toString |> text ]
+    , body =
+        [ Maybe.map viewFilmSummary model |> Maybe.withDefault (Html.text "Nothing") ]
     }
 
 
+viewFilmSummary : FilmSummary -> Html Msg
+viewFilmSummary summary =
+    Html.div []
+        [ Html.text ("Title: " ++ Maybe.withDefault "Unknown" summary.title)
+        , viewCharacterNames summary.someCharacterNames
+        , viewPlanetNames <| Maybe.withDefault [] summary.somePlanetNames
+        ]
+
+
+viewCharacterNames : List (Maybe String) -> Html Msg
+viewCharacterNames names =
+    Html.div []
+        [ Html.text "Character names: "
+        , viewNameList names
+        ]
+
+
+viewPlanetNames : List (Maybe String) -> Html Msg
+viewPlanetNames names =
+    Html.div []
+        [ Html.text "Planet names: "
+        , viewNameList names
+        ]
+
+
+viewNameList : List (Maybe String) -> Html Msg
+viewNameList names =
+    names
+        |> List.map (Maybe.withDefault " -- ")
+        |> String.join ", "
+        |> Html.text
+
+
 update : Msg -> Model -> ( Model, Cmd Msg )
 update msg model =
     case msg of