React Native的React Query應用

React Query是一個功能強大的數據獲取和狀態管理庫，它可以幫助你更輕松地處理應用程序中的數據流。在React Native中，你可以使用React Query來管理應用程序的數據，包括從API獲取數據、緩存數據、更新數據等。

要使用React Query構建一個應用程序，你需要遵循以下步驟：

1. 安裝React Query庫：首先，你需要在你的React Native項目中安裝React Query庫。你可以使用npm或yarn來安裝它。
2. 創建QueryClient：在你的應用程序中創建一個QueryClient實例。這個實例將負責管理你的應用程序中的所有查詢。
3. 定義查詢：使用React Query提供的API來定義你的查詢。你可以指定要獲取的數據的URL、查詢參數、緩存策略等。
4. 連接組件：在你的應用程序中使用React Query提供的useQuery或useMutation鉤子來連接查詢。這些鉤子將允許你在組件中執行查詢、獲取數據、處理錯誤等。
5. 更新UI：一旦你的組件連接到查詢，你就可以使用返回的數據來更新UI。你可以使用React Native提供的組件來顯示數據，例如列表、卡片等。

下面是一個簡單的React Native應用程序示例，它使用React Query從API獲取數據并顯示在列表中：

import React from 'react';
import { View, Text, FlatList } from 'react-native';
import { useQuery } from 'react-query';

const API_URL = 'https://api.example.com/data';

function App() {
  const { isLoading, data, error } = useQuery('data', fetchData);

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

  return (
    <View style={{ flex: 1, padding: 20 }}>
      <FlatList
        data={data}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <View style={{ padding: 10, borderBottomWidth: 1, borderBottomColor: '#ccc' }}>
            <Text>{item.name}</Text>
          </View>
        )}
      />
    </View>
  );
}

function fetchData() {
  return fetch(API_URL);
}

export default App;

在這個示例中，我們首先導入了必要的React Native組件和React Query鉤子。然后，我們定義了一個API_URL常量來存儲我們要從API獲取數據的URL。

在App組件中，我們使用useQuery鉤子來定義一個名為data的查詢。我們傳遞了一個fetchData函數作為查詢的函數，該函數使用fetch API從API獲取數據。

接下來，我們使用isLoading、data和error屬性來處理查詢的不同狀態。如果查詢正在加載，我們顯示“Loading…”。如果查詢失敗，我們顯示錯誤消息。

最后，我們使用FlatList組件來顯示從API獲取的數據。我們將數據渲染為一個包含文本的列表項。

這只是一個簡單的示例，展示了如何在React Native中使用React Query來獲取和顯示數據。你可以根據自己的需求擴展這個示例，添加更多的查詢、緩存策略和UI組件。