This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
We were not able to find the expected elm-package.json file at this tag.
Tag 2.0.0
Committed At 2018-08-21 17:20:20 UTC



    elm-graphql logo


    Travis-CI build status

    A GraphQL library for Elm, written entirely in Elm.

    The goal of this package is to provide a really good interface for working directly with GraphQL queries and schemas in Elm. Right now the main offering of the package is an interface for building up nested queries and mutations in a way that also builds up a decoder capable of decoding successful responses to the request. The package also provides a module for sending these requests to a GraphQL server over HTTP and decoding the responses accordingly.

    The docs can be found here.

    And here's an end-to-end example that builds a query, sends it to a server, and decodes the response.

    Building requests

    Building up a GraphQL query with this package feels a lot like building a JSON decoder, especially if you are familiar with the elm-decode-pipeline package. First you define type aliases for each of the nested record types you want to construct out of the response:

    import GraphQL.Request.Builder exposing (..)
    import GraphQL.Request.Builder.Arg as Arg
    import GraphQL.Request.Builder.Variable as Var
    type alias Photo =
        { url : String
        , caption : String
    type alias User =
        { name : String
        , photos : List Photo }

    Then you build a query document:

    userQuery : Document Query User { vars | userID : String }
    userQuery =
            userIDVar =
                Var.required "userID" .userID
            photo =
                object Photo
                    |> with (field "url" [] string)
                    |> with (field "caption" [] string)
            user =
                object User
                    |> with (field "name" [] string)
                    |> with (field "photos" [] (list photo))
            queryRoot =
                    (field "user"
                        [ ( "id", Arg.variable userIDVar ) ]
            queryDocument queryRoot

    The Document type can represent both query and mutation documents. It lets you do two important things:

    • generate GraphQL request documents to send to the server, and
    • decode JSON responses from the server.

    Here's what the above Document looks like when you encode it to a string to be sent to the server:

    query ($userID: ID!) {
      user(id: $userID) {
        photos {

    To supply values for the variables used in the Document, you provide an Elm value that your variables can extract values from according to the getter functions supplied when you define the variables. In this example, the "userID" variable was defined as a string that's extracted from the userID field of some Elm record, so the following code is a valid way to create a Request with the required variable values supplied:

    userQueryRequest : Request Query User
    userQueryRequest =
            |> request { userID = "123" }

    Assuming you've built a query that is valid for the server's schema, sending it to the server will result in a JSON response that can be decoded with a JSON decoder that is built up automatically along with the structure of the query. Here's what a JSON response for userQuery might look like:

      "data": {
        "user": {
          "name": "Lola",
          "photos": [
              "url": "",
              "caption": "Lola curling up on the chair"

    When it is decoded with the help of the decoder contained in userQuery, it becomes this:

    { name = "Lola"
    , photos =
        [ { url = ""
          , caption = "Lola curling up on the chair"

    Mutations are built just like queries, except that you wrap them up in a call to mutationDocument instead of a call to queryDocument. Here's an example of a mutation that logs in a user and extracts an auth token from the response:

    type alias LoginVars =
        { username : String
        , password : String
    loginMutation : Document Mutation String LoginVars
    loginMutation =
            usernameVar =
                Var.required "username" .username Var.string
            passwordVar =
                Var.required "password" .password Var.string
            mutationDocument <|
                    (field "login"
                        [ ( "username", Arg.variable usernameVar )
                        , ( "password", Arg.variable passwordVar )
                        (extract (field "token" [] string))

    Future plans for this package

    There are a lot of things that this package can't do right now, but might do in the future. What gets done depends on how the package ends up being used, and how much demand there is for each feature. Here are some likely possibilities:

    • support for subscriptions
    • generating code from a GraphQL schemas and queries
    • providing functions to validate a query against a target schema
    • leveraging Relay-compliant schemas to cache response data and transform queries so that the client only asks the server for what it doesn't have already
    • providing an interface to implement a GraphQL schema that you can run queries against

    Getting and giving help

    If you're having trouble figuring out how to do something with this package, check out the #graphql channel on the Elm Slack — there are usually people there who can help. And if you can be one of those people who help other people, then thank you!

    Running the tests

    Install the elm-test npm package globally:

    npm install -g elm-test

    Make sure you have the latest version of elm-test, otherwise it may not be able to find the the test files in the right way. You can update an older version with npm update -g elm-test.

    Now run elm-test in the root folder of this project: