How to invalidate RTK Query cache in a parent-child nested structure - redux

Question

I have an API that returns a parent with their nested children, and an API that updates an individual child (with no parent reference). Currently the UI that displays the parent and children doesn't update when adding/updating/deleting the children.
How should I invalidate the RTK Query cache for the parent? Or how should I update the parent cache with new data?
I think the answer will be to add a parentId into each Child, but are there alternatives that I'm missing? Should I restructure my API to return a parent with a list of child IDs and get the children individually by ID?
Example:
interface Child {
id: number
name: string
lastUpdated: Date
}
interface Parent {
id: number
name: string
children: Child[]
}
// RTK Query API
export const myEnhancedApi = api.enhanceEndpoints({
endpoints: {
parentGetById: {
providesTags: (parent) => [
{
type: "Parent" as const,
id: parent.id
},
...parent.children.map(
({ id }) => ({
type: "Child" as const,
id,
})
),
],
},
childGetById: {
providesTags: ({ id }) => [
{
type: "Child" as const,
id,
},
],
},
childUpdate: {
// TODO: How do I update or invalidate the parentGetById cache?
invalidatesTags: (result, error, arg) => [
{
type: "Child" as const,
id: arg.child.id,
},
],
async onQueryStarted(
{ child },
{ dispatch, queryFulfilled }
) {
const updateCache = (newData: Child) => dispatch(
api.util.updateQueryData(
"childGetById",
{ id: child.id },
(draft) => {
Object.assign(draft, newData)
}
)
)
const optimisticPatch = updateCache(child)
try {
const updatedChild = await queryFulfilled // API returns the updated Child object
updateCache(updatedChild)
} catch {
optimisticPatch.undo()
}
},
},
},
})