Multiple Queries, show result in same div

Question

When clicking "Popular", how to replace contents with result from new query (getPopular)?

( v-for="casino in allCasinos" needs to instead show: v-for="casino in getPopular" )

<div @click="activate(1); getPopular();">Popular</div>
<div @click="activate(2); getNew();">New</div>

<div id="list" v-for="casino in allCasinos" :key="casino.name">
  <div v-if="$apollo.loading">Loading...</div>
  <div>{{ casino.name}}</div>
</div>

<script>
import gql from 'graphql-tag';
methods: {
  activate:function(el){
      this.active_el = el;
  },
},
apollo: {
  allCasinos: gql`{
    allCasinos(limit: 6) {
      name,
    }
  }`,
  getPopular: gql`{
    getPopular(limit: 6) {
      name,
    }
  }`,
  getNew gql`{
    getNew(limit: 6) {
      name,
    }
  }`,
</script>

xadm · Answer 1 · 2019-04-06T09:50:59.733

1

In this case, there is no reason to use separate queries - use one common query with filter (beside limit) parameter.

UPDATE

casinos: gql`query casinos($filter: String!) {
    casinos(filter: $filter, limit: 6) {
        name
    }
}`,

edited Apr 06 '19 at 09:50

answered Apr 05 '19 at 12:05

xadm

8,219
3
14
25

How would you be passing the value from clicked choice/div to the dynamic filter of query? – Toothfairy Apr 06 '19 at 08:53
By standard graphql variables - docs: https://akryum.github.io/vue-apollo/guide/apollo/queries.html#reactive-parameters – xadm Apr 06 '19 at 09:19
Rather `filter: $filter` and type def in query. Prepare api, test with `graphiql`? – xadm Apr 06 '19 at 09:35
Thanks a lot for your time ... I just tried the following: https://dpaste.de/KXBL but unfortunately it results in, ** (FunctionClauseError) no function clause matching in GraceApiWeb.CasinoResolver.all_casinos/2 . Do you know why? – Toothfairy Apr 06 '19 at 14:48
I prefer react and don't work with elixir ;) Probably there shoud be `arg: filter, :string` ... and you don't have a function/method `list_casinos` aware of two args? – xadm Apr 06 '19 at 15:38

score 0 · Answer 2 · answered Apr 05 '19 at 12:07

0

You could define a local data property, casinos, that stores the current set of casinos you want to display. And you could set the value of casinos in each of your click handlers. Finally you could use casinos instead of allCasinos in your v-for:

<div @click="activate(1); casinos = getPopular();">Popular</div>
<div @click="activate(2); casinos = getNew();">New</div>

<div id="list" v-for="casino in casinos" :key="casino.name">
  <div v-if="$apollo.loading">Loading...</div>
  <div>{{ casino.name}}</div>
</div>

<script>
import gql from 'graphql-tag';
data: function () {
  return {
    casinos: this.allCasinos
  }
},

answered Apr 05 '19 at 12:07

D Malan

10,272
3
25
50

Interesting and I think this is the way to go, but how would I connect the result of each query to "casinos" ? "And you could set the value of casinos in each of your click" How does this look like? Thank you for your time – Toothfairy Apr 05 '19 at 12:29
See the first line of code in my answer. It includes `casinos = getPopular()` – D Malan Apr 05 '19 at 12:50
This way can look like an easier one but definitively not `the right way` neither `apollo/graphql way`. Just imagine another requirements, f.e. sorting order, search, another filters. Looks easy but increasing client complexity (and suitable only for small datasets) vs just next query parameters. – xadm Apr 05 '19 at 13:17

Multiple Queries, show result in same div

2 Answers2