How to iterate GraphQL aggregate nodes in Vuejs v-for

Question

How to automate iteration in that cases, via VueJS or plain JS?

In Vue component:

ul(v-for='item in app_some')
    li {{ item.slug }}
    li {{ item.des1 }}

    //case 1: there can be from null to several nodes
    li {{ item.app_some_some_groups_aggregate.nodes[0] }}
    li {{ item.app_some_some_groups_aggregate.nodes[3] }}

    //case 2: there can be from null to thousand nodes
        li {{ item.app_des_aggregate.nodes[1] }}   
        li {{ item.app_des_aggregate.nodes[1000] }}

POST response from Hasura server:

[ { "slug": "slugname", "des1": "descr1", "des2": "descr2", "__typename": "app_some", "app_some_some_groups_aggregate": { "nodes": [ { "app_some_group": { "slug": "slugname2", "des3": "descr3", "des4": "descr4", "__typename": "app_some_group" }, "__typename": "app_some_some_group" }, { "app_some_group": { "slug": "slugname3", "des3": "descr3", "des4": "descr4", "__typename": "app_some_group" }, "__typename": "app_some_some_group" } ], "__typename": "app_some_some_group_aggregate" }, "app_des_aggregate": { "nodes": [ { "app_some": { "slug": "slugname", "__typename": "app_some" }, "app_des_type": { "des5": "descr5", "des6": "descr6", "__typename": "app_des_type" }, "des7": "descr7", "des8": "descr8", "__typename": "app_des" }], "__typename": "app_des_aggregate" } } ]

How to automate iteration, if there are several, 100 or 1000 nodes?

At the moment, it isn't clear what you are looking for. Could you update your question to describe what the final output should be like? Or perhaps explain further what you mean by "automate iteration" — callmekatootie, Jul 26 '19 at 16:22
task solved by using v-for twice (first as mentioned, second on nodes) In GraphQL aggregation query can be many multilayers with different quantity of nodes on different layers - and passing data in child components as final output) — Graphql2020, Jul 26 '19 at 16:52
Perhaps you can answer your own question and accept it, to mark this question as resolved — callmekatootie, Jul 26 '19 at 17:01

score 0 · Accepted Answer · answered Jul 26 '19 at 17:09

0

Task solved using v-for twice:

ul(v-for='(item) in app_some')
  template(v-for='list in item.app_some_some_groups_aggregate.nodes')
    li {{list.app_some_group.slug}}
    li {{list.app_some_group.des3}}

answered Jul 26 '19 at 17:09

Graphql2020

11
1

How to iterate GraphQL aggregate nodes in Vuejs v-for

1 Answers1