Source for a talk I gave about GraphQL and Elixir/Phoenix.
This repository has been archived on 2024-06-24. You can view files and clone it, but cannot push or open issues or pull requests.
Find a file
James Harton 983c69178c Add go.sh
2018-04-10 12:42:54 +12:00
assets Add react-apollo and make UI work via GraphQL. 2018-04-08 14:30:36 +12:00
config Fix timestamps to always create as :utc_datetime. 2018-04-08 12:25:31 +12:00
lib Set up React. 2018-04-08 13:20:13 +12:00
priv Add face importing from github. 2018-04-08 10:06:11 +12:00
test Add face importing from github. 2018-04-08 10:06:11 +12:00
.gitignore Empty Phoenix application. 2018-04-08 09:20:53 +12:00
go.sh Add go.sh 2018-04-10 12:42:54 +12:00
mix.exs Get Absinthe working with list and creating people. 2018-04-08 12:42:50 +12:00
mix.lock Get Absinthe working with list and creating people. 2018-04-08 12:42:50 +12:00
README.md UPdate readme. 2018-04-09 13:06:39 +12:00

Client-side GraphQL

So, a GraphQL API isn't much use without the ability to use it from the browser, so here's where we implement the faces gallery as a client-side app. Whilst it's possible to do progressive enhancement I've removed all functionality from the faces controller and templates to prove that all the data loading and changing is happening via GraphQL.

I've used React and Apollo client via react-apollo.

Things to look at:

  • assets/js/app.js
  • assets/js/components/Gallery.js
  • assets/js/components/AddFace.js
  • assets/js/queries/list_people.js
  • assets/js/queries/import_person.js

Demo

Next, let's flip over to step-5 to see some magic.