React Query を使用して Expo React Native プロジェクトをセットアップする方法

多くの場合、外部 API との対話が不可欠ですが、React Query を使用すると、データを取得する複雑さではなくデータに集中できるため、これが簡素化されます。このガイドでは、Expo を使用して React Native プロジェクトを設定し、それを React Query と統合する手順を説明します。

ステップ 1: Expo プロジェクトをセットアップする

まず、Expo CLI をインストールし、新しいプロジェクトを作成します。すでにプロジェクトがある場合は、次のステップに進みます。

• Expo CLI をインストールします:

  npm install -g expo-cli

• 新しいプロジェクトを作成します:

  expo init my-react-native-query-app

ニーズに基づいてテンプレートを選択してください。

ステップ 2: React Query と依存関係をインストールする

React Query は、React Native アプリのサーバー状態の管理に強力です。

• React Query をインストールします:

  npm install @tanstack/react-query

• 追加の依存関係をインストールします:

  npx expo install @react-native-community/netinfo

ステップ 3: ヘルパー関数を作成する

プロジェクトのルートにあるフック フォルダーに 3 つのカスタム フックを作成します。

1. useAppState.ts:

   import NetInfo from '@react-native-community/netinfo';
   import { onlineManager } from '@tanstack/react-query';

   onlineManager.setEventListener((setOnline) => {
     return NetInfo.addEventListener((state) => {
       setOnline(!!state.isConnected);
     });
   });

これにより、アプリがインターネットに再接続したときに自動再取得が有効になります。

1. OnlineManager.ts を使用:

   import { useEffect } from 'react';
   import { AppState, Platform } from 'react-native';
   import { focusManager } from '@tanstack/react-query';

   function onAppStateChange(status: AppStateStatus) {
     if (Platform.OS !== 'web') {
       focusManager.setFocused(status === 'active');
     }
   }

   useEffect(() => {
     const subscription = AppState.addEventListener('change', onAppStateChange);
     return () => subscription.remove();
   }, []);

これにより、アプリがアクティブなときにアプリの状態が更新されます。

1. RefreshOnFocus.ts を使用:

   import React from 'react';
   import { useFocusEffect } from '@react-navigation/native';

   export function useRefreshOnFocus<T>(refetch: () => Promise<T>) {
     const firstTimeRef = React.useRef(true);

     useFocusEffect(
       React.useCallback(() => {
         if (firstTimeRef.current) {
           firstTimeRef.current = false;
           return;
         }

         refetch();
       }, [refetch]),
     );
   }

このカスタム フックは、画面がフォーカスされているときに再取得をトリガーします。

ステップ 4: ルート ファイルに関数を実装する

メインルートファイルで、次を設定します:

import {
  QueryClient,
  QueryClientProvider,
  focusManager,
} from "@tanstack/react-query";
import { AppStateStatus, Platform } from "react-native";
import { useOnlineManager } from "@/hooks/query/useOnlineManager";
import { useAppState } from "@/hooks/query/useAppState";

export default function RootLayout() {
  function onAppStateChange(status: AppStateStatus) {
    if (Platform.OS !== "web") {
      focusManager.setFocused(status === "active");
    }
  }

  const queryClient = new QueryClient({
    defaultOptions: { queries: { retry: 2 } },
  });

  useOnlineManager();
  useAppState(onAppStateChange);

  return (
    <QueryClientProvider client={queryClient}>
      {Rest of your project}
    </QueryClientProvider>
  );
}

ステップ 5: 開発サーバーを起動する

プロジェクト ディレクトリに移動し、Expo 開発サーバーを起動します。

expo start

Expo では、Expo Go アプリを介して、または開発アプリを構築することで、迅速なテストが可能です。開発ビルドの作成の詳細については、Expo のドキュメントを参照してください。

結論

React Query を使用して Expo React Native プロジェクトをセットアップすると、状態管理と API のやり取りが簡素化されます。キャッシュやバックグラウンド更新などの React Query の強力な機能を活用することで、複雑なデータ取得の手間を省き、データに集中することができます。

コーディングを楽しんでください! ??‍? ??‍? ?

以上がReact Query を使用して Expo React Native プロジェクトをセットアップする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。