PHASE 3 · LESSON 03

React Query —
የ Server State ቀላሉ መንገድ! ⚡

Server ላይ data ማምጣት፣ cache ማድረግ እና በ background ራሱን ማደስ (refresh) — ይህ ሁሉ በአንድ hook ብቻ ይሰራል!
useState + useEffect እና ከ loading እና error ጋር የምንታገለው አሰልቺ ኮድ (boilerplate) አሁን ያከትማል! 🚀
TanStack Query — the #1 server state management library for React.

የተዘጋጀው በ @AppMinds_ET

01React Query ምንድን ነው?

React Query (ወይም TanStack Query) — Server ላይ dataን ለማምጣት፣ cache ለማድረግ እንዲሁም background ማዘመኛ (sync) እንዲኖረው የሚያደርግ ታዋቂ React library ነው። ለእነዚህ ስራዎች የምንፅፋቸውን በመቶዎች የሚቆጠሩ የኮድ መስመሮች አያስፈልጉንም!
Eliminates boilerplate for server data — fetching, caching, synchronizing in one library.

📦

npm install @tanstack/react-query
Wrap your app with QueryClientProvider → use useQuery anywhere!

❌ ያለ React Query ሲሆን — ረዥምና አሰልቺ ኮድ

const [data, setData]       = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError]     = useState(null);

useEffect(() => {
  setLoading(true);
  fetch('/api/users')
    .then(r => r.json())
    .then(d => { setData(d); setLoading(false) })
    .catch(e => { setError(e); setLoading(false) });
}, []);
// ❌ cache ማድረግ የለም, failed ሲያደርግ retry አያደርግም...

✅ በ React Query ሲሆን — አጭር እና ኃይለኛ ኮድ!

import { useQuery } from '@tanstack/react-query';

const { data, isLoading, isError } = useQuery({
  queryKey: ['users'],
  queryFn:  () => axios.get('/api/users')
                      .then(r => r.data),
});
// ✅ Cache ማድረግ፣ Retry፣ እና Refetch ማድረግ — ሁሉም auto ነው!

02⚡ Query Lifecycle — በአንድ ዙር የት ያልፋል? (Interactive)

Query State ማሳያ

STATEዎቹን ነክታችሁ (ጠቅ በማድረግ) — ከታች ያለውን ማብራሪያ እዩ ↓

💤

IDLE

→

⏳

→

✅

SUCCESS

⇄

🕐

STALE

→

🔄

REFETCH

→

❌

ERROR

03useQuery እና useMutation — የኮድ መዋቅራቸው

useQuery.tsx

const { data, isLoading, isError, error, refetch } = useQuery({
  queryKey: ['users'],           // ለ Cache የምንጠቀምበት መለያ ነው (Unique መሆን አለበት)
  queryFn:  () => axios.get('/api/users').then(r => r.data),
  staleTime: 5 * 60 * 1000,      // መረጃው ቢያንስ ለ 5 ደቂቃ Fresh (ትኩስ) እንዲሆን
  retry: 3,                        // Request አልሳካ ሲል በራሱ 3 ጊዜ ደጋግሞ እንዲሞክር
  refetchOnWindowFocus: true,     // Window focus ሲያገኝ በአዲስ ዳታ ራሱን refresh ያደርጋል!
});

if (isLoading) return '⏳ በማምጣት ላይ...';
if (isError)   return `❌ የተገኘ ስህተት: ${error.message}`;
return data.map(u => <div key={u.id}>{u.name}</div>);

useMutation.tsx

// Data ወደ Server ማስገባት ስንፈልግ Mutation (ሚዩቴሽን) እንጠቀማለን!
const qc = useQueryClient();
const mutation = useMutation({
  mutationFn: (data) => axios.post('/api/users', data),
  onSuccess: () => qc.invalidateQueries({ queryKey: ['users'] }),
  // ✅ ስራውን ሲጨርስ 'onSuccess' ይጠራል → አዲሱ ስም በዝርዝሩ ላይ ቀጥታ ይታያል ማለት ነው!
});

<button onClick={() => mutation.mutate({ name: 'Samuel' })}
        disabled={mutation.isPending}>
  {mutation.isPending ? '⏳ በመቆጠብ (Saving) ላይ...' : '💾 መዝግብ (Save)'}
</button>

04🎮 ቀጥታ መሞከሪያ — (Live Demo)!

React Query ማሳያ መቆጣጠሪያ

በዝግጅት ላይ ✅

⚡ Query አመንጪ (Simulator)

📦 መረጃውን ማያ

⚙️ ሴቲንጎች (Config Options)

