Sam Julien
Outline
-
Boost Your React Apps with Apollo: First Steps
- Series Introduction
- What are GraphQL and Apollo?
- A Note on the Beta
- Course Repository Overview
- Meet GraphQL Playground
- Create a Client and Install Apollo
- Prettier and Apollo GraphQL for VS Code
- Set Up Apollo with React
- Your First Query
- Test the Query in the Browser
- Exercise: Modify Query
- Solution & Next Steps
-
Boost Your React Apps with Apollo: Fetching & Updating Data
- Tutorial & Code Overview
- Adding Total Points to the Habits Query
- Create Data with Mutations
- Use the Mutation in the UI
- Exercise: Use Error and Loading in the UI
- Solution: Use Error and Loading in the UI
- Refetching Queries after Mutations
- Exercise: Delete Habits with Refetching
- Solution: Delete Habits with Refetching
- Fixing a Concurrency Bug by Awaiting Refetch Queries
- What's Next
-
Boost Your React Apps with Apollo: Beyond the Basics
- Tutorial & Sample Code Overview
- Updating the UI When a Mutation Completes
- Exercise: onCompleted
- Solution: onCompleted
- Introduction to Caching in Apollo
- Updating Apollo's Cache after Adding a Habit
- Exercise: Updating the Cache after Deleting a Habit
- Solution: Updating the Cache after Deleting a Habit
- Retching vs Caching
- Polling the Server
- Calling Queries Manually with useLazyQuery
- Fixing Adding and Deleting Entries
- Fragments
- Reusing Fragments
- Exercise: Use Fragment with Entries Query
- Solution: Use Fragment with Entries Query
- Where to Go Next
Outline
-
Boost Your React Apps with Apollo: First Steps
- Series Introduction
- What are GraphQL and Apollo?
- A Note on the Beta
- Course Repository Overview
- Meet GraphQL Playground
- Create a Client and Install Apollo
- Prettier and Apollo GraphQL for VS Code
- Set Up Apollo with React
- Your First Query
- Test the Query in the Browser
- Exercise: Modify Query
- Solution & Next Steps
-
Boost Your React Apps with Apollo: Fetching & Updating Data
- Tutorial & Code Overview
- Adding Total Points to the Habits Query
- Create Data with Mutations
- Use the Mutation in the UI
- Exercise: Use Error and Loading in the UI
- Solution: Use Error and Loading in the UI
- Refetching Queries after Mutations
- Exercise: Delete Habits with Refetching
- Solution: Delete Habits with Refetching
- Fixing a Concurrency Bug by Awaiting Refetch Queries
- What's Next
-
Boost Your React Apps with Apollo: Beyond the Basics
- Tutorial & Sample Code Overview
- Updating the UI When a Mutation Completes
- Exercise: onCompleted
- Solution: onCompleted
- Introduction to Caching in Apollo
- Updating Apollo's Cache after Adding a Habit
- Exercise: Updating the Cache after Deleting a Habit
- Solution: Updating the Cache after Deleting a Habit
- Retching vs Caching
- Polling the Server
- Calling Queries Manually with useLazyQuery
- Fixing Adding and Deleting Entries
- Fragments
- Reusing Fragments
- Exercise: Use Fragment with Entries Query
- Solution: Use Fragment with Entries Query
- Where to Go Next
Hi! JavaScript teacher Sam Julien here. Welcome to Boost Your React Apps with Apollo! This course has three sections:
- First Steps (you're here!)
- Fetching & Updating Data
- Beyond the Basics
In this first section, we'll get you started with the basics. You'll first learn about what GraphQL and Apollo are and why you might use them. Then, you'll set up Apollo with React and write your very first query. My goal for you by the end of this section is that you'll get a good feel for why Apollo is so massively popular with React!
Remember: the best way to learn anything is by doing. I've built exercises and provided plenty of sample code so you can actually get your hands dirty with Apollo and learn through experience. Give it a shot and see how much more you retain!
If you'd like to stay in touch with me, follow me on Twitter and sign up for my email newsletter. I love hearing about what you're up to and what you've built using my courses!
Note: This course assumes basic knowledge of git version control, React, and React Hooks. If you're brand new to React, check out some of the other React courses on Thinkster to get up and running!