ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

TypeScript + Apollo 实战:用 Prisma 为 HackerNews GraphQL 服务器接入 SQLite 数据库

TypeScript + Apollo 实战:用 Prisma 为 HackerNews GraphQL 服务器接入 SQLite 数据库 【免费下载链接】howtographqlThe Fullstack Tutorial for GraphQL项目地址https://gitcode.com/gh_mirrors/ho/howtographql点击查看免费下载本文是 howtographql 开源仓库中 TypeScript Apollo 后端教程系列的关键一章讲解如何为基于 Apollo Server 与 Nexus 构建的 GraphQL 服务器引入真正的持久化层使用 Prisma 连接 SQLite 数据库替代此前只存在于内存中的links数组。读完本文你将掌握schema.prisma数据建模、prisma migrate迁移工作流、Prisma Client 的生成与使用findMany/create并为下一章把数据库接入 GraphQL resolver 做好铺垫。前情提要内存数据的局限在教程的前几章见 2-a-simple-query.md 与 3-a-simple-mutation.md你通过 Nexus 定义了Link类型与feed查询、post变更但所有数据都存放在一个 TypeScript 数组里let links: NexusGenObjects[Link][] [ { id: 1, url: www.howtographql.com, description: Fullstack tutorial for GraphQL }, { id: 2, url: graphql.org, description: GraphQL official website }, ];postmutation 的 resolver 则用idCount links.length 1这样的简陋手段生成自增 ID再把新对象links.push(link)进数组。正如该章末尾明确指出的一旦杀掉并重启服务器之前创建的 links 就会全部消失——因为这些数据只存在于进程内存中。本章的目标正是为服务器接入一个 SQLite 数据库让 mutation 写入的数据真正持久化下来。Prisma 是什么一个数据库工具集与 ORMPrisma 是一个开源数据库工具集与 ORM通过提供干净且类型安全的查询 API让开发者更容易理解和访问数据。在本教程中你会用到 Prisma 生态中的四件工具Prisma Client一个自动生成、类型安全的 Node.js TypeScript 查询构建器Prisma CLI与 Prisma 项目交互的命令行工具Prisma Migrate声明式的数据建模与迁移系统Prisma Studio一个用于查看和编辑数据库中数据的 GUI。本章会从零开始搭建这一切。教程刻意保持 Prisma 概念讲解的精简目的是让你尽快上手写代码如需深挖某个概念可以查阅 Prisma 官方文档。为什么选择 Prisma你已经理解了 GraphQL 服务器的基本运作机制静态类型的 schema 与负责解析查询的 GraphQL 引擎解决了 API 开发中的大量痛点。但在真实应用中resolver 的实现往往会变得极其复杂——尤其是 GraphQL 查询可以嵌套多层实现稍有不慎就容易引发性能问题。此外你还常常需要处理认证、授权权限、分页、过滤、实时推送、与第三方服务或遗留系统集成等额外工作流。Prisma 正是聚焦于解决这些问题、提升开发者操作数据库时的生产力。这也是本教程HackerNews Clone从本章起全面转向 Prisma 的原因。安装 Prisma CLI 与 Prisma Client在项目根目录即hackernews-typescript/打开终端安装 Prisma CLI作为开发依赖与 Prisma Client作为运行时依赖npm install prisma^3.5.0 --save-dev npm install prisma/client^3.5.0注意本教程锁定的是 Prisma 3.x 系列^3.5.0与后续章节的 API 用法保持一致。接下来用 Prisma CLI 在项目中初始化 Prismanpx prisma init该命令会在项目根目录创建一个prisma目录。认识 schema.prismaPrisma 的“数据库 Schema”还记得你一直在维护的 GraphQL schema 吗Prisma 也有自己的 schema上一步创建的prisma目录里有一个名为schema.prisma的文件你可以把它理解为数据库 schema。它由三个部分组成Data source数据源指定数据库连接Generator生成器声明要生成 Prisma ClientData model数据模型定义应用的models每个 model 都会映射到底层数据库中的一张表。Prisma 独特的数据模型在“贴近底层数据库”与“提供类型安全、自动补全的生产力抽象”之间取得了很好的平衡。下面把它用到你的项目中// 1 datasource db { provider sqlite url file:./dev.db } // 2 generator client { provider prisma-client-js } // 3 model Link { id Int id default(autoincrement()) // 4 createdAt DateTime default(now()) // 5 description String url String }逐段解读// 1Data source告诉 Prisma 你将使用 SQLite 作为数据库连接并给出 SQLite 文件的路径file:./dev.db相对于schema.prisma所在目录。// 2Generator声明要生成 Prisma Clientprovider 为prisma-client-js。// 3Data modelLink模型定义了即将创建的Link数据库表结构。模型的每个字段由字段名、字段类型和附加属性id、default等组成这些属性定义了字段的各种行为。// 4**id属性表示id字段是Link表的_主键_default(autoincrement()) 表示当创建 link 记录时未显式指定该字段值则由数据库自动生成自增整数。// 5createdAt上的default(now())同样指定了默认值——创建记录时若未手动传入则自动填充当前时间。DateTime类型遵循标准 ISO 8601 格式的字符串例如2021-11-16T21:48:39.798Z。提示如果你使用 VS Code建议安装 Prisma 官方扩展来获得schema.prisma的语法高亮、校验与自动补全支持Prisma 也为其他主流 IDE 提供了集成。创建 SQLite 数据库你的第一次迁移SQLite 是一个进程内in-process库实现了自包含、无服务端、零配置、事务性的 SQL 数据库引擎。与大多数 SQL 数据库不同SQLite 没有独立的服务器进程而是直接读写普通磁盘文件——一个包含多张表、索引、触发器与视图的完整 SQL 数据库可以封装在单个磁盘文件中。这对本项目来说是绝佳选择。好消息是Prisma 开箱即用地帮你完成了全部数据库设置只需要一条命令npx prisma migrate dev --name initmigrate dev会对比schema.prisma中的模型与数据库当前状态为“init”这次变更生成迁移文件并应用到数据库。运行后查看项目的prisma目录你会发现 Prisma Migrate 创建了一个/migrations目录。这里需要理解的关键点是你通过数据模型告诉 Prisma“我想创建一张存储 link 数据的Link表以及这些数据长什么样”Prisma 就会生成必要的迁移并把迁移打包进一个带独立.sql文件的专属目录中放入prisma/migrations。这个目录会成为数据库随每次迁移不断演进的历史参考记录。至此你拥有了一张带Link表的数据库。迁移成功后终端会输出类似下面的信息Your database is now in sync with your schema. ✔ Generated Prisma Client (3.5.0) to ./node_modules/prisma/client in 302ms这意味着 Prisma 已经基于你的数据模型自动生成了Prisma Client。它包含你在数据库中运行查询所需的一切并且和 Nexus 一样是完全类型安全的。默认情况下Prisma Client 生成在/node_modules/prisma/client可以直接在代码中导入使用。提示如果出于任何原因需要重新生成 Prisma Client可以随时脱离迁移流程单独运行npx prisma generate命令。用 Prisma Client 发出第一个查询为了不干扰现有的 GraphQL 服务器实现你会在一个独立文件中试验 Prisma Client。先在src/目录下创建script.tstouch src/script.ts然后写入第一段 Prisma 查询代码// 1 import { PrismaClient } from prisma/client; // 2 const prisma new PrismaClient(); // 3 async function main() { const allLinks await prisma.link.findMany(); console.log(allLinks); } // 4 main() .catch((e) { throw e; }) // 5 .finally(async () { await prisma.$disconnect(); });逐行拆解// 1从prisma/client模块导入PrismaClient构造函数// 2实例化PrismaClient// 3定义async函数main向数据库发送查询——之后所有查询都写在这个函数里。这里调用的是findMany()查询它会返回数据库中现有的全部link记录// 4调用main函数// 5脚本终止时关闭数据库连接prisma.$disconnect()。建议你亲手重新输入查询那一行体会输入prisma.和prisma.link.时出现的自动补全它能列出你可以访问的所有模型以及可以对该数据执行的所有操作。现在运行这段代码npx ts-node src/script.ts你成功用 Prisma Client 查询了数据库由于数据库还是空的你得到的自然是一个空数组。写入第一条数据create 与自增主键在main函数的allLinks查询上方输入以下代码const newLink await prisma.link.create({ data: { description: Fullstack tutorial for GraphQL, url: www.howtographql.com, }, })注意自动补全的帮助它先提示你.create()正是需要的操作然后直接展示出该如何构造这条写入mutation。create的data参数只需提供description和url——因为id由default(autoincrement())自动生成createdAt由default(now())自动填充。重新运行上一条命令npx ts-node src/script.ts这次终端会打印出刚创建的 link[ { id: 1, createdAt: 2021-11-16T21:48:39.798Z, description: Fullstack tutorial for GraphQL, url: www.howtographql.com } ]可以看到id被自动赋值为1createdAt被自动填充为当前时间ISO 8601 格式。这正对应schema.prisma中id default(autoincrement())与default(now())这两个属性声明所定义的行为。你的数据库工作流总结至此你后续更新数据时的典型工作流已经定型一共四步手动调整 Prisma 数据模型prisma/schema.prisma使用本教程涉及的prisma migrateCLI 命令迁移数据库重新生成 Prisma Client在应用代码中使用 Prisma Client 访问数据库。这套“数据模型 → 迁移 → 生成 Client → 应用代码”的循环正是 Prisma 项目开发的核心节奏。下一步把数据库接进 GraphQL 服务器本章只是持久化改造的第一步。在下一章5-connecting-server-and-database.md中你会把 Prisma Client 挂到 GraphQL resolver 的context参数上创建src/context.ts导出context对象与Context接口在src/schema.ts的makeSchema中配置contextType并在src/index.ts的ApolloServer实例中注入context。之后feed查询的 resolver 将改为return context.prisma.link.findMany()postmutation 则改为context.prisma.link.create({ data: { description, url } })——届时即使重启服务器之前提交的 links 也不会丢失。再往后6-authentication.md 还会在schema.prisma中新增带unique邮箱字段的User模型并建立User与Link之间的外键关系postedBy/postedById继续扩展这套数据模型。本章小结与自测回顾本章你安装了 Prisma CLI 与 Prisma Client用npx prisma init初始化项目在schema.prisma中通过 Data source、Generator、Data model 三部分声明了 SQLite 连接与Link模型随后用npx prisma migrate dev --name init完成首次迁移并自动生成 Prisma Client最后在src/script.ts中分别用findMany()与create()完成了第一次读取与第一次写入。用本教程章节配套的问题自测一下Prisma Client 在 GraphQL API 中扮演什么角色正确答案是它连接你的 GraphQL 服务器与数据库而非负责接收处理 GraphQL 查询、缓存数据或设计 GraphQL schema——这些分别由 Apollo Server 与 Nexus 承担。源码与文档定位本章完整教程位于 4-adding-a-database.md同系列教程的 JS 版对应章节见 graphql-js/4-adding-a-database.md二者内容结构一致可相互对照本教程栈TypeScript Apollo Server技术栈描述为“Build your own GraphQL server with TypeScript, Apollo Server, Nexus and Prisma”在 src/data/stacks.ts 中注册并被标记为后端初学者首选beginnersChoice: true教程章节格式与写作规范frontmatter、Instruction 块、代码块标注等见 meta/writing-guidelines.md前置章节 2-a-simple-query.md 展示了被数据库取代的内存links数组3-a-simple-mutation.md 展示了基于idCount的内存版postmutation。赞分享【免费下载链接】howtographqlThe Fullstack Tutorial for GraphQL项目地址https://gitcode.com/gh_mirrors/ho/howtographql点击查看免费下载相关推荐从零构建 GraphQL 服务器graphql-yoga 实战与 Prisma 数据库接入指南从零构建 GraphQL 服务器graphql yoga 实战与 Prisma 数据库接入指南 本教程带你从零开始使用 graphql yoga 搭建一个功后端数据库GraphQLPrisma 1 graphql-yoga 从零构建 GraphQL 服务器Schema、Resolver 与数据库接入实战Prisma 1 graphql yoga 从零构建 GraphQL 服务器Schema、Resolver 与数据库接入实战 本文基于当前仓库的官方教程文后端数据库GraphQLPrisma 实战教程连接空 MySQL 数据库搭建 Prisma 服务器并部署首个 GraphQL 服务Prisma 实战教程连接空 MySQL 数据库搭建 Prisma 服务器并部署首个 GraphQL 服务 本文以 Prisma 1.11 版本为背景完整讲后端数据库GraphQL上一篇终极Hyper终端美化与性能优化指南打造高效开发环境下一篇戴森球计划工厂蓝图完全指南从零开始打造高效星际工厂的终极方案创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表