Question

我的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函数发送到<Menu>组件，当用户点击“删除”按钮时，我会调用它。

我正在尝试对查询执行相同的操作，但我似乎无法找到将其发送到组件的方法。如果我使用skip: true，则无法访问refetch方法，但如果我将其设置为false，则查询会在加载时执行。

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

Answer 1

您应该使用withApollo HOC代替graphql：

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查询并在按钮点击时获取数据？

1 个答案: