Запрос Apollo из одного компонента обновляет всех братьев и сестер в Vue - PullRequest
Новая
       10

Запрос Apollo из одного компонента обновляет всех братьев и сестер в Vue

0 голосов
/ 10 января 2019

У меня есть компонент Vue со списком элементов, заполненных из БД через Apollo: 

<DeviceInfo camId="abcd"/>
<DeviceInfo camId="efgh"/>
<DeviceInfo camId="qwer"/>

При получении ответа через Apollo все три компонента DeviceInfo обновляются с одинаковыми данными в одно и то же время. В конце концов все они имеют самый последний ответ от БД. Я ожидаю, что запрос обновит только свой собственный компонент.

Любые предложения, почему данные передаются?

Что я знаю:

  1. Ответы БД верны и содержат данные для правильного camId, вплоть до apollo / data / updated .
  2. Инструменты разработки браузера Vue показывают идентичные объекты данных для всех DeviceInfo братьев и сестер.
  3. Я получаю такое же поведение с v-for 
<v-flex v-for="item in data.listUserDevices.items" :key="item.device">
   <DeviceInfo :camId="item.device"/>
</v-flex>

Вот полный код DeviceInfo компонента: 

<template v-if="hydrated">
      <h2>camId: {{camId}} / {{ data.getLatestDeviceState.items[0].device }}</h2>
</template>


<script>
import gql from "graphql-tag";

const DEV_INFO_QUERY = gql`query getLatestDeviceState($device: String)
  {
    getLatestDeviceState(device: $device) {
      items {
        device
        timestamp
        version
      }
    }
  }
`;

export default {
  name: "DeviceInfo",
  props: {camId: String},
  data() {
      return dt;
    },
  async mounted() {
    await this.$apollo.provider.defaultClient.hydrated();
    this.hydrated = true;
  },
  apollo: {
    data: {
      query:  () => DEV_INFO_QUERY,
      variables: function() { 
        return {device: this.camId}
      },
      update: data => {
                return data;
      }
    }
  }
};

  let dt = {
    data: {
      hydrated: false,
      getLatestDeviceState: {
        items: [{device:"Loading ..."}]
      }
    }
  };

</script>

1 Ответ

0 голосов
/ 10 января 2019

dt (сокращение от "шаблон данных" Полагаю) определен в вашем компоненте определение , поэтому все экземпляры будут использовать один и тот же объект.

Простое решение - использовать его в качестве шаблона, но разбить ссылку на объект в вашей функции data, т.е. 

data() {
  return {...dt}
}
...