Join our newsletter!
Get exclusive content, resources, and more!
1-2 emails per week, no spam
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've got our server connected to React with Apollo Client. Let's write our first query!
In App.js
, we first need to import two things:
// App.js
import { useQuery, gql } from "@apollo/client";
You can tell by that "use" that useQuery
is a React hook. The gql
import is a really cool function that lets you pass in GraphQL syntax via a tagged template literal (check out this video in my Gatsby course to learn more about tagged template literals).
Next, let's write our query:
// App.js
const HABITS_QUERY = gql`
query HABITS_QUERY {
habits {
id
description
points
}
}
`;
Note: I've noticed a problem with the Apollo GraphQL VS Code Extension if the server isn't running when you open VS Code to work on this. If you're not getting your autocomplete, try opening the Command Palette (that's command-shift-P on a Mac, control-shift-P on Windows), typing "Apollo," and selecting the option "Apollo GraphQL: Reload schema." That fixed it for me and you should again have autocomplete and intellisense for your GraphQL queries.
We're ready to use our query in the useQuery
hook, which will give back to us our data in addition to a loading or error state (which includes the error message). Here's the finished code for the App
component:
// App.js
function App() {
const { data, loading, error } = useQuery(HABITS_QUERY);
if (loading) {
return <p>loading...</p>;
}
if (error) {
return <p>Ruh roh! {error.message}</p>;
}
return (
<>
<h2>Habits</h2>
<ul>
{data.habits.map((habit) => {
return (
<li key={habit.id}>{habit.description}</li>
);
})}
</ul>
</>
);
}
In the next video, we'll fire up the browser and take a look at our results.