Vue-apollo: How to do query on button click?

[NCR-Shi]

I want to say thanks first for this great Apollo integration!
I ran into some problem recently and got no answer after googling around. The scenario is pretty simple: I don't want the query to be called automatically when the page/components is loaded, I just want to call the query on button click.
So in React with react-apollo I can do something like this:

import { withApollo } from 'react-apollo';
import{ Component } from 'react';

class MyComponent extends Component {
  doQuery() {
    this.props.client.query({
      query: myCustomQuery,
      variables: {
        variable1,
        variable2,
      }
    })
  }
  render() {
    <button onClick={() => this.doQuery}></button>
  }
} 

export default withApollo(MyComponent);

The 'client' prop comes from withApollo HOC
I wonder if there is a way to do this in vue-apollo?
Looked into this issue #36 , but I believe the answer provided does not meet my need, because "refetch" will simply do the query again with same query/variables. I am searching for a way in which every time I click the button I can get different queries according to my variables.

[Akryum]

You can either use this.$apollo.query(...) or use skip in the smart query definition:

export default {
  data () {
    return {
      myVariables: null,
    },
  },

  apollo: {
    items: {
      query: GQL_QUERY,
      variables () {
        return this.myVariables
      },
      skip () {
        return !this.myVariables
      },
    },
  },

  methods: {
    onButtonClick () {
      this.myVariables = {
        // ...
      },
    },
  },
}

[NCR-Shi]

Thanks for you reply. So with the skip, will it help me avoid auto query on component load? (Because I only want the query on button click). If not, is there any other ways to do this?

[Akryum]

I showed you two different ways already. :smile:

[NCR-Shi]

Oh I see what you are saying. this.$apollo.query works perfectly for me. Thanks!

[indpurvesh]

@Akryum thanks for the answer. I have another question:

• How do we specify custom client when we do query/mutation on a click event.

    this.$apollo.mutate({
          mutation: UserAuth,
         variables: {
             email: "[email protected]",
             password: "admin123",
          },
    }).then((data) => {
      return data;
    }).catch((error) => {
      // Error
      console.error(error)
      // We restore the initial user input
    });
  

[indpurvesh]

@Akryum i got the answer. Just in case if someone wants to know the solution.

methods: {
    async authMutation() {
        this.$apollo.client = "auth"; // replace auth with your client id from vue-apollo.js file.
        return this.$apollo.mutate({
             mutation: UserAuth,
            clientId: 'auth',
            variables: {
               email: "[email protected]", // change this to actual data
               password: "admin123", // change this to actual data
            },
         }).then((data) => {
          return data;
         }).catch((error) => {
            console.error(error)
        });
    }
}