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
    }

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
    }

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.

Create the JSON body for your GraphQL request.

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

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
        }

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
        }