我有一个带有数据列表的组件。另外,我还有另一个带有突变的项目元素。更新之后,缓存将更新,但是列表将一直保持更新,直到重新呈现组件为止。
列出组件查询:
export const categoriesQuery = gql`
query Categories {
podcastCategories {
id
regions
title
subcategories {
title
}
}
}
`
我使用useQuery
来获取数据:
const categoriesResults = useQuery<Categories>(categoriesQuery)
console.log('categoriesReults', categoriesResults)
此外,我的其他组件CategoriesItem.tsx
都有突变:
export const podcastCategoryUpdate = gql`
mutation PodcastCategoryUpdate($categoryId: String!, $category: CategoryInput!) {
podcastCategoryUpdate(categoryId: $categoryId, category: $category) {
coverImageUrl
coverImageId
color
id
svg
subcategories {
categoryId
id
title
translations {
region
title
}
}
regions
title
translations {
region
title
}
}
}
`
我使用useMutation
钩子对其进行了更新:
const updateFn = useMutation<PodcastCategoryUpdate, PodcastCategoryUpdateVariables>(podcastCategoryUpdate)
问题是缓存已更新,但列表组件未使用最新的缓存版本。