refetch without loading being true

[philippkuehn]

Is there a way to refetch a query without loading being true? Sometimes it would be nice to refetch data in the background without showing a loader. I can't find a way to differentiate between an initial fetch and a refetch.

[przemkow]

You could try to use apollo-client networkStatus instead of loading state.

Maybe this solution is quite hacky but I think it should solve the problem:

For SmartQuery:

  // You can define new data property in your component which stores networkStatus of the query.
  data() {
    return {
      myQueryNetworkStatus: 1, // I set it to 1 to solve the problem with not emited result during initial loading.
    };
  },
  // In apollo smart query definition use result from `apollo-client` result to overwrite `myQueryNetworkStatus` value
  apollo: {
    myQuery: {
      query: ...,
      result(res, key) {
        this.myQueryNetworkStatus = res.networkStatus;
      },
      // By default result will emit only when data are ready (networkStatus === 7) if you want to have it on every update you need to set `notifyOnNetworkStatusChange`property to true
      notifyOnNetworkStatusChange: true,
    }
  },

then in your view 

If you are using Query component I guess the solution would look like this:

<ApolloQuery
    :query="require('../graphql/HelloWorld.gql')"
    :notifyOnNetworkStatusChange="true"
    :variables="{ name }">
  <template slot-scope="{ result: { networkStatus, data }, isLoading }">
    <div v-if="isLoading && networkStatus !== 4" class="loading apollo">Loading...</div>
    <div v-else class="result apollo">{{ data.hello }}</div>
  </template>
</ApolloQuery>

Loading state still seems for me a bit confusing (comparing for example to react-apollo) if someone has a better idea how to handle that I would be happy to see it. 🙂

[philippkuehn]

Ah networkStatus is interesting. Thanks! Ugly but works for now.

[zjbarg]

is this working for you?