Question

我还在学习GraphQL，在这个项目中我只想尝试在前端显示一些查询。我正在使用该软件包，GitHub - Akryum/vue-apollo: Apollo/GraphQL integration for VueJS但尚未得到任何显示内容。我已经设法让它使用React工作。我只想尝试对Vue做同样的事情。

我可以使用graphiql让查询在后端工作。我甚至设置快速服务器使用CORS，因此数据应该能够通过。我有一个快速后端和一个Vue前端。

Express：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实例，并且它没有附加提供程序。

从 Vue：main.js 中删除此代码可以解决问题。

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

GraphQL - vue-apollo包，不在前端输出查询

1 个答案: