loading is always false

[aleks63]

    <ApolloQuery :query="require('~/apollo/queries/profiles.gql')">
      <template slot-scope="{ result: { loading, error, data } }">
        <div v-if="loading">loading...</div>
        <div v-else-if="error">error</div>
        <b-row v-else-if="data">
          <b-col cols="6" v-for="{ node } in data.profiles.edges" :key="node.id">
            <h3><b-link :to="`${$route.path}/${node.id}`">{{node.name}}</b-link></h3>
          </b-col>
        </b-row>
        <div v-else>no data</div>
      </template>
    </ApolloQuery>

loading is always false
Why?

[Akryum]

Are you doing SSR?

[aleks63]

yes, with nuxt, no prefetch

[bbugh]

We just ran into this as well, and are not doing SSR, everything is client side.

<ApolloQuery :query="require('#/queries/reports.gql')" :variables="{projectId: projectId}">
  <template slot-scope="{ result }">
    {{ result }}
    <div v-if="result.loading">Loading...</div>
    <div v-else-if="result.data">{{ result.data }}</div>
  </template>
</ApolloQuery> 

result.loading is false from start to finish. We've tested on the server with a sleep command, and it's always false.

Looking at the code for ApolloQuery, loading is set to false by default, but then only updated when receiving a message from the smartquery in result. Changing the default loading: false to loading: true fixes the issue for us (loading is true until it finishes loading, then it's false), though I don't know if that's the optimal change.

--- node_modules/vue-apollo/dist/vue-apollo.umd.js	2018-06-20 10:42:53.000000000 -0500
+++ node_modules/vue-apollo/dist/vue-apollo.umd.js	2018-06-20 10:42:56.000000000 -0500
@@ -3629,7 +3629,7 @@
     return {
       result: {
         data: null,
-        loading: false,
+        loading: true,
         networkStatus: 7,
         error: null,
         times: 0

[dihmeetree]

Also ran into this! I'm using the default example that's created in https://github.com/Akryum/vue-cli-plugin-apollo.

  <ApolloQuery
      :query="require('../graphql/HelloWorld.gql')"
      :variables="{ name }"
    >
      <template slot-scope="{ result: { loading, error, data } }">
        <!-- Loading -->
        <div v-if="loading" class="loading apollo">Loading...</div>

        <!-- Error -->
        <div v-else-if="error" class="error apollo">An error occured</div>

        <!-- Result -->
        <div v-else-if="data" class="result apollo">{{ data.hello }}</div>

        <!-- No result -->
        <div v-else class="no-result apollo">No result :(</div>
      </template>
    </ApolloQuery>

When I run the example... It never says loading.. it says No Result :( before the data is loaded..

[kierglover]

We found out that using isLoading works, but is it the right way to do?

[coderek]

Yeah, weird, only this works for me

<template slot-scope="{ result: {loading, error, data}, isLoading }">
        <div v-if="loading">Loading...</div>

[micksi]

Having the same problem and can confirm that @coderek solution seems to do the trick. Add a timeout on the server and loading was false from start to beginning. isLoading is however an integer toggling from 1 to 0 instead of a boolean. I haven't been able to find the docs about this "isLoading".

[LukeJBullard]

I am experiencing this issue as well, but I'm using the apollo object in my component rather than using the ApolloQuery component. I used the Vue chrome extension to watch the value of loading and just like @micksi found, the loading value never changed.

Another hacky workaround:

1. Create a data variable 'loading', default it to true.
2. Create watchers for everything that would make the query refetch, and have the watchers set loading to true
3. Define the query->update() method and have it set loading to false.

[nathanwaters]

Any fix for this? isLoading doesn't work for me either. Using Nuxt in SPA mode.

[bastienrossi]

Hi, workaround with "isLoading" works.

<template slot-scope="{ result: { loading, error, data }, isLoading }"> <loader v-if="isLoading"></loader>

Can someone make a fix for "loading" that not work properly ?

Thanks

[LaPluses]

Meet the same problem, some of my components can be works fine with isLoading, some not.

[kode8]

Same problem for me but isLoading works fine

<template slot-scope="{ result: { error, data }, isLoading }"> <div v-if="isLoading" class="loading apollo"> Loading...</div>

I'm using regular routing no SSR

[praveenpuglia]

Same issue. Can't get loading to work. Also since I am not using the ApolloQuery component, I don't know how to access isLoading

[michael-emparty]

Any update to this?
not sure if same problem, but for me
Using
const apolloProvider = new VueApollo({ defaultOptions: { $query: { loadingKey: 'loading', } }
generated with default code createProvider()

$apollo fields client, error, loadingKey always undefined
$apollo.loading always false.