ryannhg / graphql / GraphQL.Http

HTTP requests

get : { url : String, query : String, variables : List ( String, GraphQL.Encode.Value ), decoder : GraphQL.Decode.Decoder data, onResponse : Result Error data -> msg } -> Platform.Cmd.Cmd msg

Send an HTTP GET request to your GraphQL API

GraphQL.Http.get
    { url = "/api/graphql"
    , query = """
        query FindPerson(name: $name) {
            person(name: $name) {
                id
                name
            }
        }
    """
    , variables =
        [ ( "name", GraphQL.Encode.string "Doug" )
        ]
    , onResponse = ApiResponded
    , decoder = decoder
    }

post : { url : String, query : String, variables : List ( String, GraphQL.Encode.Value ), decoder : GraphQL.Decode.Decoder data, onResponse : Result Error data -> msg } -> Platform.Cmd.Cmd msg

Send an HTTP POST request to your GraphQL API

GraphQL.Http.post
    { url = "/api/graphql"
    , query = """
        query FindPerson(name: $name) {
            person(name: $name) {
                id
                name
            }
        }
    """
    , variables =
        [ ( "name", GraphQL.Encode.string "Doug" )
        ]
    , onResponse = ApiResponded
    , decoder = decoder
    }

Errors


type Error
    = BadUrl String
    | Timeout
    | NetworkError
    | GraphQL ({ errors : List GraphQL.Error.Error })
    | UnexpectedResponse ({ url : String, statusCode : Basics.Int, statusText : String, headers : Dict String String, body : String, jsonError : Maybe Json.Decode.Error })

When something goes wrong with the GraphQL request, this error type will be returned with your Result.

This extends the default Http.Error to include more context and GraphQL specific errors returned from the API.

Advanced usage with elm/http

The two functions below are helpful for more advanced applications using functions like Http.request.

Use these if you need to send HTTP headers, define request timeouts, etc.

import GraphQL.Http
import Http

fetchCurrentUser : Cmd Msg
fetchCurrentUser =
    Http.request
        { method = "POST"
        , url = "/api/graphql"
        , headers = []
        , body =
            GraphQL.Http.body
                { operationName = Just "FetchCurrentUser"
                , query = """
                    query FetchCurrentUser {
                        me {
                            id
                            name
                        }
                    }
                """
                , variables = []
                }
        , expect =
            GraphQL.Http.expect
                FetchCurrentUserApiResponded
                decoder
        , tracker = Nothing
        , timeout = Nothing
        }

body : { operationName : Maybe String, query : String, variables : List ( String, GraphQL.Encode.Value ) } -> Http.Body

Create the JSON body for your GraphQL request.

GraphQL.Http.body
    { operationName = Just "FetchCurrentUser"
    , query = """
        query FetchCurrentUser {
            me {
                id
                name
            }
        }
    """
    , variables = []
    }

expect : (Result Error data -> msg) -> GraphQL.Decode.Decoder data -> Http.Expect msg

Expect a JSON response from a GraphQL API.

type Msg
    = ApiResponded (Result GraphQL.Http.Error Data)

fetchData : Cmd Msg
fetchData =
    Http.request
        { -- ... other fields
        , expect =
            GraphQL.Http.expect
                ApiResponded
                decoder
        }

Partial errors

expectWithPartialErrors : (Result Error { data : data, errors : List GraphQL.Error.Error } -> msg) -> GraphQL.Decode.Decoder data -> Http.Expect msg

According to the GraphQL specification, it's possible to receive GraphQL errors alongside a valid data response:

{
  "errors": [
    {
      "message": "Name for character with ID 1002 could not be fetched.",
      "locations": [ { "line": 6, "column": 7 } ],
      "path": [ "hero", "heroFriends", 1, "name" ]
    }
  ],
  "data": {
    "hero": {
      "name": "R2-D2",
      "heroFriends": [
        {
          "id": "1000",
          "name": "Luke Skywalker"
        },
        null,
        {
          "id": "1003",
          "name": "Leia Organa"
        }
      ]
    }
  }
}

If your application needs to access those partial error responses, use this rather than the simpler expect function:

type Msg
    = ApiResponded
        (Result GraphQL.Http.Error
            { data : Data
            , errors : List GraphQL.Error.Error
            }
        )

fetchData : Cmd Msg
fetchData =
    Http.request
        { -- ... other fields
        , expect =
            GraphQL.Http.expectWithPartialErrors
                ApiResponded
                decoder
        }