包括的なガイドGraphqlクライアント、パート3

リレーリレー

リレーは、Facebookが構築しているGraphSQLクライアントです.それは偉大なGraphicalクライアントですが、それは単純なアプリケーションや初心者のための良い選択ではありません.それは非常に独断的です、ユーザーは厳しい規則に従わなければなりません.
ここでの主なことは、エラーの可能性が最小限になることです.他のクライアントとは異なり、それは柔軟性の多くをミス.リレーはアプリケーションとスキーマ設計について多くの知識を要求する.
光沢のある点は、スケーラビリティにとって素晴らしいことです.リレーは宣言的データ取得のための完全なフレームワークです.
リレーを使用できるようにするには、リレーと互換性のあるGraphSQLサーバを作成しなければなりません.
多くの開発者はリレーを使用しないで、その単純さと柔軟性のために、複雑なアプリケーションのためにアポロクライアントを使用します.それは他のフレームワークと比較してセットアップするのは難しいです、しかし、すべてがされるとき、それはより誤りの傾向がなくて、多くのユーザーに貢献している生産で使われることができます.
反応継電器の大きな利点は、それがFacebookによってサポートされており、彼らの社会的ネットワーク上のユーザー数百万によってテストされています.REACCT 18の新しいリリースでは、サスペンス機能は深くリレーと統合されています.それで、あなたがあなたのアプリケーションのために反応を使っているならば、リレーで、あなたは大きなパフォーマンス後押しを得ることができます.
公式文書から
リレーは3つのコア部分からなる.

• Relay Compiler: A GraphQL to GraphQL optimizing compiler, providing general utilities for transforming and optimizing queries as well as generating build artifacts. A novel feature of the compiler is that it facilitates experimentation with new GraphQL features - in the form of custom directives - by making it easy to translate code using these directives into standard, spec-compliant GraphQL.
• Relay Runtime: A full-featured, high-performance GraphQL runtime that can be used to build higher-level client APIs. The runtime features a normalized object cache, optimized "write" and "read" operations, a generic abstraction for incrementally fetching field data (such as for pagination), garbage collection for removing unreferenced cache entries, optimistic mutations with arbitrary logic, support for building subscriptions and live queries, and more.
• React/Relay: A high-level product API that integrates the Relay Runtime with React. This is the primary public interface to Relay for most product developers, featuring APIs to fetch the data for a query or define data dependencies for reusable components (e.g. useFragment).

インストール
いくつかの理由で、NPMパッケージマネージャを使用するときにエラーが発生しました.だから私は代わりに糸を使っています.

yarn add relay-runtime react-relay
yarn add --dev relay-compiler babel-plugin-relay

スキーマを追加します.プロジェクトへのGraphSQL

cd my-project
curl https://raw.githubusercontent.com/ogurenko/graphql-api/main/schema.graphql > schema.graphql

パッケージを変更します.リレーコンパイラの実行

"scripts": {
 "start": "yarn run relay && react-scripts start",
 "build": "yarn run relay && react-scripts build",
 "relay": "yarn run relay-compiler"
 },
 "relay": {
 "src": "./src/",
 "schema": "./schema.graphql"
 },
 ...

これで、アプリケーションを実行することができます

yarn start

あなたのアプリケーションを実行してください.
今、リレー環境を設定する時間です.relayenvironmentというファイルを作成します.以下のコードを追加します.

import { Environment, Network, RecordSource, Store } from "relay-runtime";
import FetchedData from "./FetchData";


export default new Environment({
 network: Network.create(() => FetchedData()),
 store: new Store(new RecordSource()),
});

fetchDataを追加します.以下のコードを追加します.

async function FetchedData() {

 const response = await fetch("https://countries.trevorblades.com/", {
 method: "POST",
 headers: {
 "Content-Type": "application/json",
 },
 body: JSON.stringify({
 query: "{countries { name }}",
 }),
 });

 return await response.json();
}

export default FetchedData;

src/appの内容を置き換えます.以下のコードを使用します

import React from "react";
import graphql from "babel-plugin-relay/macro";
import {
 RelayEnvironmentProvider,
 loadQuery,
 usePreloadedQuery,
} from "react-relay/hooks";
import RelayEnvironment from "./RelayEnvironment";

const { Suspense } = React;


const countriesQuery = graphql`
 query AppCountryNamesQuery {
 countries {
 name
 }
 }
`;


const preloadedQuery = loadQuery(RelayEnvironment, countriesQuery, {
 /* query variables */
});

function App(props) {
 const data = usePreloadedQuery(countriesQuery, props.preloadedQuery);
console.log(data.countries);
 const countriesName = [];
 data.countries.map((c) => countriesName.push(c.name));
 return (
 <div className="App">
 <header className="App-header">
 {countriesName?.map((c, index) => <ul key={index}>{c}</ul>)}
 </header>
 </div>
 );
}

