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