React Apollo Client 的 Mutation 组件中的 refetchQueries 不起作用? [英] refetchQueries in Mutation Component of React Apollo Client is not working?

问题描述

我的 Home.js 文件中有一个

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>

在我的 Main.js 文件中，我有 组件 -

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>

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

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.

我如何告诉 组件在 Home.js 中在 中运行 refetchQueries 时得到通知Main.js 文件?

How do I tell <Query /> component in Home.js to get notified when refetchQueries is run in Main.js file?

有什么建议吗?

推荐答案

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

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.

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

I wrapped my Home component with another Query like:

<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 组件.

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.

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

这篇关于React Apollo Client 的 Mutation 组件中的 refetchQueries 不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！