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.

© 2022 Dragan Vucinic