如何在 react/js 中映射别名 graphql 查询？
Posted
技术标签:
【中文标题】如何在 react/js 中映射别名 graphql 查询？【英文标题】：How to map a aliased graphql query in react/js? 【发布时间】：2021-11-12 23:33:46 【问题描述】：我有这个来自 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;
【问题讨论】：
【参考方案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;
【讨论】：
非常感谢，效果很好...顺便发现了一些东西，我在我的对象中收到了很多重复的赌场，有没有简单的方法来过滤 slug 并且只获得唯一的? 谢谢，你为我节省了很多时间......这解决了它： const ids = allCasinos.map(o => o.slug) const filters = allCasinos.filter((slug, index) => !ids.includes(slug, index + 1))以上是关于如何在 react/js 中映射别名 graphql 查询？的主要内容，如果未能解决你的问题，请参考以下文章