javascript - How to map a aliased graphql query in react/js?
问题描述
I have this data/result object coming from 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",…},…]
I have used 4 aliased sub queries and therefore get 4 nested objects... How do I map them all at once?
When I used a normal query without aliasing I simply used:
{data.awarded_casinos.map((casino) => (
<Featured key={casino.id} casino={casino} />
))}
I assume its not ideal doing one .map for each object.....
This is my query (might not be relevant):
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;
解决方案
You can concatenate them in one array and map over that new array
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} />
))}
BTW you could have a less verbose query using GraphQL fragments. Assuming the casino type is called Casino
, the query would look like this:
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;
推荐阅读
- json - 将 Json 响应中的对象列表映射到颤动中的列表
- electron - 为什么 nyc 只从我的 Electron 进程的主进程中捕获文件?
- python - 将两个连续的词视为词频中的一个
- sql - Postgresql“+”符号用于回车/zsh脚本的新行
- javascript - 为什么我不能在 jasmine 的 expectAsync 中使用匿名函数?
- mips - 我如何将 1 添加到内存中的第一个值并将该值存储在相邻的单词中,并将该值的副本放入寄存器 $v0
- javascript - 从@符号导入Javascript Vue
- java - 给定一个字符串数组,编写一个递归方法,在 O(n) 中搜索给定字符串并返回索引。LMK 如何修复错误
- mysql - 如何在超聚合行中保持其“NULL”值的同时重命名“group by with rollup”列名
- ios - 如何确定哪个 Core Data 可转换属性未使用安全编码