ApolloClient:UI (ROOT_QUERY) 订阅删除后未更新
ApolloClient: UI (ROOT_QUERY) not updating after subscription delete
阿波罗客户端:2.6.3
反应阿波罗:2.2.1
因此,我有一个订阅会在项目删除请求时触发,但在订阅发生后不会更新 UI。
我的订阅码如下:
<DeleteItem
id={item.id}
urlReferer={urlReferer}
subscribeToDeleteItems={() =>
subscribeToMore({
document: DELETE_ITEM_SUBSCRIPTION,
variables: {},
updateQuery: (prev, { subscriptionData }) => {
if (!subscriptionData.data) return prev;
const deletedItem = subscriptionData.data.itemDeleted;
let newItemList;
console.log("prev = ", prev);
if (isDuplicateItem(deletedItem.id, prev.me.items)) {
newItemList = prev.me.items.filter((item) => {
return deletedItem.id !== item.id;
});
console.log("new item list = ", newItemList);
} else {
return prev;
}
return Object.assign({}, prev, {
ROOT_QUERY: {
me: {
items: [newItemList]
}
}
});
}
})
}
>Delete This Item</DeleteItem>
生成的输出如下所示:
ROOT_Query 商店:
我在这里忽略了什么,我该如何解决?
所以我通过将父查询的 fetchPolicy 更改为 "cache-and-network" 并确保 ID 出现在每个需要规范化结果的查询中来解决这个问题,如此处所述:
阿波罗客户端:2.6.3
反应阿波罗:2.2.1
因此,我有一个订阅会在项目删除请求时触发,但在订阅发生后不会更新 UI。
我的订阅码如下:
<DeleteItem
id={item.id}
urlReferer={urlReferer}
subscribeToDeleteItems={() =>
subscribeToMore({
document: DELETE_ITEM_SUBSCRIPTION,
variables: {},
updateQuery: (prev, { subscriptionData }) => {
if (!subscriptionData.data) return prev;
const deletedItem = subscriptionData.data.itemDeleted;
let newItemList;
console.log("prev = ", prev);
if (isDuplicateItem(deletedItem.id, prev.me.items)) {
newItemList = prev.me.items.filter((item) => {
return deletedItem.id !== item.id;
});
console.log("new item list = ", newItemList);
} else {
return prev;
}
return Object.assign({}, prev, {
ROOT_QUERY: {
me: {
items: [newItemList]
}
}
});
}
})
}
>Delete This Item</DeleteItem>
生成的输出如下所示:
ROOT_Query 商店:
我在这里忽略了什么,我该如何解决?
所以我通过将父查询的 fetchPolicy 更改为 "cache-and-network" 并确保 ID 出现在每个需要规范化结果的查询中来解决这个问题,如此处所述: