elm-graphql

Learning Resources

• There is a thorough tutorial in the SelectionSet docs. SelectionSets are the core concept in this library, so I recommend reading through the whole page (it’s not very long!).

• The examples/ folder is another great place to start.

• If you want to learn more GraphQL basics, this is a great tutorial, and a short read: graphql.org/learn/

• My Elm Conf 2018 talk goes into the philosophy behind dillonkearns/elm-graphql

(Skip to 13:06 to go straight to the dillonkearns/elm-graphql demo).

• My 10-minute video tutorial on how to leverage Custom Scalars in elm-graphql using the Scalar Codecs feature.

• A Beginner’s Guide to GraphQL with Elm by @martimatix

• The Beginners Guide to elm-graphql by Samuel Wood

• Graphqelm: Optional Arguments in a Language Without Optional Arguments by @martimatix

• Comprehensive tutorial by the Hasura Team

If you’re wondering why code is generated a certain way, you’re likely to find an answer in the Frequently Asked Questions (FAQ).

There’s a very helpful group of people in the #graphql channel in the Elm Slack. Don’t hesitate to ask any questions about getting started, best practices, or just general GraphQL in there!

Setup

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

1. Add the dillonkearns/elm-graphql elm package as a dependency in your elm.json. You will also need to make sure that elm/json is a dependency of your project since the generated code has lots of JSON decoders in it.

   
   elm install dillonkearns/elm-graphql
   elm install elm/json
   

2. Install the @dillonkearns/elm-graphql 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 @dillonkearns/elm-graphql command line tool as a dev dependency so that everyone on your project is using the same version.

   npm install --save-dev @dillonkearns/elm-graphql
   # you can now run it locally using `npx elm-graphql`,
   # or by calling it through an npm script as in this project's package.json

1. Run the @dillonkearns/elm-graphql 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-elm-graphql-project",
     "version": "1.0.0",
     "scripts": {
       "api": "elm-graphql https://elm-graphql.onrender.com/api --base StarWars"
     }

1. With the above in your package.json, running npm run api will generate dillonkearns/elm-graphql 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.

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!

A huge thanks to @xtian for doing the vast majority of the 0.19 upgrade work! :tada:

Thank you Josh Adams (@knewter) for the code example for Subscriptions with Elixir/Absinthe wired up through Elm ports!

Thank you Romario for adding OptionalArgument.map!

Thank you Aaron White for your pull request to improve the performance and stability of the elm-format step! 🎉