(三)搭建graphql项目, 前端可随意指定接口返回的数据

最新推荐文章于 2024-04-24 15:36:39 发布
最新推荐文章于 2024-04-24 15:36:39 发布
阅读量1.1k 收藏
点赞数 1
文章标签： 前端 graphql mongodb node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zwf193071/article/details/122700500
版权

前言

上节课，我提到想直接使用线上mlab搭建数据库，但线上mlab一直没法正常登陆（或者好不容易登陆进去，却是cloud mongodb，收费的），所以耽误了这些天，只能选择本地安装mongodb。简单介绍下mongodb本地的安装步骤

  • 去官网下载mongodb的msi包（我的电脑是Win10）
  • 安装成功之后，它会自动在C盘的Program Files创建含bin文件的目录，将其添加到系统环境变量里（我选择将data和log文件存储在D盘）

image.png

image.png

  • 在命令行终端，输入mongod，有输出信息，或者浏览器地址栏输入http://127.0.0.1:27017，看到如下信息，都表明安装已成功
It looks like you are trying to access MongoDB over HTTP on the native driver port.

连接mongodb

在app.js里，添加如下代码

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost/admin') // 我使用了本地mongodb的默认admin数据库
mongoose.connection.once('open', () => {
    console.log('connected to database')
})

在命令行终端输入$ nodemon server/app.js，看到如下信息，则表明已成功连接数据库

image.png

models

之前我们将persons和jobs直接存储在内存中，现在我们需要将它们存储在mongodb里，基于此，我们在项目根目录下创建models文件夹，在该文件夹下，创建两个js文件->person.js以及job.js

person.js的代码如下所示：

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

const personSchema = new Schema({
    name: String,
    sex: String,
    age: String,
    jobId: String
})

module.exports = mongoose.model("Person", personSchema)

module.exports = mongoose.model("Person", personSchema)：创建名为Person的Collection，它里面的数据结构为personSchema对象

我们不需要在里面定义id，因为数据库会自动为每条数据生成id

job.js的代码如下所示：

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

const jobSchema = new Schema({
    name: String,
    department: String
})

module.exports = mongoose.model("Job", jobSchema)

mutation

搭建完models之后，我们需要创建mutation对数据库实现增删改操作，与vuex里的mutation原理类似。我们需要修改schema.js，部分代码如下所示：

const Person = require('../models/person')
const Job = require('../models/job')

const Mutation = new GraphQLObjectType({
    name: 'Mutation',
    fields: {
        addPerson: {
            type: PersonType,
            args: {
                name: {type: GraphQLString},
                sex: {type: GraphQLString},
                age: {type: GraphQLInt}
            },
            resolve(parent, args) {
                // Person对应上面的model
                let person = new Person({
                    name: args.name,
                    sex: args.sex,
                    age: args.age
                })
                person.save() // 这是mongoose提供的便利，实例直接调用save方法，可将数据存储在我们指定的数据库内
            }
        },
        addJob: {
            type: JobType,
            args: {
                name: {type: GraphQLString},
                department: {type: GraphQLString}
            },
            resolve(parent, args) {
                let job = new Job({
                    name: args.name,
                    department: args.department
                })
                return job.save()
            }
        },
    }
})

module.exports = new GraphQLSchema({
    query: RootQuery,
    mutation: Mutation
})

刷新页面http://localhost:4000/graphql，在左侧输入下图命令并运行

image.png

很明显，数据已经成功插入，可为何右侧显示"addPerson": null，这是因为我们需要在resolve里返回数据，修改resolve里的代码

resolve(parent, args) {
    let person = new Person({
        name: args.name,
        sex: args.sex,
        age: args.age
    })
    return person.save()
}

再次运行命令，界面如下所示：

image.png

执行addJob命令，如下所示：

image.png

关联Person和Job

从前文我们可以得知，Person可以关联Job，是通过里面的jobId，现在我们需要知道我们刚刚插入的job数据对应的id是多少，我推荐安装mongodb的图形化管理工具，即MongoDBCompass（官方提供的），方便查看管理数据

MongoDBCompass我下载的是zip压缩文件，解压之后，直接打开.exe文件，连接本地数据库之后，进入到admin数据库，可看到我们刚创建的jobs数据

image.png

