1

我还在学习 GraphQL，在这个项目中，我只是想让一些查询显示在前端。我正在使用包GitHub - Akryum/vue-apollo：VueJS 的 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>
4

1 回答 1

0

我想到了。我在 main.js 文件中安装了两次 Vue。第二个 vue 实例可能覆盖了第一个，并且它没有附加提供程序。

从Vue: main.js中删除这段代码解决了这个问题。

new Vue({
  render: h => h(App)
}).$mount('#app')
于 2018-06-03T17:58:28.633 回答