来自一个组件的 Apollo 查询更新 Vue 中的所有兄弟姐妹

Question

我有一个 Vue 组件，其中包含通过 Apollo 从数据库填充的项目列表：

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

当响应通过 Apollo 所有三个 DeviceInfo 组件同时更新相同的数据。最后他们都得到了数据库的最后回应。我希望查询只更新它自己的组件。

有什么共享数据的建议吗？

我知道的：

DB 响应是正确的，并且包含关于 apollo/data/updated 函数的正确 camId 的数据。
Vue 浏览器开发工具为所有 DeviceInfo 兄弟显示相同的数据对象。
我得到与 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>

Answer 1

dt（我假设 "data template" 的缩写）在您的组件中定义 definition 所以所有实例会共享同一个对象。

一个简单的解决方案是将其用作模板，但在 data 函数中破坏对象引用，即

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

来自一个组件的 Apollo 查询更新 Vue 中的所有兄弟姐妹

Apollo query from one component updates all the siblings in Vue

vue.js

vue-component

vue-apollo