У меня много проблем с получением данных фильма из этой конечной точки с использованием Вуэ-Аполлон.
Конечная точка: http://movie-database-graphql.herokuapp.com/graphiql
И вот как я его настраиваю (Vuetify для стилизации кстати):
main.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, но пока не уверен. Я пробовал много способов, следуя документация, и всегда терпел неудачу.
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 height = "150px">
<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>
Вы понимаете, что мне не хватает? Я не получаю никаких данных о фильме (ошибки не отображаются...). массив фильмов всегда пуст
Просто опечатка - аргумент query
в вашем запросе:
Start Wars
вместо
Star Wars
Если вы используете то же значение внутри GraphiQL, вы также получите пустые результаты.