옵져버블, Promise연속적 처리

fromPromise와 flatMap

이것은 옵져버블과 관련이 있다.

옵져버블: 반응형 프로그래밍이라고 부름.

프로그래밍

|-- 함수형 프로그래밍
|-- 반응형 프로그래밍

함수형 프로그래밍 :
.map((el)=>).filter().find().replace()
.. 이런식으로 기능들을 체이닝하는것. 위의것은 만들어진것들이고, 함수현 프로그래밍은 우리가 만든 기능들을 체이닝해서 놓는것을 의미한다.
어떤 input에 대한 해당 out이 항상 동일하다.

반응형 프로그래밍:
Promise: 비동기작업 도와줘
옵져버블: 연속적인 비동기작업 도와줘 + α

연속적인 비동기작업?

페이지 클릭시 만약 첫번째로 3페이지를 그리고 바로 5페이지를 클릭했다.
페이지를 조회후에 응답이 오는데 클릭한순서대로 응답이 처리되는것이 아니라, 여러 문제로 벡엔드에서 맨마지막에 클릭한 5페이지의 응답이 먼저 처리되어 보내지고, 그다음에 처리되는 3페이지가 다시 리랜더링되면서 최종적으로는 사용자는 5페이지를 클릭했는데 3페이지를 보게되는 현상이 나타난다.
이때는 이전에 요청했던 3페이지 요청을 취소하는것이 필요하다.

이런것을 '연속적인 비동기작업' 이라고한다.

== Promise를 연속적으로 처리: Observable

사용예제:
1. 연속적인 페이지 클릭시
2. 연속적인 검색어 변경시

이러한 옵져버블로 프로그래밍되어있는 라이브러리가 바로 apolloClient이다.따라서 아까 return fromPromise로 묶기전에는 빨간줄이 그려져있던것이다.

---

fromPromise

라이브러리:
Reactive-X =>rxjs라는 라이브러리가 있다. 반응형 프로그래밍을 쉽게 적용할 수 있다.
ApolloClient => 여기 자체에서 zen-observable 이라는 라이브러리를 사용해 설치하지않고 import만 하여 사용가능
zen-observable => 이것은 설치하여 적용시 사용하는 라이브러리

zen-observable 설치

yarn add zen-observable

yarn add @types/zen-observable --dev

zen-observable 사용하기

import { from } from "zen-observable";

zen-observable 에 from을 import한다.

버튼을 클릭시 옵져버블이 실행되게 만든다.
form()안에 쿼리를 여러개 적으면 연속적인 쿼리를 날리는 것이다. 따라서 안에는 배열로 적는다.그리고 .flatMap을 사용해 from으로 보낸 결과를 받아 적용시키는 것이다. 그리고 이 각각의 결과를 다시 from에 담아 subscribe를 통해 최종적으로 결과를 볼 수 있다.

(이때의 flatMap은 자바스크립트의 flatMap과는 다름)

export default function ObservarbleFlatMapPage() {
  const onClickButton = () => {
    // new Promise(()=>{})// 자바스크립트에서 제공되고있음
    // new Observable(()=>{ })// 아폴로 클라이언트가 사용하는 zen-observarble을 아폴로에서 import 하여 사용
    // prettier-ignore
    from(["1번 useQuery", "2번 useQuery", "3번 useQuery"]) // fromPromise와 같은말
    .flatMap((el:string) =>from([`${el} 결과에 qqq적용`,`${el} 결과에 zzz적용`]))
    .subscribe((el)=>console.log(el)) // 최종 실행해줘
  };

  return <button onClick={onClickButton}>클릭</button>;
}

그렇다면 fromPromise는? ==> Promise를 옵져버블로 바꿔줘 라는 의미이다. onError리턴타입이 옵져버블이기에 fromPromise를 적용한것.
그리고 flatMap을 사용해 받아온 결과를 최종적으로 적용시킨 것이다.