如何在使用按钮onClick时将变量从方法传递给graphql并获取返回的数据? [英] How to pass variable to graphql from method when onClick with button and get it's return data back?

问题描述

当用户单击按钮时，我需要将 asset_type; 值传递给graphql.正确的方法是什么，因为当前出现此错误:

I need to pass asset_type; value to graphql when user click on a button. What is the proper way to do that because currently I'm getting this error:

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

这就是我的代码中的内容:

This is what I have in my code:

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获取数据:

I can get the data with graphiql though:

但是我无法发送并返回返回数据吗?请先帮助并谢谢

but I cannot send and get the return data back? Please help and thanks in advance

推荐答案

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

The graphql takes care of running your query for you. Apollo will fetch the data from your server and make it available to your component once the request completes -- there is no need to somehow call the query in response to a user action.

在您的查询中使用此方法的方法如下:

Here's how to make this work with your query:

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

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

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

With this configuration, the data part of your query will be available as props.data inside your component once the request completes (which means you will need to account for it initially coming back as null). So, for example, if you needed the label from the data returned by your query, you would just use props.data.label.

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

You can fine tune the props that the HOC passes to your component by providing an optional props property to your configuration object. For example, you could do:

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 中检索它.

With the configuration above, if I wanted to get the asset type, I would retrieve it from props.assetType.

有很多您可以配置的其他选项.我强烈建议您回顾一下文档，并特别注意如何在查询和变异中利用配置对象.

There's a lot of other options you can configure. I highly recommend going back over the docs and paying special attention to how the configuration object is utilized in both queries and mutations.

编辑:如果要使用其他变量集再次运行查询，请按以下方式配置HOC:

If you want to run the query again with a different set of variables, configure your HOC like this:

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

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

Then, in your handler:

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

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

Again, to render the data from your query, you'll need to use this.props.data.

这篇关于如何在使用按钮onClick时将变量从方法传递给graphql并获取返回的数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！