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
2018-04-10 18:18:23 +12:00
.vscode Client-side subscriptions via Apollo work. 2018-04-08 15:26:22 +12:00
assets Client-side subscriptions via Apollo work. 2018-04-08 15:26:22 +12:00
config Use an access token because it avoids the rate limit. 2018-04-10 18:18:23 +12:00
lib Use an access token because it avoids the rate limit. 2018-04-10 18:18:23 +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 Use an access token because it avoids the rate limit. 2018-04-10 18:18:23 +12:00
go.sh ADd go.sh 2018-04-10 12:46:05 +12:00
mix.exs Add absinthe-socket-link and send all GraphQL via a Phoenix channel. 2018-04-08 15:00:11 +12:00
mix.lock Add absinthe-socket-link and send all GraphQL via a Phoenix channel. 2018-04-08 15:00:11 +12:00
README.md Update readme. 2018-04-09 13:12:48 +12:00

Subscriptions

Our little React app is pretty neat. When it loads it queries the server for a list of people and shows their faces and allows us to run a mutation to add a new person to our list.

There's only one problem: what happens if someone else comes along and adds a face to our gallery? Our client won't know that the data has changed and will just keep showing us stale data. This is where GraphQL Subscriptions come in.

Absinthe has built-in support for subscriptions and since we're using Phoenix we have a well-tested channel implementation to run it over. Note that the GraphQL subscription specification is transport agnostic - Absinthe ships with it's own socket protocol as well as support for Phoenix's.

Notable changes:

  • lib/faces_web/endpoint.ex
  • lib/faces_web/schema/schema.ex
  • lib/faces_web/channels/user_socket.ex
  • assets/js/absinthe-socket-link.js
  • assets/js/client.js
  • assets/js/queries/person_added.js
  • assets/js/queries/list_people.js

Next, take a look at step-6.