Pass Parameters to urql's useQuery React Hook
When you fetch data, you often want more than what a static query can give you.
In this lesson, we pass use useQuery's configuration object to pass variables into our GraphQL Query.
Urql will execute the same query with new variables whenever it detects that one of the variables it is passing to Graphql has changed.
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.