Skip to content

Latest commit

 

History

History
61 lines (43 loc) · 2.73 KB

README.md

File metadata and controls

61 lines (43 loc) · 2.73 KB
Raw

mu-graphql-example-elm 🌳

Elm CI

preview

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.