「relay-hooks」タグの付いた投稿1件

最も開発者フレンドリーなRelayであるRelay Hooksをリリースし、本日OSSコミュニティに提供できることを非常に嬉しく思います！Relay Hooksは、React Hooksを使用してGraphQLデータを取得および管理するための、新しく再考されたAPIのセットです。

新しいAPIは、既存のコンテナベースのAPIと完全に互換性があります。新しいコードはRelay Hooksを使用して記述することを推奨しますが、既存のコンテナを新しいAPIに移行することはオプションであり、コンテナベースのコードは引き続き動作します。

これらのAPIは新しくリリースされたものですが、テストされていないわけではありません。書き直されたFacebook.comは完全にRelay Hooksによって動いており、これらのAPIは2019年半ばからFacebookでのRelayの推奨される使用方法でした。

さらに、書き直されたガイド付きツアーと、Relayの開発当初から学んだ、保守可能でデータ駆動型のアプリケーションを構築するためのベストプラクティスをまとめた更新されたドキュメントもリリースしています。

Relayを始めるのが私たちが望むほど簡単になるまでにはまだ道のりがありますが、これらのステップがRelay開発者のエクスペリエンスを大幅に向上させると信じています。

何がリリースされたのか？​

GraphQLデータを扱うためのReact HooksベースのAPIのセットであるRelay Hooksをリリースしました。また、fetchQueryのより安定したバージョンや、RelayでgetDataIDを使用してオブジェクト識別子をカスタマイズする機能など、その他の改善点も提供しました（これは、サーバーにグローバルに一意なIDがない場合に役立ちます）。

リリースされた内容の完全なリストについては、リリースノートを参照してください。

Hooks APIの利点は何ですか？​

新しくリリースされたAPIは、少なくとも次の点で開発者のエクスペリエンスを向上させます。

• クエリの取得、フラグメントでのデータのロード、ページネーション、再フェッチ、ミューテーション、およびサブスクリプションのためのHooksベースのAPIは、一般的に、同等のコンテナベースのソリューションよりもコード行数が少なく、間接参照が少なくなります。
• これらのAPIは、FlowとTypescriptのより完全なカバレッジを備えています。
• これらのAPIは、再フェッチおよびページネーションクエリの生成など、エラーが発生しやすいタスクを自動化するためにコンパイラ機能を利用します。
• これらのAPIには、フェッチポリシーを構成する機能が付属しており、ストアからクエリをいつ満たす必要があるか、またネットワークリクエストをいつ行うかを決定できます。
• これらのAPIを使用すると、コンポーネントがレンダリングされる前にデータのフェッチを開始できます。これは、コンテナベースのソリューションでは達成できませんでした。これにより、ユーザーにデータがより早く表示されます。

次の例は、新しいAPIの利点のいくつかを示しています。

異なる変数でフラグメントを再フェッチする​

まず、Hooks APIを使用して異なる変数でフラグメントを再フェッチする方法を見てみましょう。

type Props = {
  comment: CommentBody_comment$key,
};

function CommentBody(props: Props) {
  const [data, refetch] = useRefetchableFragment<CommentBodyRefetchQuery, _>(
    graphql`
      fragment CommentBody_comment on Comment
      @refetchable(queryName: "CommentBodyRefetchQuery") {
        body(lang: $lang) {
          text
        }
      }
    `,
    props.comment,
  );

  return <>
    <CommentText text={data?.text} />
    <Button
      onClick={() =>
        refetch({ lang: 'SPANISH' }, { fetchPolicy: 'store-or-network' })
      }>
    >
      Translate
    </Button>
  </>
}

これを同等のコンテナベースの例と比較してください。Hooksベースの例は、行数が少なく、開発者が再フェッチクエリを手動で記述する必要がなく、再フェッチ変数の型チェックが行われ、クエリがストア内のデータから満たされる場合はネットワークリクエストを発行しないことを明示的に示しています。

コンポーネントをレンダリングする前にデータのフェッチを開始する​

新しいAPIを使用すると、コンポーネントがレンダリングされる前にデータのフェッチを開始することで、開発者はユーザーにコンテンツをより迅速に表示できます。この方法でのデータのプリフェッチは、コンテナベースのAPIでは不可能です。次の例を考えてみましょう。

const UserQuery = graphql`
  query UserLinkQuery($userId: ID!) {
    user(id: $userId) {
      user_details_blurb
    }
  }
`;

