✍Optimistic UI
속이기
즉, 거의 성공 확률이 99%인 Query, Mutation와 같은 요청에 마치 완료된 것 처럼 미리 보여줌성공확률이 높거나, 큰 영향이 없는 요청에 적용
ex) 좋아요
코드 예시(좋아요)
const onClickLike = () => {
likeBoard({
variables: { boardId: "62fb9289bc5ba3002a7106b5" },
// 가짜로 값을 받음(거짓말 하는 애 )
optimisticResponse: {
likeBoard: (data?.fetchBoard.likeCount || 0) + 1,
},
update(cache, { data }) { // apollo 캐시를 직접 수정
cache.writeQuery({
query: FETCH_BOARD,
variables: { boardId: "62fb9289bc5ba3002a7106b5" },
data: {
fetchBoard: {
// 규칙이 있음 _id를 적어야하고 __typeName은 필수로
_id: "62fb9289bc5ba3002a7106b5",
__typename: "Board",
likeCount: data.likeBoard,
},
},
});
},
});
};✍메타태그, OpenGraph(OG)
오픈그래프는 어떤 HTML 문서를 쉽게 표시하기 위해서
메타정보에 해당하는 제목, 설명, 타입, URL 등 다양한 요소들에 대해서
사람들이 통일해서 쓸 수 있도록 정의해놓은 프로토콜
예시코드
<div>
<Head>
<meta property="og:title" content={data?.fetchUseditem.name} />
<meta property="og:description" content={data?.fetchUseditem.remarks} />
<meta property="og:image" content={data?.fetchUseditem.images[0]} />
<h1>사이트 미리보기 제공 연습</h1>
</Head>
</div>
지식을 쌓고 있습니다.