Question

Mutation中的react-apollo组件在render prop函数中暴露了一个方便的loading布尔值，非常适合在发出请求时将加载程序添加到UI。在下面的示例中，我的Button组件在单击时会调用createPlan函数，该函数会启动GraphQL突变。发生这种情况时，由loading道具提供了一个微调框。

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

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

是否有一种方法可以访问此loading组件之外的Mutation属性？如果没有，处理此问题的最佳方法是什么？我已经读到您可以使用Mutation组件上的update函数手动更新Apollo本地状态（请参见下面的示例），但是我还无法弄清楚如何访问{{1 }}的值（再加上访问特定突变的loading属性，而不必亲自将其手动写入缓存的感觉，这是常见的请求。）

loading

Answer 1

我在项目中遇到了同样的问题，是的，将所有的mutation组件置于页面级组件是很混乱的。我发现解决此问题的最佳方法是创建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>

在Mutation组件外部访问Apollo的加载布尔值

1 个答案: