使用React和Apollo构建GORM GraphQL应用

365bet地区构建一个365bet地区应用程序并使用GORM的GraphQL支持来使用Apollo服务React应用程序

s扎卡里·克莱因(Zachary Klein)

365bet地区版本 4.0.0

训练

365bet地区培训由创建并积极维护365bet地区框架的人们开发和交付

入门

365bet地区在本指南中,您将学习如何利用GORM对GraphQL的支持。您将配置365bet地区充当GraphQL服务器

初始示例项目已经有一个与会议相关的简单REST API,该API由两个域类组成扬声器谈论使用配置资源注释该项目正在使用反应概况并且提供了一个简单的React应用,该应用将列出发言人以及每个发言人的演讲

365bet地区React应用程序非常简单,并且天真的使用了365bet地区提供的默认REST API,例如,该应用程序进行了一次REST调用以列出讲话者,然后遍历每个讲话者的讲话ID进行单独的REST调用以获取每个讲话的详细信息。意味着应用程序的一次加载可能需要许多REST调用,只是为了获取呈现应用程序所需的数据

http本地主机发言人获取KB ms http本地主机对话获取B ms http本地主机对话获取B ms http本地主机对话获取B ms http本地主机对话获取b ms http本地主机对话获取b ms

当然,有几种方法可以使用标准REST技术解决此问题,包括使用超媒体或使用JSON视图例如,但是在更复杂的应用程序中,这可能会导致提供不同数据组合的自定义端点激增。此外,某些端点可能会提供比应用程序实际需要的数据更多的数据,因此无法在其中表达所需的数据典型的REST API

这是GraphQL的亮点,它使我们的API使用者(无论是像我们自己的“单页应用程序”这样的私有客户端还是公共用户)可以通过声明方式指定自己需要的确切数据,甚至GraphQL查询也可以编码为流类型使组件的数据需求明确且可测试

GraphQL

请参考出色的文档和其他资源。GraphQL项目官方网站了解更多信息

您将需要什么

要完成本指南,您将需要以下内容

  • 花些时间在你手上

  • 体面的文本编辑器或IDE

  • 安装了JDK或更高版本JAVA首页适当配置

如何完成指南

要开始,请执行以下操作

要么

365bet地区指南存储库包含两个文件夹

  • 初始初始项目通常是一个简单的365bet地区应用程序,其中包含一些其他代码,可以帮助您快速入门

  • 完成一个完整的示例它是按照指南中介绍的步骤进行操作并将这些更改应用于文档的结果。初始

要完成指南,请转到初始

  • 光盘进入grails用react和apollo初始值引导gorm graphql

并按照下一节中的说明进行操作

您可以直接前往完成的例子如果你光盘进入grails用react和apollo指导gorm graphql

为GraphQL配置GORM

安装蓝色GraphQL插件,方法是将此行添加到依存关系在部分建立gradle:

建立gradle
编译"组织格栅美食图形"编译"org grails插件gorm graphql"

现在要为您的域类生成GraphQL模式,所需要做的就是添加一个静态图该域类的属性

grails应用程序域com对象计算讨论常规
com对象计算grails rest资源@资源u'谈论')
对话字符串标题整型持续时间静态的 (1)

    静态的属于演讲者
1 这将导致根据域类中的属性,遵循在约束

如果您需要自定义GraphQL模式的行为,则可以分配自定义属性GraphQLMapping使用插件提供的DSL这不是本指南的要求,但是在其中显示了一些受支持的选项。扬声器域类

grails应用程序域com对象计算扬声器groovy
com对象计算grails rest资源org grails gorm graphql实体dsl GraphQLMappingJava时间LocalDateJava时间段@资源u'扬声器')
演讲者字符串firstName字符串lastName字符串名称字符串电子邮件字符串bio本地日期生日静态的hasMans会谈静态的graphql GraphQLMapping构建属性'', 订购: 1 (1)属性'名字', 订购: 2属性'电子邮件', 订购: 3排除'生日' (2)属性'', 弃用原因: '8月st被删除' (3)属性'生物') { (4)订购4dataFetcher扬声器扬声器扬声器生物"没有提供传记"''整数(5)dataFetcher演讲者演讲者演讲者生日之间的时间间隔LocalDate现在年份输入
        }
    }

    静态的约束电子邮件可为空, 电子邮件: 生日可以为空生物可为空
    }

    静态的映射生物类型'文本'名称公式'concat名字\' \''会谈'ID'
    }

}
1 设置属性顺序
2 从架构中排除属性
3 也可以将不赞成使用的属性设置为不推荐使用)
4 自定义数据获取程序,用于在检索属性时提供自定义逻辑
5 向GraphQL模式添加非持久属性
您可以了解GORM GraphQL插件的所有可用功能来自插件文档.

使用GraphQL浏览器

