包括的なガイドGrapqlクライアント、パート2

URQL

The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.

npm install urql graphql

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>
 );
}

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

npm install swr

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;

import FetchedData from "./FetchData";

export default function App() {
return (
 <FetchedData />
);
}

応答クエリ

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!

npm install react-query

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;

import FetchedData from "./FetchData";
import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient();

export default function App() {
return (
 <QueryClientProvider client={queryClient}>
 <FetchedData />
 </QueryClientProvider>
);
}