WpContentNode[] is not assignable to type WpPage[] error in Gatsby+WordPress+TypeScript project

Viewed 32

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.

0 Answers
Related