Не могу вернуть логическое значение для запроса GraphQL из моего приложения React Typescript

Question

Я пытаюсь условно отобразить компонент реакции на основе значения некоторых данных в graphQL, когда я запрашиваю сервер с игровой площадкой, он работает отлично и отображает данные, которые мне нужно вставить в мое приложение - «ua»: true (показано на фото)

  return (
    <ProductCardWrapper onClick={onClick} className="product-card">
      <ProductInfo>
        <ProductImageWrapper>
          <Image
            url={image}
            className="product-image"
            style={{ position: "relative" }}
            alt={title}
          />
          {discountInPercent ? (
            <>
              <DiscountPercent>{discountInPercent}%</DiscountPercent>
            </>
          ) : (
            ""
          )}
        </ProductImageWrapper>
        <h3 className="product-title">{title}</h3>
        <span className="product-weight">{weight}</span>
        <div className="product-title"></div>
        <span className="product-weight">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus
          alias esse reiciendis, consectetur animi vitae est? Beatae, voluptatem
          eaque maiores corrupti molestias ipsa similique delectus ipsam? Et
          suscipit in odio?
        </span>
      </ProductInfo>

      <ProductIcons>
        {ua ? (
          <ProductIconTitles>
            <AppsIcon size="28" title="Unlock account" />
            <h3 className="product-title">TRUE</h3>
          </ProductIconTitles>
        ) : (
          <ProductIconTitles>
            <AppsIcon size="28" title="Unlock account" />
            <h3 className="product-title">FALSE</h3>
          </ProductIconTitles>
        )}

В результате в моем приложении отображается:

import { ObjectType, Field } from "type-graphql";

@ObjectType()
export default class Features {
  @Field({ nullable: true })
  ua: boolean;

  @Field({ nullable: true })
  managed: boolean;

  @Field({ nullable: true })
  support: boolean;

  @Field({ nullable: true })
  cdn: boolean;

  @Field({ nullable: true })
  backups: boolean;

  @Field({ nullable: true })
  scaleable: boolean;
}

И мой запрос на получение продуктов в Products.tsx - строка 61 для функций

import React, { useState } from "react";
import { useRouter } from "next/router";
import dynamic from "next/dynamic";
import gql from "graphql-tag";
import { openModal, closeModal } from "@redq/reuse-modal";
import ProductCard from "components/ProductCard/ProductCard";
import {
  ProductsRow,
  ProductsCol,
  ButtonWrapper,
  LoaderWrapper,
  LoaderItem,
  ProductCardWrapper,
} from "./Products.style";
import { CURRENCY } from "helper/constant";
import { useQuery } from "@apollo/react-hooks";
import Button from "components/Button/Button";
import Loader from "components/Loader/Loader";
import Placeholder from "components/Placeholder/Placeholder";
import Fade from "react-reveal/Fade";
import NoResultFound from "components/NoResult/NoResult";
import { Items } from "containers/CheckoutWithSidebar/CheckoutWithSidebar.style";

const QuickView = dynamic(() => import("../QuickView/QuickView"));

const GET_PRODUCTS = gql`
  query getProducts(
    $type: String
    $text: String
    $category: String
    $offset: Int
    $limit: Int
  ) {
    products(
      type: $type
      text: $text
      category: $category
      offset: $offset
      limit: $limit
    ) {
      items {
        id
        title
        slug
        unit
        price
        salePrice
        description
        discountInPercent
        type
        image
        gallery {
          url
        }
        categories {
          id
          title
          slug
        }
        features {
          ua
          managed
          support
          cdn
          backups
          scaleable
        }
      }
      hasMore
    }
  }
`;

и мой файл product.query.ts:

import gql from "graphql-tag";

export const GET_PRODUCT_WITH_RELATED_PRODUCTS = gql`
  query getProductWithRelatedProducts($slug: String!, $type: String!) {
    product(slug: $slug) {
      id
      title
      weight
      slug
      price
      type
      image
      categories {
        id
        slug
        title
      }
      features {
        ua
        managed
        support
        cdn
        backups
        scaleable
      }
    }
    relatedProducts(slug: $slug, type: $type) {
      id
      title
      slug
      weight
      price
      type
      image
    }
  }
`;

export const GET_RELATED_PRODUCTS = gql`
  query getRelatedProducts($type: String!, $slug: String!) {
    relatedProducts(type: $type, slug: $slug) {
      id
      title
      slug
      weight
      price
      type
      image
    }
  }
`;

export const GET_PRODUCT = gql`
  query getProduct($slug: String!) {
    product(slug: $slug) {
      id
      title
      weight
      slug
      price
      discountInPercent
      type
      gallery {
        url
      }
      image
      categories {
        id
        slug
        title
      }
      features {
        ua
        managed
        support
        cdn
        backups
        scaleable
      }
    }
  }
`;
export const GET_PRODUCT_DETAILS = gql`
  query getProduct($slug: String!) {
    product(slug: $slug) {
      id
      slug
      title
      type
      unit
      price
      salePrice
      description
      discountInPercent
      gallery {
        url
      }
      features {
        ua
        managed
        support
        cdn
        backups
        scaleable
      }
      image
      categories {
        id
        slug
        title
      }
      author {
        id
        name
        avatar
        bio
        socials {
          id
          media
          profileLink
        }
      }
      meta {
        publisher
        isbn
        edition
        languages
        country
        numberOfReader
        numberOfPage
        samplePDF
      }
    }
  }
`;

и, наконец, показываю, что я импортирую функции из ./feature.type вот мой файл product.type.ts полностью

import { ObjectType, Field, ID } from "type-graphql";
import { ProductType } from "./product.enum";
import Category from "../category/category.type";
import Gallery from "./gallery.type";
import Features from "./feature.type";
import PaginatedResponse from "../../helpers/paginated-response";

@ObjectType()
export class Meta {
  @Field()
  publisher: string;

  @Field()
  isbn: string;

  @Field()
  edition: string;

  @Field()
  country: string;

  @Field(() => [String])
  languages: string[];

  @Field()
  numberOfReader: string;

  @Field()
  numberOfPage: string;

  @Field()
  samplePDF: string;
}

@ObjectType()
export class Social {
  @Field(() => ID)
  id: string;

  @Field()
  media: string;

  @Field()
  profileLink: string;
}

@ObjectType()
export class Author {
  @Field(() => ID)
  id: string;

  @Field()
  name: string;

  @Field()
  avatar: string;

  @Field()
  bio: string;

  @Field()
  email: string;

  @Field()
  website: string;

  @Field(() => [Social])
  socials: Social[];
}

@ObjectType()
export default class Product {
  @Field()
  id: number;

  @Field()
  slug: string;

  @Field()
  title: string;

  @Field({ nullable: true })
  feature: boolean;

  @Field(() => ProductType)
  type: ProductType;

  @Field(() => [Category])
  categories: Category[];

  @Field()
  unit: string;

  @Field()
  image: string;

  @Field(() => [Gallery])
  gallery: Gallery[];

  @Field(() => [Features], { nullable: true })
  features: Features[];

  @Field()
  description: string;

  @Field()
  price: number;

  @Field()
  salePrice: number;

  @Field()
  discountInPercent: number;

  @Field(() => Author, { nullable: true })
  author?: Author;

  @Field(() => Meta, { nullable: true })
  meta?: Meta;

  @Field()
  createdAt: Date;
}

@ObjectType()
export class ProductResponse extends PaginatedResponse(Product) {
  constructor(productResponse: ProductResponse) {
    super();
    Object.assign(this, productResponse);
  }


}

Также вот код для моей ProductsRow

  return (
    <>
      <ProductsRow>
        {data.products.items.map((item: any, index: number) => (
          <ProductsCol key={index}>
            <ProductCardWrapper>
              <Fade
                duration={800}
                delay={index * 10}
                style={{ height: "100%" }}
              >
                <ProductCard
                  ua={item.features.ua}
                  title={item.title}
                  description={item.description}
                  image={item.image}
                  weight={item.unit}
                  currency={CURRENCY}
                  price={item.price}
                  salePrice={item.salePrice}
                  discountInPercent={item.discountInPercent}
                  data={item}
                  deviceType={deviceType}
                  onClick={() =>
                    handleQuickViewModal(item, deviceType, handleModalClose)
                  }
                />