URQL Mutation执行后持续处于fetching状态问题排查

核心原因：渲染函数中触发副作用导致无限循环 #

你在组件渲染函数里直接调用executeMutation()，这违反了React渲染函数需保持纯函数的原则，会引发无限循环：

1. 初始渲染满足!fetching && !data && !error条件，调用executeMutation()触发请求，fetching变为true
2. 请求发起后组件重新渲染，进入fetching分支显示加载状态
3. 响应返回后，fetching变为false，但因响应包含errors，error状态被设置
4. 组件再次渲染进入error分支返回null，若父组件触发重新渲染，会再次回到初始条件，重新调用executeMutation()，循环往复导致fetching状态一直无法结束

解决步骤 #

1. 用useEffect触发Mutation（避免渲染时执行副作用）

将executeMutation()移到useEffect中，确保仅在组件挂载或特定依赖变化时执行一次：

import { useEffect } from 'react';

return (
  <Mutation query={updateQuery}>
    {({ fetching, data, error, executeMutation }) => {
      // 仅在组件挂载时执行一次Mutation
      useEffect(() => {
        executeMutation();
      }, [executeMutation]);

      if (error) {
          console.log("uh oh", updateQuery);
          return <p>错误信息：{error.message}</p>;
      }
      if (fetching) {
          console.log("fetching , showing spinner");
          return <Spinner size="lg" />;
      }
      if (data) {
          return <p>{JSON.stringify(data, null, '')}</p>;
      }
      return null;
    }}
  </Mutation>
);

2. 配置errorPolicy获取完整响应数据

URQL默认errorPolicy为"none"，会在响应含错误时将data置为null。若需同时获取data和errors，设置errorPolicy为"all"：

<Mutation 
  query={updateQuery} 
  context={{ errorPolicy: 'all' }}
>
  {/* 组件逻辑 */}
</Mutation>

此时即使响应有错误，data会保留返回的{updateMyCustomer: null}，error会包含错误数组，fetching也会正确变为false。

3. 验证请求是否真正完成

在浏览器网络面板查看Mutation请求状态：

• 若请求始终处于pending状态，需排查服务器端是否存在响应阻塞问题
• 确认响应格式符合GraphQL标准，无语法错误

内容的提问来源于stack exchange，提问作者user254694