Install graphql-tag to Enable Syntax Highlighting For GraphQL Queries

Set up an Urql GraphQL Provider in React

Query GraphQL Data with Urql using React Hooks

Pass Parameters to urql's useQuery React Hook

Write a GraphQL Mutation using React Hooks with Urql

Set Up GraphQL Subscriptions with Urql

Write a GraphQL Subscription with React Hooks using Urql

Understand Urql's Document Cache Exchange and Request Policies

Introduction to Urql: A React GraphQL Client

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.

Course

Introduction to Urql: A React GraphQL Client

Pass Parameters to urql's useQuery React Hook

Share this video with your friends