首页 文章

如何将反应组件的数据传递给Apollo graphql查询?

提问于
浏览
0

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

在这种情况下我想要做的是在我的组件中进行计算(在这种情况下扫描条形码),然后将结果传递给我的graphql查询,这样它就可以用条形码命中我们的后端api并返回结果 .

我一直在搜索apollo文档和谷歌几个小时,我很茫然 .

这是我要做的事情的要点:

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

1 回答

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

    你会做这样的事情 . 如果要将组件的props传递给初始查询,可以执行以下操作:

    options: props => ({ variables: { query: props.query } })

    http://dev.apollodata.com/core/apollo-client-api.html#ObservableQuery.refetch

相关问题