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

Implement an Infinite Scroll using GraphQL with the Vue 3 useQuery Composable

Vue.js
GraphQL

Share this video with your friends

We have a thousand crafts but our app currently only displays twenty. We can use the fetchMore method off of the useQuery composable to run our query again with new variables.

We modify our query to take an offset variable. And then in our app, when we run fetchMore and concat the query results to our existing array of crafts.

Implement an Infinite Scroll using GraphQL with the Vue 3 useQuery Composable

Share this video with your friends

Course

Create a GraphQL Powered Vue 3 Application