标题

《小鑫发现》之GraphQL框架Prisma

介绍

这是一个新的前后端交互的方案，不是一定是最好的，但是却很有意思，一种可以让前端人员自由去控制数据库，脱离开后端人员开发SQL读取数据库一层。 虽然不见得能解决所有场景，只有善加利用，很可能解决绝大部分的场景，减少人力，提高效率。 很类似之前的hibernate那种对象的形式操作数据库，其实官网的第一句话：

“Next-generation ORM for Node.js and TypeScript”

可知他是个ORM，跟mybatis是一类。去理解如何用对象，或者说 用图的形式去描述数据。

版本和下载

node v15.5.1

下载地址 (https://nodejs.org/zh-cn/)

npm 7.3.0

下载地址 (https://nodejs.org/zh-cn/)

小记

本人在研究过程中发现，通过官方的ts教程，一直报错，原因暂时不知道，主要是不会ts，另外也可能是阿里镜像的问题，即使我删了也是不行，所以这个教程，从下载官方的demo开始。咱们分两步，第一步先构建一个脚本的框架，先去试试Prisma的魅力，第二步，构建一个node服务，框架式Express+Prisma，将其服务化，提供给前端。

初次构建

准备工作

此次咱们使用MySQL， 数据库脚本地址 下载地址这里直接站出来，数据库名为mydb，加了点自己的小小创意。

CREATE DATABASE IF NOT EXISTS mydb DEFAULT CHARACTER SET utf8mb4 DEFAULT COLLATE utf8mb4_general_ci;
USE mydb;

CREATE TABLE User (
  id INTEGER PRIMARY KEY AUTO_INCREMENT NOT NULL,
  name VARCHAR(255),
  email VARCHAR(255) UNIQUE NOT NULL
);
CREATE TABLE Post (
  id INTEGER PRIMARY KEY AUTO_INCREMENT NOT NULL,
  title VARCHAR(255) NOT NULL,
  createdAt TIMESTAMP NOT NULL DEFAULT now(),
  content TEXT,
  published BOOLEAN NOT NULL DEFAULT false,
  authorId INTEGER NOT NULL,
  FOREIGN KEY (authorId) REFERENCES User(id)
);
CREATE TABLE Profile (
  id INTEGER PRIMARY KEY AUTO_INCREMENT NOT NULL,
  bio TEXT,
  userId INTEGER UNIQUE NOT NULL,
  FOREIGN KEY (userId) REFERENCES User(id)
);


INSERT INTO `mydb`.`Post`(`title`, `createdAt`, `content`, `published`, `authorId`) VALUES ('Hello World', '2021-01-21 15:53:37', NULL, 0, 6);

INSERT INTO `mydb`.`User`( `name`, `email`) VALUES ('Sarah', 'sarah@prisma.io');
INSERT INTO `mydb`.`User`(`name`, `email`) VALUES ('Maria', 'maria@prisma.io');

然后下载官方的demo，

地址是 https://www.prisma.io/docs/getting-started/quickstart-node

根据自己的环境进行下载。mine 是 mac。

下载完毕后，会有start文件夹，结构如下

start 
  ---package.json #这个就不多说，懂则懂，不懂就算了 
  ---prisma # 这是关键，prisma的主要目录，配置都在这里 
 ------dev.db # 这是SQLite需要的，咱们是MySQL版本，所以就让他静静的呆着吧
 ------schema.prisma # 关键的东西，主要配置都在这里，数据配置啊，对象逻辑啊
 ---script.js # 这次的使用脚本，后续运行都是这里

官方是SQLite版本，咱们需要做一些改动，改成我这样，你们一定能看懂，我相信你们。 在prisma修改一个.env文件（这里是隐藏文件，记得取消隐藏），里面内容如下

DATABASE_URL="mysql://root:mims@127.0.0.1.2:3306/mydb"

然后编辑schema.prisma，将provider改成mysql

datasource db {
  provider = "mysql"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

接下来咱们安装依赖，祖传命令 npm install，我这里是去掉了阿里镜像，速度会慢一些，因为我怕阿里镜像有的没有，导致一些问题（别问，问就是我真的试验了好久）

完毕之后，执行 npx prisma introspect

如果大家在这里发现 npx不管用，可以试试 npm install @prisma/cli --save-dev 安装一下环境，我这里是忘记了，怎么出来的，这里就先给大家提示一下，别问，问就是忘了 。

再次查看schema.prisma，文件内容发生了变化，其实就是用过通过命令，让prisma链接数据库，生成对应的对象，很像mybatis-generator。

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "mysql"
  url      = env("DATABASE_URL")
}

model Post {
  id        Int      @id @default(autoincrement())
  title     String
  createdAt DateTime @default(now())
  content   String?
  published Boolean  @default(false)
  authorId  Int
  author    User     @relation(fields: [authorId], references: [id])

  @@index([authorId], name: "authorId")
}

model User {
  id      Int      @id @default(autoincrement())
  name    String?
  email   String   @unique
  posts   Post[]
  Profile Profile?
}

model Profile {
  id     Int     @id @default(autoincrement())
  bio    String?
  userId Int     @unique
  User   User    @relation(fields: [userId], references: [id])
}

这里咱们需要改动一下内容，方便咱们后面进行测试。直接上代码，你们可以直接替换就好。主要改动的地方，Post里的 User->aothor，Profile里的User -> user，User里的Post -> posts，Profile -> profile。别问为啥，问就是官方就是这么干的，其实我在想为啥不直接改数据字段名称呢。

datasource db {
  provider = "mysql"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

model Post {
  id        Int      @id @default(autoincrement())
  title     String
  createdAt DateTime @default(now())
  content   String?
  published Boolean  @default(false)
  authorId  Int
  author      User     @relation(fields: [authorId], references: [id])

  @@index([authorId], name: "authorId")
}

model Profile {
  id     Int     @id @default(autoincrement())
  bio    String?
  userId Int     @unique
  user   User    @relation(fields: [userId], references: [id])
}

model User {
  id      Int      @id @default(autoincrement())
  name    String?
  email   String   @unique
  posts    Post[]
  profile Profile?
}

然后执行 npx prisma generate，去生成client 。注意这里生成的文件路径是这个 /node_modules/.prisma/client/schema.prisma ，主要起作用的也是这个文件所在的文件夹，我的理解。

这里注意，一个关键点，每次改动schema.prisma，都需要执行一次 npx prisma generate，让其重新生成一遍client，这样才会有效果。

至此所有的准备工作都已经准备好了，剩下的就是看下效果了。 修改script.js的内容。

const { PrismaClient } = require('@prisma/client')

const prisma = new PrismaClient()

// A `main` function so that you can use async/await
async function main() {
    // 这里是增加的代码，看名字就知道是啥意思了吧
    const allUsers = await prisma.user.findMany()
    console.log(allUsers)
}

main()
  .catch(e => {
    throw e
  })
  .finally(async () => {
    await prisma.$disconnect()
  })

然后执行 npm run dev

神奇数据出来了，大家会发现，好像没啥神奇的，慢慢来，其实从构建到现在咱们没有做逻辑代码编写，都是靠prisma这个框架实现的，接下来介绍用对象的，也是图的方式去描述一下数据，会有什么效果。

继续修改script.js，修改main方法，为这样，这里大家可以理解一下，这个data对象咋回事，运行之后有什么效果，这里就是对象的形式去描述要插入的数据，user，post，写好对应的方法，例如create，就可以直接创建，要是咱们之前方法，是不是都得挨个写一遍insert呢，这里这些官架子都是prisma提供的，查看官方的文档，你就全了解了，用对象的 ，也是图的方式去描述数据，让prisma去操作，这也是GraphQL的理念。

官方api的地址。

(https://www.prisma.io/docs/concepts/components/prisma-client/crud)

async function main() {
  await prisma.user.create({
    data: {
      name: "Alice",
      email: "alice@prisma.io",
      posts: {
        create: { title: "Hello World" },
      },
      profile: {
        create: { bio:  "I like turtles" }
      }
    }
  })
  const allUsers = await prisma.user.findMany({
    include: { 
      posts: true,
      profile: true 
    },
  })
  console.dir(allUsers, { depth: null })
}

再次执行 npm run dev

$ npm run dev                                                                                                   

> script@1.0.0 dev
> node ./script.js

[
  {
    id: 5,
    name: 'Sarah',
    email: 'sarah@prisma.io',
    posts: [],
    profile: null
  },
  {
    id: 6,
    name: 'Maria',
    email: 'maria@prisma.io',
    posts: [
      {
        id: 4,
        title: 'Hello World',
        createdAt: 2021-01-21T15:53:37.000Z,
        content: null,
        published: false,
        authorId: 6
      }
    ],
    profile: null
  },
  {
    id: 10,
    name: 'Alice',
    email: 'alice@prisma.io',
    posts: [
      {
        id: 6,
        title: 'Hello World',
        createdAt: 2021-01-21T08:09:06.000Z,
        content: null,
        published: false,
        authorId: 10
      }
    ],
    profile: { id: 2, bio: 'I like turtles', userId: 10 }
  }
]

服务化构建

这一步开始去改在成Express服务化，依然使用官方的例子，简单直接。

github地址

(https://github.com/prisma/prisma-examples/blob/latest/javascript/rest-express/README.md)

本人是Mac就是直接用命令，Windows可以去下载

curl https://codeload.github.com/prisma/prisma-examples/tar.gz/latest | tar -xz --strip=2 prisma-examples-latest/javascript/rest-express

下载完成之后 ，咱们用webstorm打开，这里大家就会发现其实，目录结构是一样的，多了个src，这个里面有个index.js这个就是咱们需要服务的主文件，以及接口都在这里写。 然后按照之前的教程，修改数据库，然后执行对应的命令，然后修改一下schema.prisma。这里就列出需要执行的命令，数据库和schema.prisma按照之前的教程修改，其实就是把之前的逻辑走一遍。

$ npm install
$ npx prisma introspect 
$ npx prisma generate

如果之前的教程都执行没问题，这里就应该没事，然后咱们就去看 src/index.js 。 然后咱们启动一下看看，命令是npm run dev

大家可以试试官方的里面的几个api去测试一下，了解一下如何描述数据对象。我这里开始改造，将其改造为前端直接控制数据对象，通过接口去描述实现查询和创建。 直接上代码。

const express = require('express')
const bodyParser = require('body-parser')
const {PrismaClient} = require('@prisma/client')

const prisma = new PrismaClient()
const app = express()

app.use(bodyParser.json())

app.get(`/user`, async (req, res) => {
    const result = await prisma.user.findMany({
        ...req.body
    })
    res.json(result)
})

app.post(`/user`, async (req, res) => {
    const result = await prisma.user.create({
        ...req.body
    })
    res.json(result)
})


const server = app.listen(3000, () =>
    console.log(
        ' Server ready at: http://localhost:3000\n?? See sample requests: http://pris.ly/e/ts/rest-express#3-using-the-rest-api',
    ),
)

postman 测试 这是查询，都是prisma的语法，然后需要配合schema.prisma里的model，进行匹配，达到效果。大家可以自己尝试一下描述一些对象，去获取东西。

这是个新建 我描述了相应的创建对象user data，然后里面描述了 posts - create对象达到了效果。查看数据库。

这次教程只是简单的介绍一下Prisma这个框架，后续有时间会更深入的进行了解，看看能不能形成一套完全可用的服务，我认为可以。

参考连接

[Prisma官方快速开始]

(https://www.prisma.io/docs/getting-started/quickstart-node)

可以选择语言，右上角，我选择是JS

[官方Express版本]

(https://github.com/prisma/prisma-examples/blob/latest/javascript/rest-express/README.md)

[中文文档]

(https://prisma.yoga/docs/prisma2/data-modeling#%E6%95%B0%E6%8D%AE%E6%A8%A1%E5%9E%8B%E5%AE%9A%E4%B9%89)
[官方API教程]

(https://www.prisma.io/docs/concepts/components/prisma-client/crud)

深入了解如何使用就得看这个