---
title: 创建Parse 3.10及以上版本与Relay的兼容性指南
slug: docs-ch/advanced-guides/relay-compatibility
description: 学习如何在Back4App上创建应用并利用Relay与Parse 3.10的兼容性。详细介绍GraphQL查询、连接和变更。
image: https://www.back4app.com/_public/img/back4app-og.png
createdAt: 2024-01-27T19:43:10.017Z
---
# 中继兼容性
## 介绍
Parse Server GraphQL API 遵循当前可用于高度可扩展 API 和雄心勃勃的前端项目的最新标准。
Parse 开源团队选择遵循 GraphQL 服务器 [中继](https://relay.dev/docs/en/graphql-server-specification) 规范。
中继是一个用于构建数据驱动的 React 应用程序的 JavaScript 框架，基于 GraphQL，旨在从头开始易于使用、可扩展，最重要的是，性能优越。中继通过静态查询和提前生成代码来实现这一点。
从 Parse 3.10 开始，完全兼容 [中继](https://relay.dev/docs/en/graphql-server-specification) 已实现。
本文档将引导您了解这些实现。
## 先决条件
:::hint{type="info"}
**要开始本教程，您需要：**
- 在 Back4App 创建的应用程序
- 查看 [创建新应用程序教程](https://www.back4app.com/docs/get-started/new-parse-app) 以了解如何在 Back4App 上创建应用程序。
:::
## 1 - 创建一个新的 Back4App 应用程序
首先，您需要确保在 Back4App 上创建了一个现有的应用程序。如果您是新用户，可以查看 [本教程](https://www.back4app.com/docs/get-started/new-parse-app) 以了解如何创建一个。
## 2 - 创建几个类
在您新创建的应用程序中，转到 `数据库浏览器` 并点击 `创建一个类` 按钮
::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/zAfYMf6sbeh5o9VjBeIkd_image.png" size="40" width="448" height="579" position="center" showCaption="false"}
选择创建一个 `自定义` 类并给它命名。
根据 [Relay 示例架构](https://relay.dev/docs/en/graphql-server-specification#schema), 我创建了类 Faction、Ship 和其他类，具有匹配的属性，但您可以创建自己的类以遵循此文档。只需相应地更改您的查询和变更。
请记住，按照约定，类名以大写字母开头，采用驼峰命名法，并且不包含空格和符号等特殊字符。
完成后点击 `创建类`。
## 3 - GraphQL 控制台
创建了您的类和属性后，您可以前往 `API 控制台` 然后 `GraphQL 控制台` 来执行您的查询和变更.
::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/ozv6WReeEgNChHI3CjB3h_image.png" size="70" width="1606" height="922" position="center" showCaption="false"}
## 4 - 查询
我们第一个查询将根据其 `objectId` 来检索一个对象（不要与 `id` 混淆）。
Parse 已经发展，现在查询支持 `ObjectId`, 以前称为 `id` 在以前的版本中，但现在也支持 `Global Id`, 被称为 `id`，它指的是 Relay 的全局 ID，并且格式更长，因为它包含加密的类名.
的示例 `ObjectId`: EaT0dDk09v
的示例 `id`（即全局 id）： RmFjdGlvbjpFYVQwZERrMDl2
让我们进行第一个查询，通过其 `ObjectId` 来检索一个对象:
```graphql
1 query RebelsQuery {
2 faction(id:"EaT0dDk09v") {
3 objectId #ObjectId for Parse
4 id #GlobalID for Relay
5 name #n
6 }
7 }
```
这将输出
```graphql
1 {
2 "data": {
3 "faction": {
4 "objectId": "EaT0dDk09v",
5 "id": "RmFjdGlvbjpFYVQwZERrMDl2",
6 "name": "Galactic Empire"
7 }
8 }
9 }
```
现在，让我们将其更改为Relay的GlobalId:
```graphql
1 query RebelsQuery {
2 faction(id:"RmFjdGlvbjpFYVQwZERrMDl2") {
3 objectId #ObjectId for Parse
4 id #GlobalID for Relay
5 name #n
6 }
7 }
```
请注意，结果将是相同的:
```graphql
1 {
2 "data": {
3 "faction": {
4 "objectId": "EaT0dDk09v",
5 "id": "RmFjdGlvbjpFYVQwZERrMDl2",
6 "name": "Galactic Empire"
7 }
8 }
9 }
```
这发生是因为 `全局 ID` 的工作，如其名称所示，是全局的，并且其类名被加密在其中，因此 Parse 知道在哪里搜索该 ID。
## 5 - 重新获取
同样使用 `全局 ID` 你可以像 [Relay 的规范](https://relay.dev/docs/en/graphql-server-specification#object-identification) 如下预取:
```graphql
1 query RefetchQuery{
2 node(id:"RmFjdGlvbjpFYVQwZERrMDl2"){
3 id ... on Faction{
4 name
5 }
6 }
7 }
```
这将导致
```graphql
1 {
2 "data": {
3 "node": {
4 "id": "RmFjdGlvbjpFYVQwZERrMDl2",
5 "name": "Galactic Empire"
6 }
7 }
8 }
```
## 6 - 连接
[Relay的连接](https://relay.dev/docs/en/graphql-server-specification#connections) 在Parse中与GraphQL的工作方式相同，因此，如果您需要检索反抗军的飞船：
```graphql
1 query RebelsShipsQuery {
2 faction(id: "RmFjdGlvbjphcTAzNklSZ2RQ"){
3 objectId
4 name
5 ships{
6 edges{
7 node{
8 name
9 }
10 }
11 }
12 }
13 }
```
这将导致：
```graphql
1 {
2 "data": {
3 "faction": {
4 "objectId": "aq036IRgdP",
5 "name": "Alliance to Restore the Republic",
6 "ships": {
7 "edges": [
8 {
9 "node": {
10 "name": "Y-Wing"
11 }
12 },
13 {
14 "node": {
15 "name": "X-Wing"
16 }
17 }
18 ]
19 }
20 }
21 }
22 }
```
您还可以检索第N艘飞船：
```graphql
1 query RebelsShipsQuery {
2 faction(id: "RmFjdGlvbjphcTAzNklSZ2RQ"){
3 objectId
4 name
5 ships(first: 1){
6 edges{
7 node{
8 name
9 }
10 }
11 }
12 }
13 }
```
导致
```graphql
1 {
2 "data": {
3 "faction": {
4 "objectId": "aq036IRgdP",
5 "name": "Alliance to Restore the Republic",
6 "ships": {
7 "edges": [
8 {
9 cursor
10 "node": {
11 "name": "Y-Wing"
12 }
13 }
14 ]
15 }
16 }
17 }
18 }
```
或者在特定船只之后检索第 N 艘船，使用其游标值：
```graphql
1 query RebelsShipsQuery {
2 faction(id: "RmFjdGlvbjphcTAzNklSZ2RQ"){
3 objectId
4 name
5 ships(first: 1 after: "YXJyYXljb25uZWN0aW9uOjA"){ #cursor for the Y-wing ship
6 edges{
7 cursor
8 node{
9 name
10 }
11 }
12 }
13 }
14 }
```
这将检索：
```graphql
1 {
2 "data": {
3 "faction": {
4 "objectId": "aq036IRgdP",
5 "name": "Alliance to Restore the Republic",
6 "ships": {
7 "edges": [
8 {
9 "cursor": "YXJyYXljb25uZWN0aW9uOjE=",
10 "node": {
11 "name": "X-Wing"
12 }
13 }
14 ]
15 }
16 }
17 }
18 }
```
## 7 - 变更
我们还可以使用与 [Relay 的变更](https://relay.dev/docs/en/graphql-server-specification#mutations).
让我们创建一个新的 `船`:
```graphql
1 mutation createBWing($input: CreateShipInput!){
2 createShip(input: $input){
3 ship{
4 id
5 name
6 }
7 }
8 }
```
这需要以下查询变量:
```graphql
1 {
2 "input":{
3 "fields": {
4 "name": "B-Wing"
5 }
6 }
7 }
```
并将返回 `全局ID` 和 `名称` 如变更中所指定:
```graphql
1 {
2 "data": {
3 "createShip": {
4 "ship": {
5 "id": "U2hpcDpXb21QZnVzeXVF",
6 "name": "B-Wing"
7 }
8 }
9 }
10 }
```