{"id":13573577,"url":"https://github.com/sibelius/relay-workshop","last_synced_at":"2025-11-05T09:03:52.901Z","repository":{"id":64949951,"uuid":"255764026","full_name":"sibelius/relay-workshop","owner":"sibelius","description":"Learn Relay","archived":false,"fork":false,"pushed_at":"2025-04-23T11:24:31.000Z","size":94671,"stargazers_count":180,"open_issues_count":22,"forks_count":13,"subscribers_count":21,"default_branch":"main","last_synced_at":"2025-08-15T10:04:49.904Z","etag":null,"topics":["graphql","relay","workshop"],"latest_commit_sha":null,"homepage":"https://react-europe-relay-workshop.now.sh/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sibelius.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"sibelius","patreon":"sibelius"}},"created_at":"2020-04-15T00:47:34.000Z","updated_at":"2025-07-23T20:13:26.000Z","dependencies_parsed_at":"2023-11-08T06:39:45.197Z","dependency_job_id":"e1db9190-656a-4bf2-91ee-77869c8d7938","html_url":"https://github.com/sibelius/relay-workshop","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sibelius/relay-workshop","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sibelius%2Frelay-workshop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sibelius%2Frelay-workshop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sibelius%2Frelay-workshop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sibelius%2Frelay-workshop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sibelius","download_url":"https://codeload.github.com/sibelius/relay-workshop/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sibelius%2Frelay-workshop/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271424922,"owners_count":24757365,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-21T02:00:08.990Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["graphql","relay","workshop"],"created_at":"2024-08-01T15:00:37.859Z","updated_at":"2025-11-05T09:03:47.863Z","avatar_url":"https://github.com/sibelius.png","language":"TypeScript","readme":"# Relay Workshop\n\nYou are going to learn Relay and build a mini social network at the end of this workshop\n\n## Welcome 👋\n\nEach lesson including the exercise description can be found in each of the directories of /workshop.\n\nI will explain everything during the intro.\n\n## Code\n\nMost of it is written in TypeScript (not particularity well typed). Feel free to use plain JavaScript if you prefer that.\n\n## Structure\n\nThe workshop is a \"huge\" monorepo with many packages, let's see what's inside:\n\npackages - contains packages and code that make workshop exercises possible\n\n- babel - shared babel config\n- babelweb - shared babel config for web with react fast refresh\n- graphql - graphql utilities to make building graphql servers with graphql-js faster\n- relay - relay utilities\n- route - custom routing solution until react-router supports render as you fetch\n- server - graphql server used on demo and workshop exercises\n- test - test utilities to make tests easy\n- ui - mini design system to be used on demo and workshop exercises\n- web - demo app - mini social network\n- webpack - shared webpack config for the demo and workshop exercises\n\nworkshop - a set of practice exercises to really learn Relay\n\n- 01-fetchGraphql - fetch GraphQL data using pure React\n- 02-useLazyLoadQuery - fetch GraphQL data using Relay useLazyLoadQuery hook\n- 03-useFragment - refactor code to colocate data using useFragment hook\n- 04-usePagination - learn to paginate back and forward using usePagination hook\n- 05-useMutation - learn to do mutation using useMutation hook\n- 06-mutationUpdater - learn to update Relay store with mutation output data\n- 07-useRefetchableFragment - use useRefetchableFragment to do some refetch queries and update data\n- 08-useSubscription - learn how to useSubscription to make you app realtime\n- 09-usePreloadQuery - learn the render as you fetch pattern using preloadQuery and usePreloadQuery\n- 10-testUsePreloadQuery - learn how to test your Relay components using @testing-library\n- 11-testUseFragment - learn how to test a single component with useFragment\n- 12-testUseMutation - learn how to test mutations calls\n\nsolutions - the same folder of workshop but with my solutions\n\nslides - some slides to help in workshop\n\n- concepts - GraphQL and Relay Concepts\n\n## Requirements\n\n- pnpm - we need to use yarn, as npm does not support workspaces yet\n- node lts - we recommend using node LTS version, and nvm to manage your node version\n- mongo - you can\n\n## Mongo\n\n### How to install mongo\n\n```sh\nbrew tap mongodb/brew\nbrew install mongodb-community\nbrew services start mongodb-community\n```\n\n### How to run mongo in docker\n\n```sh\n\n### remember to start docker before executing the command!\n### run mongo:latest image in detached mode\ndocker run -d -p 27017:27017 --name CONTAINER_NAME -d mongo:latest\n```\n\ndocker tips\n\n```bash\n### list all running containers\ndocker ps\n### list all containers (including the exited ones)\ndocker ps -a\n### stop the container\ndocker stop CONTAINER_NAME\n### start the container\ndocker start CONTAINER_N\n### delete the container to free disk spaceAME\ndocker rm CONTA\n### list all downloaded imagesINER_NAME\ndocker image ls\n###: remove image from your computer to free disk space\ndocker rmi IMAGE_NAME:TAG\n```\n\n### Use React Workshop mongo URI\n\n```sh\nmongodb+srv://sibelius:eYZlo2POmcyuUuRR@reacteurope-los0c.mongodb.net/test\n```\n\n## Server\n\n### Run\n\nServer runs at http://localhost:7500/graphql\n\n```sh\npnpm server\n```\n\n### How to update GraphQL schema SDL (schema.graphql)\n\n```sh\npnpm update-schema\n```\n\n### How to create a seed of posts\n\n```sh\npnpm seed\n```\n\n## How to update Relay artifacts\n\n```\npnpm relay\n```\n\n## How to get an Authorization Token\n\nUseful for exercises that user should be logged in\n\n```\npnpm get-token\n```\n\n## Setup .env\n\nWeb and workshops consumes a local .env, you just need to copy the .env.example to .env inside each package\n\n```sh\npnpm copy-envs\n```\n\n## Web\n\n```\npnpm web\n```\n\n## Run both `web` and `server` packages\n\n```bash\npnpm start\n```\n\n## How to run Workshop exercises\n\n- go inside the workshop/\u003cexercise\u003e/\n- run pnpm start\n\nExample for 01-fetchGraphQL\n\n```bash\ncd ./workshop/01-fetchGraphQL\npnpm start\n```\n\n## Feedback Form\n\nhttps://forms.gle/uxkoyyeuUSjADC3s7\n\n## Remote Workshop\n\nIf you are interested in this workshop as a remote workshop (live), send an email to sibeliusseraphini@gmail.com\nI can run this workshop in English/Portuguese (I'm still learning Spanish)\n\n## Donation\n\nYou can donate to me on Patreon (https://www.patreon.com/sibelius), or Bitcoin\n","funding_links":["https://github.com/sponsors/sibelius","https://patreon.com/sibelius","https://www.patreon.com/sibelius"],"categories":["Challenges Fullstack","TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsibelius%2Frelay-workshop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsibelius%2Frelay-workshop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsibelius%2Frelay-workshop/lists"}