Vue Apollo - 如何正确获取数据？

Posted 2023-03-08

【中文标题】Vue Apollo - 如何正确获取数据？

【英文标题】：Vue Apollo - How to properly fetch data?

【发布时间】：2019-08-28 23:58:07

【问题描述】：

我在使用 vue-apollo 从该端点接收电影数据时遇到很多问题。

端点：http://movie-database-graphql.herokuapp.com/graphiql

这就是我的配置方式（Vuetify 用于样式 b.t.w）：

ma​​in.js

import Vue from 'vue'
import App from './App.vue'

// Plugins
import './plugins/vuetify'
import VueApollo from 'vue-apollo'
import ApolloClient from 'apollo-boost'

const apolloClient = new ApolloClient(
  uri: 'http://movie-database-graphql.herokuapp.com/graphql'
);

const apolloProvider = new VueApollo(
  defaultClient: apolloClient,
)

Vue.use(VueApollo);

Vue.config.productionTip = false

new Vue(
  apolloProvider,
  render: h => h(App)
).$mount('#app')

我相信问题出在我如何通过 Apollo 调用数据库但还不确定。我试过很多方法，关注documentation，总是失败。

MovieList.vue（带有查询的组件）

<template>
  <v-container fluid grid-list-md>
    <v-layout row wrap>
      <h4 v-if="$apollo.loading">Loading...</h4>
      <v-flex v-for="movie in movies" :key="movie.id" xs12 sm6>
          <v-card >
            <v-layout row>
              <v-avatar size="125" tile>
                <v-img :src="movie.poster_path" contain></v-img>
              </v-avatar>
              <v-flex xs12 sm6>
                <v-card-title primary-title>
                  <h3> movie.title </h3>
                </v-card-title>
              </v-flex>
            </v-layout>
          </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
import gql from "graphql-tag"

export default 
  name: "MovieList",
  data: () =>  return  movies: []  ,
  apollo: 
    movies: gql`
    query AllMoviesQuery 
        movies(query: "Start Wars") 
            id
            title
            poster_path
        
    `
  
;
</script>

你明白我错过了什么吗？我没有收到任何电影数据（没有显示错误...）。 movies 数组始终为空

【参考方案1】：

只是一个错字——您请求中的 query 参数是：

Start Wars

而不是

Star Wars

如果您在 GraphiQL 中使用相同的值，您也会得到空结果。