如何将数据从 React 组件传递到 Apollo graphql 查询？

Question

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

在这种情况下，我想做的是在我的组件中进行计算（在这种情况下扫描条形码），然后将结果传递给我的 graphql 查询，以便它可以访问我们的后端 api条形码和 return 结果。

我已经搜索了 apollo 文档和 google 几个小时了，但我不知所措。

这是我正在尝试做的事情的要点：

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

Answer 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

如何将数据从 React 组件传递到 Apollo graphql 查询？

How to pass data from react component to Apollo graphql query?

reactjs

graphql

react-native

react-apollo