GORM GraphQL插件提供了交互式GraphQL浏览器图形语言365bet地区这使得浏览GraphQL模式变得容易。当在URL上运行365bet地区应用程序时,浏览器可用graphql浏览器浏览器功能包括基于您的模式的自动补全功能,可轻松浏览可用的查询类型和变异用于创建更新的请求的GraphQL术语从架构中删除数据

使用以下任一启动应用程序grails运行应用要么gradlew bootRun并浏览到http本地主机graphql浏览器.

现在,您可以针对新的GraphQL架构和变异运行查询。以下是一些查询和变异,以开始使用,请参阅GORM GraphQL插件文档和GraphQL项目网站了解有关GraphQL的语法和功能的更多信息

查询

列出发言人ID查询发言人列表最大ID
返回发言人总数查询speakerCount
通过ID检索发言人详细信息来查询发言人详细信息firstName lastName bio
返回带有发言人详细信息的对话列表嵌入式查询talkList最大标题发言人firstName lastName

变异

如果有任何突变发言者,则按身份更新发言者返回任何错误消息。
创建演讲者,此突变将由于缺少属性突变而返回错误Speaker演讲者创建演讲者firstName James lastName Kleeh id firstName lastName错误字段消息
通过ID突变删除说话者SpeakerDelete ID错误

安装和配置Apollo

现在您已经有了GraphQL模式,是时候使用GraphQL替换React应用程序中现有的RESTful集成了。当然,我们可以手动编写GraphQL查询,但是在大多数情况下,使用库来抽象化制作细节会更好这些要求之一是中继框架这是由Facebook开发的,这是React的创造者。另一个受欢迎的图书馆是阿波罗它为包括Angular和React在内的众多JavaScript框架提供了绑定。本指南将在以下步骤中使用Apollo

使用以下任一方法安装必要的软件包ASL要么:

npm install apollo客户端预设反应apollo graphql标签graphql保存

使用Apollo的第一个要求是配置一个提供者它将封装实际向GraphQL模式发出请求所需的详细信息,编辑文件src主要webapp索引js如下所示

客户端src索引js
从反应'反应';
来自的ReactDOM'反应dom';
来自的应用'应用程式';
 'css引导css';
 'css应用css';
 'CSS 365bet地区 CSS';
 'CSS主CSS';
来自的ApolloProvider'反应阿波罗';
来自的ApolloClient'阿波罗客户';
来自的createHttpLink'阿波罗链接http';
InMemoryCache来自'阿波罗缓存内存';
来自的服务器网址"配置";

(1)const客户端ApolloClient链接createHttpLink小号: `$服务器URL graphql` }), (2)
  快取: 内存缓存(3)ReactDOM渲染ApolloProvider客户端客户端<> />
</ApolloProvider文档的getElementById根
1 我们创建一个实例ApolloClient需要两个对象HttpLink代表GraphQL模式和缓存存储的URL
2 该客户端会将查询发送到服务器URL graphql端点,恰好是GORM GraphQL插件公开GraphQL模式的地方
3 最后,我们包装我们的应用程式ApolloProvider通过我们的组件ApolloClient实例作为对后者的支持现在所有子组件都将能够查询mutate指向的GraphQL模式的变异客户.

我们的React应用非常简单,包含主要组件演讲者名单, 扬声器谈论这些组件的前两个包括用于加载其数据的REST调用,让我们用GraphQL查询替换这些调用

编辑src主webapp SpeakerList js

src主webapp SpeakerList js
从反应组件'反应'
演讲者来自"扬声器";
来自的graphql'反应阿波罗'; (1)
来自的gql'';  (2)

演讲者名单延伸零件(3)渲染常量扬声器这个道具数据说话者列表(4)
    返回扬声器扬声器地图s<> ={身份证} 扬声器={s}/>)] : 

载入中const扬声器查询gql`查询SpeakerList max10) { (5)id firstName lastName对话ID`; (6)const SpeakerListWithData graphql扬声器查询选项: {pollInterval: 5000}} (7)演讲者名单出口 默认SpeakerListWithData(8)
1 高阶分量这意味着它将包装现有组件并返回具有其他行为的新组件
2 q模板文字标签将解析我们的GraphQL查询
3 请注意,我们能够完全删除我们的componentDidMount进行REST调用的方法以及我们不再需要使用的构造函数这种状态.
4 我们的GraphQL查询返回的数据可通过以下方式获得在这种情况下SpeakerList.
5 该常量表示我们的查询注释,其语法与您在GraphiQL浏览器中可能使用的语法相同
6 而不是出口演讲者名单直接我们首先使用演讲者名单带有GraphQL模式的组件传递我们的数据要求,并通过数据内支撑演讲者名单.
7 我们指定了一个pollInterval这是以下几种可用选项之一此选项将使我们的GraphQL查询每秒钟运行一次,以自动使用任何新数据更新组件
8 最后,我们导出的连接版本演讲者名单作为默认模块

此时,如果您重新启动应用程序或运行gradlew webpack在另一个终端中重新加载JavaScript,您将看到React应用程序现在正在通过GraphQL模式检索说话者

