npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

graphqelm

v3.1.12

Published

<img src="https://cdn.rawgit.com/martimatix/logo-graphqelm/master/logo.svg" alt="graphqelm logo" width="40%" align="right">

Downloads

99

Readme

GraphqElm

Build Status

Why use this package over the other available Elm GraphQL packages? This is the only one that generates type-safe code for your entire schema. (It's also the only type-safe library with Elm 0.18 support, see this discourse thread ).

I built this package because I wanted to have something that:

  1. Gives you type-safe GraphQL queries (if it compiles, it's valid according to the schema),
  2. Creates decoders for you in a seamless and failsafe way, and
  3. Eliminates GraphQL features in favor of Elm language constructs where possible for a simpler UX (for example, GraphQL variables & fragments should just be Elm functions, constants, lets).

See an example in action on Ellie.

See more end-to-end example code in the examples/ folder.

Overview

graphqelm is an Elm package and accompanying command-line code generator that creates type-safe Elm code for your GraphQL endpoint. You don't write any decoders for your API with graphqelm, instead you simply select which fields you would like, similar to a standard GraphQL query but in Elm. For example, this GraphQL query

query {
  human(id: "1001") {
    name
  }
}

would look like this in graphqelm (the code in this example that is prefixed with StarWars is auto-generated)

import Graphqelm.Operation exposing (RootQuery)
import Graphqelm.SelectionSet exposing (SelectionSet, with)
import StarWars.Object
import StarWars.Object.Human as Human
import StarWars.Query as Query


type alias Response =
    { vader : Maybe Human }


query : SelectionSet Response RootQuery
query =
    Query.selection Response
        |> with (Query.human { id = StarWars.Scalar.Id "1001" } human)


type alias Human =
    { name : String }


human : SelectionSet Human Human.Human
human =
    Human.selection Human
        |> with Human.name

GraphQL and Elm are a perfect match because GraphQL is used to enforce the types that your API takes as inputs and outputs, much like Elm's type system does within Elm. elm-graphql simply bridges this gap by making your Elm code aware of your GraphQL server's schema. If you are new to GraphQL, graphql.org/learn/ is an excellent way to learn the basics.

After installing the command line tool and Elm package, running elm-graphql just looks like

graphqelm https://graphqelm.herokuapp.com --base Swapi --output examples/src

Usage

graphqelm generates Elm code that allows you to build up type-safe GraphQL requests. Here are the steps to setup graphqelm.

  1. Add the Graphqelm elm package as a dependency in your elm-package.json.

    elm package install dillonkearns/graphqelm
  2. Install the graphqelm command line tool through npm. This is what you will use to generate Elm code for your API. It is recommended that you save the graphqelm command line tool as a dev dependency so that everyone on your project is using the same version.

    npm install --save-dev graphqelm
    # you can now run it locally with the ./node_modules/.bin/graphqelm binary,
    # or by calling it through an npm script as in this project's package.json
  3. Run the graphqelm command line tool installed above to generate your code. If you used the --save-dev method above, you can simply create a script in your package.json like the following:

    {
      "name": "star-wars-graphqelm-project",
      "version": "1.0.0",
      "scripts": {
        "api": "graphqelm https://graphqelm.herokuapp.com/api --base StarWars"
      }
  4. With the above in your package.json, running npm run api will generate Graphqelm code for you to call in ./src/StarWars/. You can now use the generated code as in this Ellie example or in the examples folder.

Frequently Asked Questions

If you're wondering why code is generated a certain way, you're likely to find an answer in the FAQ. There's also a very helpful group of people in the #graphql channel in the Elm Slack.

Contributors

Thank you Mario Martinez (martimatix) for all your feedback, the elm-format PR, and for the incredible logo design!

Thank you Mike Stock (mikeastock) for setting up Travis CI!

Thanks for the reserved words pull request @madsflensted!

Roadmap

All core features are supported. That is, you can build any query or mutation with your graphqelm-generated code, and it is guaranteed to be valid according to your server's schema.

I am currently experimenting with subscriptions, checkout this live demo or examples/src/Subscription.elm for an example using Phoenix/Absinthe as a backend.

I would like to investigate generating helpers to make pagination simpler for Connections (based on the Relay Cursor Connections Specification). If you have ideas on this chime in on this thread.

See the full roadmap on Trello.