How to call query manually？ about apollo HOT 23 CLOSED

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

from apollo.

Well, I've found this thread when looking answers for "how to call query manually" but in my case, I don't want query to be called when the component is mounted. It's a problem because when you implement modal components triggered from datatables, you want to fetch a single row's data on a specific moment.

That so, refetch() alone is not the case for this type of usage. But there's skip option to create a workaround;

apollo: {
  tags: {
    // GraphQL Query
    query: gql`query tagList ($type: String!) {
      tags(type: $type) {
        id
        label
      }
    }`,
    // Reactive variables
    variables() {
      return {
        type: this.type,
      }
    },
    // Disable the query
    skip() {
      return this.skipQuery
    },
  },
},
data: () => ({
  skipQuery: true,
  type: 'a fine type of something'
}),
methods: {
  triggerMyQuery () {
    this.$apollo.queries.tags.skip = false
    this.$apollo.queries.tags.refetch()
  }
}

Just call triggerMyQuery whenever you need and you'll have your data on demand.

from apollo.

You can refresh a query with this.$apollo.queries..refresh().

The refresh() method is now refetch() this.$apollo.queries.<name>.refetch().

from apollo.

@yasser-sobhy yes, because this issue is 7 months old

from apollo.

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

this could totally be in the docs.

from apollo.

can we get refetch() in the documentation please? As well as other useful methods for this.$apollo.queries.<name>

from apollo.

I am not sure if this is documented somewhere, but I just use $apollo.query() to manually call my queries. This is the way I do it. You create methods in your vue object for your queries like this:
(Please note that the example below is in Coffeescript, but should be straightforward to convert to JS)

getAccountProperties: (accountId) ->  
      @$apollo.query({
        query: listPropertiesQuery,
        variables:
          accountId: accountId
      }).then((response) =>
       # Do something with properties
       # properties = response.data.properties
      ).catch((response) =>
       # Something went wrong
        console.log response
      )

So, later, I can just call this.getAccountProperties(12), for example. Or in pure coffeescript lingo, that would be @getAccountProperties(12).

As an aside, I'm very happy with coffeescript, the learning curve is super low (since it's just basically JS without the BS, it saved 50% of my time and 50% fewer LOC to achieve the same thing with raw JS.

from apollo.

How to call refetch() when using Query Component?

from apollo.

@onurkose Did you try:

triggerMyQuery () {
  this.skipQuery = false
}

from apollo.

You can refresh a query with this.$apollo.queries.<name>.refresh().

from apollo.

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

took me a while to figure out that variables need to go as an object and not as a method. Just in case somebody makes my same mistake.

So do this:

variables: { varName: ... }

instead of:

variables() { 
  return {
    varName: ...
  }
}

from apollo.

Hi! I usually do that, but recently I found a problem with cache or something like that.
In my API, I have a resolver in Coupon type (this one have active property), and active is generated through use cases related to the coupon type.
When I call this query manually at first time, I have my correct 'active'. But if I update anything that changes my 'active' to another value, this still has the previous value. If I execute this query with the same variables in my API, active has the updated value, but in apollo query not.
In common queries I have fetchPolicy as a option to this problem. In smart query I don't have this, that's correct?
Have some way to resolve this?

from apollo.

I'm using this.$apollo.queries.<name>.refetch() and it does what I was looking for, so thank you very much!

but I'm calling this for every query in every page component mounted() method because I wanted all the data to refresh when any route changes.
is there a better way to do this? configure it as default or something like that?

from apollo.

@sharoneh I had the same question. On StackOverflow I found a great tip. If all you need is getting data from the graphql server to generate a list every time a component is mounted, this could help:

1. Use the option fetchPolicy="no-cache"

export default defineComponent({
  setup() {
    const { result, loading, error } = useMyQuery(
      () => {
        return { date: new Date() }
      },
      {
        pollInterval: 15 * 60 * 1000, // refresh data every 15 min
        fetchPolicy: 'no-cache',
      }
    )

2. Use the refetch() method while keeping the cache in place:

export default defineComponent({
  setup() {
    const { result, loading, error}, refetch } = useMyQuery(
      () => {
        return { date: new Date() }
      },
      {
        pollInterval: 15 * 60 * 1000, // refresh data every 15 min
      }
    )

    if (!loading.value) void refetch()

I hope this might help others with a similar question.

from apollo.

this.$apollo.queries.<name>.refetch().then(result => ...)

result will contain the cached data, not the refetched one. How and when can I get the new data after refetching?

from apollo.

Oops. That was the intention of making it dynamic right? :)
It's a better shorthand indeed.

from apollo.

How to call refetch() when using Query Component?

Has anybody a hint on that? If you are using the ApolloQuery component and you want to, lets say, just refetch it on an add/delete/update subscription event, how can you get the smart query of the component in the subscription handler? this.$apollo.queries. does not list the component query in that case.

I could access the query but it was definitely not a pretty way, given the fact that your ApolloQuery component has the ref of wrapper you can acces it with:

const query = wrapper.$_apollo.queries.query;

Now you can refetch with query.refetch().

from apollo.

I need to make a quick call when changing languages in i18n, right at the time of switching, to understand if the content is available in the new language.

I'm intercepting with the i18n callback app.i18n.beforeLanguageSwitch(), defined in a plugin.

But is it possible to make the apollo query call manually directly from the plugin?

from apollo.

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

Maybe you can suggest how to provide "skip" inside this call?

from apollo.

@DarkLite1 I was using the Apollo module for Nuxt and calling the refetch method also because of the caching, enabled by default. After some days searching for an answer I could work around the problem as I wrote here. Hope this helps anyone as well.

from apollo.

How to call refetch() when using Query Component?

Has anybody a hint on that? If you are using the ApolloQuery component and you want to, lets say, just refetch it on an add/delete/update subscription event, how can you get the smart query of the component in the subscription handler? this.$apollo.queries. does not list the component query in that case.

from apollo.

When I use refetch the loading doesn't get updated

from apollo.

Refetch only works if query.value has data.
How to actually load the query even if its first time and wait for response to be fully loaded from network?

from apollo.