继续前进扬声器组件,我们可以再次删除componentDidMount方法,我们可以删除这个国家说话属性,而不是在渲染方法,我们将直接从扬声器关闭

src主webapp扬声器js
从反应组件'反应'
好吧'反应自举'
来自的谈话"会谈";

扬声器延伸组件构造器();

    这个标题: '',
      持续时间: ''
    }
  }

省略其他方法渲染常量扬声器这个道具常量标题持续时间这个返回 
      

发言人firstName发言人lastName <>/>
    演讲者讲话图> <> ={编号} 谈论={Ť} ={() =>这个deleteTalk ID>)}
  • 标题 <> 类型='文本' ='标题' ={标题} onChange={这个handleNewTalkChange}/> 持续时间 <> 类型="" ="持续时间" ={持续时间} onChange={这个handleNewTalkChange}/> <> onClick={这个addNewTalk}>新增对话 } } 出口 默认扬声器

    <1> <2>

    但是,如果我们现在尝试运行该应用程序,我们会发现我们只能访问我们丢失的每个谈话的ID标题持续时间借助GraphQL,我们可以轻松地将这些属性添加到检索到的数据中,只需将它们添加到查询中即可

    编辑src主webapp SpeakerList js并添加标题持续时间扬声器查询.

    src主webapp SpeakerList js
    const扬声器查询gql`查询SpeakerList max10id firstName lastName讨论ID标题持续时间(1)
      }
    }`;

    这样,我们的多个REST调用已替换为单个GraphQL查询。您可以使用Apollo来检查此查询和响应开发人员工具浏览器扩展.

    Apollo开发工具扩展

    变异

    如前面提到的变异是通过GraphQL模式更改数据的GraphQL机制。在模式中定义了可用的变异。GORM GraphQL插件生成文档中描述的几种基本变异。例如,扬声器域类,该插件提供以下突变

    • 演讲者创建书籍

    • 演讲者身份证

    • 演讲者编号

    当然也可以定义自定义突变插件文档描述如何

    我们的React应用程序已经使用REST调用来创建和删除给定发言人的讲话让我们用GraphQL突变替换这些REST调用

    编辑客户端src Speaker js:

    客户端src Speaker js
    const talkCreate gql`变异talkCreate谈论对话创建对话创建对话谈论ID标题持续时间`const talkDelete gql`变异talkDeleteID长话删除IDID错误`;

    我们为两个突变定义了GraphQL片段talkCreatetalkDelete这些片段指定每个突变所需的输入及其类型。您可以在GraphiQL浏览器中键入这些突变并查看其所需的输入。

    现在我们需要将这些突变绑定到我们的组件道具上,这样我们就可以从我们的组件中调用它们了。此任务的组件,因为我们有多个变异,所以我们将导入Apollo撰写简化这些突变的连锁功能

    首先导入撰写在顶部的功能演讲者js:

    从react apollo导入graphql撰写从graphql标签导入gql

    现在我们可以使用撰写将这些突变与我们的结合扬声器零件

    客户端src Speaker js
    const SpeakerWithMutations组成graphql talkCreate道具变异talkCreate说话变异变数对话graphql talkDelete道具变异talkDelete这种变化变数演讲者出口 默认SpeakerWithMutations
    有关使用突变和撰写请参阅Apollo文档.

    最后一步是调用我们的变体代替REST调用。addNewTalkdeleteTalk在功能演讲者js并如下所示编辑它们

    客户端src Speaker js
    addNewTalk const标题持续时间这个州立发言人这个道具这个setState标题: '', 持续时间: ''});
    
        这个道具talkCreate谈论标题持续时间扬声器: {ID扬声器ID,然后是数据控制台日志'建立回应'数据抓住错误控制台日志'发送查询时出错'错误的deleteTalk ID这个道具talkDeleteIDid然后是数据控制台日志'删除回应'数据抓住错误控制台日志'发送查询时出错'错误

    我们绑定到组件的每个突变都可以作为以下功能使用这个道具: talkCreatetalkDelete每个函数都采用一个参数,该参数是一个JavaScript对象,其中包含我们的突变所需的所有参数。然后函数将使用由突变返回的数据进行调用。对于此示例,我们只是注销数据,但您也可以使用它来更新Apollo缓存,如下所示:在文档中描述.

    为简单起见,本指南是基于轮询间隔我们之前进行了设置,以刷新数据并从缓存中删除添加对话。在现实世界中的应用程序中,您将需要使用突变结果来更新内存中的数据

    结论

    365bet地区在本指南中,我们了解了使用365bet地区创建功能齐全的GraphQL模式以及使用Apollo和365bet地区的React Profile在单页应用程序中与该模式进行交互是多么容易。GraphQL文档的GORM和相关365bet地区365bet地区 React指南了解更多

    帮助365bet地区

    365bet地区服务:

    免费咨询

    OCI 365bet地区团队包括365bet地区联合创始人检查我们的并向发展和维护365bet地区的工程师学习

    Grails OCI团队