vue.js - Vue-Apollo - 无法访问查询结果

Question

我无法访问我的阿波罗查询的结果对象。我想使用结果在 plot.ly 图中显示它。

const apolloClient = new Apollo.lib.ApolloClient({
  networkInterface: Apollo.lib.createNetworkInterface({
    uri: '{% url 'graphql' %}',
    transportBatching: true,
  }),
  connectToDevTools: true,
})

const apolloProvider = new VueApollo.ApolloProvider({
  defaultClient: apolloClient,
})

const VALUE_QUERY = Apollo.gql`
query {
  allSensordata {
    id
    value
  }
}
`

这只是用于 plot.ly 的 Vue 组件。

//VueJS Component
Vue.component("reactive-chart", {
  props: ["chart"],
  template: '<div :ref="chart.uuid" style="width:600px;height:250px;"></div>',
  mounted() {
    Plotly.plot(this.$refs[this.chart.uuid], this.chart.traces, this.chart.layout);
  },
  watch: {
    chart: {
      handler: function() {
        Plotly.react(
          this.$refs[this.chart.uuid],
          this.chart.traces,
          this.chart.layout
        );
      },
      deep: true
    }
  }
});

这是我想将 apollo graphql 结果带到图中的 Vue 主代码。

//VueJS Main App
var app = new Vue({
  delimiters: ['[[', ']]'],
  el: "#app",
  // Apollo GraphQL
  apolloProvider,
  apollo: {
    allSensordata: {
      query: VALUE_QUERY,
      loadingKey:'loading',
    },
  },
  data() {
    return {
      loading: 0,
      chart: {
        uuid: "123",
        traces: [
          {
            y: [1,2,3,4,3,2,1], //Here should be: this.allSensordata.value
            line: {
              color: "#5e9e7e",
              width: 4,
              shape: "line"
            }
          }
        ],
        layout: {}
      }
    };
  },
});

我想我没有得到 Apollo 模块的对象结构。谢谢你的帮助！

标签： vue.jsapollographql-jsapollo-clientvue-apollo