byteNative
Frontend

TanStack Query

An elegant way to handle server state, caching and synchronisation.

What is TanStack Query?

TanStack Query takes on the thankless work around server data in the frontend, namely fetching, caching and keeping it up to date. A lot of that is otherwise written by hand again and again, error-prone and tedious, from loading and error states to refetching stale data. TanStack Query bundles all of it behind a clear hook and keeps the cache fresh automatically. So the data in your interface stays reliably current while you focus on what actually matters.

More in the documentation

How we use it

As soon as an interface pulls data from an API, we rely on TanStack Query instead of rewriting loading and error logic every time. The cache means your users see no spinners where data is already present. And on writes, automatic invalidation keeps the view current with no manual effort.

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

const { data, isLoading } = useQuery({
    queryKey: ["users"],
    queryFn: () => fetch("/api/users").then((r) => r.json()),
});
fetching data with cache and states

Good to know

Clean, structured query keys are the key to targeted invalidation. We build them as tuples, by resource and parameters for instance, so an update refetches only the data actually affected.

00Frontend

More tools we work with in the same area.

Which technology fits you?

You don't have to decide that, it's our job. Tell us about your plans.