Relay Workshop

You are going to learn Relay and build a mini social network at the end of this workshop

Welcome 👋

Each lesson including the exercise description can be found in each of the directories of /workshop.

I will explain everything during the intro.

Code

Most of it is written in TypeScript (not particularily well typed). Feel free to use plain JavaScript if you prefer that.

Structure

The workshop is a "huge" monorepo with many packages, let's see what's inside:

packages - contains packages and code that make workshop exercises possible

• babel - shared babel config
• babelweb - shared babel config for web with react fast refresh
• graphql - graphql utilities to make building graphql servers with graphql-js faster
• relay - relay utilities
• route - custom routing solution until react-router supports render as you fetch
• server - graphql server used on demo and workshop exercises
• test - test utilities to make tests easy
• ui - minit design system to be used on demo and workshop exercises
• web - demo app - mini social network
• webpack - shared webpack config for the demo and workshop exercises

workshop - a set of practice exercises to really learn Relay

• 01-fetchGraphql - fetch GraphQL data using pure React
• 02-useLazyLoadQuery - fetch GraphQL data using Relay useLazyLoadQuery hook
• 03-useFragment - refactor code to colocate data using useFrament hook
• 04-usePagination - learn to paginate back and forward using usePagination hook
• 05-useMutation - learn to do mutation using useMutation hook
• 06-mutationUpdater - learn to update Relay store with mutation output data
• 07-useRefetchableFragment - use useRefetchableFragment to do some refetch queries and update data
• 08-useSubscription - learn how to useSubscription to make you app realtime
• 09-usePreloadQuery - learn the render as you fetch pattern using preloadQuery and usePreloadQuery
• 10-testUsePreloadQuery - learn how to test your Relay components using @testing-library
• 11-testUseFragment - learn how to test a single component with useFragment
• 12-testUseMutation - learn how to test mutations calls

solutions - the same folder of workshop but with my solutions

slides - some slides to help in workshop

• concepts - GraphQL and Relay Concepts

Requirements

• yarn - we need to use yarn, as npm does not support workspaces yet
• node lts - we recommend using node LTS version, and nvm to manage your node version
• mongo - you can

Mongo

How to install mongo

brew tap mongodb/brew
brew install mongodb-community
brew services start mongodb-community

How to run mongo in docker

docker run -d -p PORT:27017 --name CONTAINER_NAME -d mongo:latest - run mongo:latest image in detached mode

docker tips

docker ps: list all running containers
docker ps -a: list all containers (including the exited ones)
docker stop CONTAINER_NAME: stop the container
docker start CONTAINER_NAME: start the container
docker rm CONTAINER_NAME: delete the container to free disk space
docker image ls: list all downloaded images
docker rmi IMAGE_NAME:TAG: remove image from your computer to free disk space

Use React Workshop mongo URI

mongodb+srv://sibelius:[email protected]/test

Server

Run

Server runs at http://localhost:7500/graphql

yarn server

How to update GraphQL schema SDL (schema.graphql)

yarn update-schema

How to create a seed of posts

yarn seed

How to update Relay artifacts

yarn relay

How to get an Authorization Token

Useful for exercises that user should be logged in

yarn get-token

Setup .env

Web and workshops consumes a local .env, you just need to copy the .env.example to .env inside each package

cp .env.example .env

Web

yarn web

Run both web and server packages

yarn start

How to run Workshop exercises

• go inside the workshop//
• run yarn start

Example for 01-fetchGraphQL

cd ./workshop/01-fetchGraphQL
yarn start

Feedback Form

https://forms.gle/uxkoyyeuUSjADC3s7

Remote Workshop

If you are interested in this workshop as a remote workshop (live), send an email to [email protected] I can run this workshop in English/Portuguese (I'm still learning Spanish)

Donation

You can donate to me on Patreon (https://www.patreon.com/sibelius), or Bitcoin