refetchQueries in Mutation Component of React Apollo Client is not working?
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 }
}];
}}
>
I solved it with some help. There is apparently a bug in refetchQueries
as it does not update data from another component. But refetchQueries
was not needed at all.
I wrapped my Home
component with another Query
like:
Home.js
<Query
query={GET_ALL_PRODUCTS}
variables={{ id: state.get("user.id") }}
>
{({ data: { user } }) => {
const { id, name } = user.products ? user.products[0] : [];
return <Main id={id} name={name} />;
}}
</Query>
Then I also wrapped my Main
component with another Query
so it changes state when mutation is applied. This way you don't need refetchQueries
at all. Just wrap your Mutation
or Query
component when Mutation
from another or same component is performed.
Main.js
<Query query={GET_SELECTED_PRODUCT}>
<Mutation
key={v4()}
mutation={SWITCH_SELECTED_PRODUCT}
>
{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>
</Query>
Instead of returning a function you have to directly pass the array of object
<Mutation refetchQueries={[{query:YOUR_QUERY}>
...code
</Mutation>