Search code examples
reactjstypescriptnext.jsapollo

Property 'item' does not exist on type 'IntrinsicAttributes & RefAttributes<Component<{}, any, any>>'.ts(2322)

"react": "^16.12.0",
"typescript": "^4.0.3",
"next": "^9.4.4"

So typescript is issuing the above mentioned error on the item prop <Item item={item} key={item.id} urlReferer={urlReferer} />, which is defined in the child component. How do I resolve this?

ItemListItems.tsx

enter image description here

Item.tsx

enter image description here

My partial repo: https://github.com/TheoMer/next_apollo

Solution

  • Resolved: Apollo HOCs require that InputProps are specified that mirror the props being consumed in the component:

    component/Item.tsx

    type InputProps = {
  item: Item;
  urlReferer: string;
};

type ChildProps = ChildDataProps<InputProps, Response, {}>

const userQuery = graphql<InputProps, Response, {}, ChildProps>(
  CURRENT_USER_QUERY,
  {
    options: { 
      fetchPolicy: 'cache-and-network',
      pollInterval: 300
    },
  }
);

interface Props {
  data?: any;
  item?: Item;
  urlReferer?: string;
}

const ItemComp: FC<Props> = ({ item, urlReferer, data: { me, error, stopPolling, subscribeToMore }}) => {