apollo+react实战项目 stepbystep（一）

使用create-react-app创建项目

1、安装create-react-app

yarn global add create-react-app

　　

2、使用create-react-app创建项目

create-react-app hackernews-react-apollo

　　

3、修改创建项目的结构

在src文件夹下创建一个components文件夹用来存放所有的react组件，创建一个styles文件夹用来存放所有的css文件。将App.js移动到components文件夹下，将App.css和index.css移动到styles文件夹下，并相应的在index.js和App.js中修改引用相关文件的路径。

4、增加样式库

在pubilic/index.html中引入一个css库，以备使用

<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;
}

　　

5、在hackernews-react-apollo文件夹下安装apollo

yarn add apollo-boost react-apollo graphql

　　

6、配置ApolloClient

ApolloClient封装了客户端与服务器端网络通信的底层逻辑，让我们可以通过ApolloClient实例轻松的通过Query和mutation与服务器进行交互。

配置ApolloClient:

第一步就是要让ApolloClient知道我们服务器端的地址，以便于其与GraphQL服务器交互。

在index.js中

import ApolloClient from 'apollo-boost';
import { ApolloProvider } from 'react-apollo';

const client = new ApolloClient({uri:'http://localhost:4000'})


ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root'));
registerServiceWorker();

　　我们将{uri:'http://localhost:4000'}作为ApolloClient的初始化值传递给ApolloClient创建了实例client。然后通过ApolloProvider 将client作为props传递给在App内的所有的组件。ApolloProvider类似于react当中的《Provider》。可以提供全局的props.

7、下载服务器端代码

本例中使用Node.js已经完成的服务器端代码：

在命令窗口导航到hackernews-react-apollo文件夹下，运行下面的命令。（windows用户可以使用git bash）

curl https://codeload.github.com/howtographql/react-apollo/tar.gz/starter | tar -xz --strip=1 react-apollo-starter/server

　　这样在hackernews-react-apollo文件夹下就增加了一个server文件夹。也可以手工下载并解压到目录。

然我们浏览一下server文件夹的内容：

database文件夹包含了prisma数据库服务的相关内容

　　prisma.yml是服务的配置文件

　　datamodel.graphql使用SDL定义了数据模型。数据模型为prisma提供grpahql api增删改查提供基础。

src文件夹包含了GraphQL服务器的源文件。

　　schema.graphq包含了应用的schema.定义了前端可以向后端发送的GraphQL操作。

　　generated/prisma.graphql：包含了自动生成的Prisma database schema，提供了强大的graphql api的增删改查操作。不要人工修改该文件。

　　resolvers：定义了与schema对应的解析函数。

　　index.js：是GraphQL server的入口文件。

在这些后端服务器文件中，仅有一个文件schema是与前端开发相关的，因为它定义了前端可以发送的请求（query,mutation,subscribe等）。

schema.js文件：

# import Link, Vote, LinkSubscriptionPayload, VoteSubscriptionPayload from "./generated/prisma.graphql"

type Query {
  feed(filter: String, skip: Int, first: Int, orderBy: LinkOrderByInput): Feed!
}

type Feed {
  links: [Link!]!
  count: Int!
}

type Mutation {
  post(url: String!, description: String!): Link!
  signup(email: String!, password: String!, name: String!): AuthPayload
  login(email: String!, password: String!): AuthPayload
  vote(linkId: ID!): Vote
}

type AuthPayload {
  token: String
  user: User
}

type User {
  id: ID!
  name: String!
  email: String!
}

type Subscription {
  newLink: LinkSubscriptionPayload
  newVote: VoteSubscriptionPayload
}

　　此schema允许一下的操作

查询：Query

　　feed：从服务器端提取所有的链接, 注意着个查询允许使用过滤，分页，排序等参数。

客户端可以发送的请求示例：

{
 feed(skip:0,first:10){
      links{
           description
            url
            postby{
                name
            }
          }
    }   
}    

　　

修改：Mutations

　　post:允许授权用户创建一个新的链接

　　signup:为新用户创建一个账号

　　login:已存在的用户登录

　　vote:允许已存在的用户对一个已存在的链接投票

客户端发送的修改示例：

mutation{
  sigunup(  
  name: "Sarah",
  email: "sarah@graph.cool",
  password: "graphql"
  ){
    token
    user{
      id
    }
  }
}

　　

订阅：Subscription

　　newLink:当新增链接时实时更新

　　newVote:当新增投票时实时更新

8、部署prisma服务

在命令窗口导航到server文件加下，安装相关依赖，并部署prisma服务

yarn install
yarn prisma deploy

　使用docker部署prisma

a、安装prisma

npm install -g prisma

　　

b、安装docker

c、设置数据库和prisma服务器

创建docker-compose.yml：

version: '3'
services:
  prisma:
    image: prismagraphql/prisma:1.15
    restart: always
    ports:
    - "4466:4466"
    environment:
      PRISMA_CONFIG: |
        port: 4466
        databases:
          default:
            connector: mysql
            host: mysql
            port: 3306
            user: root
            password: prisma
            migrations: true
  mysql:
    image: mysql:5.7
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: prisma
    volumes:
      - mysql:/var/lib/mysql
volumes:
  mysql:

　　d、启动数据库和服务器

docker-compose up -d

　　e:修改index.js将显示的http://192.168.99.100:4466/粘贴到index.js中替换__PRISMA_ENDPOINT__。

注意：在windows下启动docker不能通过localhost进行访问。

9、启动服务器

yarn dev

　　默认会在4000端口启动服务。默认会打开GraphQL Playground，以便您探索和使用API​​。请注意，如果您只想在不打开Playground的情况下启动服务器，则可以通过运行来执行此操作yarn start

点击GraphQL PlayGroud右侧的schema可以看到我们在服务器端定义的schema文件相同的内容。

Playground的另一个重要注意事项是它实际上允许您与两个GraphQL API进行交互。一个是App 的schema另一个是Prisma schema (in server/src/generated/prisma.graphql).

App层的schema它定义了客户端应用程序将能够发送到API的操作。这包括业务逻辑以及其他常见功能和工作流程（例如注册和登录）　

Prisma模式定义的数据库层。它提供了强大的CRUD操作，允许您对数据库中的数据执行任何类型的操作.

10、使用playground

使用post创建两个link

mutation CreatePrismaLink {
  post(
    description: "Prisma turns your database into a GraphQL API 😎",
    url: "https://www.prismagraphql.com"
  ) {
    id
  }
}

mutation CreateApolloLink {
  post(
    description: "The best GraphQL client for React",
    url: "https://www.apollographql.com/docs/react/"
  ) {
    id
  }
}

　　查询创建的links

{
  feed {
    links {
      id
      description
      url
    }
  }
}

　　现在服务器已经可以正常工作了。