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
To get the server up and running:
cd server
npm start
The server will run at localhost:4000. If you open a browser to that address, you'll see GraphQL Playground.
GraphQL Playground is going to be your best friend throughout this course! It lets you explore the schema and run live queries and mutations right in the browser.
Feel free to play around and explore. In the next video, we'll create the client and install Apollo.