在 React 中处理多个 GraphQL 订阅事件

Question

这让我抓狂，我似乎找不到其他人遇到同样的问题，这可能意味着我遗漏了一些基本的东西。

我正在使用 AWS Amplify 并有一个 GraphQL 端点，我在 React 项目中订阅了一些事件（更新、创建、删除）。我有一个 table 绑定到保存我的数据的列表对象。

当多个事件进入时，我的状态由于异步而变得一团糟，我的 table 最终丢失了一整块数据。我已经尝试使用 useReducer 来查看这是否有所作为，但事实并非如此。我觉得我需要一种方法来对订阅事件进行排队然后使用它们，这让我想知道这是否不是标准做法，或者我是否遗漏了一些基本的东西。

这是我的减速器。

const reducer = (state, action) => {
   switch (action.type) {
      case "ADD":
         return { ...state, productList: action.payload };
      case "UPDATE":
         //update code
      case "DELETE":
         //delete code
      default:
         return state;
   }
};

我在组件中的初始加载和设置

   const [state, despatch] = useReducer(reducer, { productList: [] });

   useEffect(() => {
      fetchData()
         .then((result) => {
            despatch({ type: "ADD", payload: result });
         })
         .catch((err) => console.log(err));

      setupSubscriptions();
      return () => unsubscribe();
   }, []);

我的订阅

   function setupSubscriptions() {
      subscriptionOnCreateProduct = API.graphql(graphqlOperation(onCreateProduct)).subscribe({
         next: (e) => {
            const product = e.value.data.onCreateProduct;
            despatch({ type: "ADD", payload: product });
         },
      });
...

终于是我的渲染图了

return (
...
{state.productList.map((product) => (
  // Display my data
))}

Answer 1

我很沮丧，所以匆忙发布了这个。

我需要为初始加载和订阅事件添加新项目时设置不同的操作类型。

我的减速器现在看起来像这样...

const reducer = (state, action) => {
   switch (action.type) {
      case "INIT_LOAD":
         return { ...state, productList: action.products };
      case "ADD":
         return { ...state, productList: [...state.productList, action.product] };
      case "UPDATE":

      ...

      default:
         return state;
   }
};

在 React 中处理多个 GraphQL 订阅事件

Handling multiple GraphQL subscription events in React

amazon-web-services

reactjs

graphql

aws-amplify