GraphQL，Apollo Client，PostgreSQL三者的关系和区别，以及在项目中的角色

绝地灬酷狼 2022-03-19 20:56 170阅读 0赞

在使用`react-native`做项目时，涉及到后台的技术采用的是`PostgreSQL，GraphQL，Apollo Client`这三个技术，虽然可以顺利使用但是对这三者了解的非常浅显，现在将这三者做一个简单的介绍和区分，为深入理解做准备。

## 一：GraphQL 我是一个标准 ##

在官方文档中，`GraphQL`是一个用于`API`的**查询语言**，他对你`API`中的数据提供了一套易于理解的**完整描述**，使得客户端能够准确的获取他所需要的数据，并且是没有任何的冗余。  
**特点：（在官方文档中都有详细的描述）**  
**1:请求你所要的数据，不多不少**  
使用`GraphQL`总是可以返回可预测的结果，你需要什么字段中的数据就在查询语句中查询相应的字段即可。

query currentPerson {
      currentPerson {
        id,
        fullName
      }
    }

如上述代码在有关`person`的数据中有很多的字段，但是我只查询`id` 和 `fullName`，因此在返回时他只会返回相应的数据，不多也不少。  
返回数据如下：

{
      "data": {
        "currentPerson": {
          "id": "33e8a498-fb54-4838-ac99-9f13886eaf90",
          "fullName": "Tester"
        }
      }
    }

**2: 获取多个资源，只用一个请求**  
在项目中如果需要从多个数据表中查询出来的数据，在使用典型的`REST API`中你必须载入多个`URL`去进行查询，但是在`GraphQL`中就可以利用这些 **资源之间的引用（主外键关系）** 去进一步查询，由此`GraphQL`就可以通过一次请求获取到所有的数据，这样的优点就是可以在较慢的网络下使用`GraphQL`的应用会表现的依旧很迅速。

query allPersonPosts($personPostCondition: PersonPostCondition! $orderBy: [PersonPostsOrderBy!]) {
      allPersonPosts(condition: $personPostCondition orderBy: $orderBy) {
        nodes {
         	personId,
         	content,
         	personPostImagesByPersonPostId {
         	  nodes {
         	    postImageId,
         	    imageByPostImageId {
         	      url
         	    }
         	  }
         	}
        }
      }
    }

**分析：**  
这是一个`query`语句查询所有的动态，获取的是动态中的发布人（`personId`），动态内容（`content`），动态的图片唯一标示（`postImageId`），图片的资源路径（`url`）。为了描述的更加清晰，画了一个图（凑活看一下-\_-），解释一下为什么要使用这个嵌套查询的形式。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9Eb25nTGlhbmc_size_16_color_FFFFFF_t_70]  
现在这个`allPersonPosts`查询是针对表`person_post`进行查询的，此时想要查询到`image`表中的`url`字段，就需要使用这种嵌套查询的方式进行查询。  
根据字段之间的引用关系（`references`）

person_post_id       uuid not null references person_post(id),
      post_image_id        uuid not null references image(id)

上述是使用`PostgreSQL`数据库语言写的`person_post_image`表，在定义 `person_post_id` 时`references`表明这个字段与 `person_post`表中的`id`有关联关系。相类似的，在 `post_image_id` 中表明和`image`表中的`id`也存在关联关系。因此，在`query`语句中，我找到了`person_post`的`id`我就能找到`person_post_image`表中的`person_post_id`，就可以锁定同行数据 `post_image_id` ，此时我就可以使用`imageByPostImageId`找到`image`表中的`url`。这就是优点之一，不需要使用多个`query`，非常的方便。  
学习文档链接：[http://graphql.cn][http_graphql.cn]

## 二：Apollo Client 我是一个实现库 ##

前面描述了`GraphQL`，他和`apollo client`的关系就像是`ECMAscript`和`JavaScript`的关系。前者是标准后者是实现。  
实现并不是全部按照标准去写的，他有可能会超出或者缺少标准中的一些内容。  
在`GraphQL`文档中有这么一段描述：**GraphQL 已有多种编程语言支持。下表包含一些流行的服务端框架、客户端库、服务和其他有用的内容。**  
`Apollo Client`是一种实现方式，他是一个强大的 `JavaScript GraphQL` **客户端**。（用于实现前端的数据交互）  
![在这里插入图片描述][20190211143540474.png]  
前面写的`query`语句就是`Apollo Client` 的实现基础，`Apollo Client` 通过封装了`Query`和`Mutation`两个组件进行数据的查询和修改。下面的是一个使用`Query`组件实现的查询。

<Query query={CURRENT_PERSON}>
          {({ loading, error, data }) => {
            if (loading) return <Text>Loading...</Text>
            if (error) return <Text>`Error!: ${error}`</Text>
            const { currentPerson } = data
            return (
              // 子组件
            )
          }}
    </Query>

学习文档链接：`http://graphql.cn/code/`

## 三：PostgreSQL 你知道MySQL吗？ ##

你知道`MySQL`吗？  
`PostgreSQL`是一个关系数据库管理系统(`ORDBMS`)  
我现在处于使用的初期，对于`PostSQL`无法作出相应的评价。但是他和`MySQL`并不是谁更强，各有千秋，成熟度也不同，只要研究透一个就不愁没有用武之地。  
在学习使用`PostgreSQL`时，帮助网站：[https://www.yiibai.com/postgresql/][https_www.yiibai.com_postgresql]  
学习时记得对比`MySQL`去学习。  
附上一段使用`PostgreSQL`创建的表

create table person_post_image (
      person_post_id       uuid not null references person_post(id),
      post_image_id        uuid not null references image(id)
    );
    grant select，update, insert on table person_post_image to person;

## 最后的话 ##

对于`GraphQL，Apollo-client，PostgreSQL`这三个技术的浅显的理解至此结束，但也是一个开始。  
接下来就需要在项目中不断的使用，挖掘。  
学习之前要明白这个技术是什么，不搞明白怎么能深入的理解，出了问题也无从下手。  
加油，新年工作第一天。  
有帮助的链接：  
[https://blog.csdn.net/VhWfR2u02Q/article/details/79366613][https_blog.csdn.net_VhWfR2u02Q_article_details_79366613]  
如有错误，非常感谢指正，谢谢！！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9Eb25nTGlhbmc_size_16_color_FFFFFF_t_70]: /images/20220320/edd3e4984beb426ca7b05a49646f61ce.png
[http_graphql.cn]: http://graphql.cn
[20190211143540474.png]: /images/20220320/523e1b874a41420a8c5baeb38159c827.png
[https_www.yiibai.com_postgresql]: https://www.yiibai.com/postgresql/
[https_blog.csdn.net_VhWfR2u02Q_article_details_79366613]: https://blog.csdn.net/VhWfR2u02Q/article/details/79366613