Redux 如何跳过最初的Apollo查询并点击按钮获取数据？

我的React/Redux应用程序中有一个容器，包含多个变体和一个查询：

const MenuWithData = compose(
    graphql(GET_FINAL_CODE_BY_PROJECT_ID, {
        options: ownProps => ({
            variables: {
                id: ownProps.projectId,
            },
            skip: true,
        }),
        props: ({ data }) => data,
    }),
    graphql(DELETE_PROJECT, {
        props: ({ ownProps, mutate }) => ({
            async deleteProject() {
                // ...
            },
        }),
    }),
)(Menu);

export default connect(
    state: ({
        projectId: state.current.projectId,
    }),
    dispatch => ({
        deleteProject(id) {
            dispatch(deleteProject(id));
        },
    })
)(MenuWithData);

容器通过道具将

deleteProject

函数发送到

组件，当用户单击“Delete”按钮时，我调用它

我试图对查询执行相同的操作，但似乎找不到将其发送到组件的方法。如果我使用

skip:true

，我没有访问

refetch

方法的权限，但是如果我将其设置为

false

，那么查询将在加载时执行

---

有没有办法对组件中发生的事件执行Apollo查询？

您应该使用

with Apollo

HOC，而不是

图形ql

：

const MenuWithData = compose(
    withApollo,
    graphql(DELETE_PROJECT, {
        props: ({ ownProps, mutate }) => ({
            async deleteProject() {
                // ...
            },
        }),
    }),
)(Menu);

这将把您的客户端实例传递给组件，因此您可以在按钮的单击处理程序中执行以下操作：

props.client.query({
  query: GET_FINAL_CODE_BY_PROJECT_ID,
  variables: { id: props.projectId },
}).then(({ data, errors }) => {
  // handle result
})

FWIW，约定是永远不要让查询改变任何东西——如果调用查询将改变数据，那么它应该是一个改变。Apollo就是围绕这一理念构建的，它采用了完全不同的方式，由同一个HOC处理查询和突变

---

如果您在用户执行某项操作之前不启动查询，听起来您的查询可能会对数据进行变异，在这种情况下，首先考虑将其变为一种变异可能是值得的。

我在页面上列出了加载了不完整数据的项目列表。不是每个人都需要最终的代码，所以这就是它被按需查询的原因。我最终做了类似的事情，但在容器中，而不是在组件中：-我试图将Apollo和Redux逻辑排除在我的组件之外。这看起来有点奇怪吗？如果你不打算用这个处理程序启动一个动作，那么像这样使用connect是有点不合常规的。一种更干净的方法可能是使用类似于

的
重新组合
的
处理程序。另外，FWIW，您可以将所有HOC都放在compose下，如下所示：