#基于Node+Ract的Apollo Platform的实践 | 青训营笔记

**这是我参与「第四届青训营 」笔记创作活动的的第1天**

引言

快速开发与调式一个简单的前端与服务端的接口对接数据,故使用了`Apollo Server`与`Apollo Client`开发

Apollo 是一个用于构建超图的平台，这是一个由连接到应用程序客户端（如 Web 和本机应用程序）的所有数据、服务和功能组成的统一网络。超图的核心是一种名为GraphQL的查询语言。

Apollo Server的最佳实践是:

1. 定义架构(数据类型)
2. 定义数据集(真实数据)
3. 定义解析器(执行查询所使用的数据集)

Apollo Platform的特点

1. 按需查询,需要什么数据就查询什么数据
2. 静态类型,在定义架构时给数据定义类型,可直接推断出该类型
3. 服务端与客户端绑定,在客户端中可缓存来自服务器的数据,也可以当作客户端的状态管理
4. Apollo Client必须与Apollo Server相结合使用

实践: 开发出一个按需查询的书籍页面

Node服务端内容

目录结构

schema : 架构目录

data : 数据目录

app.js 程序主入口

安装相关依赖

下载Apollo Server后端服务与Graphql查询库

pnpm i apollo-server graphql 
or 
yarn add apollo-server graphql

Tips 

类型的命名的最佳实践是Upper Camel Case(大驼峰)命名法Graphql的SDL语法是必须要有一个根查询Query``! 表示该类型不为空

定义书籍的的GraphQL模式

该架构有以下功能点

1. 定义一个查询,  包含书籍books相关信息
2. 书籍Books的类型包含id,该id的类型是ID,该id不为空
3. Books包含name,name的类型是字符串
4. Books包含一个作者author集合Author类型,这个类型不为空
5. Author它包含id,name,photo,分别代表ID,作者名称,作者照片

src/schema/book.js

const { gql} = require('apollo-server')
const typeDefs = gql`
 type Query {
  books: [Books]!
 }
 type Books:{
  id: ID!
  name: String!
  author:Author!
 }
 type Author{
  id: ID!
  name: String!
  photo: String
 }

定义书籍数据

与你的结构所定义的名称一致

1. 将book分为6组相同的books信息
2. Books包含id,name
3. Books包含一个Author集合类型, 使用JS的对象来包含Author的属性id,name,photo

src/data/book.js

const mocks = {
 Query :()=>({
  books:()=>[...new Array(6)]
 }),
 Books:()=>{
  id:()=> 'book id'
  name: ()=> 'book name'
  author: () => {
   return {
    id: 'author id',
    name: 'author name',
    photo: 'https://res.cloudinary.com/dety84pbu/image/upload/v1606816219/kitty-veyron-sm_mctf3c.jpg'
   }
  }
 },
} 

与Node服务端集成

1. 将Apollo应用连接到Node
2. 将架构./schema文件与数据./data文件导入到Apollo中
3. 开启Node服务API接口

src/app.js

const { ApolloServer } = require('apollo-server')

const mocks = require(''./data')
const typeDefs = require(''./schema')

const server = new ApolloServer({
 typeDefs,
 mocks
})

server.listen(()=>{
 console.log('network!')
})

React前端内容

安装相关依赖

下载Apollo客户端与`Graphql

pnpm i apollo/client graphql react
or
yarn add apollo/client graphql react

与React客户端集成

src/main.js

import React from 'react'  
import ReactDOM from 'react-dom/client'  
import App from './App'
import { ApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client'

const client = new ApolloClient({
 uri:'http://localhost:4000', //替换成你的Node服务的端口,默认4000
 cache: new InMemoryCache()
})

ReactDOM.createRoot(document.getElementById('root')).render(  
  <React.StrictMode>  
   <ApolloProvider client={ client }>  
    <App />  
   </ApolloProvider>  
  </React.StrictMode>,  
)

使用

1. 使用Graphql查询所需的接口
2. 使用useQueryAPI来获取Graphql返回的数据
3. 展示数据

src/App.jsx

import { useQuery, gql } from '@apollo/client'

const Layout = () =>{
 const ALL_BOOKS = gql`
  query books{
   id
   name
   author{
    id
    name
    photo
   }
  }
 `
 
const { data, loading, error } = useQuery(ALL_BOOKS)

 if (loading) return <strong>'Loading...'</strong>
 if (error) return <strong>'Error:'</strong>

 console.log(data)
 return <>code</>
}

function App() {  
 return (<>  
  <Layout />  
 </>)  
}