Apollo graphql react hoc 将查询作为 prop 函数传递答案

【问题标题】：Apollo graphql react hoc to pass query as prop functionApollo graphql react hoc 将查询作为 prop 函数传递
【发布时间】：2020-01-25 08:08:27
【问题描述】：

来自 react apollo 的 graphql hoc 有助于将组件与查询挂钩。这样查询将执行并且结果将作为组件中的 prop 可用。

有没有办法不直接执行查询，而是将函数作为道具传递给可以在组件内作为正常函数调用执行的函数。因为我有一个查询需要在用户选择组件中的某些选项后执行。

例如

<Form>
 <Select onChange={(value) => getCorrespondingValues(value)" />
</Form>

function getCorrespondingValues(value){
   this.props.getValuesQuery(values)
}

这可以通过直接使用 apollo 客户端来实现。但无论如何在graphql hoc的帮助下使用它。因此组件代码不必更改。

【问题讨论】：

标签： graphql react-apollo graphql-js

【解决方案1】：

const getValuesQueryHOC = graphql(YOUR_MUTATION, {
  props: ({ mutate }) => ({
    getValuesQuery: (values) =>
      mutate({
        variables: {
          values
        }
      })
  })
});
export default getValuesQueryHOC(YourComponent)

【讨论】：