Edited at

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等が整備されればすぐに使えるようになるのではないでしょうか。期待感はありますが、リリースがいつ頃になるかは全く分からない状況です。