Search code examples
javascriptreactjsgraphqlapollo

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;
Solution

  • 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;