时间戳

首页 > 解决方案 > React Apollo 客户端的 Mutation 组件中的 refetchQueries 不起作用？

javascript - React Apollo 客户端的 Mutation 组件中的 refetchQueries 不起作用？

问题描述

<Query />我的Home.js文件中有一个

主页.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>

在我的Main.js文件中，我有<Mutation />组件-

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

在组件switchSelectedProduct内部调用时<Mutation />，它会在refetchQueries我看到console.log("refetchQueries", product.id);语句时运行，但我没有在文件中的<Query />组件中看到更新的结果。Home.js

如何告诉<Query />组件在文件中运行Home.js时得到通知？refetchQueriesMain.js

有什么建议么？

标签： javascriptreactjsgraphqlapolloreact-apollo

解决方案

来自 docs: refetchQueries: (mutationResult: FetchResult) => Array<{ query: DocumentNode, variables?: TVariables} | string>，因此您可能需要返回一个数组而不仅仅是对象

<Mutation
  key={v4()}
  mutation={SWITCH_SELECTED_PRODUCT}
  refetchQueries={() => {
     console.log("refetchQueries", product.id)
     return [{
        query: GET_TODOS_BY_PRODUCT,
        variables: { id: product.id }
    }];
}}
>

推荐阅读