React Apolloのhooks対応のベータ版が公開！

はじめに

React Apolloのhooks対応は待ち望まれていました。これまでreact-apollo-hooksを使っている人も多いと思いますが、公式のサポートに向けてどうなっていくのでしょうか。

ベータ版

https://www.npmjs.com/package/@apollo/react-hooks
にあること以上のものは分かりません。READMEもなし。ソースもGitHubからたどれるのかよく分からずです。

コードを眺める

まずはTypeScriptの型を見てみましょう。複数のファイルからまとめます。

import { QueryResult } from '@apollo/react-common';
import { DocumentNode } from 'graphql';                   
import { OperationVariables } from '@apollo/react-common';

export declare function useQuery(query: DocumentNode, props?: any): QueryResult<any, any>;

export declare function useMutation(mutation: DocumentNode, props?: any): any;

export declare function useSubscription<TData = any, TVariables = OperationVariables>(subscription: DocumentNode, props?: any): any;      

見慣れた感じです。ちなみに、react-apollo-hooksの型と比較するとだいぶシンプルです。anyだらけ。

実態のJSコードはコンパイルされたものなので多少読みにくいですが、読めないことはないです。結局のところ、 @apollo/react-common が本体で今までとは構成が変わっているようです。こちらのコードはちょっと読みにくいです。

サンプルコード

利用例としては、
https://github.com/peggyrayzis/redux-to-graphql
と
https://codesandbox.io/s/5v1ol0nkjx
にあるようです。

後者のコードの一部を抜き出すと、

export function RocketInventoryList() {
  const { loading, data } = useQuery(GET_ROCKET_INVENTORY);
  return (
    <Row className="rocket-inventory-list mt-4">

のような感じです。直感的です。この例だけの範囲ではreact-apollo-hooksと変わらないのではないでしょうか。

おわりに

あまりに普通すぎて、特に気になるところもなかったです。README等が整備されればすぐに使えるようになるのではないでしょうか。期待感はありますが、リリースがいつ頃になるかは全く分からない状況です。