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
You've now learned two methods for updating data after it's been changed:
- Refetch the related queries.
- Modify Apollo's cache.
Refetching can be a bit slower, but ensures that the data on the frontend remains in sync with the server. Modifying the cache can be faster, but risks the data getting out of sync if you're not careful.
Which one is right? The approach you take depends on three things:
- Who has access to this data?
- How frequently is it likely to change?
- How important is it for the frontend and server to stay in sync all the time?
Coming up next, we'll learn a strategy that can help mitigate the risk of updating the cache instead of refetching.