React Native與GraphQL Apollo的集成

React Native 和 GraphQL Apollo 的集成是一個強大的組合，它可以為您的移動應用程序提供高效、靈活的數據獲取和狀態管理。以下是實現這一集成的步驟：

1. 設置開發環境：

• 確保您已經安裝了 Node.js 和 npm。
• 使用 create-react-native-app 創建一個新的 React Native 項目（如果您還沒有一個）。
• 安裝 Apollo Client 及其必要的依賴項：apollo-client graphql react-apollo。

2. 配置 Apollo Client： 在您的 React Native 項目中，創建一個新的文件（例如 apolloClient.js），并設置 Apollo Client：

import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';

const httpLink = new HttpLink({ uri: 'https://your-graphql-endpoint.com/graphql' });

const cache = new InMemoryCache();

const apolloClient = new ApolloClient({
  link: httpLink,
  cache,
});

export default apolloClient;

請確保將 https://your-graphql-endpoint.com/graphql 替換為您的 GraphQL 服務器的實際端點。

3. 在 React Native 應用中使用 Apollo Client： 在您的 React Native 組件中，您可以使用 react-apollo 庫來執行 GraphQL 查詢和突變。首先，安裝 react-apollo：

npm install react-apollo graphql

然后，在您的組件中引入 Apollo Provider 和相關的查詢/突變組件：

import React from 'react';
import { ApolloProvider, gql } from 'react-apollo';
import apolloClient from './apolloClient';

const GET_ITEMS = gql`
  query GetItems {
    items {
      id
      name
    }
  }
`;

const ItemList = () => (
  <ApolloProvider client={apolloClient}>
    <GetItemList />
  </ApolloProvider>
);

export default ItemList;

在上面的示例中，我們定義了一個名為 GetItemList 的無狀態組件，它將執行 GET_ITEMS 查詢并顯示結果。

4. 執行查詢和突變： 在 GetItemList 組件中，您可以使用 useQuery 和 useMutation 鉤子來執行查詢和突變。例如：

import React from 'react';
import { useQuery } from 'react-apollo';
import gql from 'graphql';

const GET_ITEMS = gql`
  query GetItems {
    items {
      id
      name
    }
  }
`;

const ItemList = () => {
  const { loading, error, data } = useQuery(GET_ITEMS);

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

  return (
    <View>
      {data.items.map(item => (
        <Text key={item.id}>{item.name}</Text>
      ))}
    </View>
  );
};

export default ItemList;

對于突變，您可以使用 useMutation 鉤子，并在組件中調用它來執行更新操作。例如：

import React from 'react';
import { useMutation } from 'react-apollo';
import gql from 'graphql';

const ADD_ITEM = gql`
  mutation AddItem($name: String!) {
    addItem(name: $name) {
      id
      name
    }
  }
`;

const ItemForm = () => {
  const [addItem] = useMutation(ADD_ITEM);

  const handleSubmit = event => {
    event.preventDefault();
    addItem({
      variables: { name: event.target.name },
      update(cache, { data }) {
        const existingItems = cache.readQuery({ query: GET_ITEMS });
        const newItems = existingItems.items.concat([data.addItem]);
        cache.writeQuery({ query: GET_ITEMS, data: { items: newItems } });
      },
    });
  };

  return (
    <View>
      <form onSubmit={handleSubmit}>
        <input type="text" name="name" placeholder="Add item" />
        <button type="submit">Add</button>
      </form>
    </View>
  );
};

export default ItemForm;

以上示例展示了如何在 React Native 應用中集成 React Native 和 GraphQL Apollo，包括執行查詢、突變以及狀態管理。您可以根據自己的需求進一步擴展和定制這些示例。