Updates

pozafly · Jul 7, 2023 · 3eff9a3 · 3eff9a3
1 parent b17c65b
commit 3eff9a3
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 15 deletions.
diff --git a/page-data/react-query/mutation-after-data-update/page-data.json b/page-data/react-query/mutation-after-data-update/page-data.json
diff --git a/react-query/mutation-after-data-update/index.html b/react-query/mutation-after-data-update/index.html
@@ -172,10 +172,11 @@ <h3 id="12-재조회-invalidateQueries" style="position:relative">1.2 재조회
 <p>데이터 흐름은 아래와 같다.</p>
 <ul>
 <li><code class="language-text">클라이언트 -&gt; 서버</code> : 데이터 변경 요청</li>
-<li><code class="language-text">서버</code> : DB 인스턴스에 데이터 변경</li>
-<li><code class="language-text">서버 -&gt; 클라이언트</code> : 성공 message 반환</li>
+<li><code class="language-text">서버 -&gt; DB</code> : DB에 데이터 변경</li>
+<li><code class="language-text">서버 -&gt; 클라이언트</code> : <strong>성공 message</strong> 반환</li>
 <li><code class="language-text">클라이언트 -&gt; 서버</code> : 변경된 데이터 조회 요청</li>
-<li><code class="language-text">서버 -&gt; 클라이언트</code> : 변경된 데이터 반환</li>
+<li><code class="language-text">서버 -&gt; DB</code> : DB에 데이터 조회</li>
+<li><code class="language-text">서버 -&gt; 클라이언트</code> : <strong>변경된 데이터</strong> 반환</li>
 </ul>
 <p><span class="gatsby-resp-image-wrapper" style="position:relative;display:block;margin-left:auto;margin-right:auto;max-width:1150px">
       <a class="gatsby-resp-image-link" href="/static/9ceee71599b575d6aa9812980bf61059/26e62/invalidate-queries.png" style="display:block" target="_blank" rel="noopener">
@@ -213,7 +214,7 @@ <h4 id="getQueryData--setQueryData" style="position:relative">getQueryData &amp;
 <p>📌 주의점은 반드시 불변성을 지켜서 넣어주어야 한다. 불변성을 지켜주지 않으면 화면이 변경되지 않는다.</p>
 <p>데이터 흐름은 아래와 같다.</p>
 <ul>
-<li><code class="language-text">
+<li><code class="language-text">클라이언트 -&gt; 서버</code> : 데이터 변경 요청</li>
 <li><code class="language-text">서버 -&gt; 클라이언트</code> : 성공 message 반환</li>
 <li>클라이언트 데이터 스스로 가공 후 변경</li>
 </ul>
@@ -224,7 +225,7 @@ <h4 id="setQueryData--Updater" style="position:relative">setQueryData &amp; Upda
 <span class="gatsby-highlight-code-line">    <span class="token punctuation">(</span>oldData<span class="token punctuation">)</span><span class="token operator">:</span> DriveFile <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span></span><span class="gatsby-highlight-code-line">      <span class="token operator">...</span>oldData<span class="token punctuation">,</span></span><span class="gatsby-highlight-code-line">      files<span class="token operator">:</span> oldData<span class="token operator">?.</span>files<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>file <span class="token operator">=&gt;</span> file<span class="token punctuation">.</span>id <span class="token operator">!==</span> variables<span class="token punctuation">)</span> <span class="token keyword">as</span> File<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span><span class="gatsby-highlight-code-line">    <span class="token punctuation">}</span><span class="token punctuation">)</span></span>  <span class="token punctuation">)</span><span class="token punctuation">;</span>
 <span class="token punctuation">}</span><span class="token punctuation">,</span></code></pre></div>
 <p><code class="language-text">setQueryData</code>의 두번째 인자로 함수를 넣어줄 수 있는데, 이것이 업데이터 함수이다. 업데이터 함수는 react의 setState 함수와 사용법이 동일하다. 인자로 기존 쿼리한 데이터를 가지고 오며, 쿼리한 데이터를 기반으로 가공한 값을 불변성을 지켜 반환하면, 캐시된 데이터가 업데이트 되고 화면이 리렌더링 된다.</p>
