https://github.com/higherkindness/mu-graphql-example-elm
Complete full-stack web app with a mu-haskell GraphQL server and an Elm client! 🌳
https://github.com/higherkindness/mu-graphql-example-elm
elm-graphql elm-lang graphql graphql-client graphql-server hacktoberfest haskell mu mu-graphql mu-haskell schema
Last synced: 2 months ago
JSON representation
Complete full-stack web app with a mu-haskell GraphQL server and an Elm client! 🌳
- Host: GitHub
- URL: https://github.com/higherkindness/mu-graphql-example-elm
- Owner: higherkindness
- Created: 2020-03-17T14:29:54.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-04-28T05:45:20.000Z (almost 2 years ago)
- Last Synced: 2024-09-28T21:22:56.608Z (7 months ago)
- Topics: elm-graphql, elm-lang, graphql, graphql-client, graphql-server, hacktoberfest, haskell, mu, mu-graphql, mu-haskell, schema
- Language: Elm
- Homepage:
- Size: 659 KB
- Stars: 37
- Watchers: 19
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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]):
```sh
$ cd backend && stack run library
```
And, in another terminal, this project:
```sh
$ cd frontend && npm install && npm run codegen codegen && npm start
```
## This example demonstrates how to use:
- [x] Queries
- Combine queries and selection sets (search authors by name and books by title)
- Handle errors and loading state
- [x] 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)
- [x] Subscriptions
- Subscribe and unsubscribe with GraphQL via Elm ports and WebSocket API
- Build GraphQL queries and decode arbitrary JSON strings using the same generated `SelectionSet`s
## 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.
[elm ci]: https://github.com/kutyel/mu-graphql-example-elm/workflows/Elm%20CI/badge.svg
[preview]: library.png
[mu-haskell]: https://github.com/higherkindness/mu-haskell
[stack]: https://docs.haskellstack.org/en/stable/README/#how-to-install
[elm-graphql]: https://github.com/dillonkearns/elm-graphql/
[elm-live]: https://www.elm-live.com/
## Contributing:
You'll need a few things: [stack], npm (and optionally, [Nix](https://nixos.org/)).
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`.