useMutation钩子的update函数获取mutation结果为undefined如何解决

你的代码存在3处核心错误，按优先级排序如下：

• 变量名覆盖冲突
  你调用useMutation返回的突变函数被命名为addTodo，后续又自定义了同名的封装函数const addTodo = (text: string) => {}，作用域内的重名变量会覆盖原突变函数，甚至会出现自定义函数递归调用自身的死循环问题，导致逻辑执行异常。
• 入参变量名不匹配
  你定义的ADD_TODO mutation声明的入参变量为$text，但实际调用时传入的variables对象key为type，和约定的入参名不匹配，会导致服务端无法正确接收参数，返回空结果。
• 点击事件语法错误
  按钮onClick回调里的addTodo('Placeholder') : undefined属于语法错误，可选链的fallback语法应为?而非:。

修正后的完整代码 #

// 按钮部分
<button
  onClick={() => {
    addTodo?.('Placeholder')
  }}
></button>

// mutation逻辑部分
const ADD_TODO = gql`
  mutation AddTodo($text: String!) {
      addTodo(text: $text) {
         id
         text
   }
}
`;

// 重命名useMutation返回的函数避免重名
const [mutateAddTodo] = useMutation(ADD_TODO, {
     update(cache, { data }) {
        // 先打印完整data确认结构，避免字段名拼写错误
        console.log('完整返回结果', data);
        console.log('MUTATION DATA IS ', data?.addTodo);
      }
});

const addTodo = (text: string) => {
  // 修正variables的key为text，和mutation定义匹配
  mutateAddTodo({ variables: { text: text } });
}

额外排查建议 #

如果修正后仍有问题，先打开Network面板查看GraphQL请求的实际响应体，确认返回的data下的根字段是否确实为addTodo，有无大小写、拼写偏差。

内容的提问来源于stack exchange，提问作者K.Shikha