结果Vue GraphQL上缺少电影属性 [英] Missing movies attribute on result Vue GraphQL

问题描述

我是前端开发人员，因此第一次接触vue和graphql时，我不知道如何正确处理此错误:

I am frontend developer so for the first time I got my hands on vue and graphql, I don’t know how exactly to deal with this error:

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

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

Here is my code, and I can see the data is fetched successfully in the response on dev tools in 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>

推荐答案

每此问题，您的 apollo 属性应该具有匹配的 data 属性，但是在这种情况下，它们是不匹配的(一个名为 movies 和 getMovies ).更改一个或另一个:

Per this issue, your apollo property should have a matching data property, but in this case they are mismatched (one is named movies and getMovies). Change one or the other:

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
  }
}

不需要在结果中自行设置数据.

这篇关于结果Vue GraphQL上缺少电影属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！