As a relative newcomer to TypeScript, I find myself struggling with annotations within a project that pulls various data from a GraphQL endpoint.
Considering the potential for changes in the data structure down the line, I have opted to use Apollo Client to automatically generate TypeScript types for the queries. This method has been successful so far!
However, my main struggle arises when attempting to map over the data, particularly when using the map() function and trying to destructure the data. Finding examples on how to tackle this issue has proven to be difficult. I suspect I may be encountering name collisions, but the error messages aren't very clear to me.
For instance, in a snippet of code where 'seoDataObject' is properly annotated as an array of objects:
const seoDataObject: (AllUsersSeo_users_edges | null)[] | null | undefined)
interface AllUsersSeo_users_edges {
__typename: "RootQueryToUserConnectionEdge";
/**
* The item at the end of the edge
*/
node: AllUsersSeo_users_edges_node | null;
}
const seo = seoDataObject?.map(({ node }) => node).find((node) => node.id === id)?.seo;
This leads to the following error:
var node: any
Property 'node' does not exist on type 'AllUsersSeo_users_edges | null'.ts(2339)
I am looking for guidance on how to rewrite this portion using TypeScript.
While each 'seoDataObject' does indeed contain 'node', the fact that 'node' is also a parameter in the map function is causing confusion for me in terms of typing it correctly in TypeScript.