Apollo 客户端 useMutation 挂钩中的 refetchQueries 问题

Posted 2023-03-08

【中文标题】Apollo 客户端 useMutation 挂钩中的 refetchQueries 问题

【英文标题】：Issue with refetchQueries in the Apollo Client useMutation hook

【发布时间】：2021-10-06 14:45:58

【问题描述】：

我在尝试在我的 useMutation 挂钩中定义 refetchQueries 时遇到以下错误。

Type 'DocumentNode' is not assignable to type 'string | PureQueryOptions'.  
Property 'query' is missing in type 'DocumentNode' but required in type 'PureQueryOptions'.

我不确定我做错了什么，因为官方的 Apollo 文档有点不清楚，而且我在谷歌搜索时找不到任何优先级。

据我了解，我的 GraphQL 查询中缺少属性 query。我是否将正确的值传递给refetchQueries？我认为我做得对，但我不知道为什么它抱怨query 不是其中的一部分。

代码

import  useMutation, useQuery  from '@apollo/client';
import  GET_CUSTOMERS, MARK_AS_VIP  from './queries';

export default function Customers() 
  const [ markAsVIP,  data: vips, loading: vipLoading, error: vipError  ] = useMutation( MARK_AS_VIP );
  const  loading, error, data: getCustomerResp  = useQuery( GET_CUSTOMERS );

  const handleMarkAsVIP = ( customerId: string ) => 
    markAsVIP( 
      variables:  id: customerId, tags: [ 'VIP' ] ,
      refetchQueries: [
        GET_CUSTOMERS, // error shows here
        'getCustomers'
      ]
     )
  

查询

import  gql  from '@apollo/client';

export const GET_CUSTOMERS = gql`
  query getCustomers 
      customers( first: 50 ) 
          edges 
              cursor
              node 
                  id
                  displayName
                  tags
              
          
      
  
  `;

export const MARK_AS_VIP = gql`
    mutation markAsVIP( $id: ID!, $tags: [String!]! ) 
        tagsAdd( id: $id, tags: $tags ) 
            node 
                id
            
            userErrors 
                field
                message
            
        
    
`;

【参考方案1】：

自己找到了答案。尽管它看起来不像文档中的任何内容，但以下内容有效：

const handleMarkAsVIP = ( customerId: string ) => 
  markAsVIP(
    variables:  id: customerId, tags: [ 'VIP' ] ,
    refetchQueries: [
        query: GET_CUSTOMERS ,
      'getCustomers'
    ]
  )

我认为它说属性 query 丢失了，所以我只是尝试使用 query 属性传递一个对象，认为它永远不会起作用，但它确实如此。

【讨论】：

谢谢！我有完全相同的问题，但无法弄清楚：D

存在一个问题，即您的 GET_CUSTOMERS 查询在没有最近提供的一组变量的情况下也能正常工作。

谢谢...我很惊讶没有在官方文档中看到这一点。