新建person数据，将上图中的id:61f0bd5de1db61c31d991977与该人关联，修改schema.js，部分内容如下所示：

const Mutation = new GraphQLObjectType({
    name: 'Mutation',
    fields: {
        addPerson: {
            type: PersonType,
            args: {
                ...,
                jobId: {type: GraphQLID}
            },
            resolve(parent, args) {
                let person = new Person({
                    ...,
                    jobId: args.jobId
                })
                return person.save()
            }
        },
    }
})

刷新页面，执行命令

image.png

查看数据库界面，可看到新增后的数据

image.png

查询Person所在的Job

为此，我们需要修改Person结构体，代码如下所示：

const Job = require('../models/job')
const PersonType = new GraphQLObjectType({
    name: 'Person',
    fields: () => ({
        id: {type: GraphQLID},
        name: {type: GraphQLString},
        sex: {type: GraphQLString},
        age: {type: GraphQLInt},
        job: {
            type: JobType,
            resolve(parent, args) {
                // return _.find(jobs, {id: parent.jobId})
                // mongoose提供的model，内置findById、find方法
                return Job.findById(parent.jobId)
            }
        }
    })
})

刷新页面，左侧输入以下命令，查询到对应的结果

image.png

查询Job所有的persons

我们需要查询某个岗位所有人员，为此，需要重构JobType，代码如下所示：

const JobType = new GraphQLObjectType({
    name: 'Job',
    fields: () => ({
        id: {type: GraphQLID},
        name: {type: GraphQLString},
        department: {type: GraphQLString},
        persons: {
            type: new GraphQLList(PersonType),
            resolve(parent, args) {
                return Person.find({
                    jobId: parent.id
                })
            }
        }
    })
})

通过mutation addPerson增加lisi人员，并将他与jobId: "61f0bd5de1db61c31d991977"关联

image.png

再次执行查询，可见该Job岗位有两位人员

image.png

schema

schema.js的RootQuery也应做相应的更改，此时查询都应基于model进行find(若参数为空，则查询所有数据)或findById（根据id进行查询），完整的代码如下所示：

const graphql = require('graphql')
const { 
    GraphQLObjectType,
    GraphQLString,
    GraphQLSchema,
    GraphQLID,
    GraphQLInt,
    GraphQLList
} = graphql
const _ = require('lodash')
const Person = require('../models/person')
const Job = require('../models/job')

// 创建Person结构体
const PersonType = new GraphQLObjectType({
    name: 'Person',
    fields: () => ({
        id: {type: GraphQLID},
        name: {type: GraphQLString},
        sex: {type: GraphQLString},
        age: {type: GraphQLInt},
        job: {
            type: JobType,
            resolve(parent, args) {
                return Job.findById(parent.jobId)
            }
        }
    })
})

const JobType = new GraphQLObjectType({
    name: 'Job',
    fields: () => ({
        id: {type: GraphQLID},
        name: {type: GraphQLString},
        department: {type: GraphQLString},
        persons: {
            type: new GraphQLList(PersonType),
            resolve(parent, args) {
                return Person.find({
                    jobId: parent.id
                })
            }
        }
    })
})


const RootQuery = new GraphQLObjectType({
    name: 'RootQueryType',
    fields: {
        person: {
            type: PersonType,
            args: {
                id: {type: GraphQLID}
            },
            resolve(parent, args) {
                return Person.findById(args.id)
            }

        },
        job: {
            type: JobType,
            args: {
                id: {type: GraphQLID}
            },

            resolve(parent, args) {
                return Job.findById(args.id)
            }

        },
        persons: {
            type: new GraphQLList(PersonType),
            resolve(parent, args) {
                return Person.find({})
            }

        },

        jobs: {
            type: new GraphQLList(PersonType),
            resolve(parent, args) {
                return Job.find({})
            }
        }

    }

})

const Mutation = new GraphQLObjectType({
    name: 'Mutation',
    fields: {
        addPerson: {
            type: PersonType,
            args: {
                name: {type: GraphQLString},
                sex: {type: GraphQLString},
                age: {type: GraphQLInt},
                jobId: {type: GraphQLID}
            },
            resolve(parent, args) {
                let person = new Person({
                    name: args.name,
                    sex: args.sex,
                    age: args.age,
                    jobId: args.jobId
                })
                return person.save()
            }
        },
        addJob: {
            type: JobType,
            args: {
                name: {type: GraphQLString},
                department: {type: GraphQLString}
            },
            resolve(parent, args) {
                let job = new Job({
                    name: args.name,
                    department: args.department
                })
                return job.save()
            }
        },
    }
})
module.exports = new GraphQLSchema({
    query: RootQuery,
    mutation: Mutation
})

