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. 😄

[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)
        });
    }
}