Почему срабатывает ловушка результата моего запроса apollo, когда я переключаю подробное представление таблицы bootstrap, которая отображает данные этого запроса? - PullRequest
Новая
       84

Почему срабатывает ловушка результата моего запроса apollo, когда я переключаю подробное представление таблицы bootstrap, которая отображает данные этого запроса?

0 голосов
/ 04 августа 2020

Я использую Apollo и Bootstrap в моем приложении Vue. js. В моем приложении b-таблица заполняется результатами запроса apollo. В каждой строке есть кнопка для переключения детального просмотра таблицы. Каждый раз, когда я нажимаю эту кнопку с подробностями, срабатывает метод результата моего запроса apollo, и я не могу понять, почему. Он предполагает, что данные результата снова считываются из кеша (поскольку сетевой вызов не выполняется), но опять же, почему?

Мое приложение выглядит примерно так: 

<template>
  <b-table :items="transformedPersons">
    <template v-slot:cell(showDetails)="row">
      <b-button class="btn" v-on:click="row.toggleDetails">
        <b-img :src="require('@/assets/img/details-24px.svg')" width="18px" />
      </b-button>
    </template>

    <template v-slot:row-details="row">
      <PersonDetails :row="row" />
    </template>
  </b-table>
</template>

import Vue from "vue";
import { ApolloQueryResult } from "apollo-client";
import { PERSON_QUERY } from "@/constants/graphql";

export default Vue.extend({
  data() {
    return {
      flatPersons: [] as {
        id: number;
        firstName: string;
        lastName: string;
        // some more attributes
      }[]
    };
  },
  computed: {
    transformedPersons(): any {
      return this.flatPersons.map((p: any) => {
        p.name = p.firstName + " " + p.lastName;
        return p;
      });
    },
  },
  methods: {
    onQueryResult(data: any) {
      console.log("onQueryResult");
    },
  },
  apollo: {
    flatPersons: {
      loadingKey: "loading",
      query: PERSON_QUERY,
      variables() {
        return {
          department: this.selectedDepartment,
        };
      },
      result(data: ApolloQueryResult<any>, key: any) {
        this.onQueryResult(data);
      }
    }
  }
});
</script>

Я не включил код для компонента PersonDetails, потому что это не имеет значения. Я получаю такое же поведение, когда просто помещаю туда пустой div.

Но что интересно, проблема не возникает, когда я удаляю 

v-slot:row-details="row"

из тега шаблона.

Еще несколько выводов:

Я обнаружил, что это поведение фактически запускается другим запросом apollo с интервалом опроса, установленным на 5 секунд. Когда я удаляю опрос из этого другого запроса, событие результата моего запроса "flatPersons" не запускается неожиданно. Так что это комбинация некоторого другого выполняемого запроса, и я переключил представление подробностей.

Не уверен, что это полезно, но это трассировка стека из точки останова, установленной в методе onQueryResult: 

