vue.js - 结果Vue GraphQL上缺少电影属性

Question

我是前端开发人员，所以我第一次接触 vue 和 graphql，我不知道该如何处理这个错误：

Missing getMovies attribute on result {movies: Array(20)}

这是我的代码，我可以看到在 chrome 中的开发工具的响应中成功获取了数据：

{"data":{"movies":[{"__typename":"Movie","id":11,"overview":

这是代码：

<template>
  <div class="hello">
    <ul>
      <li v-for="movie in movies" :key="movie.id">{{movie.title}}</li>
    </ul>
  </div>
</template>

<script>
import gql from 'graphql-tag'
export default {
  name: 'HelloWorld',
  data(){
    return {
      movies: []
    }
  },
  apollo: {
    getMovies: {
      query: gql`
        query StarWars {
          movies(query: "Star Wars") {
            title
            overview
            poster_path
            id
          }
        }      
      `,
      result({data}){
        this.movies = data.movies
      }
    }
  },
  props: {
    msg: String
  }
}
</script>

Answer 1

根据这个问题，您的apollo属性应该有一个匹配的data属性，但在这种情况下它们是不匹配的（一个名为moviesand getMovies）。改变一个或另一个：

export default {
  name: 'HelloWorld',
  data(){
    return {
      movies: []
    }
  },
  apollo: {
    movies: {
      query: gql`
        query StarWars {
          movies(query: "Star Wars") {
            title
            overview
            poster_path
            id
          }
        }      
      `
    }
  },
  props: {
    msg: String
  }
}

没有必要将data自己设置在里面。result