Vue-apollo: How to refresh a ApolloQuery component ?

[yann-yinn]

Hello, thanks for the hard work on Vue-apollo. ❤️

I would like my ApolloQuery to refresh / refetch data when queryVariables changes, but this does not work : if I mutate my queryVariables object, nothing happens and i have no way to update my query. Also, i thought this component would create a "smartQuery" automatically but my this.$apollo.queries are empty, so it seems i have no way to refresh this query.

      <ApolloQuery
        :query="require('@/app/graphql/queries/getUsers.gql')"
        :variables="queryVariables"
      >
        <template slot-scope="{ result, isLoading }">
          <v-card-text>
            <div v-if="isLoading">loading...</div>
            <div v-if="result.error">{{result.error}}</div>
            <div v-if="result.data">
              <DataTable :data="result.data.getUsers"/>
            </div>
          </v-card-text>
        </template>
      </ApolloQuery>

And here is what my component logic looks like

export default {
  //...
  data() {
    return {
      queryVariables: {
        page: 1,
        pageSize: 2,
        search: "test",
      },
    };
  },
  methods: {
    onFiltersSubmit(inputs) {
      this.queryVariables.search = inputs.search
    }
  },
};

[Akryum]

Use deep prop on ApolloQuery.

[yann-yinn]

Oh, I missed that, thanks ! And is that normal than the query is then not visible inside this.$apollo.queries ?

[Akryum]

Yes, it's in the ApolloQuery component.

[njwest]

Any chance of some example code for an ApolloQuery component with deep and refetch? I'm still not clear on how to achieve this functionality with the component...

[Akryum]

https://vue-apollo.netlify.com/guide/components/query.html#query-operations

[alexandervu]

Sorry, but the reference docs do not cover an example code for an ApolloQuery component with deep and refetch.

<ApolloQuery
    :deep="true"
    :query="require('@/graphql/Rooms.gql')"
    :variables="{ filter, sort: sorting, limit: perPage, page: currentPage }">
    <template slot-scope="{ result: { error, data }, isLoading }">
      <div v-if="isLoading" class="loading">Loading...</div>
      <!-- Error -->
      <div v-else-if="error" class="error">
        {{error}}
      </div>
      <!-- Result -->
      <div v-else-if="hasData(data)" class="app-table-content">
        <b-table
          hover
          sticky-header
          no-local-sorting
          size="sm"
          :fields="fieldsWithTranslatedLabels"
          :items="data.getDBIRooms.node"
          :sort-by.sync="sort.field"
          :sort-desc.sync="sort.direction"
          class="app-table-flex app-table-design">
        </b-table>
      </div>
      <!-- No result message -->
      <table-message v-else :message="$t('table.noresult')" />
    </template>
  </ApolloQuery>

Using deep param do not work for me. this.$apollo.queries is still empty. Has anyone get it work?

[marcos-vinicius-dev]

Any solution?

[Akryum]

this.$apollo.queries will always empty, your component doesn't manage any query. Your query is managed by <ApolloQuery>.

Deep usage (docs):

<ApolloQuery deep>

Refetch usage:

<ApolloQuery
    :query="/* query */"
    v-slot="{ result: { loading, error, data }, query }"
  >
    <!-- Display data here -->
    <button @click="query.refetch()">Refresh</button>
 </ApolloQuery>

Query slot prop example
SmartQuery docs

[sgarciac]

I'm using this:
In the parent component, put a ref inside the ApolloQuery, i.e.:

<ApolloQuery
    ref="queryComponentRef"
         //etc

and then you can use something like this in the parent component code when you need to refetch:

this.$refs.queryComponentRef.getApolloQuery().refetch();