如何跳过初始 Apollo 查询并在按钮单击时获取数据？

Posted 2023-03-08

【中文标题】如何跳过初始 Apollo 查询并在按钮单击时获取数据？

【英文标题】：How to skip initial Apollo query and fetch data on button click?

【发布时间】：2018-07-27 04:17:33

【问题描述】：

我的 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);

容器通过 props 将 deleteProject 函数发送到 <Menu> 组件，当用户单击“删除”按钮时我调用它。

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

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

【参考方案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 处理查询和突变的方式截然不同。

如果您在用户执行某项操作之前不触发查询，则听起来您的查询可能会改变数据，在这种情况下，可能值得考虑首先将其设为突变。

【讨论】：

我有一个页面上的项目列表，这些项目已加载不完整的数据。不是每个人都需要最终代码，所以这就是它被按需查询的原因。我最终做了类似的事情，但在容器内部，而不是组件内部：snippi.com/s/22b25fw - 我试图将 Apollo 和 Redux 逻辑排除在我的组件之外。看起来很奇怪吗？

如果您不打算使用该处理程序触发操作，那么使用这样的连接有点不合常规。更简洁的方法可能是使用类似recompose 的withHandlers HOC。此外，FWIW，您可以将所有 HOC 集中在 compose 下，如下所示：snippi.com/s/0ktv5xd