onQueryResult (Persons.vue:74)
invokeWithErrorHandling (vue.runtime.esm.js:1854)
invoker (vue.runtime.esm.js:2179)
invokeWithErrorHandling (vue.runtime.esm.js:1854)
Vue.$emit (vue.runtime.esm.js:3888)
Vue.<computed> (backend.js:1793)
result (vue-apollo.esm.js:1558)
nextResult (vue-apollo.esm.js:851)
notifySubscription (Observable.js:130)
onNotify (Observable.js:165)
next (Observable.js:219)
(anonymous) (bundle.esm.js:435)
iterateObserversSafely (bundle.esm.js:435)
next (bundle.esm.js:410)
invoke (bundle.esm.js:1209)
(anonymous) (bundle.esm.js:1294)
(anonymous) (bundle.esm.js:1559)
(anonymous) (bundle.esm.js:1557)
./node_modules/apollo-client/bundle.esm.js.QueryManager.broadcastQueries (bundle.esm.js:1555)
(anonymous) (bundle.esm.js:1646)
next (Observable.js:308)
notifySubscription (Observable.js:130)
onNotify (Observable.js:165)
next (Observable.js:219)
(anonymous) (bundle.esm.js:866)
next (bundle.esm.js:866)
notifySubscription (Observable.js:130)
onNotify (Observable.js:165)
next (Observable.js:219)
next (bundle.esm.js:29)
notifySubscription (Observable.js:130)
onNotify (Observable.js:165)
next (Observable.js:219)
(anonymous) (bundle.esm.js:76)
Promise.then (async)
(anonymous) (bundle.esm.js:75)
Subscription (Observable.js:183)
subscribe (Observable.js:262)
(anonymous) (bundle.esm.js:11)
Subscription (Observable.js:183)
subscribe (Observable.js:262)
(anonymous) (bundle.esm.js:864)
Subscription (Observable.js:183)
subscribe (Observable.js:262)
./node_modules/apollo-client/bundle.esm.js.QueryManager.getObservableFromLink (bundle.esm.js:1595)
(anonymous) (bundle.esm.js:1630)
./node_modules/apollo-client/bundle.esm.js.QueryManager.fetchRequest (bundle.esm.js:1629)
(anonymous) (bundle.esm.js:1146)
step (tslib.es6.js:99)
(anonymous) (tslib.es6.js:80)
(anonymous) (tslib.es6.js:73)
__awaiter (tslib.es6.js:69)
./node_modules/apollo-client/bundle.esm.js.QueryManager.fetchQuery (bundle.esm.js:1092)
maybeFetch_1 (bundle.esm.js:1743)
setTimeout (async)
poll_1 (bundle.esm.js:1751)
./node_modules/apollo-client/bundle.esm.js.QueryManager.startPollingQuery (bundle.esm.js:1757)
./node_modules/apollo-client/bundle.esm.js.ObservableQuery.setUpQuery (bundle.esm.js:382)
./node_modules/apollo-client/bundle.esm.js.ObservableQuery.onSubscribe (bundle.esm.js:366)
(anonymous) (bundle.esm.js:96)
Subscription (Observable.js:183)
subscribe (Observable.js:262)
observable.subscribe (vue-apollo.esm.js:1189)
startQuerySubscription (vue-apollo.esm.js:803)
executeApollo (vue-apollo.esm.js:786)
Vue.$watch (vue.runtime.esm.js:4949)
start (vue-apollo.esm.js:510)
set (vue-apollo.esm.js:688)
skipChanged (vue-apollo.esm.js:443)
Vue.$watch (vue.runtime.esm.js:4949)
autostart (vue-apollo.esm.js:429)
addSmartQuery (vue-apollo.esm.js:1254)
launch (vue-apollo.esm.js:1827)
invokeWithErrorHandling (vue.runtime.esm.js:1854)
callHook (vue.runtime.esm.js:4219)
Vue._init (vue.runtime.esm.js:5008)
VueComponent (vue.runtime.esm.js:5154)
createComponentInstanceForVnode (vue.runtime.esm.js:3283)
init (vue.runtime.esm.js:3114)
createComponent (vue.runtime.esm.js:5978)
createElm (vue.runtime.esm.js:5925)
updateChildren (vue.runtime.esm.js:6216)
patchVnode (vue.runtime.esm.js:6319)
patch (vue.runtime.esm.js:6482)
Vue._update (vue.runtime.esm.js:3948)
updateComponent (vue.runtime.esm.js:4060)
get (vue.runtime.esm.js:4479)
run (vue.runtime.esm.js:4554)
flushSchedulerQueue (vue.runtime.esm.js:4310)
(anonymous) (vue.runtime.esm.js:1980)
flushCallbacks (vue.runtime.esm.js:1906)
Promise.then (async)
timerFunc (vue.runtime.esm.js:1933)
nextTick (vue.runtime.esm.js:1990)
queueWatcher (vue.runtime.esm.js:4402)
update (vue.runtime.esm.js:4544)
Vue.$forceUpdate (vue.runtime.esm.js:3969)
(anonymous) (index.js:242)
(anonymous) (index.js:240)
(anonymous) (index.js:119)
./src/components/AppHeader.vue (AppHeader.vue?42d3:29)
__webpack_require__ (bootstrap:766)
hotApply (bootstrap:685)
(anonymous) (bootstrap:342)
Promise.then (async)
hotUpdateDownloaded (bootstrap:341)
hotAddUpdateChunk (bootstrap:317)
webpackHotUpdateCallback (bootstrap:36)
(anonymous) (app.32ca59f1844b5e52e056.hot-update.js:1)
...