使用带有响应的Hypermedia API来保留v6

最新推荐文章于 2024-06-05 10:01:50 发布

weixin_26713037

最新推荐文章于 2024-06-05 10:01:50 发布

阅读量138

点赞数

文章标签： python java

原文链接：https://medium.com/@evertp/ketting-v6-using-hypermedia-apis-with-react-49228e72abaa

版权

We just released Ketting 6. This is the accumulation of about a year of learning on how to better integrate REST APIs with frontend frameworks, in particular React.

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

It’s packed with new features such as local state management, new caching strategies, (client-side) middleware support and change events. It’s also the first release that has some larger BC breaks to make this all work.

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

Releasing Ketting 6 is a big personal milestone for me, and I’m really excited to unleash it to the world and see what people do with. A big thank you to all the people that beta tested this in the last several months!

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

什么是Ketting？ (What’s Ketting?)

In short: Ketting is a generic REST client for Javascript. You can use it for pushing JSON objects via HTTP, but the richer your API is in terms of best practices and standard formats, the more it can automatically do for you.

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

It has support for Hypermedia formats such as HAL, Siren, Collection+JSON, JSON:API and can even understand and follow links from HTML.

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

It’s often said that REST (and Hypermedia APIs) is lacking a good generic client. GraphQL has a lot of advantages, but a major one is tooling. Ketting aims to close that gap.

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

More information can be found on Github.

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

在Ketting 6中提供支持 (React support in Ketting 6)

Ketting now has a separate react-ketting package that provides React bindings to Ketting. These bindings should look very familiar if you’ve used Apollo Client in the past.

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

Lets dive into an example:

让我们来看一个例子：

Lets assume you have a REST api that has an ‘article’ endpoint. This returns something like:

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

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

This article is retrieved with GET, and updated with PUT, this is how you would display it:

本文是使用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>;

}

But what about mutations? Unlike GraphQL, mutations in REST APIs often have the same format for GET and PUT, so sending an updated resource to a server often just means mutating your 'data' and sending it back.

但是突变呢？与GraphQL不同，REST API中的变异通常具有相同的GET和PUT格式，因此将更新的资源发送到服务器通常仅意味着变异您的“数据”并将其发送回去。

The following example would allow a user to edit an article and send it back:

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

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>;

}

Whenever setData is called, the internal Ketting cache is updated with the new resource state. This is globally stored, based on the uri of the resource.

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

This means that if multiple components use useResource on that same uri, every component will see that update and triggere a re-render.

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

This is similar to Apollo’s local state, except it’s still bound to a single resource uri and can eventually be saved.

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

When submit() is called, the data is re-serialized and sent in a PUT request.

调用submit() ， data将重新序列化并在PUT请求中发送。

其他变化的非详尽清单 (Non-exhaustive list of other changes)

Multiple cache strategies, such as forever, short and never.
多种缓存策略，例如永远，短暂和永不。
Support for fetch-middlewares. OAuth2 is reimplemented as such a plugin. These plugins can be added globally, or per-origin.
支持获取中间件。 OAuth2被重新实现为此类插件。这些插件可以全局添加，也可以按源添加。
get() now returns a State object, and functions such as put() will require one as an argument.
get()现在返回一个State对象，而put()之类的函数将需要一个作为参数。
put() now automatically updates the state cache.
put()现在自动更新状态缓存。
Support for HEAD requests and following links from HEAD response headers.
支持HEAD请求以及HEAD响应头中的后续链接。
PKCE support for OAuth2.
PKCE对OAuth2的支持。
Links can now be mutated and sent back to the server.
现在可以更改链接并将其发送回服务器。
Nested transcluded items/embeds.
嵌套的被排除的项目/嵌入。
A separate post() and postFollow() method.
单独的post()和postFollow()方法。
Better support for binary responses and text/* responses.
更好地支持二进制响应和text/*响应。
Experimental: Support for Siren actions, HAL forms and submitting HTML forms.
实验性：支持警报器动作，HAL表单和提交HTML表单。

未来的计划 (Future plans)

The next two things we are working on are:

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

Support for more hooks/components for common React/REST API patterns (tell us what you want!).
支持更多常用的React / REST API模式的钩子/组件(告诉我们您想要的！)。
Deeper support for forms and actions from HAL Forms, Siren and HTML.
从HAL Forms，Siren和HTML更深入地支持表单和动作。
Websocket support for live server-initiated state pushes.
Websocket支持实时服务器启动的状态推送。
The documentation got a complete rewrite and is now hosted on the Github Wiki.
该文档已完全重写，现在托管在Github Wiki上。
For a full list of changes and BC breaks, check out the Upgrading page.
有关更改和BC休息的完整列表，请查看“升级”页面。

Originally published at https://evertpot.com on September 9, 2020.

最初于2020年9月9日在https://evertpot.com上发布。

翻译自: https://medium.com/@evertp/ketting-v6-using-hypermedia-apis-with-react-49228e72abaa

weixin_26713037

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用带有响应的Hypermedia API来保留v6

We just released Ketting 6. This is the accumulation of about a year of learning on how to better integrate REST APIs with frontend frameworks, in particular React.我们刚刚发布了Ketting 6 。这是关于如何更好地将REST AP...
复制链接

扫一扫