结语

今天的课程先到这里，下节课我将为大家介绍，如何在mutation时，限制用户必须传入某些参数才能成功等等其他相关知识

zwf193071
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack2.0搭建前端项目的教程详解
08-30
主要给大家介绍了关于webpack2.0搭建前端项目的相关资料，文中介绍的非常详细，对大家学习或者使用webpack2.0具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
(二)搭建graphql项目, 前端可随意指定接口返回的数据
zwf193071的专栏
01-26 1053
graphql在线文档 紧接着上节课, 我们已在浏览器上看到graphql的运行效果, 点击右侧的Docs, 可看到我们可以查询的数据类型 点击上图的query: RootQueryType, 我们可进一步看到person(id: String): Person, 即我们定义的Person类型, 可以通过下面代码查询指定id数据 注意: person(id:“2”)里面的2必须用双引号括起来 我们亦可以指定, 接口只需返回name, 如下图所示: GraphQLID 之前在查找人时, person
MongoDB安装windows版
最新发布
杜小帅的博客
04-24 335
看到 It looks like you are trying to access MongoDB over HTTP on the native driver port. 就能证明 MongoDB 启动成功。我们需要创建一个文件夹用来存储 MongoDB 产生的数据，比如创建了一个和。启动之后可以看到 MongoDB 的默认端口是 27017。之后我们进入到bin目录下，在文件路径处输入cmd命令。我这里解压缩到了F盘的mongodb文件夹内。进入到下载好的安装包路径，将文件解压缩。
基于.Net Core开发的GraphQL
寒冰屋的专栏
08-10 179
GraphQL是一种用于构建API的查询语言和运行时的开源规范。它提供了一种更高效、灵活和强大的方式来定义和查询API。在.Net Core开发中，我们可以使用现有的GraphQL库来轻松地构建和集成GraphQL服务。
实战教程：用Java3分钟之内搭建GraphQL服务器
wdjnb的博客
01-20 1560
这是一篇面向那些想用Java创建GraphQL服务的人。它需要一些Spring Boot和Java知识，虽然我们简要介绍了GraphQL，但本教程的重点是用Java开发GraphQL服务器。 3分钟内搭建GraphQL GraphQL是一种从服务器检索数据的查询语言。在某种程度上，它是REST、SOAP或gRPC的替代品。 假设我们要从在线商店后端查询特定书籍的详细信息。 使用GraphQL，您向服务器发送以下查询，以获取id为“book-1”的书籍的详细信息： { bookById(id:
【愚公系列】2023年07月 .NET CORE工具案例-GraphQL.Server（基本使用）
热门推荐
时光隧道
07-24 1万+
GraphQL是一种用于API的查询语言和运行时环境。它是由Facebook于2012年开始内部使用，2015年对外宣布开源。GraphQL旨在解决RESTful API的一些限制，如需要多次请求才能获取完整数据、难以扩展、无法精确控制数据返回等。GraphQL的核心理念是：客户端定义数据需要的结构及其关系，服务器返回与此结构相匹配的数据。因此，GraphQL非常适用于前后端分离的应用，客户端可以精确地控制数据返回，提高了API的可靠性和灵活性。
GraphQL 实践与服务搭建
kuizuo12的博客
11-24 1415
GraphQL翻译过来为图表 Query Language，我所理解的理念是通过 json 数据格式的方式去写 SQL，而且有种前端人员在写 sql 语句。在我看来 GraphQL 更多是业务数据特别复制的情况下使用，往往能够事半功倍。但对于本文中示例的代码而言，GraphQL 反倒有点过于先进了。如今看来，GraphQL 还处于不温不火的状态，目前更多的站点主流还是使用 Restful API 架构。
(五)搭建graphql项目, 前端可随意指定接口返回的数据
zwf193071的专栏
01-28 1026
前言 上节课我们讲到如何使用Apollo获取到数据库的Person列表，这节课，我们将会继续使用它新增Person、Job数据 AddPerson.js 首先，我们在components文件夹下创建AddPerson.js，代码内容如下所示： import { gql, useQuery } from '@apollo/client' const JOBS_LIST = gql` { jobs { name id }
GraphQL返回分页对象
weixin_33682719的博客
04-08 755
private GraphQLOutputType testUserOutputType; private GraphQLOutputType pageType; private void initOutputType(){ testUserOutputType = newObject() .name("TestVo") ...
GraphQL入门基础篇教程
墨痕诉清风的博客
06-17 2890
API 的查询语言。和RESTful核心差异资源的描述信息与其获取方式相分离。RESTful服务端决定返回结果，GraphQL客户端决定返回结果。RESTful和GraphQL都是返回json。
Java 使用 Graphql , 搭建查询服务
qq362228416的专栏
03-11 643
背景 随着react的开源，facebook相继开源了很多相关的项目，这些项目在他们内部已经使用了多年，其中引起我注意的就是本次讨论的是graphql，目前官方只有nodejs版，由于很多公司的后台技术栈都是java，所以便有了graphql的java版实现，在github上可以找到，废话不多说，直接看代码吧，具体介绍还是去看官网吧，不然就跑题了。 GraphQLSchema Sche...
Java 使用 Graphql 搭建查询服务详解
09-01
主要介绍了Java 使用 Graphql 搭建查询服务详解的相关资料,需要的朋友可以参考下
graphql-list-fields:解决GraphQL查询时获取字段列表
05-11
graphql-list-fields 实施GraphQL服务器时，了解要在给定类型上查询的字段列表可能会很有用。 该模块接受一个GraphQLResolveInfo对象，并返回字段列表。 支持的功能 基本领域 碎片 内联片段 @skip和@include指令 将字段嵌套到dot.notation中 npm install --save graphql-list-fields 用法 import getFieldNames from 'graphql-list-fields' ; // in some resolve function resolve ( parent , args , context , info ) { const fields = getFieldNames ( info ) ; return fetch ( '/someservice/?fiel
02-搭建VUE前端项目
01-08
02-搭建VUE前端项目
vue2.x+webpack快速搭建前端项目框架详解
08-28
vue2.x+webpack快速搭建前端项目框架详解 vue2.x+webpack快速搭建前端项目框架详解是当前前端开发领域中非常流行的一种技术栈，本文将详细介绍如何快速搭建基于vue2.x、webpack、vuex、sass+axios、elementUI等...
在vue-cli搭建的项目中增加后台mock接口的方法
08-27
摘要：本文主要介绍了在 Vue-cli 搭建的项目中增加后台 Mock 接口的方法，旨在帮助开发者快速实现 Mock 数据接口，提高开发效率。 知识点： 1. 使用 Vue-cli 搭建项目：使用 Vue-cli 搭建项目可以快速创建一个前端...
Angular通过angular-cli来搭建web前端项目的方法
08-29
Angular 通过 angular-cli 搭建 web 前端项目的方法 Angular 是一个基于 TypeScript 的前端框架，使用 angular-cli 可以快速搭建 web 前端项目。本文将详细介绍使用 angular-cli 搭建 web 前端项目的方法。 一、...
前端模仿搭建小米官网项目
08-18
模仿搭建小米官网； 适用人群：初学HTML和CSS的同学
一步一步在AspNetCore中使用GraphQL（二）----GraphQL AspNetCore服务端
LiveviL的博客
07-21 283
（二）搭建一个GraphQL服务端 一、AspNetCore中GraphQL的用法 创建一个空白的WebApi项目。 添加GraphQL Nuget包。 创建Student实体及仓储。 为了方便起见，这里仓储并没有直接连接数据库，而是通过静态变量存储数据。 创建GraphQL的类型 分别创建了如下几个类LiveviLGraphQLMutation、LiveviLGraphQL...
前端模拟后端接口返回数据
03-25
如果你想模拟或者测试一个前端页面在没有后台服务的情况下，可以使用一些模拟数据生成工具来模拟后端接口返回数据。以下是几个常用的工具： 1. Mock.js：Mock.js 是一个生成随机数据的 JavaScript 库，可以轻松地...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值