Skip to content

📕 DIY full-stack workshop teaching you Elixir, Absinthe GraphQL, React and Relay

Notifications You must be signed in to change notification settings

sjchmiela/pokedex

Folders and files

NameName
Last commit message
Last commit date
Apr 16, 2018
Apr 16, 2018
Apr 16, 2018
Apr 16, 2018
Apr 16, 2018
Apr 16, 2018
Apr 16, 2018
Apr 16, 2018
Apr 16, 2018
Apr 16, 2018
Apr 16, 2018
Apr 16, 2018
Apr 16, 2018
Apr 16, 2018
Apr 16, 2018
Apr 16, 2018
May 5, 2018
Apr 17, 2018
Apr 16, 2018
Apr 16, 2018
Apr 16, 2018
Apr 16, 2018
Apr 16, 2018
Apr 16, 2018
Apr 16, 2018
Apr 16, 2018
Apr 16, 2018
Apr 16, 2018

Repository files navigation

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
Stanisław Chmiela Stanisław Chmiela
Software Mansion