【问题标题】：refetchQueries in Mutation Component of React Apollo Client is not working?React Apollo 客户端的 Mutation 组件中的 refetchQueries 不起作用？
【发布时间】：2019-01-12 16:30:27
【问题描述】：

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

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>

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

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>

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

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

有什么建议吗？

【问题讨论】：

标签： javascript reactjs graphql apollo react-apollo

【解决方案1】：

我会为 refetchQueries 在另一个 React 组件中做很多努力，最好的解决方案，不是我猜的最简单或最聪明的方法，是将 refetch() 函数从一个组件传递给另一个

https://www.apollographql.com/docs/react/data/queries/

【讨论】：

【解决方案2】：

你必须直接传递对象数组而不是返回一个函数

<Mutation refetchQueries={[{query:YOUR_QUERY}>
 ...code
</Mutation>

【讨论】：

【解决方案3】：

我在一些帮助下解决了这个问题。 refetchQueries 中显然存在一个错误，因为它不会更新来自另一个组件的数据。但是refetchQueries 根本不需要。

我用另一个Query 包裹了我的Home 组件，例如：

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>

然后我还用另一个Query 包装了我的Main 组件，因此它在应用突变时会改变状态。这样你就根本不需要refetchQueries。当执行来自另一个或相同组件的Mutation 时，只需包装您的Mutation 或Query 组件。

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>

【讨论】：

【解决方案4】：

来自文档：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 }
    }];
}}
>

【讨论】：

嘿@alexhenkel 所以这行得通我用其他一些参数再次尝试，但我仍然看不到我的<Query /> 组件被重新渲染。这是我的另一个问题。
效果很好。谢谢。另请参阅其文档：apollographql.com/docs/react/essentials/mutations.html