如何在 react/js 中映射别名 graphql 查询？

Question

我有这个 data/result 对象来自 apollo/GraphQL:

data: {,…}
awarded_casinos: [{Mobile: true, Popular: true, Awarded: true, Live: false, slug: "mr-vegas-casino",…},…]
0: {Mobile: true, Popular: true, Awarded: true, Live: false, slug: "mr-vegas-casino",…}
1: {Mobile: true, Popular: false, Awarded: true, Live: true, slug: "leo-vegas-casino",…}
2: {Mobile: true, Popular: true, Awarded: true, Live: true, slug: "snabbis-casino",…}
3: {Mobile: true, Popular: true, Awarded: true, Live: false, slug: "frank-casino", name: "Frank Casino",…}
live_casinos: [{Mobile: true, Popular: false, Awarded: true, Live: true, slug: "leo-vegas-casino",…},…]
mobile_casinos: [{Mobile: true, Popular: true, Awarded: true, Live: false, slug: "mr-vegas-casino",…},…]
0: {Mobile: true, Popular: true, Awarded: true, Live: false, slug: "mr-vegas-casino",…}
1: {Mobile: true, Popular: false, Awarded: true, Live: true, slug: "leo-vegas-casino",…}
2: {Mobile: true, Popular: true, Awarded: true, Live: true, slug: "snabbis-casino",…}
3: {Mobile: true, Popular: true, Awarded: true, Live: false, slug: "frank-casino", name: "Frank Casino",…}
4: {Mobile: true, Popular: true, Awarded: false, Live: false, slug: "slotv-casino", name: "Slotv Casino",…}
popular_casinos: [{Mobile: true, Popular: true, Awarded: true, Live: false, slug: "mr-vegas-casino",…},…]

我使用了 4 个带别名的子查询，因此获得了 4 个嵌套对象... 如何一次映射它们？

当我使用没有别名的普通查询时，我简单地使用了：

              {data.awarded_casinos.map((casino) => (
                <Featured key={casino.id} casino={casino} />
              ))}

我认为为每个对象做一个 .map 并不理想......

这是我的查询（可能不相关）：

const CASINO_QUERY = gql`
query casinos($popular: Boolean, $awarded: Boolean, $mobile: Boolean, $live: Boolean ) {
    
    popular_casinos: casinos(where: { Popular: $popular })
    {
    Mobile
    Popular
    Awarded
    Live
    slug
    name
    logo {
      url
    }
    rating
    owner
    founded
    payout_percentage
    expert_consensus
    min_deposit
    max_deposit
    payouts
    total_rating
    games
    withdrawals
    website_experience
    url
    aff_link
    theme_color
    bonuses_info
    featured_bonus_1
    featured_bonus_type
    bonuses {
      name
      slug
      title
      amount
      code
      min_deposit
      value
      wager
      cashable
      bonus_type {
        name
      }
    }
    deposit_methods {
      name
      logo {
        url
      }
    }
    securities {
      name
      logo {
        url
      }
    }
    supported_devices {
      name
      logo {
        url
      }
    }
  }

  awarded_casinos: casinos(where: { Awarded: $awarded })
    {
    Mobile
    Popular
    Awarded
    Live
    slug
    name
    logo {
      url
    }
    rating
    owner
    founded
    payout_percentage
    expert_consensus
    min_deposit
    max_deposit
    payouts
    total_rating
    games
    withdrawals
    website_experience
    url
    aff_link
    theme_color
    bonuses_info
    featured_bonus_1
    featured_bonus_type
    bonuses {
      name
      slug
      title
      amount
      code
      min_deposit
      value
      wager
      cashable
      bonus_type {
        name
      }
    }
    deposit_methods {
      name
      logo {
        url
      }
    }
    securities {
      name
      logo {
        url
      }
    }
    supported_devices {
      name
      logo {
        url
      }
    }
  }


  mobile_casinos: casinos(where: { Mobile: $mobile })
    {
    Mobile
    Popular
    Awarded
    Live
    slug
    name
    logo {
      url
    }
    rating
    owner
    founded
    payout_percentage
    expert_consensus
    min_deposit
    max_deposit
    payouts
    total_rating
    games
    withdrawals
    website_experience
    url
    aff_link
    theme_color
    bonuses_info
    featured_bonus_1
    featured_bonus_type
    bonuses {
      name
      slug
      title
      amount
      code
      min_deposit
      value
      wager
      cashable
      bonus_type {
        name
      }
    }
    deposit_methods {
      name
      logo {
        url
      }
    }
    securities {
      name
      logo {
        url
      }
    }
    supported_devices {
      name
      logo {
        url
      }
    }
  }  


live_casinos: casinos(where: { Live: $live })
{
Mobile
Popular
Awarded
Live
slug
name
logo {
  url
}
rating
owner
founded
payout_percentage
expert_consensus
min_deposit
max_deposit
payouts
total_rating
games
withdrawals
website_experience
url
aff_link
theme_color
bonuses_info
featured_bonus_1
featured_bonus_type
bonuses {
  name
  slug
  title
  amount
  code
  min_deposit
  value
  wager
  cashable
  bonus_type {
    name
  }
}
deposit_methods {
  name
  logo {
    url
  }
}
securities {
  name
  logo {
    url
  }
}
supported_devices {
  name
  logo {
    url
  }
}
}

}
`;

export default CASINO_QUERY;

Answer 1

您可以将它们串联成一个数组并映射到新数组

  const { popular_casinos, awarded_casinos, mobile_casinos, live_casinos } =
    data;
  const allCasinos = [
    ...popular_casinos,
    ...awarded_casinos,
    ...mobile_casinos,
    ...live_casinos,
  ];
...
    {allCasinos.map((casino) => (
      <Featured key={casino.id} casino={casino} />
    ))}

顺便说一句，您可以使用 GraphQL fragments 进行更简洁的查询。假设赌场类型称为 Casino，查询将如下所示：

const CASINO_QUERY = gql`
  query casinos(
    $popular: Boolean
    $awarded: Boolean
    $mobile: Boolean
    $live: Boolean
  ) {
    popular_casinos: casinos(where: { Popular: $popular }) {
      ...CasinoParts
    }

    awarded_casinos: casinos(where: { Awarded: $awarded }) {
      ...CasinoParts
    }

    mobile_casinos: casinos(where: { Mobile: $mobile }) {
      ...CasinoParts
    }

    live_casinos: casinos(where: { Live: $live }) {
      ...CasinoParts
    }
  }

  fragment CasinoParts on Casino {
    Mobile
    Popular
    Awarded
    Live
    slug
    name
    logo {
      url
    }
    rating
    owner
    founded
    payout_percentage
    expert_consensus
    min_deposit
    max_deposit
    payouts
    total_rating
    games
    withdrawals
    website_experience
    url
    aff_link
    theme_color
    bonuses_info
    featured_bonus_1
    featured_bonus_type
    bonuses {
      name
      slug
      title
      amount
      code
      min_deposit
      value
      wager
      cashable
      bonus_type {
        name
      }
    }
    deposit_methods {
      name
      logo {
        url
      }
    }
    securities {
      name
      logo {
        url
      }
    }
    supported_devices {
      name
      logo {
        url
      }
    }
  }
`;

export default CASINO_QUERY;

如何在 react/js 中映射别名 graphql 查询？

How to map a aliased graphql query in react/js?

javascript

apollo

reactjs

graphql