How would I run a query on submit?

[webdevike]

I am trying to make some search functionally in my app. On the backend I am hitting an API using Apollo's data sources package. I would like to be able to run this query after firing off a form submission.

Doesn't work

<template>
  <div>
    <input v-model="companyName" type="text" />
    <button @click="search">Submit</button>
  </div>
</template>

<script>
import gql from 'graphql-tag'

export default {
  layout: 'dash',
  data() {
    return {
      companyName: 'Walmart',
      city: '',
      state: '',
      subcode: ''
    }
  },
  methods: {
    async search() {
      await this.$apollo.query({
        query: gql`
          query experianSearchResults(
            $companyName: String!
            $city: String!
            $state: String!
            $subcode: String!
          ) {
            experianSearchResults(
              data: {
                companyName: $companyName
                city: $city
                state: $state
                subcode: $subcode
              }
            ) {
              companyName
              city
              state
            }
          }
        `,
        variables() {
          return {
            companyName: this.companyName,
            city: this.city,
            state: this.state,
            subcode: this.subcode
          }
        }
      })
    }
  }
}
</script>

Does work but feels super hacky

<template>
  <div>
    <input v-model="companyName" type="text" />
    <button @click="search">Search</button>
    <div v-for="(searchResult, index) in experianSearchResults" :key="index">
      {{ searchResult.companyName }}
    </div>
  </div>
</template>

<script>
import EXPERIAN_QUERY from '../queries/experian'
export default {
  layout: 'dash',
  data() {
    return {
      companyName: '',
      city: '',
      state: '',
      subcode: ''
    }
  },
  apollo: {
    experianSearchResults: {
      query: EXPERIAN_QUERY,
      variables() {
        return {
          companyName: this.companyName,
          city: this.city,
          state: this.state,
          subcode: this.subcode
        }
      },
      skip() {
        return this.skip
      }
    }
  },
  methods: {
    search() {
      this.$apollo.queries.experianSearchResults.skip = false
    }
  }
}
</script>

<style></style>

[georgyfarniev]

Hi @ikey2244, you can use this.$apollo.* api for this purpose. It's not well documented, but you can see some TOC here: https://vue-apollo.netlify.com/api/dollar-apollo.html.
So, you will have something like that:

this.$apollo.query({
  query: gql`query foo { foo }`,
  variables: {...}
})

I highly recommend to look at types of this.$apollo if you use typescript.

Hope this helps. If something unclear, please let me know and I will explain it to you.

[webdevike]

@georgyfarniev Thank you! I'll see what I can do.