TypeScript React custom hooks for data fetching with SWR

<p>I need reusable data fetching hooks for my React application that handle loading, error, and success states, cache responses, revalidate on focus, and support optimistic updates.</p>

<p>Custom hooks with SWR for intelligent caching:</p> <div class="highlight"><pre><span></span><code><span class="c1">// npm install swr</span> <span class="k">import</span><span class="w"> </span><span class="nx">useSWR</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">mutate</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">'swr'</span><span class="p">;</span> <span class="k">import</span><span class="w"> </span><span class="nx">useSWRMutation</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">'swr/mutation'</span><span class="p">;</span> <span class="kd">const</span><span class="w"> </span><span class="nx">fetcher</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">url</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">api</span><span class="p">.</span><span class="nx">fetch</span><span class="o">&lt;</span><span class="nx">unknown</span><span class="o">&gt;</span><span class="p">(</span><span class="nx">url</span><span class="p">);</span> <span class="c1">// Basic data fetching hook:</span> <span class="k">export</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="nx">useTrace</span><span class="p">(</span><span class="nx">traceId</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="kc">undefined</span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">data</span><span class="p">,</span><span class="w"> </span><span class="nx">error</span><span class="p">,</span><span class="w"> </span><span class="nx">isLoading</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useSWR</span><span class="o">&lt;</span><span class="nx">Trace</span><span class="o">&gt;</span><span class="p">(</span> <span class="w"> </span><span class="nx">traceId</span><span class="w"> </span><span class="o">?</span><span class="w"> </span><span class="sb">`/api/v1/traces/</span><span class="si">${</span><span class="nx">traceId</span><span class="si">}</span><span class="sb">`</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="kc">null</span><span class="p">,</span> <span class="w"> </span><span class="nx">fetcher</span><span class="p">,</span> <span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">revalidateOnFocus</span><span class="o">:</span><span class="w"> </span><span class="kt">true</span><span class="p">,</span><span class="w"> </span><span class="c1">// Refresh when user returns to tab</span> <span class="w"> </span><span class="nx">refreshInterval</span><span class="o">:</span><span class="w"> </span><span class="kt">30000</span><span class="p">,</span><span class="w"> </span><span class="c1">// Poll every 30 seconds</span> <span class="w"> </span><span class="nx">onError</span><span class="o">:</span><span class="w"> </span><span class="p">(</span><span class="nx">err</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="s1">'Failed to load trace:'</span><span class="p">,</span><span class="w"> </span><span class="nx">err</span><span class="p">),</span> <span class="w"> </span><span class="p">}</span> <span class="w"> </span><span class="p">);</span> <span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">trace</span><span class="o">:</span><span class="w"> </span><span class="kt">data</span><span class="p">,</span><span class="w"> </span><span class="nx">error</span><span class="p">,</span><span class="w"> </span><span class="nx">isLoading</span><span class="w"> </span><span class="p">};</span> <span class="p">}</span> <span class="c1">// Search hook with debouncing:</span> <span class="k">export</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="nx">useSearch</span><span class="p">(</span><span class="nx">query</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">debouncedQuery</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useDebounce</span><span class="p">(</span><span class="nx">query</span><span class="p">,</span><span class="w"> </span><span class="mf">300</span><span class="p">);</span> <span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">useSWR</span><span class="o">&lt;</span><span class="nx">SearchResult</span><span class="o">&gt;</span><span class="p">(</span> <span class="w"> </span><span class="nx">debouncedQuery</span><span class="w"> </span><span class="o">?</span><span class="w"> </span><span class="sb">`/api/v1/traces/search?q=</span><span class="si">${</span><span class="nb">encodeURIComponent</span><span class="p">(</span><span class="nx">debouncedQuery</span><span class="p">)</span><span class="si">}</span><span class="sb">`</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="kc">null</span><span class="p">,</span> <span class="w"> </span><span class="nx">fetcher</span><span class="p">,</span> <span class="w"> </span><span class="p">);</span> <span class="p">}</span> <span class="c1">// Mutation with optimistic update:</span> <span class="k">export</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="nx">useVote</span><span class="p">(</span><span class="nx">traceId</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">trigger</span><span class="p">,</span><span class="w"> </span><span class="nx">isMutating</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useSWRMutation</span><span class="p">(</span> <span class="w"> </span><span class="sb">`/api/v1/traces/</span><span class="si">${</span><span class="nx">traceId</span><span class="si">}</span><span class="sb">/vote`</span><span class="p">,</span> <span class="w"> </span><span class="k">async</span><span class="w"> </span><span class="p">(</span><span class="nx">url</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">arg</span><span class="w"> </span><span class="p">}</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">arg</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="kr">type</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="p">})</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">api</span><span class="p">.</span><span class="nx">post</span><span class="p">(</span><span class="nx">url</span><span class="p">,</span><span class="w"> </span><span class="nx">arg</span><span class="p">);</span> <span class="w"> </span><span class="p">}</span> <span class="w"> </span><span class="p">);</span> <span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">vote</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">async</span><span class="w"> </span><span class="p">(</span><span class="kr">type</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="c1">// Optimistic update:</span> <span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">mutate</span><span class="p">(</span><span class="sb">`/api/v1/traces/</span><span class="si">${</span><span class="nx">traceId</span><span class="si">}</span><span class="sb">`</span><span class="p">,</span> <span class="w"> </span><span class="p">(</span><span class="nx">trace</span><span class="o">:</span><span class="w"> </span><span class="kt">Trace</span><span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="kc">undefined</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">trace</span><span class="w"> </span><span class="o">?</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="p">...</span><span class="nx">trace</span><span class="p">,</span><span class="w"> </span><span class="nx">confirmation_count</span><span class="o">:</span><span class="w"> </span><span class="kt">trace.confirmation_count</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">1</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="nx">trace</span><span class="p">,</span> <span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">revalidate</span><span class="o">:</span><span class="w"> </span><span class="kt">false</span><span class="w"> </span><span class="p">}</span> <span class="w"> </span><span class="p">);</span> <span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">trigger</span><span class="p">({</span><span class="w"> </span><span class="kr">type</span><span class="w"> </span><span class="p">});</span> <span class="w"> </span><span class="p">};</span> <span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">vote</span><span class="p">,</span><span class="w"> </span><span class="nx">isMutating</span><span class="w"> </span><span class="p">};</span> <span class="p">}</span> </code></pre></div> <p>Key points: - SWR caches by URL key -- same URL = same cache entry across components - null key disables fetching (conditional fetching) - revalidateOnFocus automatically refreshes stale data when user returns - useSWRMutation for POST/PATCH/DELETE operations - mutate() for optimistic updates -- update cache before server confirms</p>