メインコンテンツへスキップ
ウクライナを支援 🇺🇦 ウクライナへの人道支援にご協力ください.

Relayあなたと共に成長するGraphQLクライアント。

規模に合わせて構築

Relayは、あらゆる規模で高いパフォーマンスを発揮できるように設計されています。Relayは、アプリに数十、数百、数千のコンポーネントがあっても、データフェッチの管理を容易に保ちます。また、Relayのインクリメンタルコンパイラのおかげで、アプリが成長してもイテレーションの速度を速く保つことができます。

イテレーションを迅速に保つ

Relayは、データフェッチを宣言的に変えます。コンポーネントは、どのようにフェッチするかを心配することなく、データの依存関係を宣言します。Relayは、各コンポーネントが必要とするデータがフェッチされ、利用可能であることを保証します。これにより、コンポーネントが疎結合になり、再利用が促進されます。

Relayを使用すると、システム内の他の部分を変更することなく、コンポーネントとそのデータの依存関係をすばやく変更できます。つまり、リファクタリングやアプリの変更を行う際に、他のコンポーネントを誤って壊してしまうことはありません。

自動最適化

Relayのコンパイラは、アプリ全体のデータ要件を集約して最適化し、単一のGraphQLリクエストで効率的にフェッチできるようにします。

Relayは、コンポーネントによって宣言されたデータが最も効率的な方法でフェッチされるように、重労働を処理します。たとえば、同一のフィールドを重複排除したり、ランタイムで使用される情報を事前計算したりするなど、さまざまな最適化を行います。

データの一貫性

Relayは、データに影響を与える変更があった場合、すべてのコンポーネントを自動的に最新の状態に保ち、厳密に必要な場合にのみ効率的に更新します。つまり、不要な再レンダリングはありません。

Relayは、GraphQL Mutationの実行もサポートしており、オプションで楽観的更新やローカルデータの更新を行いながら、画面に表示されるデータが常に最新の状態に保たれるようにします。

クエリデータのフェッチ

クエリデータをフェッチする最も簡単な方法は、直接呼び出すことです loadQuery.

後で、usePreloadedQueryフックを呼び出すことで、関数型Reactコンポーネントのストアからデータを読み取ることができます。

Relayでは、ユーザーが特定のページに移動するためのリンクをクリックしたり、ボタンを押したりするなど、イベントに応じてloadQueryを呼び出すことを推奨しています。詳しくは、クエリに関するガイド付きツアーのセクションをご覧ください。


import React from "react";
import { graphql, usePreloadedQuery, /* ... */ } from "react-relay";

const artistsQuery = graphql`
  query ArtistQuery($artistID: String!) {
    artist(id: $artistID) {
      name
      ...ArtistDescription_artist
    }
  }
`;
const artistsQueryReference = loadQuery(
  environment,
  artistsQuery,
  {artistID: "1"}
);

export default function ArtistPage() {
  return (
    <EnvironmentProvider environment={environment}>
      <React.Suspense fallback={<LoadingIndicator />}>
        <ArtistView />
      </React.Suspense>
    </EnvironmentProvider>
  )
}

function ArtistView() {
  const data = usePreloadedQuery(artistsQuery, artistsQueryReference);
  return (
    <>
      <Name>{data?.artist?.name}</Name>
      {data?.artist && <ArtistCard artist={data?.artist} />}
    </>
  );
}

フラグメント

ステップ2は、Relayによって駆動されるReactコンポーネントのツリーをレンダリングすることです。コンポーネントは、フラグメントを使用してデータの依存関係を宣言し、 useFragment.

を呼び出すことによって、Relayストアからデータを読み取ります。フラグメントとは、GraphQL型（Artistなど）に関連付けられたGraphQLのスニペットであり、その型のアイテムから何をデータを読み取るかを指定します。

useFragmentは、フラグメントリテラルとフラグメント参照の2つのパラメータを取ります。フラグメント参照は、 そのデータを読み取るどのエンティティを指定します。

フラグメントは単独でフェッチすることはできません。代わりに、最終的には親クエリに含める必要があります。Relayコンパイラは、そのようなフラグメントで宣言されたデータの依存関係が、その親クエリの一部としてフェッチされるようにします。


import React from "react";
import { graphql, useFragment} from "react-relay";

export default function ArtistCard(props) {
  const {href, image, bio} = useFragment(
    graphql`
      fragment ArtistHeader_artist on Artist {
        href
        bio
        image {
          url
        }
      }
    `,
    props.artist
  );
  const imageUrl = image && image.url;

  return (
    <Card>
      <Link href={href}>
        <Image imageUrl={imageUrl} />
        <Bio>{bio}</Bio>
      </Link>
    </Card>
  );
}

