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

Question

I'm developing an app using react-native and apollo/graphql.

What I want to do in this case is to do a computation in my component (in this case scanning a barcode) and then pass the results to my graphql query so it can hit our backend api with the barcode and return results.

I've been searching through the apollo docs and google for a few hours now and I'm at a loss.

here's the gist of what I'm trying to do:

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

zackify · Accepted Answer · 2017-09-18 19:58:40Z

1

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

You would do something like this. If you want to pass the component's props into the initial query, you can do this:

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

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

answered Sep 18, 2017 at 19:58

zackify

5,4542 gold badges24 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related