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

URQL

公式リポジトリによると、URLQLは以下の通りです.

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

urqlは高度なGraphSQLクライアントです.近代的な開発では、特に、複雑なアプリケーションを構築している必要があります.
インストール

npm install urql graphql

アプリ.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

データを取得する簡単で効果的な方法はSWRライブラリを使うことです.
SWRをインストールします

npm install swr

まず、ライブラリをインポートし、fetcher関数を作成する必要があります.GraphSQLでSWRを使用するには、GraphSQLリクエストまたはGraphicalフックのようなライブラリを使用してカスタム取得者関数を作成します.

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;

アプリ.js

import FetchedData from "./FetchData";

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

それは簡単です.ご覧のように、GRWQLでSWRを使用することは簡単です.あなたは状態管理システムを作成する必要は避け、すべてのロジックはUSEWRフックにあります.

応答クエリ

公式文書として

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!

応答クエリは非常にSWRに似ていますが、それは反応コンテキストの上に構築され、フックを反応させる.
レスポンスをインストール

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;

アプリ.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>
);
}

うまくいけば、あなたのアプリケーションのための“理想的な”クライアントを見つけることが、このポストは、その方法で肯定的な思考を追加しました.