reactjs - Problem med GraphQL och TypeScript när jag mappar data till komponenter

Jag gör en SSR med GraphQL och Next.js men jag har ett problem när jag försöker mappa viss data.

Jag hämtar viss data från Github GraphQL API (Följare, Följande, Offentliga Repos) och när jag skickar denna data till koden fungerar all min data bra. Men när jag försöker mappa mina Showcase Repos för att skriva ut på skärmen, börjar problemen, kan någon hjälpa mig?

Min stack just nu är GraphQL (GraphQl-request), Next.js, styled-components och TypeScript.

Detta är min fråga:

  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
    }
  }

och det här är mina typer just nu:

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
}

Mitt samtal på index.tsx

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

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

Ännu på min index.tsx, jag har denna komponent där jag behöver skicka datan:

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

Och slutligen är detta min komponent:

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>
  </>
)

det här är mitt fel:

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

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

Andra data som arkiv, följare och följande fungerar fortfarande bra.

Redigera: När jag öppnar Github Explorer är all data korrekt.