メインコンテンツまでスキップ

HTTP API通信

このアプリでは、HTTP通信に以下のライブラリを使用します。

注記

React Queryは現時点（2022年2月）で最新のv3系を使用します。

React Queryとは​

React Queryとは、Reactフックを用いたデータフェッチ用ライブラリです。 React Queryを用いることで次のことが実現できます。

  • サーバ状態の管理（フェッチ、キャッシュ、同期、更新）
  • 宣言的なエラーハンドリング

axiosとReact Queryを用いてHTTP API通信する例は、以下のコードです。

const queryCache = new QueryCache();
const queryClient = new QueryClient({ queryCache });

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <View style={styles.container}>
        <Example />
      </View>
    </QueryClientProvider>
  );
}

type ResponseData = {
  name: string;
  description: string;
};

function Example() {
  const { isLoading, error, data } = useQuery<ResponseData, AxiosError>("repoData", () =>
    axios
      .get<ResponseData>("https://api.github.com/repos/Fintan-contents/mobile-app-crib-notes")
      .then((res) => res.data)
  );

  if (isLoading) return <Text>Loading...</Text>;
  if (error) return <Text>Error: {error.message}</Text>;

  return (
    <>
      <Text>{data?.name}</Text>
      <Text>{data?.description}</Text>
    </>
  );
}

このコードから分かるとおり、HTTP API通信をフックで宣言的に記述でき、通信状態に応じたシンプルなレンダリング定義が可能となります。

React Queryの仕組み​

React Queryを使用すると、エラーのハンドリングやローディング状態などの管理が楽になり、効率良く開発ができます。 その反面、React Queryを使いこなすには最低限の学習が必要です。React Queryの仕組みを理解せずに使用すると、開発で思わぬ落とし穴に遭遇する可能性があります。

そこで、ここでは簡単にReact Queryの仕組みについて紹介します。 以下の図は、React Queryの代表的な機能であるuseQueryフックがどのように動作するかを表したものです。

React Queryの仕組み

useQueryフックを呼びだすと、QueryObserverが作成されます。QueryObserverは、コンポーネントのstateとして管理されます。 QueryObserverはQueryCacheからQueryを取得します。QueryCacheはクエリキーに対するQueryがキャッシュにあればそれを返し、なければ生成します。 QueryObserverはQueryの変更を観察し、変更があればそれをリスナー（useQuery内部の関数）に通知します。 リスナーは、Queryの状態変更を受けてコンポーネントを再レンダリングします。

上記説明から分かる通り、React QueryはクエリキーでQueryを一元的に管理します。 複数のコンポーネントから同じクエリキーを使用してuseQueryフックを呼びだすと、1つのQueryの状態をそれぞれのコンポーネントが共有することに注意してください。

に最終更新