reactjs - 在 Mutation 组件之外访问 Apollo 的加载 bool 值

Question

react-apollo 中的Mutation 组件公开了一个方便的 loading render prop 函数中的 bool 值，非常适合在发出请求时向 UI 添加加载器。在下面的示例中，我的 Button 组件在单击时调用 createPlan 函数，这会启动 GraphQL 突变。当发生这种情况时，按钮上会出现一个微调器，这要归功于 loading 属性。

<Mutation mutation={CREATE_PLAN}>
  {(createPlan, { loading }) => (
    <Button
      onClick={() => createPlan({ variables: { input: {} } })}
      loading={loading}
    >
      Save
    </Button>
  )}
</Mutation>

我遇到的问题是我的 UI 的其他方面也需要根据此 loading bool 值进行更改。我尝试将 Mutation 组件提升到 React 树上，以便我可以手动将 loading Prop 传递给依赖它的任何组件，这有效，但页面我正在构建的多个突变可以在任何给定时间发生(例如删除计划、在计划中添加单个项目、删除计划中的单个项目等)并具有所有这些突变 位于页面级组件的组件感觉很乱。

有没有办法可以访问此 Mutation 组件之外的 loading 属性？如果没有，处理这个问题的最佳方法是什么？我了解到您可以使用 update 手动更新 Apollo 本地状态Mutation 组件上的函数(参见下面的示例)，但我无法弄清楚如何在这里访问 loading 值(而且感觉就像访问 加载特定突变的属性而无需自己手动将其写入缓存将是一种常见的请求)。

<Mutation
  mutation={CREATE_PLAN}
  update={cache => {
    cache.writeData({
      data: {
        createPlanLoading: `I DON"T HAVE ACCESS TO THE LOADING BOOLEAN HERE`,
      },
    });
  }}
>
  {(createPlan, { loading }) => (
    <Button
      onClick={() => createPlan({ variables: { input: {} } })}
      loading={loading}
    >
      Save
    </Button>
  )}
</Mutation>

Answer 1

我在我的项目中遇到了同样的问题，是的，将所有突变组件放在页面级组件中非常困惑。我发现处理这个问题的最好方法是创建 React 状态。例如:

const [createPlanLoading, setCreatePLanLoading] = React.useState(false);

...

<Mutation mutation={CREATE_PLAN} onCompleted={() => setCreatePLanLoading(false)}>
  {(createPlan, { loading }) => (
    <Button
      onClick={() => {
        createPlan({ variables: { input: {} } });
        setCreatePLanLoading(true);
      }
      loading={loading}
    >
      Save
    </Button>
  )}
</Mutation>