Pokédex 📕 — DIY Elixir + GraphQL + React + Relay workshop

What is it?

This repository is a Do It Yourself workshop teaching you step-by-step the basics of implementing a GraphQL endpoint for your Phoenix application with huge help of the Absinthe Elixir library. Apart from that, part of the workshop covers the frontend work — you'll learn how to add Relay framework to your existing React application and use it to create highly interactive User Interfaces.

How does it work?

The repository has 6 main branches:

• firstQuery — given a simple Phoenix application, how to add GraphQL endpoint to it that will fetch some data from the database with Ecto and return as GraphQL response + how to render a list of Pokémons fetched from a GraphQL endpoint in React?
• connections — we already have a simple GraphQL endpoint, how to implement pagination with Absinthe and Relay?
• authMutations — ok, we know how to fetch data in several ways, let's execute some mutations (and obviously authorize the requests)
• polymorphism — I've heard GraphQL supports interfaces and polymorphism of objects, how to implement this in Absinthe?
• subscriptions — I'd like to make my UI react to real-time data sent by the backend. Here you'll learn how to push GraphQL-compatible updates to your clients with WebSockets magic
• batching — your application has so many users that you have to optimize requests sent to the database, the most obvious way will be to get rid of the N+1 issue and batch the requests

Each branch contains the Pokédex application in a working state and the codebase is sprinkled with comments STEP <number>. Just "search in all" for STEP 1 on branch firstQuery to start the workshop, then for STEP 2, when you're finished with firstQuery checkout to connections search for STEP 1 and so on.

Before starting you'll have to setup the development environment. You can either use the dockerized way, so:

docker-compose run phoenix mix deps.get
docker-compose run phoenix mix ecto.setup
docker-compose run phoenix yarn
docker-compose up
# Open localhost:4000 to see the application

or run the same commands on your localhost (but then remember you'll have to check whether DB config in config/dev.exs will work on your computer):

mix deps.get
mix ecto.setup
yarn
mix phx.server
# Open localhost:4000 to see the application

Who did it?

This workshop has been created by two friends for a workshop session during ElixirConf EU 2018 (which BTW was a blast!)

Stanisław Chmiela	Łukasz Gurdek