Access a state value to passing it as parameter of a query - reactjs

Question

I'm having a little problem. Being a beginner in "react apollo ...", I want to pass the value of my state "selectCarcolor" as parameter of my query.This must be done when I select a color from the drop-down list.I read a lot of things in the documentation but I do not know where to start.
You can see all of my code here: Github link description here
onChangeCarColor(e){
//const selectCarcolor = this.state.selectCarcolor
this.setState({ selectCarcolor:e.target.value})
console.log("color " + this.state.selectCarcolor);
}
const Cquery = `gql query getAllUsers($color: String!) {
getAllUsers(color: $color) {
_id
name
cars {
color
}
}
}`;
const datafetch = graphql(Cquery, {
options: props=> ({
variables: { color: **Here I want to pass the select value**},
})
});
Hoping for a little help from you.
Thank you guys!
react version :16.2.0
react-apollo version : 2.0.1

Answer 1

You can wrap your component with withApollo function from react-apollo package which injects the ApolloClient into your component (available as this.props.client). You can send a query using it. Check official docs and this tutorial for more details and explanations.
Example:
import React, { Component } from 'react'
import { withApollo } from 'react-apollo'
import gql from 'graphql-tag'
import Link from './Link'
class Search extends Component {
state = {
links: [],
filter: ''
}
render() {
return (
<div>
<div>
Search
<input
type='text'
onChange={(e) => this.setState({ filter: e.target.value })}
/>
<button
onClick={() => this._executeSearch()}
>
OK
</button>
</div>
{this.state.links.map((link, index) => <Link key={link.id} link={link} index={index}/>)}
</div>
)
}
_executeSearch = async () => {
const { filter } = this.state
const result = await this.props.client.query({
query: FEED_SEARCH_QUERY,
variables: { filter },
})
const links = result.data.feed.links
this.setState({ links })
}
}
const FEED_SEARCH_QUERY = gql`
query FeedSearchQuery($filter: String!) {
feed(filter: $filter) {
links {
id
url
description
createdAt
postedBy {
id
name
}
votes {
id
user {
id
}
}
}
}
}
`
export default withApollo(Search)

Answer 2

In your datafetch() function you are setting option variables in a function on props, but you are setting your color selected to your state.
Can you just do
options: {
variables: { color: this.state.selectCarcolor, }
}
instead of what you are doing?