使用apollo-link在任何突变时获取查询

Question

我正在开发一个应用程序，其中有一个嵌套了资产树的项目。在后端，当孙子(或孙孙)的一个子代更新时，项目的更改日期也会更新。

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

一种解决方案是使用refetchQueries选项。然而，这意味着我需要在使用useMutation钩子的所有部分中实现这个refetchQueries选项，这会导致大量代码重复，并有可能被其他开发人员(4人小组)忘记。一个更好的选择是创建一个自定义钩子，它包装了useMutation钩子，但开发人员仍然需要使用它。

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

谢谢你的帮忙!

Answer 1

使用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返回实现useMutation的update回调的组件，该组件接收更新有效负载。这将避免重复，并封装与您的请求一致的公共缓存逻辑。正如您所提到的，自定义钩子可以包装并用来代替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)