How to call a graphql query again with different variable value? - react-native

Question

This is my code file.
import React from 'react'
import { gql } from 'apollo-boost'
import { Query } from 'react-apollo'
const CATEGORY_QUERY = gql`Some query here`
const handleOnCategoryTouch = (id) => {
//Again call the query
}
const Home = () => (
<Query
query={CATEGORY_QUERY}
variables={{ limit: 20, cursor: "", idcategory: 0 }}
>
{({ loading, error, data }) => {
if (loading) return <Text>Loading...</Text>;
if (error) return <Text>Error :(</Text>;
return (
<Categories
categories={data.get_discovery_kol_data.categories}
content={data.get_discovery_kol_data.postKol}
onCategoryTouch={handleOnCategoryTouch}
/>
)
}}
</Query>
Here Categories is a component which renders categories as a chips in UI. On click of that chip, we get the categoryId. Now I want to recall the CATEGORY_QUERY, with the latest id and update the existing result, how do it ?
I am using
"apollo-boost": "^0.1.3",
"graphql": "^0.13.2",
"react": "^16.3.0-alpha.1",
"react-apollo": "^2.1.0-beta.3",
"react-native": "0.54.2",

Answer 1

Best approach would be to create wrapping component
parent.js
import Home from './Home'
class Parent extends React.Component {
render() {
return <Home
category={this.state.id}
onCategoryChanged={(id) => { this.onCategoryChanged(id) }}
/>
}
onCategoryChanged (id) {
this.setState({ id })
}
}
Home.js
class Home extends React.Component {
render() {
return (
<a onClick={() => { this.props.onCategoryChanged(1) }}>Change category to 1</a>
)
}
}
export default graphql(CATEGORY_QUERY, {
options: ({ category }) => ({
variables: { category }
})
})(Home)
This will force parent component to re-render Home with new props and call query again with new variable for categoryId