mu-graphql-example-elm 🌳

This Elm example aims to demonstrate how to implement both frontend and backend in a schema-first, typesafe, and functional way.

To run this example, you need to run the GraphQL server example (with Stack):

$ cd backend && stack run library

And, in another terminal, this project:

$ cd frontend && npm install && npm run codegen codegen && npm start

This example demonstrates how to use:

• Queries
  • Combine queries and selection sets (search authors by name and books by title)
  • Handle errors and loading state
• Mutations
  • Create a new entity related to an existing one (submit a book with an existing author)
  • Compose Tasks to create several new entities with relations (submit a book with a new author)
• Subscriptions
  • Subscribe and unsubscribe with GraphQL via Elm ports and WebSocket API
  • Build GraphQL queries and decode arbitrary JSON strings using the same generated SelectionSets

This example does not demonstrate:

• User input validation parsing best practices
• Routing best practices
• Debouncing user input
• Client-side validation before submitting a form

Other technical notes:

• mu-haskell uses the schema.graphql as the single source of truth, using it to generate type level representations of the schema that we can use to implement our server!
• elm-graphql also supports code-generation from introspection files, local schema files, and remote servers with introspection enabled (it usually is).
• It's usually better to use a single schema file (like in this repo), with both backend and client code located in the same repo (rather than having duplicate schemas in several repositories - in that case someday they will become inconsistent).
• both elm-graphql and elm-live can be installed as global dependencies, but we don't consider it a good practice, because it immediately becomes harder to maintain versions.
• old generated files are removed by elm-graphql automatically, we don't need to worry about it.

Contributing:

You'll need a few things: stack, npm (and optionally, Nix).

Run nix-shell the first time you clone the project, that way you'll have the generated .pre-commit-config.yaml git hook! 😉

When using Visual Studio Code, please prefer opening a pre-configured workspace file mu-graphql-example-elm.code-workspace.