What's the best way to display received data in components via GraphQL in NextJS?

Question

There is a project, the frontend part is written in NextJS, the backend is in Strapi + PostgressSQL. Strapi page data is obtained through the Apollo Client, types are generated from it through the GraphQL Code Generator. What is the best way to render this data? By types generated by the Code Generator, or write an adapter that will convert the data into the form required for the components? Thank you in advance!

Sample request for getting data from the main page.

{
  home {
    data {
      attributes {
       
        menu {
          data {
            attributes {
              logo {
                data {
                   attributes {
                     name
                     width
                     height
                     url
                  }
                }
              }
              MainList {
                id
                text
                href
                PopupList
              }
              SecondaryList {
                text
                href
              }
            }
          }
        }
        content {
          __typename
           ...  on  ComponentLayoutsBannerSlider {
                 Slides {
              id
              img {
                data {
                  attributes {
                    name
                    width
                    height
                    url
                  }
                }
              }
              content
            }
            }
          
          ... on ComponentLayoutsCardZone {
            header
            Cards {
              id
              header
              description
              actions
              type
              img {
                data {
                  attributes {
                    name
                    width
                    height
                    url
                  }
                }
              }
            }
          }
          
          ... on ComponentLayoutsTrendsSection {
            header
            TrendsList {
              id
              icon {
                data {
                  attributes {
                    name
                    width
                    height
                    url
                  }
                }
              }
              text
            }
          }
          
          ... on ComponentLayoutsHomeBanner {
            HomeBannerList {
              content
            }
          }
          
          ... on ComponentLayoutsTimeline {
            TimelineList {
              id
              Header
              LeftContent
              RightContent
              year
            }
          }
        }
        
        footer {
          data {
            attributes {
              Content {
                MenuList {
                  icon {
                    data {
                      attributes {
                        name
                        width
                        height
                        url
                      }
                    }
                  }
                  text
                  href
                }
                
                SecondaryMenu {
                  icon {
                    data {
                      attributes {
                        name
                        width
                        height
                        url
                      }
                    }
                  }
                  text
                  href
                }
                
                Body {
                  id
                  list
                  title
                }
                
                logo {
                  data {
                    attributes {
                      name
                      width
                      height
                      url
                    }
                  }
                }
              }
            }
          }
        }
        
        legal {
          data {
            attributes {
              content
              slug
            }
          }
        }
      }
    }
  }
}

The problem is that the types generated by the GraphQL Code Generator have a very complex structure. It is assumed that the data will be received (getStaticProps) in the page component and then propagated to child components.