function AppRoot() {
 return (
 <RelayEnvironmentProvider environment={RelayEnvironment}>
 <Suspense fallback={"Loading..."}>
 <App preloadedQuery={preloadedQuery} />
 </Suspense>
 </RelayEnvironmentProvider>
 );
}

export default AppRoot;

src/indexを変更します.JSは、反応の最新バージョンでアプリケーションを実行する

import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

const root = createRoot(document.getElementById("root"));

root.render(
 <React.StrictMode>
 <App />
 </React.StrictMode>
);

お済みです

Note: To find out more about the environment and particular hooks in the Relay system, please refer to the official documentation

アポロクライアント

この包括的なガイドの終わりには、どのようにグラフを使用してデータを取得するアポロクライアントを使用する方法を学びます.
アポロは、Graphics生態系と反応の間の金の標準です.それはシンプルで、強力で、柔軟です.それは現代的なアプリケーションの機能がたくさんあります.下側は図書館の規模が大きい.これは単純なアプリケーションの“メガ”ライブラリを使用するのは便利ではありません.
アポロプラットフォームの不可知論者です.これは、クライアント側だけでなく、バニラJavaScriptと任意のフレームワークで使用することができます.typescriptとserverlessなアーキテクチャでうまく動作します.ノードでうまく動作します.多くのライブラリをサポートしています.
インストール

npm install @apollo/client graphql

クライアントを作成します

アプリ.js

import React from 'react'
import { ApolloProvider, ApolloClient, InMemoryCache } from "@apollo/client";
import { FetchedData } from "./FetchData";

const client = new ApolloClient({
 uri: "https://countries.trevorblades.com",
 cache: new InMemoryCache()
});

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

fetchDatajs

import React from "react";
import { useQuery, gql } from "@apollo/client";

const countriesQuery = gql`
 query {
 countries {
 name
 }
 }
`;

export const FetchedData = () => {
 const { loading, error, data } = useQuery(countriesQuery);

 if (loading) return <p>Loading ... </p>;
 if (error) return <p>Erorr ... </p>;

 const countriesList = data.countries.map((country, index) => (
 <ul key={index}>{country.name}</ul>
 ));
 return (
 <>
 <h1>Countries</h1>
 {countriesList}
 </>
 );
};

アプリケーションを起動します

npm start

ご覧のように、アポロクライアントは、反応コンテキストとフックの力を活用します.さらに、キャッシュ、状態管理、エラー処理の問題を解決します.
GraphSQLクライアントのバンドルサイズと人気
graphql-request
graphql-hooks
urql
React-Relay
apollo-client
サイズ





星





フォーク





課題





ダウンロード

赤旗:すべてのクライアントの間で最悪の結果

グリーンフラッグ:すべてのクライアントの中で最良の結果

Size :ソースバンドル(ミニバンドルのサイズ)

星と問題とフォーク

ソース:NPM

上記の表は、GraphLequestとURQLが全体で最もバランスのとれたライブラリであることを示しています.これらの2つのクライアントのいずれにも極端な結果はありません.
アポロクライアントは、コミュニティで最も人気のあるクライアントです.一方で最も問題がある.
Graphicalフックはコミュニティで最も人気のあるクライアントです.それはあなたのアプリケーションの悪い解決策ではないことを示唆している.
Graphqlの要求は、最もダウンロードされたクライアントですので、それ自体を話す.

結論

Axiosは、応答クエリ、およびSWR任意のプロトコルのための素晴らしいツールであり、GraphSQLクライアントを構築するために使用することができます.私の焦点はプロトコル特有のGraphSQLクライアントです.
このポストで示されるGraphSQLクライアントは、すべてかなりきれいで、多くの良い特徴を持ちます.多くの比較表と、インターネット上でのGraphSQLクライアントを使用する方法の例を見つけることができます.しかし、この投稿は、同じクエリと異なるGraphSQLクライアントを使用して、実際の例を示すことを目指しています.私は学ぶための最良の方法は、同じワークロードでそれを試してみるとどのように動作するかを参照してください.
推奨勧告

簡単にするために、GraphSQLリクエストを使用することをお勧めします.それは簡単で、高速で、使用するように簡単です小さなライブラリです.

さまざまなコンポーネント間で多くのページのデータが必要な場合は、GraphSQLフックを使用します.

より強力なGraphSQLクライアントを探しているなら、urqlを使うことをお勧めします.それはアポロクライアントよりも人気がありますが、それは良い機能がたくさんあります.大きなポストI Switched From Apollo To Urql (And It Was Worth It)

エンタープライズソリューションを必要とする場合は、Resetリレーを使用できます.学習曲線は少し複雑ですが、一度環境を設定すると、あなたのアプリケーションが壊れにくい可能性があります.

読書ありがとう!
参考文献
5 GraphQL clients for JavaScript and Node.js

Axios vs. fetch(): Which is best for making HTTP requests?
Urql
React-Query