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

Posted 2023-03-10

【中文标题】GraphQL - vue-apollo 包，前端不输出查询

【英文标题】：GraphQL - vue-apollo package, not outputting query in the front end

【发布时间】：2018-11-12 11:41:36

【问题描述】：

我还在学习 GraphQL，在这个项目中，我只是想让一些查询显示在前端。我正在使用这个包，GitHub - Akryum/vue-apollo: ???? Apollo/GraphQL integration for VueJS，但还没有出现任何东西。我已经设法使用 React 让它工作了。我只是想对 Vue 做同样的事情。

我可以使用 graphiql 让查询在后端工作。我什至设置了快速服务器以使用 CORS，因此数据应该能够通过。我有一个 express 后端和一个 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>

【参考方案1】：

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

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

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