react+apollo+prisma简单demo搭建---1、Frontend开始
react+apollo+prisma入门demo搭建—1、Frontend入门
根据HOW TO GRAPHQL官网的例子，做了些对最新版的改动，适合最新框架的学习。
本系列文章注重前端方面的开发，对于node方面的放在下一个系列。在此过程中有任何问题，都欢迎在评论中提问，会及时反馈
系列目录：
第一章. Frontend开始
第二章. Queries组件编写（Loading Links）
第三章. Mutations组件编写（Creating Links）
第四章. 页面路由
第五章. 身份验证
目标是写一个Hackernews应用。以下是应用功能：
- 显示链接列表
- 搜索链接
- 用户登录
- 登录用户可以创建链接
- 经过身份验证的用户可以点赞链接（每个链接和用户一次）
- 当其他用户点赞链接或创建一个新的链接时，实时更新
下面是构建应用将使用的技术:
- 前端
- React: 用于构建用户界面的前端框架
- Apollo Client: 功能齐全的GraphQL客户端
- 后端
- prisma: 灵活的后端平台组合 GraphQL + Serverless
- graphql-yoga：使用简单、功能齐全的GraphQL server，拥有出色的性能和好的开发者体验
开始
为了照顾更加全面的读者，我写的会尽量详细，熟练的开发者可进行快速选择性的阅读
创建一个app
首先我们创建一个react项目，我们使用create-react-app做这些事情，本系列使用mac电脑，使用window的开发者可自行替换运行命令
npx create-react-app simple-hackernews
运行完成后，我们创建了一个叫 simple-hackernews的project，运行一下看看
cd simple-hackernews
yarn start
Note: 这里使用了yarn命令，与npm类似，但比npm好用，推荐使用
程序会自动打开浏览器http://localhost:3000，如果出现熟悉的react图标，项目初始化就完成了。
使用IDE打开我们创建的项目，先调整一下项目目录结构
.
├── README.md
├── node_modules
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── src
│ ├── App.test.js
│ ├── components
│ │ └── App.js
│ ├── index.js
│ ├── logo.svg
│ ├── serviceWorker.js
│ └── styles
│ ├── App.css
│ └── index.css
└── yarn.lock
然后自己把App.js、index.js中的依赖路径给调整一下。
准备样式
为了更少的关注样式，我们使用Tachyons样式库
打开public/index.html，增加一个link
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
// 下面这行是增加的
<link rel="stylesheet" href="https://unpkg.com/tachyons@4.2.1/css/tachyons.min.css"/>
保存，然后我们打开index.css，将文件内容改为：
body {
margin: 0;
padding: 0;
font-family: Verdana, Geneva, sans-serif;
}
input {
max-width: 500px;
}
.gray {
color: #828282;
}
.orange {
background-color: #ff6600;
}
.background-gray {
background-color: rgb(246,246,239);
}
.f11 {
font-size: 11px;
}
.w85 {
width: 85%;
}
.button {
font-family: monospace;
font-size: 10pt;
color: black;
background-color: buttonface;
text-align: center;
padding: 2px 6px 3px;
border-width: 2px;
border-style: outset;
border-color: buttonface;
cursor: pointer;
max-width: 250px;
}
样式基本准备完毕
安装Apollo Client
在项目根目录下运行
yarn add apollo-boost react-apollo graphql
- apollo-boost包含了方便我们使用Apollo Client工具的工具包
- react-apollo包含将Apollo Client与React一起使用的绑定
- graphql包含Facebook的GraphQL参考实现 - Apollo Client也使用它的一些功能
配置ApolloClient
Apollo抽象出所有较低级别的网络逻辑，并为GraphQL服务器提供了一个很好的接口。
与使用REST API相比，您不必再处理构建自己的HTTP请求 - 而是可以简单地编写Query和Mutations并使用ApolloClient实例发送它们。
使用Apollo时首先要做的是配置ApolloClient实例。
它需要知道GraphQL API的endpoint，以便它可以处理网络连接。
打开src/index.js，更改为以下
import React from 'react'
import ReactDOM from 'react-dom'
import './styles/index.css'
import App from './components/App'
import * as serviceWorker from './serviceWorker'
import { ApolloProvider } from 'react-apollo'
import { ApolloClient } from 'apollo-client'
import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
const httpLink = createHttpLink({
uri: 'http://localhost:4000'
})
const client = new ApolloClient({
link: httpLink,
cache: new InMemoryCache()
})
ReactDOM.render(
<ApolloProvider client={client}>
<App />
</ApolloProvider>,
document.getElementById('root')
)
serviceWorker.register()
理解下目前做了啥：
- 首先导入一些必要的包文件
- 创建了将ApolloClient实例与GraphQL API连接的httpLink，GraphQL服务器将在http:// localhost:4000上运行
- 通过传入httpLink和InMemoryCache的新实例来实例化ApolloClient
- 最后渲染React应用程序的根组件。应用程序包含高阶组件ApolloProvider，它作为prop传递给客户端
下载后端代码
本系列主要针对前端搭建，后端代码我们直接用完成版就好，之后会更新node的graphql文章
在根目录下运行以下命令（mac，linux可以直接运行，windows请先安装curl或者直接访问网址下载,解压出来，将server文件夹copy到根目录下）
curl https://codeload.github.com/howtographql/react-apollo/tar.gz/starter | tar -xz --strip=1 react-apollo-starter/server
现在我们拥有了一个server文件夹，目录文件如下：
- prisma：此目录包含与Prisma数据库服务相关的所有文件。
- prisma.yml：是服务的根配置文件。
- datamodel.prisma 定义您的数据模型。每个模型都映射到数据库中的表
- src：此目录包含GraphQL服务器的源文件。
- schema.graphql 包含您的GraphQL schema。
- resolvers 包含GraphQL schema中定义的resolver function
- index.js 是GraphQL服务器的入口
我们现在可以看下server/src/schema.graphql文件，里面包含的就是前端可以发送的操作
这个schema允许了以下操作
- Queries:
- feed：从后端检索所有链接，请注意此查询还允许filter，sorting和pagination 参数
- Mutations：
- post: 允许经过身份验证的用户创建新链接
- signup：创建新用户
- login：登录现有用户
- vote：允许经过身份验证的用户点赞现有链接
- Subscriptions:
- newLink：创建新链接时接收实时更新
- newVote：提交点赞时接收实时更新
例如你可以发送这样的feed来查询前10个links
{
feed(skip: 0, first: 10) {
links {
description
url
postedBy {
name
}
}
}
}
部署Prisma数据模型
首先注册Prisma Cloud，并在https://app.prisma.io中创建一个service。
（Tips： 我这边因为是已经有创建好的service，新用户可以参考文档创建，第一次可以在我们文件夹中按照教程创建，当可以在你的个人中心看到service的时候，说明创建成功了，然后将创建时生成的文件全都删除，保证项目的纯净，进入创建好的service页面，复制左下角的http endpoint，粘贴到server/prisma/prisma.yml中的endpoint字符串中，以及粘贴到server/src/generated/prisma-client/index.js中的endpoint字符串）
然后我们切到server文件夹下，运行
yarn install
yarn prisma deploy
项目就可以连接上prisma了
server由Prisma Cloud免费提供，并附带连接数据库（AWS Aurora）
试用服务器
在server目录下运行
yarn start
现在用浏览器打开http://localhost:4000 ，可以看到GraphQL Playground正在运行。
复制以下代码到Playground的左侧框内
mutation {
prismaLink: post(
description: "Prisma replaces traditional ORMs and makes it easy to build GraphQL servers ?",
url: "https://www.prisma.io"
) {
id
}
apolloLink: post(
description: "The best GraphQL client for React",
url: "https://www.apollographql.com/docs/react/"
) {
id
}
}
点击中间的play按钮就会在数据库中添加了两条link
我们再在左侧输入
{
feed {
links {
id
description
url
}
}
}
如果一切正常的话，可以在右侧看到类似以下的输出
{
"data": {
"feed": {
"links": [
{
"id": "cjcnfwjeif1rx012483nh6utk",
"description": "The best GraphQL client",
"url": "https://www.apollographql.com/docs/react/"
},
{
"id": "cjcnfznzff1w601247iili50x",
"description": "Prisma replaces traditional ORMs and makes it easy to build GraphQL servers ?",
"url": "https://www.prisma.io"
}
]
}
}
}
到此为止，所有的准备工作的完成了！马上开始下一步的旅程吧。
本章项目github 分支地址
https://github.com/zust-hh/simple-hackernews/tree/Frontend-topic1