Ketting v6:将Hypermedia REST API与React结合使用

作者 : IT 大叔 本文共2223个字,预计阅读时间需要6分钟 发布时间: 2020-09-18

上周,我们发布了Ketting 6。这是关于如何更好地将REST API前端框架(特别是React)集成的一年学习的积累。

它具有新功能,例如本地状态管理,新的缓存策略,(客户端)中间件支持和更改事件。这也是第一个具有较大BC中断的发行版,以使其全部正常工作。

发行Ketting 6对我来说是一个重要的个人里程碑,很高兴能将其发布给全世界并看看人们在做什么。非常感谢在过去几个月中所有Beta测试过的人!

什么是Ketting?

简而言之:Ketting是Java的通用REST客户端。您可以将其用于通过HTTP推送JSON对象,但是API在最佳实践和标准格式方面越丰富,它可以为您自动执行的操作就越多。

它支持HAL,Siren,Collection + JSON,JSON:API等超媒体格式,甚至可以理解和跟踪HTML链接。

人们常说REST(和Hypermedia API)缺少良好的通用客户端。GraphQL具有很多优势,但主要优势是工具。Ketting旨在缩小这一差距。

可以在Github上找到更多信息。

在Ketting 6中提供支持

Ketting现在具有一个单独的react-ketting软件包,该软件包提供React与Ketting的绑定。如果您过去使用过Apollo Client,这些绑定应该看起来非常熟悉。

让我们来看一个例子:

假设您有一个具有“ article”端点的REST api。这将返回类似:

{
  "title": "Hello world",
  "body": "..."
}

本文是使用检索的GET,并使用进行了更新PUT,这是显示它的方式:

import { useResource } from 'react-ketting';


export function Article() {

  const { loading, error, data } = useResource('https://api.example/article/5');

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div class="error">{error.message}</div>;
  }

  return <article>
    <h1>{data.title}</h1>
    <p>{data.body}</p>
  </article>;

}

但是突变呢?不像GraphQL,在REST API的突变往往有相同的格式GETPUT,使发送更新的资源服务器往往只是意味着你的突变,“数据”,并把它发回。

以下示例将允许用户编辑文章并将其发送回:

import { useResource } from 'react-ketting';


export function Article() {

  const { loading, error, data, setData, submit } = 
    useResource('https://api.example/article/5');

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div class="error">{error.message}</div>;
  }

  const changeTitle = (title) => {
    data.title = title;
    setData(data);
  };
  const changeBody = (body) => {
    data.body = body;
    setData(data);
  };

  return <form onsubmit={() => submit}>
    <input type="text" value={data.title} onChange={ev => changeTitle(ev.target.value)  />
    <textarea onChange={ev => changeBody(ev.target.value)}>{data.body}</textarea>
    <button type="submit">Save!</button>
  </form>;

}

每当setData调用时,内部Ketting高速缓存就会使用新的资源状态进行更新。这是根据资源的uri全局存储的。

这意味着,如果useResource在同一uri上使用多个组件,则每个组件都会看到该更新并触发重新渲染。

这与Apollo的本地状态类似,除了它仍绑定到单个资源uri并最终可以保存。

submit()被调用时,data则重新序列化,并在发送PUT请求。

其他变化的非详尽清单

  • 多种缓存策略,例如永远,短暂和永不。
  • 支持获取中间件。OAuth2被重新实现为此类插件。这些插件可以全局添加,也可以按源添加。
  • get()现在返回一个State对象,并且诸如之类的函数put()将需要一个作为参数。
  • put() 现在自动更新状态缓存。
  • 支持HEAD请求以及HEAD响应头中的后续链接。
  • PKCE对OAuth2的支持。
  • 现在可以更改链接并将其发送回服务器。
  • 嵌套的被排除的项目/嵌入。
  • 单独post()postFollow()方法。
  • 更好地支持二进制响应和text/*响应。
  • 实验性:支持警报器动作,HAL表单和提交HTML表单。

未来的计划

接下来我们要做的两件事是:

  • 支持更多常用的React / REST API模式的钩子/组件(告诉我们您想要的!)。
  • 从HAL Forms,Siren和HTML更深入地支持表单和动作。
  • Websocket支持实时服务器启动的状态推送。
免责声明:
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » Ketting v6:将Hypermedia REST API与React结合使用

常见问题FAQ

没有金币/金币不足 怎么办?
本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
所有资源普通会员都能下载吗?
本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。

发表评论