1×
Become a member
to unlock all features

Save 40% this week only!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Pass Parameters to urql's useQuery React Hook

    Ian JonesIan Jones
    graphqlGraphQL

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss