How to trigger GraphQL Query from another React / ReactNative component - reactjs

Question

I have some problem.
I have 2 Component in React Native.
1. (Component A) for showing the data , this component use query to graphql
2. (Component B) is button to trigger query in component A with some filtering variable.
When I click the button component ,
it mutate
save filter into graphql link state
trigger the component A to rerender new data.
Problem is , component A not rerender..
Here is code that triggered when I click the button
this.props.mutate({
variables: {
Category
},
refetchQueries: [{
query: FETCH_SEARCH,
variables: {
productcategory: Category,
search: '',
},
}]
});
How do I achieve rerendering component A ?
Thanks

Answer 1

Hey your question is basically "what is wrong with my code?" without providing much code. I will try to guess what is wrong here:
Your query component is still connected to the old variables, refetching it with new variables will not update the query component. Only when you refetch with the same variables it will update.
What to do instead:
React is not designed to have a messaging system from one component to another. Instead lift the variable state into a parent component or a data store so that the query component takes the variables from props (if the props have the same name as the expected variable names you don't even have to explicitly pass them in the graphql higher order component function options. Now the query will be automatically refetched when the props - and therefore the variables - change.
<QueryComponent
search={this.state.search}
productcategory={this.state.productcategory}
/>
<SelectorComponent
onSearchChange={search => this.setState({ search })}
onCategoryChange={productcategory => this.setState({ productcategory })}
/>

Answer 2

I faced the same problem, after doing a lot of search, none of answers suited me. I didn't want to lift up the state, I wanted to maintain the query logic inside the same component, also re-fetching from another component was a bad idea, since the variables passed to the query are not the same and Apollo interprets it as another query and the first component don't change.
So my solution is to save the "filtering variable" in the local state with Apollo. This code is an example just for this answer, I didn't test it, just copied from my project and keep out only the necessary for the explanation.
In some place you need to initialise your apollo cache
const data = {
keyword: "",
};
cache.writeData({ data });
return ApolloClient({
cache,
});
In the first component, you will query this "keyword" variable from the cache and pass it to the actual query you want to re-fetch every time
const GET_KEYWORD = gql`
{
keyword #client
}
`;
const FirstComponent = () => {
const {
data: { keyword },
} = useQuery(GET_KEYWORD);
const {
data: importantData
} = useQuery(SOME_OTHER_QUERY_YOU_WANT_TO_REFETCH, {variables: { keyword }});
return <div>{importantData}</div>
}
In the second component you just need to update this "keyword"
const SecondComponent = () => {
const client = useApolloClient();
const handleChange = (keyword: string) => {
client.writeData({ data: { keyword: keyword } });
};
return (
<div>
<input onChange={handleChange} />
</div>
);
};