Implement an Infinite Scroll using GraphQL with the Vue 3 useQuery Composable
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.
Instructor: [0:00] My API has 1,000 crafts in it, but at the moment, there's only 20 that are available on this list page. I want to be able to see the rest of them. Now, if we have a look at our query here, we can see that crafts can accept an offset, which allows us to get access to values beyond the first 20.
[0:19] To do that, I need to pass in offset variable, which is going to be an integer. You can see that from the typing, over here. Then, here in our craft, so I want to pass in the offset and send it to offset.
[0:34] The last thing then, is to pass in the offset as a query variable down here. Read is the first one. If we offset it by 20 and then do it again, we'd see that we got the next 20 that are appearing there.
[0:47] Let's take these two lines and update our query. We'll also have to update our useQuery as well. Our useQuery will take a second argument, which is an arrow function, which returns an object, which is the variable. For us, we want to set the offset initially at zero. Our page shouldn't do anything different now, exactly the same thing.
[1:06] From useQuery, we can also destructure another function called fetchMore. What fetchMore allows us to do is to re-execute our query, but with a different variable. Let's create a function called loadMore. What loadMore is going to do is, it's going to execute our fetchMore function.
[1:25] FetchMore takes an options object. One of the options it takes is the new variables. Our variables, it's just the offset. We want to set our offset to be the current length of the data value, which is the array of crafts that we currently have on our page. We want to start, basically, that length farther on.
[1:48] Once we get those, we want to update our query. We'll do that with the updateQuery property inside of our options object. That takes a function. You can see that the first thing is the previous result. Then, we're also going to be able to destructure from the options object, the fetchMore result, which we're going to seek out now, fetchMore result, and then we're going to do some work.
[2:12] The first thing we'll do is say, if there is no fetchMore result, then return. If we've got to the end of our list, don't do any more work. If there is, what we want to do is we want to return a new version of what's returned up here.
[2:25] We need to match its shape. It's crafts, and inside of crafts, we always return the type name, which is CraftsResult. Then, we have the edges. We can see that these edges, which will be the array that we use for data, the crafts are over here. These edges are in PreviousResult, crafts.edges. Then, we want to concatenate to those, the same edges that are in fetchMoreResult, to craft.edges.
[2:57] Let's do that. PreviousResult.crafts.edges, so that's going to be in an array. We use the array method, .concat, to concatenate that with the fetchMoreResult.crafts.edges. The last thing we'll need to do then, is to add a button to the bottom for our UI that's going to execute that loadMoreOnClick. We'll just say, Load More.
[3:19] Now, as we scroll down our page, we get to the bottom, we can hit Load More and we get 20 more results. We can keep going because there are a thousand results in here.