Vue-Apollo and query autocomplete

Question

I'm new to Vue and i'm trying now to do a query update on q-autocomplete component (i have to use Quasar Framework).

This is the FormAdmin component:

<template> 
  <q-form @submit="submit" @reset="onReset" class="q-gutter-md">      
    <q-select
        filled
        v-model="form.UserId"
        label="User Email"
        use-input
        hide-selected
        fill-input
        input-debounce="0"
        :options="options"
        @filter="filterFn"
        hint="Mininum 2 characters to trigger autocomplete"
        style="width: 250px; padding-bottom: 32px"
      >
        <template v-slot:no-option>
          <q-item>
            <q-item-section class="text-grey">
              No results
            </q-item-section>
          </q-item>
        </template>
      </q-select>

    <div>
      <q-btn label="Submit" type="submit" color="primary"/>
      <q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm" />
    </div>
  </q-form>
</template>

This is the basic code for the update function into the filterFn:

<script>
export default {
  data () {
    return {
      model: null,
      options: null,
    }
  },
  props: ['form', 'submit'],
  methods: {
    filterFn (val, update, abort) {
      if (val.length < 3) {
        abort()
        return
      }

      update(() => {
        console.log(val);
      })
    },
    onReset(){

    },
  }
}
</script>

I tried this code:

    <script>

import gql from 'graphql-tag';

const stringOptions = gql`
  query {
    filterUsersListFirst {
      UserEmail
    }
  }`

export default {
  data () {
    return {
      model: null,
      options: Object.values(stringOptions),
    }
  },
  props: ['form', 'submit'],
  methods: {
    filterFn (val, update, abort) {
      if (val.length < 3) {
        abort()
        return
      }

      this.$apollo.query({
          query: gql`query($email: String!) {
            filterUsersListByEmail(
              email: $email
            ) {
              UserEmail
            }
          }`,
          variables: {
            email: val,
          }
        }).then(data => {
          console.log(JSON.stringyfy(data));
          this.options = Object.values(data);
        }).catch(error =>{
          console.log({error});        
        });
    },
    onReset(){

    },
  }

}

</script>

I tried graphql query server-side and it works. Also i tried to print data that the Promise returns and it results in:

{"data":{"filterUsersListByEmail":[{"UserEmail":"email1","__typename":"User"},{...}]},"loading":false,"networkStatus":7,"stale":false}

But i don't know how to append the query result in the q-select options.

Answer 1

I found myself the solution and i'll write it:

methods: {
    filterFn (val, update, abort) {
      if (val.length < 3) {
        abort()
        return
      }
      setTimeout(() => {
        update(() => {
          this.$apollo.query({
            query: gql`query($email: String!) {
              filterUsersListByEmail(
                email: $email
              ) {
                UserId
                UserEmail
              }
            }`,
            variables: {
              email: val,
            }
          }).then(data => {
            var emailList = [];
            for(var i = 0; i < data.data.filterUsersListByEmail.length; i++)
            {
              emailList[i] = JSON.parse('{"label":"' + data.data.filterUsersListByEmail[i].UserEmail + '", "value":"' + data.data.filterUsersListByEmail[i].UserId + '"}');
            }
            this.options = usersList;
          }).catch(error =>{
            console.log({error});        
          });
        })
      }, 1000)


    },
    onReset(){
      ...
    },
  }