React-Apollo-GraphQL 通用查询和突变

Posted 2023-03-08

【中文标题】React-Apollo-GraphQL 通用查询和突变

【英文标题】：React-Apollo-GraphQL Generic Queries and Mutations

【发布时间】：2020-11-04 10:24:47

【问题描述】：

这个问题更多的是关于设计。 在我的重型应用中，想要实现 generic mutation 和 query 操作。 我的第一个想法是实现一个将所有查询或突变封装在一个地方的函数。像这样：

function query(props) 
  const Query = require('dynamic/query/based/on/props.path.gql');
  const  data, loading, ... = useQuery(Query, ...);
  return  data, loading, ... ;

那就用吧

import Query form './query';
function SomeMainFunction(props) 
  cont  data, loading, ... = Query(props);
  return data.map(...);

（类似于突变） 在我看来，即使使用React.memo，这也会导致不必要的重新渲染。 第二种方法是使用useContext。但在这种情况下，我真的不知道如何处理网络状态。意思是有loadingtrue，然后是false。或者useQuery 会在数据到达后通过重新渲染组件来处理这个问题？

当然，第三种解决方案是直接在函数/组件中实现这个逻辑。由于代码拆分，我不想要的东西。

【参考方案1】：

我最终使用了上述设计并正确使用了memo，它解决了我的问题。