Server Sorting

[cbloss]

Hey! I'm trying to use the smart-table with pagination (and apollo) but having trouble with the data not just sorting the current data instead of hitting the smartquery.

The methods:

methods: {
    reSort() {
      // Grabs the data sorting info and sorts. 
      const table = this.$refs.smarty;
      
      if (table.state.sortOrder == 0) {
        this.orderBy = null;
      } else {
        let newOrder = {};

        newOrder.order = (table.state.sortOrder ? 'ASC' : 'DESC')
        newOrder.field = table.state.sortKey.toUpperCase();

        this.orderBy = newOrder;
      }

      this.fetchSites();
    },  
    fetchSites() {
      this.isLoading = true;
      this.$apollo.addSmartQuery('sitesList', {
        query: SITE_LIST_PAGINATE,
        fetchPolicy: 'network-only',
        variables() {
          let input = {
            first: 50,
            page: this.selectedPage,
          };

          if (this.orderBy) {
            input.orderBy = [this.orderBy];
          }

          return input;
        },
        result({ data: {sitesList} }) {
          this.sites = sitesList.data;
          this.total = sitesList.paginatorInfo.total;
          this.lastPageNumber = sitesList.paginatorInfo.lastPage;
          this.isLoading = false;
        },
      });
    }
  }

Here's the vue component:

<v-table
          class="bare striped smart-table"
          :data="sites"
          ref="smarty"
        >
          <thead slot="head" @click="reSort()">
            <v-th sortKey="title">Name</v-th>
            <th>Created</th>
            <v-th sortKey="key">Key</v-th>
            <v-th sortKey="state">State</v-th>

          </thead>
          <tbody slot="body" slot-scope="{displayData}">
            <v-tr v-for="site in displayData" :key="site.id" :row="site">
              <td class>{{site.title}}</td>
              <td class="px-2">{{site.created_at}}</td>
              <td class="px-2">{{site.key}}</td>
              <td class="px-2">{{site.state}}</td>
            </v-tr>
          </tbody>
        </v-table>
        <smart-pagination
          :currentPage.sync="selectedPage"
          :totalPages="lastPageNumber"
        />

I've tried adding a fetch policy to the apollo call but the sorting gets confused and resets to the default. Currently it just takes what is currently on the page and sorts that data instead of refetching. I know I'm missing something simple. Any tips?