function UserLink({ userId, userName }) {
  const [queryReference, loadQuery] = useQueryLoader(UserQuery);

  const [isPopoverVisible, setIsPopoverVisible] = useState(false);

  const maybePrefetchUserData = useCallback(() => {
    if (!queryReference) {
      // calling loadQuery will cause this component to re-render.
      // During that re-render, queryReference will be defined.
      loadQuery({ userId });
    }
  }, [queryReference, loadQuery]);

  const showPopover = useCallback(() => {
    maybePrefetchUserData();
    setIsPopoverVisible(true);
  }, [maybePrefetchUserData, setIsPopoverVisible]);

  return <>
    <Button
      onMouseOver={maybePrefetchUserData}
      onPress={showPopover}
    >
      {userName}
    </Button>
    {isPopoverVisible && queryReference && (
      <Popover>
        <React.Suspense fallback={<Glimmer />}>
          <UserPopoverContent queryRef={queryReference} />
        </React.Suspense>
      </Popover>
    )}
  </>
}

function UserPopoverContent({queryRef}) {
  // The following call will Suspend if the request for the data is still
  // in flight:
  const data = usePreloadedQuery(UserQuery, queryRef);
  // ...
}

この例では、ローカルキャッシュ内のデータからクエリを満たすことができない場合、ユーザーがボタンの上にマウスを置いたときにネットワークリクエストが開始されます。したがって、ボタンが最終的に押されると、ユーザーはより早くコンテンツを見ることができます。

対照的に、コンテナベースのAPIは、コンポーネントがレンダリングされるときにネットワークリクエストを開始します。

データフェッチのためのHooksとSuspense​

両方の例でSuspenseを使用していることに気付いたかもしれません。

Relay HooksはそのAPIの一部にSuspenseを使用していますが、ReactでのデータフェッチのためのSuspenseの使用に関するサポート、一般的なガイダンス、および要件はまだ準備ができておらず、Reactチームは今後のリリースに向けてこのガイダンスがどうなるかをまだ定義しています。React 17でSuspenseを使用すると、いくつかの制限があります。

それでも、Reactの今後のリリースをサポートするための正しい軌道に乗っていることがわかっているため、Relay Hooksを今リリースしました。RelayのSuspense実装の一部はまだ変更される可能性がありますが、Relay Hooks API自体は安定しています。内部で広く採用されており、1年以上本番環境で使用されています。

このトピックの詳細については、Suspenseの互換性とSuspenseによるローディング状態を参照してください。

今後の展開​

入門ガイド、移行ガイド、ガイド付きツアーをチェックしてください。

感謝​

Relay Hooksのリリースは、Reactデータチームだけの成果ではありませんでした。実現にご協力いただいた貢献者の皆様に感謝いたします。

@0xflotus, @AbdouMoumen, @ahmadrasyidsalim, @alexdunne, @alloy, @andrehsu, @andrewkfiedler, @anikethsaha, @babangsund, @bart88, @bbenoist, @bigfootjon, @bondz, @BorisTB, @captbaritone, @cgriego, @chaytanyasinha, @ckknight, @clucasalcantara, @damassi, @Daniel15, @daniloab, @earvinLi, @EgorShum, @eliperkins, @enisdenjo, @etcinit, @fabriziocucci, @HeroicHitesh, @jaburx, @jamesgeorge007, @janicduplessis, @jaroslav-kubicek, @jaycenhorton, @jaylattice, @JonathanUsername, @jopara94, @jquense, @juffalow, @kafinsalim, @kyarik, @larsonjj, @leoasis, @leonardodino, @levibuzolic, @liamross, @lilianammmatos, @luansantosti, @MaartenStaa, @MahdiAbdi, @MajorBreakfast, @maraisr, @mariusschulz, @martinbooth, @merrywhether, @milosa, @mjm, @morrys, @morwalz, @mrtnzlml, @n1ru4l, @Nilomiranda, @omerzach, @orta, @pauloedurezende, @RDIL, @RicCu, @robrichard, @rsmelo92, @SeshanPillay25, @sibelius, @SiddharthSham, @stefanprobst, @sugarshin, @taion, @thedanielforum, @theill, @thicodes, @tmus, @TrySound, @VinceOPS, @visshaljagtap, @Vrq, @w01fgang, @wincent, @wongmjane, @wyattanderson, @xamgore, @yangshun, @ymittal, @zeyap, @zpao and @zth.

オープンソースプロジェクトrelay-hooksにより、コミュニティはRelayとReact Hooksを試すことができ、私たちにとって貴重なフィードバックの源泉となりました。useSubscriptionフックのアイデアは、そのリポジトリのissueから生まれました。このプロジェクトを推進し、オープンソースコミュニティで重要な役割を果たしてくれた@morrysに感謝します。

ご協力いただきありがとうございます！