React Apollo客户端突变组件中的refetchQueries无法正常工作吗? [英] refetchQueries in Mutation Component of React Apollo Client is not working?

问题描述

我的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 />组件中看不到更新的结果./p>

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

有什么建议吗?

解决方案

我在一些帮助下解决了它. 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>

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?

解决方案

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>

这篇关于React Apollo客户端突变组件中的refetchQueries无法正常工作吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！