In this lesson, we'll learn how to use Urql to query a GraphQL API from a React application based on our Party Planner project. We'll cover setting up the Urql Client, making queries with the useQuery
hook, and displaying the results in our React components.
Step 1: Setting up the Urql Client
Before you can start using Urql in your React application, you'll need to install the necessary packages and set up the Urql Client.
1. Install the required packages: urql
and graphql
.
2. Now, let's create the urql client. For that, let's first import the createClient
function from urql
and call that function with our API endpoint and the bare minimum exchanges
.
Exchanges in urql are the core architectural building blocks of the library. They are modular units responsible for handling different aspects of the GraphQL request and response flow in a composable way. Exchanges are essentially middlewares that intercept, process, and pass on operations and their results within the urql Client.