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
We're now able to load the entries for each habit by clicking a button. The only problem is that adding and deleting entries still causes a refetch of the main habits query. Let's fix that.
We need to change the refetch option in each of these components to ENTRIES_QUERY
and provide a habit id.
First, in Entry.js
, delete the import for HABITS_QUERY
and import the ENTRIES_QUERY
instead:
// src/Entry.js
import { ENTRIES_QUERY } from "./Habit";
Then, update the delete entry mutation to use that query and pass in the habit id:
const [deleteEntry, { error, loading }] = useMutation(DELETE_ENTRY, {
refetchQueries: [
{ query: ENTRIES_QUERY, variables: { id: entry.habitId } },
],
});
We can do the same process in AddEntry.js
. First, update the import:
// src/AddEntry.js
import { ENTRIES_QUERY } from "./Habit";
Then, update the create entry mutation:
// src/AddEntry.js
const [createEntry, { error, loading }] = useMutation(CREATE_ENTRY_MUTATION, {
refetchQueries: [{ query: ENTRIES_QUERY, variables: { id: habitId } }],
onCompleted: () => onAddEntrySuccess(),
});
The app should now only refetch the entries when adding or deleting them.
Note: We're using refetching here, but you're certainly welcome to practice your cache modification skills instead. I didn't do this here because it's identical (seriously, just swapping a few words) to what you learned with adding and deleting habits. Feel free to do this as a bonus exercise for practice!