ボタンでonClickしたときにメソッドからgraphqlに変数を渡して戻りデータを返す方法はありますか？

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を使用してデータを取得することができます。

返信データを返信することはできません。助けてよろしくお願いします。

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がたくさんあります。私は、ドキュメントを元に戻し、クエリと突然変異の両方で設定オブジェクトがどのように利用されるかに特に注意することを強くお勧めします。

EDIT：

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

次に、あなたのハンドラで：あなたは、変数の異なるセットで再クエリを実行し、このようなあなたのHOCを設定したい場合は、再度

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

クエリのデータを表示するには、this.props.dataを使用する必要があります。