Pass Parameters to urql's useQuery React Hook

Instructor: [00:00] Here, we have a React app which fetches a list of courses, grabs the title of each course, and displays them in a list. We want to be able to page through the courses to see more than just the first 10 courses.

[00:16] The first thing we could do to see this is pass page two to our courses query. We'll see that a different list of courses is shown. Page three, a different list, and so on. To make this dynamic, we need to pass a page variable, which we need to tell GraphQL that it's an int. We pass this page variable into our courses query.

[00:52] Next, in useQuery, along with the query that we're passing, we can pass variables to our query. It expects an object and the page that we have defined. There's the second page of results and the third. Next, we want a button that increments the page every time we click it.

[01:23] Let's go to the top and import useState. Then we'll call our state page and set page, and give it a default of one. Now, we'll pass page to our query. We'll define a button called nextPage. On click, we will increment page.

[02:15] Now, when we hit nextPage, urql will fire, because one of its variables that we were passing in has changed. To wrap up, we're passing our page state into our useQuery via the variables property. urql will pass the page variable into our courses query to fetch the next page. That's how you pass a variable to GraphQL using urql.