refetchQueries in Mutation Component of React Apollo Client is not working?

Question

I have a <Query /> in my Home.js file

Home.js

<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 -

Main.js

<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?

Answer 1

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 }
    }];
}}
>