# Realworld Hasura + Elm

**URL:** <https://discourse.elm-lang.org/t/realworld-hasura-elm/6427>\
**Category:** Show and Tell\
**Created:** [October 23, 2020, 7:55am UTC](https://discourse.elm-lang.org/t/realworld-hasura-elm/6427 "2020-10-23T07:55:06Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![andrewMacmurray](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/andrewmacmurray/32/2797_2.png) [@andrewMacmurray](https://discourse.elm-lang.org/u/andrewMacmurray)\
**Post date:** [October 23, 2020, 7:55am UTC](https://discourse.elm-lang.org/t/realworld-hasura-elm/6427/1 "2020-10-23T07:55:07Z")

</div>

Hi everyone 👋

For the lols I put together an alternative implementation of the Realworld example app - with a graphql backend and frontend with Elm UI.

- The frontend is a grab bag of various patterns and techniques I’ve been playing with recently
- The backend uses Hasura (a graphql api over postgres) and a Kotlin http api (using [http4k](https://www.http4k.org/))
- The infrastructure (most of it) is deployed using terraform

### Experience report

- Obvs I found Elm a pleasant and relaxing experience (no surprises there!). Elm graphql + Elm UI are a dream stack to work with
- It was remarkable how little time I spent on the backend (and how little code there is for it). If you haven’t tried it I would thoroughly recommend trying Hasura out. It felt like a really nice balance between very powerful out of the box features and the ability to extend and customise using other applications and services
- Kotlin is nice (have been using it at work) - the server functions as an extension to Hasura (handles authentication and some more detailed logic). I’d quite like to try and rewrite this in purescript however to see if I can have a mostly serverless stack (I tried deploying the kotlin api on AWS lambda and it was horribly slow)

The repo is here: [https://github.com/andrewMacmurray/realworld-hasura](https://github.com/andrewMacmurray/realworld-hasura)  
And the app here: [https://realworld-hasura.surge.sh](https://realworld-hasura.surge.sh)

---

<div class="post-metadata">

**Author:** ![rupert](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/rupert/32/1775_2.png) [@rupert](https://discourse.elm-lang.org/u/rupert)\
**Post date:** [October 23, 2020, 9:45am UTC](https://discourse.elm-lang.org/t/realworld-hasura-elm/6427/2 "2020-10-23T09:45:08Z")

</div>

> [@andrewMacmurray](#):
>
> - I’d quite like to try and rewrite this in purescript however to see if I can have a mostly serverless stack (I tried deploying the kotlin api on AWS lambda and it was horribly slow)

If you would like to do a serverless stack in a functional programming language, I made a start at doing one in Elm:

> **[GitHub - rupertlssmith/elm-realworld-fullstack: Fullstack RealWorld in Elm](https://github.com/rupertlssmith/elm-realworld-fullstack)**
>
> Fullstack RealWorld in Elm. Contribute to rupertlssmith/elm-realworld-fullstack development by creating an account on GitHub.

Its called ‘fullstack’ because the plan was to write a back-end in Elm and then deploy that together with the existing Elm front end to yield a 100% Elm realworld implementation. So far, I mocked up the API end points using `elm-serverless`. Then I started thinking about what to do for a database, and got distracted generating AWS service stubs for Elm with a view to being able to use DynamoDB more easily from within Elm.

If you’ve already got the database and a graphql API, that would remove the need for DynamoDB, so I think it could be easily achievable in Elm.

---

<div class="post-metadata">

**Author:** ![andrewMacmurray](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/andrewmacmurray/32/2797_2.png) [@andrewMacmurray](https://discourse.elm-lang.org/u/andrewMacmurray)\
**Post date:** [October 23, 2020, 9:50am UTC](https://discourse.elm-lang.org/t/realworld-hasura-elm/6427/3 "2020-10-23T09:50:40Z")

</div>

Ah interesting! will check it out

---

<div class="post-metadata">

**Author:** ![opvasger](https://avatars.discourse-cdn.com/v4/letter/o/8e8cbc/32.png) [@opvasger](https://discourse.elm-lang.org/u/opvasger)\
**Post date:** [October 23, 2020, 1:03pm UTC](https://discourse.elm-lang.org/t/realworld-hasura-elm/6427/4 "2020-10-23T13:03:55Z")

</div>

I’m using

1. Elm
2. Hasura graphql-engine
3. dillionkearns/elm-graphql

for anything I can justify using it for!

I would recommend this combination of software to anyone doing a web-stack!! it’s simply amazing ☀

---

<div class="post-metadata">

**Author:** ![razze](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/razze/32/1650_2.png) [@razze](https://discourse.elm-lang.org/u/razze)\
**Post date:** [October 26, 2020, 12:08pm UTC](https://discourse.elm-lang.org/t/realworld-hasura-elm/6427/5 "2020-10-26T12:08:54Z")

</div>

Awesome work, but it might be confusing to name this realworld? As my understanding was, that there is a specification for both frontend and backend, and that spec is REST. Or did you trim your graphql queries to conform to this?

(this is all from memory, didn’t re-check this)

---

<div class="post-metadata">

**Author:** ![andrewMacmurray](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/andrewmacmurray/32/2797_2.png) [@andrewMacmurray](https://discourse.elm-lang.org/u/andrewMacmurray)\
**Post date:** [October 27, 2020, 5:02pm UTC](https://discourse.elm-lang.org/t/realworld-hasura-elm/6427/6 "2020-10-27T17:02:49Z")

</div>

Thanks! Yea I was thinking about this, there is a specification REST + the frontend css, they’ve also added a section for fullstack implementations that don’t necessarily follow the original spec but “adhere to the same functionality & UX specs.”

Do you have any thoughts on a name that might be clearer?

---

<div class="post-metadata">

**Author:** ![razze](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/razze/32/1650_2.png) [@razze](https://discourse.elm-lang.org/u/razze)\
**Post date:** [October 27, 2020, 7:07pm UTC](https://discourse.elm-lang.org/t/realworld-hasura-elm/6427/7 "2020-10-27T19:07:53Z")

</div>

I’m actually don’t have a suggestion, I just wanted to make this clear. It might just be a medium clone then?

---

<div class="post-metadata">

**Author:** ![choonkeat](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/choonkeat/32/1555_2.png) [@choonkeat](https://discourse.elm-lang.org/u/choonkeat)\
**Post date:** [October 28, 2020, 12:59pm UTC](https://discourse.elm-lang.org/t/realworld-hasura-elm/6427/8 "2020-10-28T12:59:09Z")

</div>

> [@razze](#):
>
> As my understanding was, that there is a specification for both frontend and backend, and that spec is REST

I was pleasantly surprised to learn that they now have a [Fullstack section](https://github.com/gothinkster/realworld#fullstack):

> _Since these implementations are responsible for the entire stack, they obviously cannot be mixed and matched but they still adhere to the same functionality & UX specs._

---

<div class="post-metadata">

**Author:** ![dirkbj](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dirkbj/32/3162_2.png) [@dirkbj](https://discourse.elm-lang.org/u/dirkbj)\
**Post date:** [October 30, 2020, 12:47am UTC](https://discourse.elm-lang.org/t/realworld-hasura-elm/6427/9 "2020-10-30T00:47:08Z")

</div>

Nice Andrew.

I wrote an [elm-graphql and FaunaDB serverless application tutorial](https://dev.to/xeticode/faunadb-graphql-and-elm-a-tutorial-for-jamstack-part-1-57f8) where FaunaDB acts as the graphQL server. It would be interesting to compare.

---

<div class="post-metadata">

**Author:** ![andrewMacmurray](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/andrewmacmurray/32/2797_2.png) [@andrewMacmurray](https://discourse.elm-lang.org/u/andrewMacmurray)\
**Post date:** [November 1, 2020, 10:44am UTC](https://discourse.elm-lang.org/t/realworld-hasura-elm/6427/10 "2020-11-01T10:44:39Z")

</div>

Thanks! That sounds interesting, how did you find the identity management / access control part of FaunaDB?

---

<div class="post-metadata">

**Author:** ![dillonkearns](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dillonkearns/32/1587_2.png) [@dillonkearns](https://discourse.elm-lang.org/u/dillonkearns)\
**Post date:** [November 1, 2020, 4:57pm UTC](https://discourse.elm-lang.org/t/realworld-hasura-elm/6427/11 "2020-11-01T16:57:23Z")

</div>

Hey Andrew, nice idea to do the realworld project with elm-graphql! That’s an awesome resource to have, thanks for taking the time to put that together.

I hope you don’t mind if I make a couple of small suggestions. In particular, Scalar codecs is one of one of my favorite features of elm-graphql, because with Elm types you can really leverage GraphQL Custom Scalars in a way that you can’t in many other languages. So there are a couple of places where you could consider using that feature.

For example, the timestamps could use scalar codecs:

> <https://github.com/andrewMacmurray/realworld-hasura/blob/5809b309dfac6a75ecb902f3f25dba9e164e08c3/frontend/src/elm/Api/Articles.elm#L191>

For anyone who isn’t familiar with the Custom Scalar Codecs feature, I have a short intro to them here: [https://incrementalelm.com/scalar-codecs-tutorial](https://incrementalelm.com/scalar-codecs-tutorial).

I really like encapsulating things with custom scalars as much as possible. Another example of a place to use a Custom Scalar is for a profile image. You could consider defining an `Avatar` custom scalar type in the GraphQL schema. Then you could expose a `codec` in that module and make the `Avatar` type opaque, so the only way to build or use that type is defined within that function. That way, you can’t accidentally pass another type of String to be displayed as an avatar, and you also have a clear responsibility of displaying avatars that’s narrowed down to that one module.

> <https://github.com/andrewMacmurray/realworld-hasura/blob/7be61d0f703971fa124677dd33e9af795b2164c4/frontend/src/elm/Element/Avatar.elm>

Here’s an example where I use that technique: [https://github.com/IncrementalElm/elm-graphql-shopping-cart/blob/2bcba464c9b92d4a6769ac91c0a51ae90029ebce/client/src/Dollars.elm#L16-L20](https://github.com/IncrementalElm/elm-graphql-shopping-cart/blob/2bcba464c9b92d4a6769ac91c0a51ae90029ebce/client/src/Dollars.elm#L16-L20).

Hope those suggestions are okay! Very nice to see a large example, thanks again for putting that together. I’d be happy to discuss more if you’re interested, feel free to ping me on Slack!

---

<div class="post-metadata">

**Author:** ![andrewMacmurray](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/andrewmacmurray/32/2797_2.png) [@andrewMacmurray](https://discourse.elm-lang.org/u/andrewMacmurray)\
**Post date:** [November 2, 2020, 6:40pm UTC](https://discourse.elm-lang.org/t/realworld-hasura-elm/6427/12 "2020-11-02T18:40:43Z")

</div>

Hi Dillon, that’s awesome! Thanks for the feedback. I shall definitely refactor to that

---

<div class="post-metadata">

**Author:** ![dirkbj](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dirkbj/32/3162_2.png) [@dirkbj](https://discourse.elm-lang.org/u/dirkbj)\
**Post date:** [November 10, 2020, 3:56pm UTC](https://discourse.elm-lang.org/t/realworld-hasura-elm/6427/13 "2020-11-10T15:56:00Z")

</div>

The access control in FaundDB is straight forward but not featureful. They have Auth0 support in Beta right now, which should improve the story.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [November 20, 2020, 3:56pm UTC](https://discourse.elm-lang.org/t/realworld-hasura-elm/6427/14 "2020-11-20T15:56:00Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.