Nuxt.js学习笔记 --Graphql尝鲜与MongoDB连接的简单使用

众所周知，restful还是我们使用最多的api规范，也是目前业界最为流行的，随着多年的发展，这种设计模式已经非常成熟，但也有着自己的一些局限性，最容易理解的就是字段冗余。为了解决Restful设计风格的问题，facebook推出的graphql已经引起了很好的反向。

就目前的情形来说，graphql其实更适合做一些大型服务，或者多端的服务，但是因为技术还没有restful一样成熟，因此本文也是尝鲜试用一下。

简单的使用还是很容易的，这里放一个koa的例子：

因为是接着上一个Nuxt.js做的，所以就直接在这里面的server里面添加了。这里主要是引用了前两个。

const mount = require('koa-mount')
const graphqlHTTP = require('koa-graphql')
const { Nuxt, Builder } = require('nuxt')
const schema = require('./schema/default.js')
const root = require('./resolver/default')

为了显示图形化操作的界面，我们使用到了graphiql这个工具：

 app.use(
    mount(
      "/graphql",
      graphqlHTTP({
        schema: schema,
        rootValue: root,
        graphiql: true
      })
    )
  );

注意最开始的引用我们引用了两个文件里面的对象，对于 schema文件夹中的文件：

const { buildSchema } = require('graphql');

const schema = buildSchema(`
 type Query {
   hello: String
 }
`);

module.exports = schema;

对于resolver文件夹中的文件：

module.exports = {
  hello: () => "Hello world!"
};

两者配合我们就可以在"http://localhost:3000/graphql"中获取我们的数据：

添加MongoDB并使用GraphQL读取数据

首先我们要安装"mongose":

npm i mongoose

创建配置文件，连接的URI格式如下为“mongodb://user:passwd:port/col_name”。

const mongoose = require('mongoose');

const initDB = () => {

  mongoose.connect(
    'mongodb://:@localhost:27017/nuxt_mongo_grapql',
    { useNewUrlParser: true }
  );

  mongoose.connection.once('open', () => {
    console.log('connected to database');
  });

}

module.exports = initDB;

因为Nuxt.js项目的指示会有点多，在前后端读条之前，如果连接成功会看到"connected to database".

除此之外我们还要在"index.js"中引入 "initDB"并运行：

  initDB()

为了在数据库中读取指定的数据，我们首先先创建数据库并添加几条记录：

同时我们需要创建三个文件分别挂载graphql的模板，建立与mongo的连接，以及编写schema：

//gadgetype
const graphql = require('graphql');

const { GraphQLObjectType, GraphQLString } = graphql;

const GadgetType = new GraphQLObjectType({
  name: 'Gadget',
  fields: () => ({
    id: { type: GraphQLString },
    name: { type: GraphQLString },
    sex: { type: GraphQLString },
    location: { type: GraphQLString }
  })
});

module.exports = GadgetType;

//gadget
const mongoose = require('mongoose');
const Schema = mongoose.Schema;

const GadgetSchema = new Schema({
  name: String,
  sex: String,
  location: String
});

module.exports = mongoose.model('Gadget', GadgetSchema);

//schema
const { GraphQLSchema, GraphQLObjectType, GraphQLString} = require('graphql');
const GadgetType = require('../gadgetType')
const Gadget = require('../gadgets')

const RootQuery = new GraphQLObjectType({
  name: 'RootQueryType',
  fields: {
    gadget: {
      type: GadgetType,
      args: { id: { type: GraphQLString }},
      resolve(parent, args) {
        return Gadget.findById(args.id)
      }
    }
  }
})

module.exports = new GraphQLSchema({
  query: RootQuery
});

之后即可成功运行graphiql: