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