React Query (TanStack Query) for server state management

<p>Manually managing server state with useState/useEffect is complex: tracking loading/error/stale states, deduplicating requests, invalidating cache after mutations. Looking for a dedicated server state library.</p>

<p>Use TanStack Query v5 for declarative server state management:</p> <div class="highlight"><pre><span></span><code><span class="c1">// main.tsx — wrap app with QueryClientProvider</span> <span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">QueryClient</span><span class="p">,</span><span class="w"> </span><span class="nx">QueryClientProvider</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">'@tanstack/react-query'</span><span class="p">;</span> <span class="kd">const</span><span class="w"> </span><span class="nx">queryClient</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">QueryClient</span><span class="p">({</span> <span class="w"> </span><span class="nx">defaultOptions</span><span class="o">:</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">queries</span><span class="o">:</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">staleTime</span><span class="o">:</span><span class="w"> </span><span class="kt">60</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="mf">1000</span><span class="p">,</span><span class="w"> </span><span class="c1">// 1 minute before refetch</span> <span class="w"> </span><span class="nx">retry</span><span class="o">:</span><span class="w"> </span><span class="kt">2</span><span class="p">,</span> <span class="w"> </span><span class="nx">refetchOnWindowFocus</span><span class="o">:</span><span class="w"> </span><span class="kt">false</span><span class="p">,</span> <span class="w"> </span><span class="p">},</span> <span class="w"> </span><span class="p">},</span> <span class="p">});</span> <span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="nx">App</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="o">&lt;</span><span class="nx">QueryClientProvider</span><span class="w"> </span><span class="nx">client</span><span class="o">=</span><span class="p">{</span><span class="nx">queryClient</span><span class="p">}</span><span class="o">&gt;</span> <span class="w"> </span><span class="o">&lt;</span><span class="nx">Router</span><span class="w"> </span><span class="o">/&gt;</span> <span class="w"> </span><span class="o">&lt;</span><span class="err">/QueryClientProvider&gt;</span> <span class="w"> </span><span class="p">);</span> <span class="p">}</span> <span class="c1">// hooks/useTraces.ts</span> <span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">useQuery</span><span class="p">,</span><span class="w"> </span><span class="nx">useMutation</span><span class="p">,</span><span class="w"> </span><span class="nx">useQueryClient</span><span class="p">,</span><span class="w"> </span><span class="nx">useInfiniteQuery</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">'@tanstack/react-query'</span><span class="p">;</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">id</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="k">return</span><span class="w"> </span><span class="nx">useQuery</span><span class="p">({</span> <span class="w"> </span><span class="nx">queryKey</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="s1">'traces'</span><span class="p">,</span><span class="w"> </span><span class="nx">id</span><span class="p">],</span> <span class="w"> </span><span class="nx">queryFn</span><span class="o">:</span><span class="w"> </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">getTrace</span><span class="p">(</span><span class="nx">id</span><span class="p">),</span> <span class="w"> </span><span class="nx">enabled</span><span class="o">:</span><span class="w"> </span><span class="o">!!</span><span class="nx">id</span><span class="p">,</span><span class="w"> </span><span class="c1">// Don't run if id is empty</span> <span class="w"> </span><span class="p">});</span> <span class="p">}</span> <span class="k">export</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="nx">useSearchTraces</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="k">return</span><span class="w"> </span><span class="nx">useQuery</span><span class="p">({</span> <span class="w"> </span><span class="nx">queryKey</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="s1">'traces'</span><span class="p">,</span><span class="w"> </span><span class="s1">'search'</span><span class="p">,</span><span class="w"> </span><span class="nx">query</span><span class="p">],</span> <span class="w"> </span><span class="nx">queryFn</span><span class="o">:</span><span class="w"> </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">searchTraces</span><span class="p">(</span><span class="nx">query</span><span class="p">),</span> <span class="w"> </span><span class="nx">enabled</span><span class="o">:</span><span class="w"> </span><span class="kt">query.length</span><span class="w"> </span><span class="o">&gt;=</span><span class="w"> </span><span class="mf">2</span><span class="p">,</span> <span class="w"> </span><span class="nx">placeholderData</span><span class="o">:</span><span class="w"> </span><span class="kt">previousData</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">previousData</span><span class="p">,</span><span class="w"> </span><span class="c1">// Keep previous results while loading</span> <span class="w"> </span><span class="p">});</span> <span class="p">}</span> <span class="k">export</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="nx">useCreateTrace</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">queryClient</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useQueryClient</span><span class="p">();</span> <span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">useMutation</span><span class="p">({</span> <span class="w"> </span><span class="nx">mutationFn</span><span class="o">:</span><span class="w"> </span><span class="p">(</span><span class="nx">data</span><span class="o">:</span><span class="w"> </span><span class="kt">CreateTraceRequest</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">createTrace</span><span class="p">(</span><span class="nx">data</span><span class="p">),</span> <span class="w"> </span><span class="nx">onSuccess</span><span class="o">:</span><span class="w"> </span><span class="p">(</span><span class="nx">newTrace</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">// Invalidate and refetch the traces list</span> <span class="w"> </span><span class="nx">queryClient</span><span class="p">.</span><span class="nx">invalidateQueries</span><span class="p">({</span><span class="w"> </span><span class="nx">queryKey</span><span class="o">:</span><span class="w"> </span><span class="p">[</span><span class="s1">'traces'</span><span class="p">]</span><span class="w"> </span><span class="p">});</span> <span class="w"> </span><span class="c1">// Optimistically add to cache</span> <span class="w"> </span><span class="nx">queryClient</span><span class="p">.</span><span class="nx">setQueryData</span><span class="p">([</span><span class="s1">'traces'</span><span class="p">,</span><span class="w"> </span><span class="nx">newTrace</span><span class="p">.</span><span class="nx">id</span><span class="p">],</span><span class="w"> </span><span class="nx">newTrace</span><span class="p">);</span> <span class="w"> </span><span class="p">},</span> <span class="w"> </span><span class="p">});</span> <span class="p">}</span> <span class="c1">// Component usage</span> <span class="kd">function</span><span class="w"> </span><span class="nx">TraceDetail</span><span class="p">({</span><span class="w"> </span><span class="nx">id</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">id</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="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">data</span><span class="o">:</span><span class="w"> </span><span class="kt">trace</span><span class="p">,</span><span class="w"> </span><span class="nx">isLoading</span><span class="p">,</span><span class="w"> </span><span class="nx">error</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useTrace</span><span class="p">(</span><span class="nx">id</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">mutate</span><span class="o">:</span><span class="w"> </span><span class="kt">createTrace</span><span class="p">,</span><span class="w"> </span><span class="nx">isPending</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useCreateTrace</span><span class="p">();</span> <span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">isLoading</span><span class="p">)</span><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="o">&lt;</span><span class="nx">Skeleton</span><span class="w"> </span><span class="o">/&gt;</span><span class="p">;</span> <span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">error</span><span class="p">)</span><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="o">&lt;</span><span class="nx">ErrorBoundary</span><span class="w"> </span><span class="nx">error</span><span class="o">=</span><span class="p">{</span><span class="nx">error</span><span class="p">}</span><span class="w"> </span><span class="o">/&gt;</span><span class="p">;</span> <span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="o">&lt;</span><span class="nx">TraceCard</span><span class="w"> </span><span class="nx">trace</span><span class="o">=</span><span class="p">{</span><span class="nx">trace</span><span class="p">}</span><span class="w"> </span><span class="o">/&gt;</span><span class="p">;</span> <span class="p">}</span> </code></pre></div> <p>Query keys are the cache key — same key = deduplicated request. <code>staleTime</code> controls when data is considered stale. <code>invalidateQueries</code> triggers a background refetch. <code>placeholderData</code> prevents loading flash between searches.</p>