DEV Community

Cover image for Comprehensive guide to GraphQL clients, part 2
Drago
Drago

Posted on

Comprehensive guide to GraphQL clients, part 2

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
Enter fullscreen mode Exit fullscreen mode
  • 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>
 );
}
Enter fullscreen mode Exit fullscreen mode
  • 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;
Enter fullscreen mode Exit fullscreen mode

SWR

The simple and effective way to fetch data is to use the SWR library.

Install SWR:

npm install swr
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode
  • App.js:
import FetchedData from "./FetchData";

export default function App() {
return (
 <FetchedData />
);
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • 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;
Enter fullscreen mode Exit fullscreen mode
  • 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>
);
}
Enter fullscreen mode Exit fullscreen mode

Hopefully, you'll find an "ideal" client for your app and that this post added positive thoughts in that manner.

Discussion (2)

Collapse
cerchie profile image
Lucia Cerchie

What do you see as the advantages and disadvantages of using one of these over another?

Collapse
drago profile image
Drago Author

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.