swallowblank的博客

对应内容：#19 DataLoader & # 20 Graphql function主要内容：使用DataLoader 来合并数据库请求，减少访问数据库的次数在前端使用函数代替写死的查询参数问题思考场景一我们在之前的代码中应该明白这样一个流程：查询所有的n个活动，并返回一个列表，如果活动中需要用到创建者，那么就会再次访问n次数据库，来获得n个活动对应的创建者，这样就造成了1 + n次查询。但我们是不是其实可以把这n次查询合并成一次呢？考虑这个问题。场景二比如一个用户分别在五个订

对应内容：#19 Cancel Bookings | Build a Complete App with GraphQL, Node.js, MongoDB and React.js主要内容：完善Booking 页面，添加取消订阅功能修改snipper 工作逻辑，改为Fixed定位1 完善Booking 页面，添加取消订阅功能创建 BookingList.jsimport React from 'react';const BookingList = ({bookings, cancelB

对应内容 #18 Bookings | Build a Complete App with GraphQL, Node.js, MongoDB and React.js主要内容：在events列表中完成订阅功能完成booking.js 渲染订阅的活动的列表学习了如何在后端给预检请求设置安全时间（如何不要每次都发预检请求？）文章目录1 在events列表中完成订阅功能2 完成booking.js 渲染订阅的活动的列表3 如何不要每次都发预检请求？1 在events列表中完成订阅功能bookE

对应内容：#17 Adding Event Features | Build a Complete App with GraphQL, Node.js, MongoDB and React.js主要内容抽离EventList 和 EventItem的逻辑，创建对应的组件修改登录时的Bug创建Modal查看Event细节的功能创建一个Snipper学习了函数组件中useContext的用法1 抽离EventList 和 EventItem的逻辑，创建对应的组件，学习了函数组件中useCont

对应内容：#16 Adding Events | Build a Complete App with GraphQL, Node.js, MongoDB and React.js主要内容：创建一个Event，并展示在当前的event列表中修复了一个bug遇到的问题1 createEvent resolver忘记加入权限判断，并且修复了bug在middleware中，修复了一个bug，当前端的拼接的字符串为null的时候，不会转换为空字符，而是一个"null"。2 完善pages/eve

对应内容：#15 Adding a Modal | Build a Complete App with GraphQL, Node.js, MongoDB and React.js主要内容：增加了logout的逻辑增加了Modal以及Dropback组件修改了保存token时的一个BUG修改了路由以及重定向的逻辑1 增加logout的逻辑import './MainNavigation.css';const MainNavigation = (props) => ( <A

对应内容：#14 Using the Token | Build a Complete App with GraphQL, Node.js, MongoDB and React.js主要内容：创建Context，把登录获得的token和userId注入到整个应用程序修改header中登录前后的展示逻辑修改路由登录前后的逻辑还没有进行token持久化1 创建Context在 frontend\src\context\auth-context.js 下创建一个Contextimport

对应内容：#13 Hitting the API | Build a Complete App with GraphQL, Node.js, MongoDB and React.js主要内容：完成登录、注册表单，及其对应的逻辑由于涉及前后端的通信，在后端实现跨域的中间件【及其重要】1 完成表单部分的页面及其对应逻辑，修复了前面的BUG这里ES6中的类，很多人不是很熟悉，类的属性的实现方式分两种，一种是写在constructor中的属性，一种是类字段，定义在构造函数之外的，类字段是直接赋值在类的

对应内容：#12 Adding a Navbar | Build a Complete App with GraphQL, Node.js, MongoDB and React.js主要内容：创建了一个Navbar1 创建如下的文件夹及文件2 编写导航组件，及其CSSimport React from 'react'import { NavLink } from 'react-router-dom';import './MainNavigation.css';const MainN

对应内容：#11 The React Frontend | Build a Complete App with GraphQL, Node.js, MongoDB and React.js主要内容：创建react应用，书写基础路由，创建基础页面。使用cra脚手架创建react应用安装react-router-dom，并且配置基本路由书写路由对应的基本页面1 使用cra脚手架创建react应用在根目录下创建frontend文件夹cd frontendnpx create-react-app

对应内容：#10 Adding User Authentication | Build a Complete App with GraphQL, Node.js, MongoDB and React.js这一部分的主要内容是进行用户的身份验证，并且发放一个持久化 token。实现登录验证的resolver创建middleware Auth.js在其他resolver中添加对登录身份的验证，替换固定的用户id1 实现登录验证先安装jsonwebtokencnpm install --save

具体内容：#9 Refactoring our Code | Build a Complete App with GraphQL, Node.js, MongoDB and React.js这一部分没什么好讲的，对code 进行更加细粒度的拆分，对可重用的代码进行函数包装。

对应内容：#8 Adding Bookings | Build a Complete App with GraphQL, Node.js, MongoDB and React.js之前我们创建了User和Event模型，并在他们之间建立了动态的查询关系（可以无限嵌套），今天主要是添加一个Booking模型，以建立User和Event之间的联系。主要内容：创建./model/booking.js修改对应的Schema模板在rootValue中增加对应的功能，建立对应的resolver提供查询bo

对应内容：#7 Dynamic Relations | Build a Complete App with GraphQL, Node.js, MongoDB and React.js1 想要查询event的同时获得对应的用户Id？query { events { title creator { _id email } }}先修改Schema内容，添加最后两行使得可以在获取一方的同时获取对应的另外一方：type Event { _i

对应内容：#6 Adding Relations | Build a Complete App with GraphQL, Node.js, MongoDB and React.js这一节主要干了下面的事：为User和Event创建关系1.创建了User模型，并在User中添加了和Event的关系2.修改了Event模型，并添加外键User.id在app.js中修改Schema，添加User和UserInput两种type添加了两个模型之间的关系后，创建时也需要调整逻辑以创建联系，大量修

对应内容：#5 GraphQL + MongoDB | Build a Complete App with GraphQL, Node.js, MongoDB and React.js这一次主要做了如下几件事：创建nodemon.json， 把一些相关的配置属性通过nodemon注入到应用的process.env中。引入mongoose。创建MongoDB Atlias云数据库，在云上配置一些东西，比如创建管理员，申请ip白名单等。使用mongoose连接云数据库。从在线的模拟数据库改换成真实

对应内容：#4 | Build a Complete App with GraphQL, Node.js, MongoDB and React.js内容简介这一部分是在schema中自定义类型，但是依然没有数据库，这里使用了一个events在线的数组来模拟存储数据。代码可以把两篇文章的代码部分对比来看const express = require("express");const bodyParser = require("body-parser");const {graphqlHTTP} =

没有像学习React一样，先系统的学习文档，而是直接跟youtube学的实例。直接上一个简单的例子，是express + graphql的。package.json先看一眼package.json "dependencies": { "body-parser": "^1.19.0", "express": "^4.17.1", "express-graphql": "^0.12.0", "graphql": "^15.5.0" }, "devDependen