React & GraphQL – From zero to production

Welcome to the React & GraphQL workshop! ☀️

In this workshop we are going to build a Twitter Lite application with React & GraphQL. The workshop material is divided into following:

• ⚙️ Setup GraphQL Server
• 🍎 Define GraphQL Queries
• 🥑 Define GraphQL Mutations
• 🔑 Access Control & Authorization
• 🎛 Setup Apollo Client
• 🥝 GraphQL Queries in React
• 🍇 GraphQL Mutations in React

You can try the finished app here.

🔧 Setup

git clone https://github.com/glennreyes/react-graphql-workshop.git
cd react-graphql-workshop
yarn

🛰 Working with the GraphQL Server

Move to the server folder:

cd server

Start server in dev/watch mode. This will re-run the server everytime you make changes in the source.

yarn dev

⚛️ Working with the React app

Move to the client folder:

cd client

Start the app with:

yarn start

📚 Exercises

• 1 – Setup the GraphQL server
• 2 – Create queries for User and Tweet
• 3 – Create mutations for User and Tweet
• 4 – Access control & Authorization
• 5 – Setup Apollo Client
• 6 – Queries in React
• 7 – Mutations in React

Misc

• Server cheat sheet
• Client cheat sheet
• Bonus exercises

🔗 Helpful links

• https://graphql.org/learn
• https://www.apollographql.com/docs/apollo-server
• https://www.apollographql.com/docs/react

✏️ Feedback form

https://docs.google.com/forms/d/e/1FAIpQLSfqgeDV9J96s_XzO1qZrKJXW0cxwfqS5e-5qjDREg9nydemjw/viewform?usp=pp_url&entry.1524828154=React+%26+GraphQL+%E2%80%93+From+zero+to+production