Vue GraphQL infinite scroll with VueApollo and vue-infinite-loading

Example.vue

<template>
  <section>
    <div v-if="guidePlayerFeed">
      <v-fade-transition class="row" group tag="div">
        <v-col
          v-for="(player, index) in guidePlayerFeed.players"
          :key="player.id + index"
          cols="12"
          sm="6"
          md="4"
          lg="2"
        >
          <PlayerListCard :player="player" />
        </v-col>
      </v-fade-transition>
      <infinite-scroll
        v-if="!loadingPlayerList"
        :identifier="scrollId"
        @infinite="loadMore"
      >
        <span slot="no-more"></span>
        <span slot="no-results"></span>
      </infinite-scroll>
    </div>
    <LoadingBlock v-else />
  </section>
</template>

<script>
import InfiniteScroll from "vue-infinite-loading";
import PlayerListCard from "./PlayerListCard";
import LoadingBlock from "../../common/loadingBlock";
import gql from "graphql-tag";

const guidePlayerFeed = gql`query guidePlayerFeed(
  $guideId: ID!
  $feed: FeedParams!
  $search: InputString
  $groupId: ID
) {
  guidePlayerFeed(
    guideId: $guideId
    feed: $feed
    filters: { search: $search, groupId: $groupId }
  ) {
    offset
    hasMore
    players {
      id
      playerCode
      email
      firstName
      lastName
      active
      group {
        id
        name
      }
    }
  }
}`


export default {
  name: "PlayerList",
  components: { LoadingBlock, PlayerListCard, InfiniteScroll },
  props: {
    height: {
      type: String,
      default: "600"
    },
    miniVersion: {
      type: Boolean,
      default: false,
      required: false
    },
    guideId: {
      type: String,
      required: true
    },
    searchText: {
      type: String,
      required: false,
      default: undefined
    },
    groupId: {
      type: String,
      required: false,
      default: undefined
    }
  },
  data() {
    return {
      loadingPlayerList: 0,
      players: [],
      scrollId: +new Date()
    };
  },
  methods: {
    async loadMore($state) {
      if (this.guidePlayerFeed.hasMore) {
        await this.$apollo.queries.guidePlayerFeed.fetchMore({
          variables: {
            guideId: this.guideId,
            feed: {
              offset: this.guidePlayerFeed.offset,
              limit: 15
            }
          },
          updateQuery(previous, { fetchMoreResult }) {
            const {
              players,
              hasMore,
              offset
            } = fetchMoreResult.guidePlayerFeed;

            return {
              guidePlayerFeed: {
                __typename: previous.guidePlayerFeed.__typename,
                // Merging the tag list
                players: [...previous.guidePlayerFeed.players, ...players],
                hasMore,
                offset
              }
            };
          }
        });
        $state.loaded();
      } else {
        $state.complete();
      }
    },
    async refetchPlayers() {
      await this.$apollo.queries.guidePlayerFeed.refetch();
    }
  },
  apollo: {
    guidePlayerFeed: {
      query: guidePlayerFeed,
      variables() {
        return {
          guideId: this.guideId,
          feed: {
            offset: 0,
            limit: 15
          },
          search: this.searchText || null,
          groupId: this.groupId
        };
      },
      result() {
        this.scrollId += 1;
      },
      fetchPolicy: "network-only",
      debounce: 300,
      loadingKey: "loadingPlayerList"
    }
  }
};
</script>

<style scoped>
.scroll-list {
  height: 90%;
  max-height: 90%;
}
</style>

I am trying to do infinite scrolling using Apollo and Vue but it tells me updateQuery is deprecated.

This is snippet from more than 2 years ago. Vue Apollo has had major version changes since then. You should check out the documentation for up-to-date examples.