How to consume GraphQL APIs in React using URQL?

Let's take a look at it.

URQL

URQL is a tailored data fetching tool for GraphQL that allows you to fetch, cache, and modify data in applications. Because it is meant for GraphQL, it will enable you to code efficiently while adhering to modern development practices.

How does it compare to other data fetching packages?

You can always use the Fetch API, Axios, and React Query for fetching GraphQl APIs. To discover these ways further, you can read our guide about them. However, they don't support GraphQL-specific features like subscriptions or caching as GrapQL clients do. When it comes to GraphQL clients, Apollo is the most popular one. However, URQL is comparatively lightweight, and it stands out because of its flexibility, ease of use, and performance.

With that said, let's take a quick look at using URQL in React.

Using URQL in React

The urql library has built-in integration with React, and it takes advantage of React's features like hooks. Let's demonstrate how we can use it in a React application. The whole process can be divided into the following four steps.

→ STEP #1 - Install URQL

You can get started by installing the npm package in your React application. Run the following command:

js
Copy
npm install urql

We also recommend installing graphql, which libraries require when working with GraphQL APIs.

js
Copy
npm install graphql

If you use yarn, run the following command:

sh
Copy
yarn add urql graphql

→ STEP #2 - Initialize Client

Once installed, we need to initialize an instance of the URQL client. You can initialize it in the component or page where you want to fetch the API, such as the App.js or index.js file of your application.

In index.js, import the following:

js
Copy
import {createClient, Provider} from 'urql';

Now, we can initialize a new instance of the client. We configure it to call GeoDB API, a GraphQL API from RapidAPI Hub that provides data about countries and cities.

js
Copy
import {createClient, Provider} from 'urql';
const client = createClient({
	url: 'https://geodb-cities-graphql.p.rapidapi.com/'
});

Here url is the endpoint of the GraphQL API we want to consume.

→ STEP #3 - Connect to the Provider

Provider connects the initialized client to your React application. To do so, you need to wrap the required component/page, which needs to access the GraphQL data with <Provider value={client}></Provider>. In our case, we will wrap our index.js file.

jsx
Copy
import {createClient, Provider} from 'urql';
const client = createClient({
	url: 'https://geodb-cities-graphql.p.rapidapi.com/'
});
export default function Home() {
	return (
		<Provider value={client}>
			<div>
				<h2>Consuming GraphQL API in React.</h2>
			</div>
		</Provider>
	);
}

→ FINAL STEP - Fetch Data

Finally, you can fetch data with the useQuery hook. After defining your query, you can call it inside the useQuery hook like this:

js
Copy
// index.js
import React from 'react';
import {createClient, Provider, useQuery} from 'urql';
const client = createClient({
	url: 'https://geodb-cities-graphql.p.rapidapi.com/'
});
const GetCountryQuery = `
    query GetCountryData {
        countries(namePrefix: "America") {
            edges {
                node {
                    name
                    capital
                    flagImageUri
                    currencyCodes
                }
            }
        }
    }
`;
export default function Home() {
	// useQuery hook
	const [result] = useQuery({
		query: GetCountryQuery
	});
	// Get data, loading and error states
	const {data, fetching, error} = result;
	// Handle loading and error states
	if (fetching) return <p>Loading...</p>;
	if (error) return <p>Error: {error.message}</p>;
	// Display data returned from API
	return (
		<Provider value={client}>
			<div>
				<span>{data.name}</span>
				<img src={data.flagImageUri} />
			</div>
		</Provider>
	);
}

The useQuery hook will automatically get data from the API whenever the component loads/renders.

Wrap Up

If you are building a React application that heavily relies on data from a GraphQL API, URQL offers a convenient tool for you without a huge learning curve.