ተጨባጭ HTTP Requests እና useQuery እዚህ ሙሉ በሙሉ ይሰራሉ!
በመጠባበቅ፣ በስኬት (Success) እና በስህተቶች ያሉትን Stateዎች በሙሉ በዚህ ክፍል መመልከት ትችላላችሁ!
Simulates exact useQuery behavior with a real public API.

ዝግጁ ነው (IDLE)

▶ "Fetch Users" የሚለውን ከተጫናችሁ የመጣው ዳታ ከዚህ ጋር አብሮ ይታያል...

የ QUERY ሁኔታን በጥልቀት እዩት።

የCache ውስጣዊ ስርዓቶች በህይወት ቆይታቸው ምን ያህል ትኩስ (Stale) እንደሆኑ ማየት ትችላላችሁ።
Watch cache entries go FRESH → STALE → garbage collected.

+ "+ Add Query" ስትሉ እዚህ ጋር ይታያል!

የuseQuery ውቅረ-ካርታ ሴቲንጎች — ለውጥ (Option) ስታደርጉ በኮዳችሁ ላይ የሚያመጣውን ለውጥ ይመሰክራል።
Explore key options interactively.

05አጠቃላይ Setup — "QueryClientProvider" ን የመጠቀሚያ ኮድ

main.tsx

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

// ይህ Query Client ነው - Default ውሳኔዎችን እንደ Stale Time ይወስናል...  
const queryClient = new QueryClient({
  defaultOptions: { queries: { staleTime: 5 * 60 * 1000, retry: 3 } }
});

createRoot(document.getElementById('root')).render(
  <QueryClientProvider client={queryClient}>
    <App />
    {/* Appን ለመቆጣጠር እና ለመከታተል የሚረዳ መሳሪያ  */}
    <ReactQueryDevtools initialIsOpen={false} />
  </QueryClientProvider>
);

06📌 ጠቅለል ያለ ማስታወሻ

⚡ useQuery — የመረጃ አምጣት በተመለከተ

አስፈላጊ የሆኑትን queryKey እና queryFn ብቻ በመጥራት ይይዛቸዋል! (Loading / Error / Data — እነዚህን ራሱ በባህሪው ያስተዳድራል)! No more useState + useEffect + loading + error boilerplate.

💾 useMutation — መረጃ መላክ እና መቀየር (Write State / Action!)

POST / PUT / DELETE ተግባራትን በአግባቡ በ useMutation መስራት ትችላላችሁ - ሲያልቅም invalidateQueries ን በመጠቀም አብረው ያሉትን Queryዎች ማደስ ይቻላል! Auto-refetch related queries after data changes.

📦 የCache Memory ማረጋገጫ

staleTime = መረጃው ምን ያህል ጊዜ ትኩስ (fresh) ሆኖ እንደሚቆይ የሚወስንበት ሰዓት ነው። cacheTime = መረጃው በካሽ ውስጥ ለምን ያህል ጊዜ ተቀምጦ እንደሚቆይ የሚወስን ነው። staleTime=0 always refetch · staleTime=Infinity never refetch.

🔑 ልዩ የQuery መክፈቻ (Query Key!)

ለምሳሌ ['users', userId] ካላችሁ እንደ Parameter ሆኖ ያገለግላል — ለአድራሻው Unique መለያ ኮድ ነው! queryKey is the cache address — must be unique per data source.

🛠️ Developer Tools

በ ReactQueryDevtools አማካኝነት በ Development ጊዜ የካሽን ሁኔታ በሙሉ በቀላሉ መከታተል እና ማሰስ ትችላላችሁ! npm install @tanstack/react-query-devtools

07🎯 ለመፈተኛ የዕውቀት Quiz !!

❓ በReact Query ውስጥ staleTime የሚባለው ምንን የሚወስን ባህሪ ነው?

ይህንን ጥያቄ መመለስ ትችላላችሁ!

What does staleTime do in TanStack Query?

Aካሹ ላይ ያሉትን መረጃዎች ሙሉ በሙሉ ያጠፋል — Deletes cache completely

Bየኔትወርክ ስህተት ሲያጋጥም የሚደገሙ የሙከራ ቁጥሮችን ይወስናል...

Cመረጃው እንደ ትኩስ ("fresh") ተቆጥሮ ለምን ያህል ጊዜ እንደሚቆይ እና መቼ ወደ "stale" እንደሚቀየር የሚወስንበት ሰዓት ነው። ✅

DለRequest የሚሰጠውን የጊዜ ገደብ "Request timeout" የሚወስንበት ነው...

React Query —የ Server State ቀላሉ መንገድ! ⚡

React Query —
የ Server State ቀላሉ መንገድ! ⚡