1

我正在开发一个应用程序，其中有带有嵌套资产树的项目。在后端，当孙子（或孙子）的孩子之一更新时，项目的更改日期会更新。

在 react-apollo 中，我设置了所有查询，以便返回更新的对象，并使用更新的数据更新 apollo 的缓存。但我也想更新项目的更改日期（可能是父母、祖父母等）。

一种解决方案是使用 refetchQueries 选项。但是，这意味着我需要在使用 useMutation 挂钩的所有部分中实现此 refetchQueries 选项，这会导致大量代码重复以及可能被其他开发人员（4 人团队）遗忘的风险。更好的选择是创建一个自定义挂钩来包装 useMutation 挂钩，但开发人员仍然需要使用它。

所以我现在正在考虑为此使用 apollo-link，这将影响执行的所有突变。但是，我不知道是否可以将查询添加到操作中，或者将查询排队，如果可能的话 - 怎么做？

谢谢你的帮助！

4

1 回答 1

0

使用 ApolloLink，您可以生成链接afterware以解析返回的响应，并在适当的情况下有条件地更新缓存。

    import { ApolloLink } from "apollo-link";
    import { createHttpLink } from "apollo-link-http";
 
    const httpLink = createHttpLink({ uri: "/graphql" });
    const updateDateCacheLink = new ApolloLink((operation, forward) => {
       return forward(operation).map(response => {
           const context = operation.getContext();
           const { response: { headers } } = context;
    
           /* conditionally update cache */     

         return response;
     });
   });
 
    // use with apollo-client
    const link = updateDateCacheLink.concat(httpLink);

或者，您可以考虑使用 HOC 返回一个组件，该组件实现 的update回调useMutation，该回调接收更新有效负载。这将避免重复并封装与您的请求一致的通用缓存逻辑。正如您所指出的，自定义钩子可以包装并用于代替 useMutation（未在下面显示）。

const withMutationCacheUpdate = args => Wrapped => {
  return function(props) {
    const [updateData] = useMutation(UPDATE_DATA, {
      update(cache, { data: { newData } }) {
        // Read relevant data from cache with cache.readQuery,
        // then update using cache.writeQuery, cache.writeFragment 
       // or cache.modify as appropriate with returned payload and possibly args
      },
    })
    return <Wrapped {...props} updateData={updateData} />
  }
}

const config = {...}
const YourComponent = props => { ... }
const YourWrappedComponent = withMutationCacheUpdate(config)(YourComponent)
于 2020-10-16T06:06:52.207 回答