GraphQLのベストプラクティスを組み込み済み

Relayは、GraphQLのベストプラクティスを適用し、それに依存しています。Relayの機能を最大限に活用するには、GraphQLサーバーがこれらの標準プラクティスに準拠している必要があります。

フラグメント

GraphQL フラグメント は、特定のGraphQL型に対して再利用可能なフィールドの選択です。他のフラグメントに含めるか、GraphQLクエリの一部として含めることで構成できます。

Relayは、フラグメントを使用してコンポーネントのデータ要件を宣言し、データ要件をまとめて構成します。

ガイド付きツアーをご覧ください

コネクション

GraphQL コネクション は、GraphQLでデータのリストを表現するためのモデルであり、任意の方向に簡単にページネーションできるようにするだけでなく、豊富な関係データをエンコードできるようにするものです。

GraphQLコネクションは、 GraphQLでのページネーションのベストプラクティスと見なされており、GraphQLサーバーがそれらをサポートしている限り、Relayはこれらをファーストクラスでサポートします。

をご覧ください コネクション ドキュメント

グローバルオブジェクト識別

Relayは グローバルオブジェクト識別 に依存して、信頼性の高いキャッシュと再フェッチを提供し、オブジェクトの更新を自動的にマージできるようにします。

グローバルオブジェクト識別とは、Node GraphQLインターフェイスを使用して構築された、すべての型のスキーマ全体でグローバルに一意のIDを提供することです。

オブジェクト識別ドキュメントをご覧ください

柔軟なミューテーション

データ変更を記述

GraphQLミューテーションを使用すると、1回のラウンドトリップでミューテーションの実行によって影響を受けるデータを宣言的に定義およびリクエストでき、Relayはそれらの変更を自動的にマージして伝播します。

自動更新

グローバルオブジェクト識別を使用すると、Relayは、影響を受けるオブジェクトのミューテーション更新を自動的にマージし、影響を受けるコンポーネントのみを更新することができます。

更新を自動的にマージできないより複雑なケースの場合、Relayはミューテーションに応じてローカルRelayデータを手動で更新するためのAPIを提供します。

優れたUXのために設計

RelayのミューテーションAPIは、楽観的更新を行い、ユーザーに即座のフィードバックを表示したり、エラー処理やミューテーションが失敗した場合の変更の自動的な取り消しをサポートします。

事前安全性

安心感

Relayプロジェクトに取り組む際、Relayコンパイラは、プロジェクト全体の整合性とGraphQLスキーマに対する正確性を確保するようにガイドします。

最適化されたランタイム

Relayは、ブラウザやデバイスでのランタイムを可能な限り効率的にするために、ビルド時に多くの作業（クエリの処理や最適化など）を事前に計算します。

型安全性

Relayは、Relayを使用する各Reactコンポーネントに対して、各コンポーネントが受信するデータを表すFlowまたはTypeScript型を生成します。これにより、正しさが保証されていることを知って、より迅速かつ安全に変更を加えることができます。

Relayは自分に適しているか？

段階的に採用

すでにReactコンポーネントをレンダリングできる場合は、ほとんど完了しています。RelayにはBabelプラグインが必要であり、Relayコンパイラも実行する必要があります。

Create React AppおよびNext.jsですぐにRelayを使用できます。

複雑さを明示的にする

Relayは、チームとアプリの複雑さに合わせて拡張できる独立したコンポーネントのアーキテクチャをサポートするために、少し多めの初期設定とツールを必要とします。

これらの原則を一度学んだら、データのパイプラインではなく、ビジネスロジックの作業により多くの時間を費やしてください。

Facebook規模で使用

RelayはFacebookの重要なインフラストラクチャであり、数万のコンポーネントがそれを使用しています。RelayはGraphQLと連携して構築され、改善に取り組むフルタイムのスタッフがいます。

大規模なアプリだけのものではない

エラー検出を開発時に移行するためにFlowまたはTypeScriptを使用することを信じているチームであれば、Relayはおそらく適しています。

そうでない場合、RelayのキャッシュとUIベストプラクティスの多くを個別に再作成することになるでしょう。

誇りを持って他の場所で使用

Relayは元々FacebookアプリのReact Nativeセクション用に作成されたものであり、社内外の他のチームによって採用され、改善されてきました。

その他のRelayユーザー