公司 网站 源码,电商网站建设期末考试,做淘宝店头的网站,网站搭建制作免费GraphQL是一个专为构建灵活的API而生的强大的查询语言。它允许您为数据定义类型系统#xff0c;因此在执行查询时#xff0c;它仅返回所需的数据。与TypeScript一起使用时#xff0c;GraphQL可以为开发人员提供更好的体验#xff0c;因为它们都是类型语言。TypeScript是Jav… GraphQL是一个专为构建灵活的API而生的强大的查询语言。它允许您为数据定义类型系统因此在执行查询时它仅返回所需的数据。与TypeScript一起使用时GraphQL可以为开发人员提供更好的体验因为它们都是类型语言。TypeScript是JavaScript的类型化超集可通过添加类型对其进行扩展。因此一起使用这些技术肯定会帮助您构建可预测的强类型API。在本教程中我将首先解释为什么要结合这些技术然后通过使用TypeGraphQL从头构建API来展示如何将TypeScript与GraphQL结合使用。先决条件本教程假定您有使用TypeScript的经验尤其是对TypeScript类和装饰器。GraphQL的知识将派上用场但不是强制性的。在本指南中我们将使用TypeGraphQL这是一个使用Node.js和TypeScript构建GraphQL API的现代框架。为什么将TypeScript与GraphQL一起使用TypeScript是由Microsoft开发和维护的一种流行编程语言。它是JavaScript的超集它使用静态类型检查使代码可预测。多年来TypeScript已被证明是用于大型代码库的有价值的语言。TypeScript通过其类型来提高代码质量从而增加代码的健壮性可理解性和可预测性。GraphQL解决了API过度获取或获取不足的问题。GraphQL 可以通过一次请求就获取你应用所需的所有数据。通过这种方式GraphQL使您的查询变得灵活并且您的API可读且易于学习。TypeScript和GraphQL都依靠类型使代码易于理解。但是只能使用buildSchema方法或扩展名为.gql的文件在GraphQL模式中定义GraphQL类型。GraphQL解析器不支持GraphQL类型因为解析器只是常规的JavaScript函数而不是GraphQL代码。TypeScript解决了这个问题因为正如我们前面提到的那样它是JavaScript的超集。因此它可以在GraphQL解析器上设置类型。这就是为什么将TypeScript与GraphQL一起使用才有意义的原因。GraphQL处理GraphQL模式的类型而TypeScript设置GraphQL解析器上的类型。但是由于要处理多种语言因此使用Node.jsGraphQL和TypeScript构建强类型的API可能很难维护。TypeGraphQL打算解决保持模式与解析器之间一致性的问题。TypeGraphQL允许您使用TypeScript类和装饰器来为API创建架构类型和解析器。它使用TypeScript构建整个GraphQL API。到目前为止我们已经了解了为什么将TypeScript与GraphQL搭配一起使用以及为什么TypeGraphQL在构建和维护使用TypeScript版GraphQL API时很方便。事不宜迟让我们深入练习部分并使用TypeGraphQL构建GraphQL API。安装在使用TypeScript和GraphQL之前我们首先得创建一个Node.js的应用打开你的终端界面执行以下命令yarn init
或者使用npm包管理器npm init
然后需要你为项目设定一些信息不需要填的一路回车就好最后会在项目目录生成package.json文件。fantingshengdeMacBook-Pro:graphql-typescript fantingsheng$ yarn init
yarn init v1.12.3
question name (graphql-typescript):
question version (1.0.0):
question description: for study
question entry point (index.js):
question repository url: https://github.com/fantingsheng/graphql-typescript
question author: Timfan
question license (MIT):
question private:
success Saved package.json
✨ Done in 223.35s.
接下来安装一些需要的依赖yarn add express apollo-server-express graphql reflect-metadata type-graphql class-validator
或者npm install express apollo-server-express graphql reflect-metadata type-graphql class-validator
我们先下载好这些安装包然后再解释它们分别是干什么的。另外还要安装它们的类型定义以便支持TypeScript的使用。yarn add -D ts-node typescript types/express types/node nodemon
或者npm install -D ts-node typescript types/express types/node nodemon
注意我们安装nodemon是为了在代码更新的时候热重载下面是每个依赖库的作用解释express是一个极简的Node版web框架apollo-server-express是一个允许我们在Apollo GraphQL服务中使用express的中间件reflect-metadata使得TypeScript装饰器可以在当一个类已经定义的时候为它添加一个类和成员。它是TypeGraphQL的一个依赖。class-validator允许TypeGraphQL基于验证的情况下使用装饰器和非装饰器接下来为项目搭建结构src
| ├── resolvers
| | └── todoResolver.ts
| └── schemas
| | └── Todo.ts
| └── index.ts
├── tsconfig.json
├── package.json
└── yarn.lock
这里有四个文件需要说明下应用的入口文件index.tsschemas目录包含了该项目的GraphQL Schemaresolvers目录包含了所有API的实现tsconfig.json告诉TypeScript如何去编译代码与此同时我们需要在package.json文件中添加服务的执行命令scripts: {start: nodemon --exec ts-node src/index.ts
}
该script命令通过使用nodemon去开启服务即使代码临时修改也会重启生效。为tsconfig.json文件增加配置{compilerOptions: {emitDecoratorMetadata: true,experimentalDecorators: true}
}
以上这两个属性都要设置为true以便我们可以在项目中使用TypeScript的装饰器。我们现在可以为API创建一个GraphQL Schema了。创建GraphQL SchemaTypeGraphQL使得你可以通过TypeScript的类和装饰器创建一个schema它仅仅是语法糖而已最终还是会生成GraphQL代码。这个稍后再说先创建一个schemaschema/Todo.tsimport { Field, ObjectType, InputType } from type-graphqlObjectType() export class Todo {Field() id: numberField() title: stringField() description: stringField() status: boolean
}InputType() export class TodoInput implements PartialTodo {Field() title: stringField() description: string
}
乍一看这语法好像有点奇怪其实没什么仅仅是因为增加了TypeScript的装饰器和类的概念在里面这里的ObjectType()是由TypeGraphQL提供为了创建新的对象和schema而存在。Todo类反应了Todo对象的结构TodoInput定义了我们往Todo里面增加的期望数据结构。如下是相同功能的GraphQL代码。type Todo {id: ID!title: String!description: String!status: Boolean!
}input TodoInput {title: String!description: String!
}
可以看到逻辑完全一样唯一的不同是没有使用TypeScript。创建GraphQL Resolver不像GraphQLTypeGraphQL将query和mutation语句写在了resolver的里面当被调用的时候方法名作为唯一入口。import { Query, Resolver, Mutation, Arg } from type-graphql;
import { Todo, TodoInput } from ../schemas/Todo;Resolver(of Todo)
export class TodoResolver {private todos: Todo[] []Query(returns [Todo], { nullable: true })async getTodos(): PromiseTodo[] {return await this.todos;}Mutation(returns Todo)async addTodo(Arg(todoInput) {title, description }: TodoInput): PromiseTodo {const todo {id: Math.random(),title,description,status: false}await this.todos.push(todo)return todo;}
}
这里我们使用resolver装饰器创建一个新的返回Todo的GraphQL resolver。然后创建一个GraphQL query去查询所有的Todo类型的数据。之后我们再定义一个mutation query往Todo类型的数组里增加一组新的数据。让我们把代码转化成GraphQL形式type Mutation {addTodo(todoInput: TodoInput!): Todo!
}type Query {getTodos: [Todo!]
}
到这里我们就可以通过创建好的schema和resolver来搭建服务了。搭建服务src/index.tsimport reflect-metadata;
import { ApolloServer } from apollo-server-express;
import * as Express from express;
import { buildSchema } from type-graphql;import { TodoResolver } from ./resolvers/todoResolver;async function main() {const schema await buildSchema({resolvers: [TodoResolver],emitSchemaFile: true});const app Express();const server new ApolloServer({schema});server.applyMiddleware({ app });app.listen(4000, () console.log(Server is running on http://localhost:4000/graphql));
}main();
我们导入TodoResolver通过在buildSchema方法里以resolver参数传入这样来创建一个新的GraphQL Schema。然后通过schema对象来创建一个ApolloServer设置属性emitSchemaFile: true来允许TypeGraphQL在打包阶段生成一个schema.gql文件。通过以下命令来启动应用yarn start
或者npm start
在浏览器中访问http://localhost:4000/graphql在项目根目录下生成了一个schema.gql文件# -----------------------------------------------
# !!! THIS FILE WAS GENERATED BY TYPE-GRAPHQL !!!
# !!! DO NOT MODIFY THIS FILE BY YOURSELF !!!
# -----------------------------------------------type Mutation {addTodo(todoInput: TodoInput!): Todo!
}type Query {getTodos: [Todo!]
}type Todo {description: String!id: Float!status: Boolean!title: String!
}input TodoInput {description: String!title: String!
}
然后添加以下代码到GraphQL运行器中创建一个新的Todomutation {addTodo(todoInput: { title: Todo 1, description: This is my todo }) {titledescriptionstatus}
}
然后使用以下GraphQL query查询新的Todo{getTodos {titledescriptionstatus}
}
好了我们的功能完成了。我们已经实现了使用TypeScript构建GraphQL API。完整代码https://github.com/fantingsheng/graphql-typescriptReferences[1] TypeGraphQL Docs: https://typegraphql.com/docs/introduction.html[2] TypeScript Decorators Docs: https://www.typescriptlang.org/docs/handbook/decorators.html[3] TypeScript Classes Docs: https://www.typescriptlang.org/docs/handbook/classes.html[4] TypeGraphQL Examples: https://typegraphql.com/docs/examples.html[5] GraphQL Docs: https://graphql.org/learn/
