[英]How to wrap GraphQL mutation in Apollo client mutation component in React
[英]refetchQueries in Mutation Component of React Apollo Client is not working?
我的Home.js
文件中有一个<Query />
<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 />
组件 -
<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);
声明,但我在Home.js
文件的<Query />
组件中没有看到更新的结果。
我如何告诉<Query />
在组件Home.js
时得到通知refetchQueries
在运行Main.js
文件?
有什么建议?
来自docs: refetchQueries: (mutationResult: FetchResult) => Array<{ query: DocumentNode, variables?: TVariables} | string>
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 }
}];
}}
>
我在一些帮助下解决了它。 refetchQueries
显然存在一个错误,因为它不会更新来自其他组件的数据。 但是根本不需要refetchQueries
。
我用另一个Query
包装我的Home
组件,如:
<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
组件。
<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>
而不是返回一个函数,你必须直接传递对象数组
<Mutation refetchQueries={[{query:YOUR_QUERY}>
...code
</Mutation>
我会为另一个 React 组件中的 refetchQueries 争取很多,最好的解决方案,不是我猜的最简单或最聪明的方法,是将 refetch() 函数从一个组件传递给另一个组件
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.