reactjs - Problemen met GraphQL en TypeScript wanneer ik data naar componenten map

Ik maak een SSR met GraphQL en Next.js, maar ik heb een probleem wanneer ik probeer sommige gegevens te mappen.

Ik haal wat gegevens van de Github GraphQL API (Followers, Following, Public Repos) en wanneer ik deze gegevens doorgeef aan de code werken al mijn gegevens goed. Maar wanneer ik probeer mijn Showcase Repos te mappen om op het scherm af te drukken, begint het probleem, kan iemand me helpen?

Mijn stack op dit moment is GraphQL (GraphQl-request), Next.js, styled-components en TypeScript.

Dit is mijn vraag:

  fragment totalFollowing on User {
    following(first: 1) {
      totalCount
    }
  }

  fragment totalFollowers on User {
    followers(first: 1) {
      totalCount
    }
  }

  fragment totalRepositories on User {
    repositories(affiliations: OWNER, first: 1) {
      totalCount
    }
  }

  fragment showcase on User {
    itemShowcase {
      items(first: 10) {
        nodes {
          ... on Repository {
            name
            description
            url
          }
        }
      }
    }
  }

  query GET_GITHUB_QUERIES {
    viewer {
      ...totalFollowing
      ...totalFollowers
      ...totalRepositories
      ...showcase
    }
  }

en dit zijn mijn types op dit moment:

export type FollowingProps = {
  totalCount: number
}

export type FollowersProps = {
  totalCount: number
}

export type RepositoriesProps = {
  totalCount: number
}

export type itemShowCaseProps = {
  itemShowcase: {
    items: {
      nodes: [
        {
          name: string
          description: string
          url: string
        }
      ]
    }
  }
}

export type QueryProps = {
  following: FollowingProps
  followers: FollowersProps
  repositories: RepositoriesProps
  itemShowcase: itemShowCaseProps
}

Mijn oproep op index.tsx

export const getStaticProps: GetStaticProps = async () => {
  const { viewer } = await client.request(query)

  return {
    props: {
      ...viewer
    }
  }
}

Nog steeds in mijn index.tsx, ik heb deze component waar ik de gegevens moet doorgeven:

      <S.MyWorkSection id="my-work" data-aos="fade-up">
        <MyWorkGithub
          repositories={repositories}
          following={following}
          followers={followers}
          {...{ itemShowcase }}
        />
      </S.MyWorkSection>

En eindelijk is dit mijn component:

const MyWorkGithub: React.FC<QueryProps> = ({
  following,
  followers,
  repositories,
  itemShowcase
}) => (
  <>
    <Title text="Works" icon={true} />
    <S.HighLightWrapper>
      <HighLightCard
        hlNumber={repositories.totalCount}
        hlDescription={'repositories'}
      />
      <HighLightCard
        hlNumber={followers.totalCount}
        hlDescription={'followers'}
      />
      <HighLightCard
        hlNumber={following.totalCount}
        hlDescription={'following'}
      />
    </S.HighLightWrapper>
    <S.CardWrapper>
      {itemShowcase.itemShowcase.items.nodes.map((repo, index) => (
        <CardComponent
          key={index}
          url={repo.url}
          name={repo.name}
          description={repo.description}
        />
      ))}
    </S.CardWrapper>
  </>
)

dit is mijn fout:

TypeError: cannot read property 'items' of undefined
<SCardWrapper>
  {itemShowcase.itemShowcase.items.node.map((repo, index) => (
...

https://i.sstatic.net/vzuj3.png

Andere gegevens zoals repositories, volgers en volgend werken nog steeds goed.

Bewerken: Wanneer ik Github Explorer opzet, zijn alle gegevens in orde.