Week 12

TanStack Query

Optimistic updates

Authentication

Data persistance

Security Fundamentals

Practice

Assignment

• Teachers

Frontend Track

Content

Let’s get practical

Exercise 1: Replace a useEffect Fetch with useQuery

Difficulty: Easy Concepts: useQuery, query keys, isPending/isError, automatic caching

Take the component below written with useEffect and useState and refactor it to use useQuery from TanStack Query.

Starting point - paste this into a new component file:

'use client'

import { useEffect, useState } from 'react'

type Post = { id: number; title: string; body: string }

export default function PostList() {
  const [posts, setPosts] = useState<Post[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    fetch('<https://jsonplaceholder.typicode.com/posts?_limit=10>')
      .then(res => {
        if (!res.ok) throw new Error(`HTTP ${res.status}`)
        return res.json()
      })
      .then(data => {
        setPosts(data)
        setLoading(false)
      })
      .catch(err => {
        setError(err.message)
        setLoading(false)
      })
  }, [])

  if (loading) return <p>Loading posts...</p>
  if (error) return <p>Error: {error}</p>

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </li>
      ))}
    </ul>
  )
}

Requirements:

• Install TanStack Query: npm install @tanstack/react-query
• Wrap your app in a QueryClientProvider inside a Client Component (e.g. app/providers.tsx) and add it to your root layout
• Replace the entire useEffect + three useState calls with a single useQuery call
• The query key must be ['posts']
• The posts, loading, and error state variables and their setters should no longer exist
• Loading state must use isPending, error state must use isError
• Render a second page that also reads ['posts'] and verify in the Network tab that navigating between pages does not refetch when the data is still fresh

Hints:

• The provider's QueryClient must be created with useState(() => new QueryClient()) - not at module scope - so each user gets their own cache
• useQuery returns data as undefined while isPending is true, so TypeScript will narrow correctly if you return early on isPending
• Background refetching on focus is enabled by default - if you want to silence it during development, pass staleTime: 1000 * 60 to your query
• You don't need a try/catch in queryFn - throwing inside it is how you signal an error to TanStack Query

Exercise 2: Write Data with useMutation

Difficulty: Easy Concepts: useMutation, mutationFn, useQueryClient, invalidateQueries

Add a form that creates a new post and invalidates the cached list so the UI updates without a manual refetch.

Requirements:

• Build a CreatePostForm component with a single <input name="title"> and a submit button
• Use useMutation with a mutationFn that POSTs to https://jsonplaceholder.typicode.com/posts with { title, body: 'placeholder', userId: 1 }
• After a successful mutation, call queryClient.invalidateQueries({ queryKey: ['posts'] }) so the post list from Exercise 1 refetches
• The submit button must be disabled while mutation.isPending is true and show 'Adding...' text during that time
• If the mutation fails, render an error message below the form
• Reset the form input after a successful submit

Hints:

• Get the query client with const queryClient = useQueryClient() - you'll use it for the invalidation
• mutation.mutate(variables) triggers the mutation. Use onSuccess on the useMutation config to handle invalidation, not on the .mutate() call site
• JSONPlaceholder echoes back the created post with a fake id but doesn't actually persist it, so your list won't grow on refetch. The invalidation still fires, and your Network tab will show the GET /posts request - that's what you're verifying
• To exercise the error path, temporarily change the URL to a 404 path and confirm the error message renders without blowing up the page

Exercise 3: Optimistic Toggle with Rollback

Difficulty: Medium Concepts: useMutation lifecycle (onMutate, onError, onSettled), cache snapshot, cancelQueries

Build a list of todos with a checkbox on each one. Toggling the checkbox should feel instant, and the UI must roll back cleanly if the server rejects the change.

Starting point - use this query as the data source:

type Todo = { id: number; userId: number; title: string; completed: boolean }

const { data: todos } = useQuery<Todo[]>({
  queryKey: ['todos'],
  queryFn: () =>
    fetch('<https://jsonplaceholder.typicode.com/todos?_limit=8>').then(r => r.json()),
})

Requirements:

• Render each todo with a checkbox bound to todo.completed and a label showing todo.title
• Create a toggleMutation that PATCHes https://jsonplaceholder.typicode.com/todos/${id} with the new completed value
• In onMutate:
  • Call queryClient.cancelQueries({ queryKey: ['todos'] }) so an in-flight refetch can't overwrite the optimistic update
  • Snapshot the current todos with queryClient.getQueryData<Todo[]>(['todos'])
  • Optimistically update the cache with queryClient.setQueryData
  • Return { previousTodos } as the context object
• In onError, restore previousTodos from the context object back into the cache
• In onSettled, invalidate ['todos'] regardless of outcome
• To verify rollback, temporarily replace the mutationFn with one that waits 800ms and then throws. The checkbox should tick on, then tick back off when the rollback fires

Hints:

• The context object you return from onMutate is automatically passed as the third argument to onError - that's the only way to recover the previous state, so don't forget to return it
• Without cancelQueries, a refetch that started before the click can land after your optimistic update and silently revert the UI for a frame. It's a subtle bug - include the call from the start
• Type the mutation explicitly to get autocomplete on the context: useMutation<Todo, Error, Todo, { previousTodos: Todo[] | undefined }>
• JSONPlaceholder will respond 200 with a fake echo - it won't actually persist completed. Since onSettled invalidates, the refetch will revert to the original server state. That's fine for the exercise: you're practicing the optimistic + rollback pattern, not building a real backend

Exercise 4: Storage and Protected Routes

Difficulty: Easy Concepts: localStorage, JWT structure (mock), protected routes, useEffect for client-only APIs

Build a hardcoded login flow that stores a fake token in localStorage and gates a dashboard page behind it.

Requirements:

• Create a /login page with two fields (email, password) and a submit button
• On submit, check that the email is [email protected] and the password is password123
  • If correct, store the string 'fake.jwt.token' under the key 'token' in localStorage and navigate to /dashboard
  • If incorrect, render an error message and do not navigate
• Create a /dashboard page that:
  • Reads 'token' from localStorage on mount
  • If no token is found, redirects to /login
  • If a token is found, renders the dashboard content
• Add a logout button on /dashboard that removes the token and redirects to /login
• Extract the auth check into a reusable useRequireAuth hook in hooks/useRequireAuth.ts and use it from /dashboard

Hints:

• localStorage only exists in the browser. Reading it at the top of a Client Component during the initial render will throw localStorage is not defined during server rendering - always read inside useEffect or guard with typeof window !== 'undefined'
• Use useRouter().replace() (not .push()) for the redirect so the protected page isn't in the browser history
• Render null (or a small loading placeholder) until your auth hook has finished checking - otherwise the protected content flashes for a frame before the redirect
• This is mock auth for practice. Real auth would never live entirely on the client - the server has to validate every request regardless of what localStorage says

The HackYourFuture curriculum is licensed under CC BY-NC-SA 4.0 *https://hackyourfuture.net/*

Built with ❤️ by the HackYourFuture community · Thank you, contributors

Found a mistake or have a suggestion? Let us know in the feedback form.