Vue-Apollo - не может получить доступ к результату запроса - PullRequest
Новая
       37

Vue-Apollo - не может получить доступ к результату запроса

0 голосов
/ 06 сентября 2018

Я не могу получить доступ к объекту результата моего запроса apollo.Я хочу использовать результат, чтобы показать его на графике 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
  }
}
`

Это просто компонент Vue для использования с plot.ly. 

//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
    }
  }
});

ВотVue Основной код, где я хочу вывести результат apollo graphql на график. 

//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.Спасибо за вашу помощь!

...