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

// 下面这行是增加的

保存，然后我们打开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(
  
    
  ,
  document.getElementById('root')
)
serviceWorker.register()

理解下目前做了啥：

1. 首先导入一些必要的包文件
2. 创建了将ApolloClient实例与GraphQL API连接的httpLink，GraphQL服务器将在http:// localhost:4000上运行
3. 通过传入httpLink和InMemoryCache的新实例来实例化ApolloClient
4. 最后渲染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"
        }
      ]
    }
  }
}

到此为止，所有的准备工作的完成了！马上开始下一步的旅程吧。

2、Query组件的编写（Loading Links）

本章项目github 分支地址

https://github.com/zust-hh/simple-hackernews/tree/Frontend-topic1