This error occurs within a Gatsby + WordPress + TypeScript project component when pulling WordPress page data along with its child page data via GraphQL.
Type 'WpContentNode[]' is not assignable to type 'WpPage[]'.
On line:
const pages: WpPage[] = page?.wpChildren?.nodes;
The data is being fetched from a GraphQL query in the page component:
query {
allWpPage(filter: { databaseId: { eq: 383 } }) {
nodes {
...standardPageFields
wpChildren {
nodes {
... on WpPage {
id
uri
title
...etc
}
}
}
}
}
}
This part of the query appears to not be meshing well with the generated TypeScript interfaces:
wpChildren {
nodes {
... on WpPage {
id
...
}
}
}
wpChildren.nodes is typed as WpContentNode[] even though it's pulling from ... on WpPage. I'd think it would be typed as WpPage[] as a result of the ... on WpPage within the query.
These type definitions are all being generated with graphql-codegen. The majority are working fine. Only running into this one issue with matching the appropriate type to a ... on WpPage query.
How can I type wpChildren.nodes as WpPage[]? They are child pages of the parent node.
Note: We're avoiding the use of any to make this error go away, so that is not a viable solution for me. We're aiming to adhere to strict typing.
Thanks in advance for any insight.