Vue-apollo: ApolloQuery scoped-slot supports `fetchMore` `refetch` etc

[beeplin]

Apollo React supports injecting functions like fetchMore, 'refetchetc together withdataloadingerror`: https://www.apollographql.com/docs/react/api/react-apollo.html#query-render-prop

Currently in vue-apollo it seems that we can only call fetchMore from an apollo option in the component. It would be wonderful to inject these functions to the ApolloQuery scoped-slot.

[PaulKujawa]

Would love this feature. $this.apollo.queries is always an empty object when Apollo components are used.

[Elazul]

That would be very useful for pagination

[alukos]

I think the query is enough.
I have here is so works:

Product.vue:

...    
<ApolloQuery
  :query="require('@/graphql/Product.gql')"
  :variables="{ limit: $options.numOnPage }"
  #default="{ result: { loading, error, data }, query }"
>
  <masonry :products="data.product" />
  <infinite-loading @infinite="loadMore(query, $event)" />
</ApolloQuery>
...
<script>
...
  data: () => ({
    page: 1,
  }),
  numOnPage: NUM_ON_PAGE,
  methods: {
    loadMore(query, $state) {
      query.fetchMore({
        variables: {
          offset: this.page++ * NUM_ON_PAGE,
        },
        updateQuery: (prev, { fetchMoreResult }) => {
          if (!fetchMoreResult || fetchMoreResult.product.length === 0) {
            $state.complete();
            return prev;
          }
          $state.loaded();
          return Object.assign({}, prev, {
            product: [...prev.product, ...fetchMoreResult.product],
          });
        },
      });
    },
  },
...

[Elazul]

that works great thank you !