-<p>첫번째 방법처럼, 조회 한 후 업데이트 하기보다는 업데이터 함수를 사용하는 방법이 좀 더 간편하다고   느껴진다. 데이터의 흐름은 위와 같다.</p>
+<p>첫번째 방법처럼,   조회 한 후 업데이트 하기보다는 업데이터 함수를 사용하는 방법이 좀 더 간편하다고 느껴진다. 데이터의 흐름은 동일하다.</p>
 <h3 id="22-낙관적-업데이트onMutate" style="position:relative">2.2 낙관적 업데이트(onMutate)<a href="#22-%EB%82%99%EA%B4%80%EC%A0%81-%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8onMutate" aria-label="22 낙관적 업데이트onMutate permalink" class="auto-link after"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a></h3>
 <p>낙관적 업데이트란 단어가 어색하게 느껴질 수 있지만, 낙관적이라는 말은 서버로 보낸 요청이 정상적일 것을 예상하고, 클라이언트의 데이터를 변경시켜 요청 response가 오기 전에 클라이언트의 데이터를 미리 변경시키는 작업을 말한다. 이는 useMutateion 훅에서 <code class="language-text">onSuccess</code> 대신 <code class="language-text">onMutate</code> 메서드와 <code class="language-text">onError</code> 메서드를 조합하여 구현할 수 있다.</p>
 <div class="gatsby-highlight" data-language="ts"><pre class="language-ts"><code class="language-ts"><span class="token function-variable function">onMutate</span><span class="token operator">:</span> <span class="token keyword">async</span> variables <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
@@ -243,20 +244,23 @@ <h3 id="22-낙관적-업데이트onMutate" style="position:relative">2.2 낙관
   <span class="token comment">// 에러가 발생하면, 기존 데이터 폴백</span>
   queryClient<span class="token punctuation">.</span><span class="token function">setQueryData</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token constant">DIARY_KEY</span><span class="token punctuation">,</span> <span class="token string">&#x27;docList&#x27;</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token operator">...</span>context<span class="token punctuation">.</span>oldData <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 <span class="token punctuation">}</span><span class="token punctuation">,</span></code></pre></div>
-<p>onMutate 메서드 안에는 API 요청이 성공했을 경우를 가정하고, 데이터를 가공해 화  면을 업데이트 한다. 특이한 부분은 <code class="language-text">cancelQueries</code> 를 사용한다는 점인데, cancelQueries는 API 요청 이후에 발생하는 요청을 취소하는 메서드이므로 요청이 Error가 발생했다면 refetch가 일어나지 않도록 방지하는 역할을 해준다.</p>
+<p>onMutate 메서드 안에는 API 요청이 성공했을 경우를 가정하고, 데이터를 가공해 화면을 업데이트 한다. 특이한 부분은 <code class="language-text">cancelQueries</code> 를 사용한다는 점인데, cancelQueries는 API 요청 이후에 발생하는 요청을 취소하는 메서드이므로 요청이 Error가 발생했다면 refetch가 일어나지 않도록 방지하는 역할을 해준다.</p>
 <p>onMutate 메서드의 아래 부분은 <strong>캐시 데이터를 직접 가공</strong>하는 부분과 동일하다.</p>
 <p>onError 메서드는 API 요청을 보내 성공을 가정하고 화면은 업데이트 했지만, 실패한 사례에 대한 처리 로직이 들어간다. 만약 서버에서 에러를 반환했다면 기존 데이터로 폴백한다. <code class="language-text">context</code> 에는 요청을 보냈을 당시의 데이터가 담겨있다.</p>
 <p><img src="/c05676c16b087e534d2580f23fbd2990/optimistic-updates.gif" alt="optimistic-updates"/></p>
 <p>데이터 흐름은 아래와 같다.</p>
 <ul>
 <li><code class="language-text">클라이언트 -&gt; 서버</code> : 데이터 변경 요청</li>
-<li>성공 response가 돌아오지 않아도, 클라이언트 데이터 스스로 가공 후 변경</li>
+<li>성공 response가 돌아오지 않아도, 클라이언트 데이터 스스로 가공 후 변경
+<ul>
 <li>만약 실패 시 기존 데이터로 폴백</li>
 </ul>
+</li>
+</ul>
 <hr/>
 <br/>
 <h2 id="정리" style="position:relative">정리<a href="#%EC%A0%95%EB%A6%AC" aria-label="정리 permalink" class="auto-link after"><svg viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a></h2>
-<p>React Query에서 mutation 이후 데이터를 통해 화면을 업데이트 하는 방법은 아래와 같다.</p>
+<p>React Query에서 mutation 이후 데이터를 통해 화면을 업데이트 하는 방법은 아래  와 같다.</p>
 <ul>
 <li><strong>서버에서</strong> 조회한 데이터로 클라이언트 데이터 업데이트
 <ul>