React Query — Animate | AI Wisdom

← Back to topic
🎞 ANIMATE · Mode 3 of 5 · +100 XP— React Query
📋Query
⚙️Cache
🔄Mutate
✅Invalidate
🎯 Next: Test →
Step 1 / 4
Speed
Querying
useQuery — declarative data fetching with loading/error states💡 Analogy
Like subscribing to a newspaper — you have the latest issue immediately; a fresh one is delivered in the background.
useQuery fetches data and provides isLoading, error, and data states. It caches by queryKey and shares data across components with the same key.
Console Output
> useQuery ["user", 42]
> Cache miss → fetching
> data: {id:42, name:"Alice"}
> Cached for 5 minutes
●react-query.tsx
QueryingL3–14
1import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
2 
3// Basic query — fetch user with caching and background sync
4function UserCard({ userId }: { userId: number }) {
5  const { data: user, isLoading, error } = useQuery({
6    queryKey: ['user', userId],
7    queryFn: () => fetch(`/api/users/${userId}`).then(r => r.json()),
8    staleTime: 5 * 60 * 1000,   // data fresh for 5 minutes
9  });
10 
11  if (isLoading) return <Skeleton />;
12  if (error) return <ErrorBanner error={error as Error} />;
13  return <div>{user.name}</div>;
14}
15 
16// Mutation — create post with optimistic update
17function CreatePostForm() {
18  const queryClient = useQueryClient();
19 
20  const mutation = useMutation({
21    mutationFn: (post: { title: string }) =>
22      fetch('/api/posts', { method: 'POST', body: JSON.stringify(post) }).then(r => r.json()),
23 
24    onMutate: async (newPost) => {
25      await queryClient.cancelQueries({ queryKey: ['posts'] });
26      const previous = queryClient.getQueryData(['posts']);
27      queryClient.setQueryData(['posts'], (old: any[]) => [...old, { ...newPost, id: 'temp' }]);
28      return { previous };   // snapshot for rollback
29    },
30 
31    onError: (err, vars, ctx) => {
32      queryClient.setQueryData(['posts'], ctx?.previous);   // rollback
33    },
34 
35    onSettled: () => {
36      queryClient.invalidateQueries({ queryKey: ['posts'] });   // refetch
37    },
38  });
39 
40  return (
41    <button onClick={() => mutation.mutate({ title: 'New Post' })}
42            disabled={mutation.isPending}>
43      {mutation.isPending ? 'Saving...' : 'Create Post'}
44    </button>
45  );
46}
47 
48declare const Skeleton: any;
49declare const ErrorBanner: any;
49 lines
Timeline — 4 Steps
Querying
useQuery — declarative data fetching with loading/error states💡 Analogy
Like subscribing to a newspaper — you have the latest issue immediately; a fresh one is delivered in the background.
useQuery fetches data and provides isLoading, error, and data states. It caches by queryKey and shares data across components with the same key.
Console Output
> useQuery ["user", 42]
> Cache miss → fetching
> data: {id:42, name:"Alice"}
> Cached for 5 minutes

Was this page helpful?

Discussion

useQuery — declarative data fetching with loading/error states

💡 Analogy

Like subscribing to a newspaper — you have the latest issue immediately; a fresh one is delivered in the background.

useQuery fetches data and provides isLoading, error, and data states. It caches by queryKey and shares data across components with the same key.

Console Output

> useQuery ["user", 42]
> Cache miss → fetching
> data: {id:42, name:"Alice"}
> Cached for 5 minutes

useQuery — declarative data fetching with loading/error states

💡 Analogy

Like subscribing to a newspaper — you have the latest issue immediately; a fresh one is delivered in the background.

useQuery fetches data and provides isLoading, error, and data states. It caches by queryKey and shares data across components with the same key.

Console Output

> useQuery ["user", 42]
> Cache miss → fetching
> data: {id:42, name:"Alice"}
> Cached for 5 minutes