1
Generate a MongoDB Database for a GraphQL Backend
1m 43s
2
Create a Vue 3 Project with Vite
2m 18s
3
Set Up the Apollo Client in a Vue 3 Project
2m 52s
4
Compare Vue 3 Setup Script with the Options API
2m 20s
5
Encapsulate Logic with Vue 3 Composable
3m 14s
6
Provide DefaultApolloClient from Apollo Composable to your Vue 3 App
2m 3s
7
Create a Data-Driven Vue 3 Component with Apollo
3m 45s
8
Create a Data-Driven Child Component in Vue 3
3m 52s
9
Add Routing to Your Vue 3 Application With Vue Router
3m 8s
10
Create a Dynamic Route With Vue Router
1m 22s
11
Use Template Literals with router-link to Create Dynamic Routes in Vue 3
51s
12
Pass an Id in a Vue 3 app through Query Parameters to a GraphQL Query
3m 39s
13
Create a Conditionally Rendered Modal in Vue 3
2m 32s
14
Listen for Custom Emitted Events in Vue 3 Parent Components
2m 16s
15
Create a Vue 3 Form With v-model
2m 2s
16
Create a GraphQL Mutation in GraphiQL
1m 34s
17
Use GraphQL Mutations in Vue 3 with the useMutation Composable
2m 8s
18
Use Refetch from Vue 3 useQuery Composable to Ensure Fresh Data
1m 20s
19
Handle Optimistic Updates With the Vue 3 useMutation Composable
2m 46s
20
Handle GraphQL Request Errors in Vue 3
3m 20s
21
Implement an Infinite Scroll using GraphQL with the Vue 3 useQuery Composable
3m 27s

Handle GraphQL Request Errors in Vue 3

Vue.js
GraphQL

Share this video with your friends

What do we do with optimistic updates when things don't go the way we planned? Luckily, the Apollo client is smart and corrects the data, but it might not be clear to the user that their mutation didn't go through.

We can have our component emit and error event and that error can be handled by the parent component. In our case, we'll use a v-if to display a message that informs the user their request didn't go through and the updated values were reverted.

Handle GraphQL Request Errors in Vue 3

Share this video with your friends

Course

Create a GraphQL Powered Vue 3 Application