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:eYZlo2POmcyuUuRR@reacteurope-los0c.mongodb.net/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
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 sibeliusseraphini@gmail.com 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