如何在带有按钮的 onClick 时将变量从方法传递给 graphql 并取回它的 return 数据？

Question

我需要在用户单击按钮时将 asset_type; 值传递给 graphql。这样做的正确方法是什么，因为目前我收到此错误：

GraphQL error: Illegal value for Message.Field .am.AssetRequest.asset_type of type string: object (proto3 field without field presence cannot be null)

这是我的代码：

import gql from 'graphql-tag';
import { graphql } from 'react-apollo';

  constructor(props) {
    super(props);
    this.state = {
      value: '',
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
   this.setState({ value: event.target.value });
  }

  submit() {
   this.state.value
   this.props.haha(this.state.value) //this is where I'm stuck. I'm not sure how to send it to graphql props.
  }

  render() {
   <div>
    <Input value={this.state.value} onChange={this.handleChange} />
    <button onClick={() => { this.submit(); }} >
     <span>Run Query</span>
    </button>
   </div>
  // other html element
  }

const queryVariable = gql`
  query RootQuery($asset_type: String) {
    am {
      assets(asset_type: $asset_type) {
        data {
          uuid
          label
          asset_type
          description
        }
      }
    }
  }
`;

export default graphql(queryVariable, {
  props: ({ query }) => ({
    haha: (asset_type) => query({
      variables: { asset_type },
    })
  })
})(PlacementSearch)

虽然我可以使用 graphiql 获取数据：

但我无法发送和取回 return 数据？请帮助并提前致谢

Answer 1

graphql 负责运行为您处理查询。 Apollo 将从您的服务器获取数据，并在请求完成后将其提供给您的组件——无需以某种方式调用查询来响应用户操作。

以下是如何使它与您的查询一起使用：

const queryOptions = {
  variables: {
    asset_type: 'r'
  }
}

export default graphql(queryVariable, {
  options: queryOptions
})(PlacementSearch)

使用此配置，一旦请求完成，您的查询的 data 部分将在您的组件中作为 props.data 可用（这意味着您需要考虑它最初返回为 null ).因此，例如，如果您需要查询返回的数据中的标签，您只需使用 props.data.label.

您可以通过向您的配置对象提供可选的 props 属性来微调 HOC 传递给您的组件的道具。例如，您可以这样做：

const queryOptions = {
  variables: {
    asset_type: 'r'
  }
}

// ownProps below maps to the component's existing props if you want to
// use those in calculating derived props
const mapDataToProps = ({data, ownProps}) =>
  ({
      uuid: data.uuid
      label: data.label
      assetType: data.asset_type
      description: data.description
   })

export default graphql(queryVariable, {
  options: queryOptions
})(PlacementSearch)

使用上面的配置，如果我想获取资产类型，我会从 props.assetType.

中检索它

有很多 other options you can configure。我强烈建议您回顾文档并特别注意配置对象在查询和变更中的使用方式。

编辑： 如果您想运行使用一组不同的变量再次查询，请像这样配置您的 HOC：

export default graphql(queryVariable, {
  // r can be whatever you want the default variable to be
  options: { variables: { asset_type: 'r' } }
})(PlacementSearch)

然后，在您的处理程序中：

submit() {
 this.props.data.refetch({ asset_type: this.state.value})
}

同样，要从您的查询中呈现数据，您需要使用 this.props.data。

如何在带有按钮的 onClick 时将变量从方法传递给 graphql 并取回它的 return 数据？

How to pass variable to graphql from method when onClick with button and get it's return data back?

reactjs

graphql

react-apollo