Urql
The official repository says that Urql is:
The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
Urql is an advanced GraphlQL client which has options for caching, normalization, and more. In modern development, it is a must-have, especially if you are building a complex application.
Installation:
npm install urql graphql
- App.js:
import React from 'react';
import FetchedData from './FetchData';
import { createClient, Provider } from 'urql';
const client = createClient({
url: 'https://countries.trevorblades.com/',
});
export default function App() {
return (
<Provider value={client}>
<FetchedData />
</Provider>
);
}
- FetchData.js:
import React from "react";
import { useQuery } from "urql";
const countriesQuery = `
query {
countries {
name
}
}
`;
const FetchedData = () => {
const [result] = useQuery({ query: countriesQuery });
const { data, fetching, error } = result;
console.log(data);
if (fetching) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;
const countriesList = data.countries.map((country, i) => (
<ul key={i}>{country.name}</ul>
));
return (
<div>
<h1>Countries</h1>
{countriesList}
</div>
);
};
export default FetchedData;
SWR
The simple and effective way to fetch data is to use the SWR library.
Install SWR:
npm install swr
First, you need to import the library and create a fetcher function. For using SWR with GraphQL, you create a custom fetcher function with libraries like graphql-request or graphql-hooks.
- FetchData.js:
import { request } from "graphql-request";
import useSWR from "swr";
const FetchedData = () => {
const countriesQuery = `
query {
countries {
name
}
}
`;
const url = "https://countries.trevorblades.com/";
const fetcher = () => request(url, countriesQuery);
const { data, error } = useSWR(countriesQuery, fetcher);
if (error) return <div>failed to load</div>;
if (!data) return <div>loading...</div>;
const countriesList = data?.countries.map((c, i) => <ul key={i}>{c.name}</ul>);
return (
<>
<h1>Countries</h1>
{countriesList}
</>
);
};
export default FetchedData;
- App.js:
import FetchedData from "./FetchData";
export default function App() {
return (
<FetchedData />
);
}
As simple as that. As you can see, using SWR with GraphQL is straightforward. You avoid the need to create a state management system, all logic is in the useSWR hook.
React Query
As official documentation says:
Because React Query's fetching mechanisms are agnostically built on Promises, you can use React Query with literally any asynchronous data fetching client, including GraphQL!
React Query is very similar to SWR, but it is built on top of React Context and React Hooks.
Install React Query:
npm install react-query
- FetchData.js:
import { request } from "graphql-request";
import { useQuery } from "react-query";
const FetchedData = () => {
const countriesQuery = `
query {
countries {
name
}
}
`;
const url = "https://countries.trevorblades.com/";
const fetcher = () => request(url, countriesQuery);
const { isLoading, error, data } = useQuery(url, fetcher);
if (error) return <div>failed to load</div>;
if (isLoading) return <div>loading...</div>;
const countriesList = data?.countries.map((c, i) => <ul key={i}>{c.name}</ul>);
return (
<>
<h1>Countries</h1>
{countriesList}
</>
);
};
export default FetchedData;
- App.js:
import FetchedData from "./FetchData";
import { QueryClient, QueryClientProvider } from "react-query";
const queryClient = new QueryClient();
export default function App() {
return (
<QueryClientProvider client={queryClient}>
<FetchedData />
</QueryClientProvider>
);
}
Hopefully, you'll find an "ideal" client for your app and that this post added positive thoughts in that manner.
Top comments (2)
What do you see as the advantages and disadvantages of using one of these over another?
It depends on your preferences and app use case. To recap, for now, graphql-request is a great tiny tool, for the most simple apps, I use it for my blog :)
For advanced usage, urql is a good choice. In the next part, I'll write about the most advanced client like React Relay and Apollo Client and you'll get a better overall view.