GraphQL-vue-apollo包，不在前端輸出查詢

Question

我仍在學習GraphQL，在這個項目中，我只是想讓一些查詢顯示在前端。 我使用的是GitHub-Akryum / vue-apollo包：for VulJS的Apollo / GraphQL集成，但還沒有得到展示。 我已經設法使用React使其工作。 我只是想對Vue也做同樣的事情。

我可以使用graphiql使查詢在后端工作。 而且我什至將快遞服務器設置為使用CORS，因此數據應該能夠通過。 我有一個快速后端和一個Vue前端。

快遞：server.js

const https = require('https');
const express = require('express');
const cors = require('cors');
const app = express();
const request = require("request");
const bodyParser = require('body-parser');
const { graphqlExpress, graphiqlExpress } = require('apollo-server-express');
const { makeExecutableSchema } = require('graphql-tools');

app.use(cors())

// Some fake data
const books = [
  {
    title: "Harry Potter and the Sorcerer's stone",
    author: 'J.K. Rowling',
  },
  {
    title: 'Jurassic Park',
    author: 'Michael Crichton',
  },
];

// The GraphQL schema in string form
const typeDefs = `
type Query {
  hello: String
}
`;

// The resolvers
const resolvers = {
  Query: {
    hello(root, args, context) {
      return "Hello world!"
    },
  }
};

// Put together a schema
const schema = makeExecutableSchema({
  typeDefs,
  resolvers,
});

// The GraphQL endpoint
app.use('/graphql', bodyParser.json(), graphqlExpress({ schema }));

// GraphiQL, a visual editor for queries
app.use('/graphiql', graphiqlExpress({ endpointURL: '/graphql' }));

// Start the server
app.listen(3000, () => {
  console.log('Go to http://localhost:3000/graphiql to run queries!');
});

Vue：main.js

    import Vue from 'vue'
    import App from './App.vue'
    import { ApolloClient } from 'apollo-client'
    import { HttpLink } from 'apollo-link-http'
    import { InMemoryCache } from 'apollo-cache-inmemory'
    import VueApollo from 'vue-apollo'

    const httpLink = new HttpLink({
      // You should use an absolute URL here
      uri: 'http://localhost:3000/graphql',
    })

    // Create the apollo client
    const apolloClient = new ApolloClient({
      link: httpLink,
      cache: new InMemoryCache(),
      connectToDevTools: true,
    })

    // Install the vue plugin
    Vue.use(VueApollo)

    const apolloProvider = new VueApollo({
      defaultClient: apolloClient,
    })

    new Vue({
      el: '#app',
      provide: apolloProvider.provide(),
      render: h => h(App),
    })

    Vue.config.productionTip = false



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

Vue：App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <BookList />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';
import BookList from './components/BookList.vue';

export default {
  name: 'app',
  components: {
    HelloWorld,
    BookList
  }
};
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Vue：BookList.vue

<template>
<div>
    <h1>
        Book List
    </h1>
    <p>
      {{hello}}
    </p>
    </div>
</template>

<script>
import gql from 'graphql-tag';

export default {
  data() {
    return {
      // Initialize your apollo data
      hello: ''
    };
  },
  apollo: {
    // Simple query that will update the 'hello' vue property
    hello: gql`
      {
        hello
      }
    `
  }
};
</script>

Answer 1

我想到了。 我在main.js文件中兩次安裝了Vue。 第二個vue實例可能覆蓋了第一個實例，並且沒有附加提供程序。

從Vue中刪除此代碼：main.js解決了該問題。

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