Reactjs 如何将数据从react组件传递到Apollo graphql查询?

Reactjs 如何将数据从react组件传递到Apollo graphql查询?,reactjs,react-native,graphql,react-apollo,Reactjs,React Native,Graphql,React Apollo,我正在使用react native和apollo/graphql开发一个应用程序 在本例中,我想做的是在我的组件中进行计算(在本例中是扫描条形码),然后将结果传递给我的graphql查询,这样它就可以使用条形码访问我们的后端api并返回结果 我在阿波罗文档和谷歌上搜索了几个小时,现在我不知所措 以下是我试图做的要点: class ScanBookScreen extends Component { state = { hasCameraPermission: null, }

我正在使用react native和apollo/graphql开发一个应用程序

在本例中,我想做的是在我的组件中进行计算(在本例中是扫描条形码),然后将结果传递给我的graphql查询,这样它就可以使用条形码访问我们的后端api并返回结果

我在阿波罗文档和谷歌上搜索了几个小时,现在我不知所措

以下是我试图做的要点:

class ScanBookScreen extends Component {

  state = {
    hasCameraPermission: null,
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <BarCodeScanner
          onBarCodeRead={// pass this to the query down below} <-----
        />
      </View>
    );
  }
}

const lookupTextbooksQuery = gql`
  query lookupTextbooks($query: String) {
    lookupTextbooks (query: $query, limit: 1) {
      totalItems
      textbooks {
        id
        title
        description
      }
    }
  }
`;

export default graphql(lookupTextbooksQuery, {
    options: { variables: { query: // This is the part that needs to come from the component somehow} }, <----

})(ScanBookScreen);
class ScanBookScreen扩展组件{
状态={
hasCameraPermission:null,
}
render(){
返回(
render(){
设{refetch}=this.props.data
返回(
refetch({query})}
/>
);
}
您可以这样做。如果要将组件的道具传递到初始查询中,可以执行以下操作:

options:props=>({变量:{query:props.query}})

render() {
    let { refetch } = this.props.data
    return (
      <View style={{ flex: 1 }}>
        <BarCodeScanner
         onBarCodeRead={query => refetch({ query })} 
        />
      </View>
    );
}