Learning TanStack Query - Pre-Requisites Skill & Setup Environment

#Introduction

Welcome to the Learning TanStack Query series! This series will take you to mastery of TanStack Query — the most popular server state management library for React — which automates data fetching, caching, deduplication, and synchronization of data from the server. There are 23 episodes in total, arranged into six phases, from core concepts all the way to production readiness.

But before you write your first hook, there are several core skills and software you must have. Why do prerequisites matter? Because TanStack Query works on top of React and JavaScript async patterns. If you don't yet understand Promises or have never seen useEffect plus fetch, most of the concepts will feel abstract.

Episode 0 is your roadmap: make sure you have the core skills, set up a React project with Vite, install @tanstack/react-query, and perform the first verification. Once this episode is done, the entire series can be followed comfortably.

#Core Skills You Need to Master

#Modern JavaScript and Async

TanStack Query is built on top of Promises and async/await. Make sure you are comfortable with destructuring, arrow functions, and error handling with try/catch. Here is a pattern that will appear often:

Async pattern you must master

async function getUsers() {
  const res = await fetch("https://jsonplaceholder.typicode.com/users")
  if (!res.ok) {
    throw new Error("Gagal mengambil data")
  }
  return res.json()
}

Notice that the function above returns a Promise. queryFn in TanStack Query is always an async function like this — we will break down the details in episode 4.

#React Hooks

You must understand useState and useEffect, including the manual data fetching pattern that is the root problem this library wants to solve:

Manual data fetching pattern

function Users() {
  const [data, setData] = useState([])
  const [loading, setLoading] = useState(true)
 
  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((json) => {
        setData(json)
        setLoading(false)
      })
  }, [])
 
  if (loading) return <p>Memuat...</p>
  return <ul>{data.map((u) => <li key={u.id}>{u.name}</li>)}</ul>
}

This pattern has problems: loading and error state are managed manually, there is no cache, and every component that needs the same data will fetch it again. TanStack Query solves all of those problems.

#REST API Concepts

Understand endpoints, HTTP methods, status codes such as 200, 404, and 500, and how to handle errors. In this series we use JSONPlaceholder as a mock API:

curl -s https://jsonplaceholder.typicode.com/todos/1

The output should show a JSON todo. curl -s https://jsonplaceholder.typicode.com/todos/1 returns a todo object — make sure your internet connection is stable, because the entire series uses this endpoint.

#Software You Need to Prepare

#Node.js and Package Manager

TanStack Query needs Node.js version 18 or newer. Check the version in your terminal:

node --version
npm --version

If both print a version, continue to the next step. In this series we use npm, but you are free to use bun because the commands are almost identical.

#Creating a Vite Project

Create a new React project with Vite and the TypeScript template:

npm create vite@latest belajar-query -- --template react-ts
cd belajar-query
npm install

The npm create vite@latest belajar-query -- --template react-ts command generates a React project with TypeScript. The TS template is chosen because this series uses TypeScript.

#Installing TanStack Query

With the project ready, install the core library and the devtools:

npm install @tanstack/react-query @tanstack/react-query-devtools

Then verify the installed version:

npm ls @tanstack/react-query

Make sure the version is 5.101.x or newer — this is the latest stable release at the time of writing. npm ls @tanstack/react-query shows the actual version along with its dependencies.

#Verify the Environment

Before moving on to episode 1, run the dev server to make sure everything works:

npm run dev

Open http://localhost:5173 in your browser. As long as there are no errors in the terminal, your environment is ready. Episode 3 will break down the meaning of QueryClient and QueryClientProvider in detail — for now it is enough to confirm that your app runs without errors.

One habit you will use throughout the series: get used to opening the official documentation at https://tanstack.com/query/latest every time you come across a new term. This documentation is the primary reference, and I will point you to it in many episodes.

#Closing

In episode 0 you laid the groundwork for the entire series: mastering JavaScript async patterns, understanding the problems of manual data fetching, setting up a React project with Vite, and installing TanStack Query version 5.101.x.

Key takeaways:

• queryFn is always an async function that returns a Promise.
• The manual useEffect plus fetch pattern is the root problem this library wants to solve.
• TanStack Query needs Node.js 18+ and a running React project.
• Install @tanstack/react-query and @tanstack/react-query-devtools via npm.
• First verification: the Vite dev server runs without errors.
• Official documentation is available at tanstack.com/query/latest.

In the next episode, episode 1, we will discuss the history, background, and why you need TanStack Query — from the era of manual data fetching, the birth of react-query by Tanner Linsley in 2019, the rebrand to TanStack Query, all the way to the server state problems it tries to solve. Make sure your environment is ready, because your Learning TanStack Query journey has only just begun!