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
Okay! How'd it go? Let me show you what I came up with.
After we hammer out our mutation in GraphQL Playground, it's time to move over to Habit.js
.
First, import useMutation
and gql
from Apollo and the HABITS_QUERY
from App.js
:
import { useMutation, gql } from "@apollo/client";
import { HABITS_QUERY } from "./App";
Then, create the DELETE_HABIT
mutation constant above the component:
const DELETE_HABIT = gql`
mutation DELETE_HABIT($id: ID!) {
deleteHabit(id: $id) {
success
}
}
`;
Then, inside the component, add the useMutation
hook:
const [deleteHabit, { error, loading }] = useMutation(DELETE_HABIT, {
refetchQueries: [{ query: HABITS_QUERY }]
});
Finally, we can update the UI by adding a button and some styling for error
and loading
:
<li style={{ color: error ? "red" : "black" }}>
{error && (
<>
<span role="img" aria-label="warn emoji">
⚠️
</span>{" "}
</>
)}
{`${habit.description} (${habit.points} points)`}
<button
type="button"
onClick={() => deleteHabit({ variables: { id: habit.id } })}
disabled={loading}
>
Delete
</button>
<ul>
// this part stays the same
</ul>
</li>
Way to go! 🎉
Next up, let's explore a more advanced bug we've inadvertently created. 😬