Apollo-like REST API와 React 및 Ketting 연결

얼마 전에 발표했어요Ketting 6.REST API와 프런트엔드 프레임워크(특히 React)를 통합하는 방법에 대한 약 1년간의 학습 축적이다.
그것은 로컬 상태 관리, 새로운 캐시 정책, (클라이언트) 중간부품 지원, 변경 이벤트 등 새로운 기능을 포함한다.이것도 첫 번째 버전으로 더 큰 BC가 휴식을 취하여 이 모든 일을 할 수 있다.
Ketting 6 발표는 개인적으로 큰 이정표입니다. 저는 그것을 세계에 발표하고 사람들이 그것을 어떻게 사용하는지 볼 수 있어서 정말 기쁩니다.지난 몇 달 동안 테스트를 해주신 모든 분들께 감사드립니다!

카이팅이 왜 그래?
간단히 말해서 Ketting은 Javascript의 공통 REST 클라이언트입니다.HTTP를 통해 JSON 객체를 푸시할 수 있지만 API는 모범 사례 및 표준 서식이 풍부할수록 자동으로 도움을 줍니다.
HAL, Siren, Collection + JSON, JSON: API 등 초매체 형식을 지원하며 HTML의 링크를 이해하고 추적할 수 있습니다.
사람들은 흔히 REST (초매체 API) 에 좋은 일반 클라이언트가 부족하다고 말한다.GraphQL에는 많은 장점이 있지만 하나의 주요 장점은 도구다.케이팅은 그 격차를 좁히는 데 목적을 두고 있다.
자세한 내용은 Github를 참조하십시오.

Ketting 6에서 반응 지원
Ketting은 현재 단독 react-ketting 패키지를 가지고 있으며, Ketting에 React 귀속을 제공할 수 있습니다.만약 이전에 사용한 적이 있다면, 이 귀속들은 매우 익숙해 보일 것입니다.
다음 예를 살펴보겠습니다.
"REST api가 있는 경우""article""끝점이 있습니다."그러면 다음과 같은 결과가 반환됩니다.

{
  "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의 변이는 통상GET과PUT와 같은 형식을 가지기 때문에 업데이트된 자원을 서버에 보내는 것은 변이한'데이터'를 의미하고 이를 보내는 것일 뿐이다.
다음 예제에서는 사용자가 글을 편집하여 다시 보낼 수 있습니다.

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

}

내부 Ketting 캐시는 언제 호출되든지setData 새 자원 상태로 업데이트됩니다.이것은 자원 기반의uri 전역 저장소입니다.
이것은 여러 개의 구성 요소가 같은uri에 사용되면 useResource 모든 구성 요소가 업데이트를 보고 다시 나타난다는 것을 의미한다.
이것은 아폴로의 로컬 상태와 유사하지만, 단일 자원uri에 연결되어 있고, 최종적으로 저장할 수 있습니다.submit()를 호출할 때 data는 다시 서열화되어 PUT 요청에 발송됩니다.
Apollo Client
기타 변경된 상세하지 않은 목록

캐시 정책(예: 영구적, 짧음, 없음)

중간부품 지원을 받습니다.OAuth2가 이 플러그인으로 다시 구현되었습니다.이 플러그인들은 전 세계적으로 추가할 수도 있고, 원본에 따라 추가할 수도 있다.

get() 현재 State 대상을 되돌려줍니다. put()와 같은 함수는 매개 변수로 필요합니다.

put() 상태 캐시가 자동으로 업데이트됩니다.

HEAD 요청에 대한 지원과 HEAD 응답 헤더의 다음 링크가 있습니다.

OAuth2에 대한 PKCE 지원.

링크를 변경하여 서버로 전송할 수 있습니다.

패키지 항목/삽입 부품.

단독post()과 postFollow() 방법.

바이너리 응답과 text/* 응답을 더욱 잘 지원합니다.

실험성: 경보 동작, HAL 폼과 HTML 폼을 지원합니다.

향후 계획
다음에 우리가 해야 할 두 가지 일은:

일반적인 React/REST API 모드에서 사용할 수 있는 연결/구성 요소를 더 많이 지원합니다. 원하는 것을 알려 줍니다.

HAL 양식, Siren 및 HTML은 양식과 작업에 대한 더 깊은 지원을 제공합니다.

Websocket은 실시간 서버 부팅 상태 푸시를 지원합니다.

추가 링크

문서가 완전히 다시 작성되어 현재 에 위탁되어 있습니다.

변경 및 BC 중단 목록은 Github Wiki 페이지를 참조하십시오.