How to pass a variable to graphql from a method when onClick with a button and return it back?

Question

I need to pass the value of asset_type; in graphql when the user clicks a button. What is the correct way to do this because I am currently 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) 

I can get data with graphics, though:

but I can not send and return the returned data? Please help and thanks in advance

Answer 1

graphql searches for your query. Apollo will retrieve data from your server and make it available for your component after the request is complete - there is no need to call the request in any way in response to user action.

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

 const queryOptions = { variables: { asset_type: 'r' } } export default graphql(queryVariable, { options: queryOptions })(PlacementSearch) 

In this configuration, part of the data request will be available as props.data inside your component after the request is completed (which means that you will need to consider that it is initially returned as null). For example, if you need a label from the data returned by your request, you simply use props.data.label .

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

 const queryOptions = { variables: { asset_type: 'r' } } // ownProps below maps to the component 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) 

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

There are many other options that you can configure . I highly recommend going back to the docs and paying particular attention to how the configuration object is used in both queries and mutations.

EDIT: If you want to run the query again using a different set of variables, configure your HOC as follows:

 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}) } 

Again, to display the data from your query, you need to use this.props.data .