能否跨文件访问React Query mutation的状态？

你的核心问题是：默认情况下，每次调用useUpdateAlerts都会生成独立的Mutation实例，导致不同组件拿到的isLoading等状态不共享。以下是两种可行的解决方式：

方案一：通过React Context全局共享Mutation实例 #

将Mutation实例提升到全局Context中，让所有组件消费同一个实例：

1. 创建Context及Provider

// AlertMutationContext.js
import { createContext, useContext } from 'react';
import { useUpdateAlerts } from './path-to-useUpdateAlerts';

const AlertMutationContext = createContext(null);

export const AlertMutationProvider = ({ children }) => {
  const updateAlertsMutation = useUpdateAlerts();
  return (
    <AlertMutationContext.Provider value={updateAlertsMutation}>
      {children}
    </AlertMutationContext.Provider>
  );
};

export const useAlertMutation = () => {
  const context = useContext(AlertMutationContext);
  if (!context) {
    throw new Error('useAlertMutation必须在AlertMutationProvider内部使用');
  }
  return context;
};

2. 修改原自定义Hook

// +/machines/alertMachine.js
import { useAlertMutation } from './AlertMutationContext';

export const useAlertMachine = () => {
  const updateAlertsMutation = useAlertMutation();
  return { updateAlertsMutation };
};

3. 在顶层组件包裹Provider

// App.js
import { AlertMutationProvider } from './AlertMutationContext';

function App() {
  return (
    <AlertMutationProvider>
      {/* 你的应用所有组件都将共享同一个Mutation实例 */}
      <Alert />
    </AlertMutationProvider>
  );
}

4. 在目标组件中使用

import { useAlertMachine } from '+/machines/alertMachine';

const Alert = () => {
  const { updateAlertsMutation } = useAlertMachine();
  // 这里的isLoading是全局共享的状态
  console.log(updateAlertsMutation.isLoading);
  
  return <div>{updateAlertsMutation.isLoading ? '加载中...' : '操作完成'}</div>;
};

方案二：利用TanStack Query的mutationKey共享状态 #

TanStack Query会根据mutationKey来复用Mutation状态，只要确保所有调用使用相同的固定mutationKey即可：

1. 修改useUpdateAlerts，添加固定mutationKey

// useUpdateAlerts.js
import { useMutation } from '@tanstack/react-query';

export const useUpdateAlerts = () => {
  return useMutation({
    mutationKey: 'update-alerts', // 固定唯一的mutationKey
    mutationFn: async (alertData) => {
      // 你的API更新逻辑
      const res = await fetch('/api/alerts', {
        method: 'POST',
        body: JSON.stringify(alertData),
      });
      return res.json();
    },
  });
};

2. 直接使用原Hook即可共享状态
   此时不管哪个组件调用useAlertMachine，拿到的updateAlertsMutation都会共享同一个状态，因为它们绑定了相同的mutationKey。

方案选择 #

• 若需要严格控制全局唯一的Mutation实例，优先选择Context方案；
• 若只是需要共享状态，利用TanStack Query原生的mutationKey机制更简洁。

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