React與GraphQL數據同步工作流

React與GraphQL數據同步的工作流涉及多個步驟，包括設置GraphQL客戶端、創建查詢和變更、執行請求以及處理響應。以下是一個基本的工作流概述：

1. 設置GraphQL客戶端

首先，你需要設置一個GraphQL客戶端來與服務器通信。常用的GraphQL客戶端包括Apollo Client、Relay等。以下是使用Apollo Client的示例：

npm install @apollo/client graphql

然后，配置Apollo Client：

import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';

const httpLink = new HttpLink({
  uri: 'https://api.example.com/graphql', // 你的GraphQL服務器地址
});

const cache = new InMemoryCache();

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

2. 創建查詢和變更

接下來，你需要創建GraphQL查詢和變更來獲取和修改數據。以下是創建查詢和變更的示例：

// 查詢示例
const GET_ITEMS = gql`
  query GetItems {
    items {
      id
      name
    }
  }
`;

// 變更示例
const ADD_ITEM = gql`
  mutation AddItem($name: String!) {
    addItem(name: $name) {
      id
      name
    }
  }
`;

3. 執行請求

使用Apollo Client執行查詢和變更：

import { useQuery, useMutation } from '@apollo/client';

function App() {
  const { loading, error, data } = useQuery(GET_ITEMS);

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

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

function AddItemForm() {
  const [name, setName] = React.useState('');

  const [additemMutation] = useMutation(ADD_ITEM);

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await additemMutation({ variables: { name } });
      setName(''); // 清空輸入框
    } catch (error) {
      console.error('Error adding item:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <button type="submit">Add Item</button>
    </form>
  );
}

4. 處理響應

在上面的示例中，useQuery和useMutation鉤子分別用于處理查詢和變更的響應。你可以根據需要進一步處理這些響應，例如更新本地狀態、顯示錯誤信息等。

總結

通過以上步驟，你可以實現React與GraphQL數據同步的基本工作流。這個工作流包括設置GraphQL客戶端、創建查詢和變更、執行請求以及處理響應。你可以根據具體需求進一步擴展和優化這個工作流。