Menu
I have a <Query /> in my Home.js file
<Query
query={GET_TODOS_BY_PRODUCT}
variables={{ id: state.get("selectedProduct.id"), completed: true }}
>
{({ data: { product } }) => {
return <Main todos={product.todos} hashtag={product.hashtag} />;
}}
</Query>
In my Main.js file I have <Mutation /> component -
<Mutation
key={v4()}
mutation={SWITCH_SELECTED_PRODUCT}
refetchQueries={() => {
console.log("refetchQueries", product.id);
return {
query: GET_TODOS_BY_PRODUCT,
variables: { id: product.id }
};
}}
>
{switchSelectedProduct => (
<Product
onClick={() => {
switchSelectedProduct({
variables: { id: product.id, name: product.name }
});
}}
highlight={
data.selectedProduct
? product.name === data.selectedProduct.name
: i === 0
}
>
<Name>{product.name}</Name>
</Product>
)}
</Mutation>
When switchSelectedProduct is called inside <Mutation /> component, it runs refetchQueries as I see the console.log("refetchQueries", product.id); statement but I don't see the updated results in the <Query /> component in Home.js file.
How do I tell <Query /> component in Home.js to get notified when refetchQueries is run in Main.js file?
Any suggestions?
847
To refetch a query from onQueryUpdated , call return observableQuery. refetch() , as shown above. Otherwise, no return value is required. If a refetched query's response differs from your update function's modifications, your cache and UI are both automatically updated again.
Updating a single existing entity If a mutation updates a single existing entity, Apollo Client can automatically update that entity's value in its cache when the mutation returns. To do so, the mutation must return the id of the modified entity, along with the values of the fields that were modified.
Refetching is especially common after a mutation, so mutate functions accept options like refetchQueries and onQueryUpdated to specify which queries should be refetched, and how. To selectively refetch queries outside of a mutation, you instead use the refetchQueries method of ApolloClient , which is documented here.
From docs: refetchQueries: (mutationResult: FetchResult) => Array<{ query: DocumentNode, variables?: TVariables} | string>, so probably you need to return an array instead of just the object
<Mutation
key={v4()}
mutation={SWITCH_SELECTED_PRODUCT}
refetchQueries={() => {
console.log("refetchQueries", product.id)
return [{
query: GET_TODOS_BY_PRODUCT,
variables: { id: product.id }
}];
}}
>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
