#TanStackQuery

@cityjsconf.bsky.social

2 months ago

Join Faris Aziz, Staff Software Engineer @ Smallpdf, for a hands-on workshop on #TanStack Query in React & Next.js. Learn cache-aware data fetching, mutations, invalidation, and error handling—no prior TanStack Query experience needed.

#ReactJS #NextJS #TanStackQuery #WebDevelopment

2 0 0 0

@cityjsconf.bsky.social

3 months ago

Learn #TanStackQuery for modern React and Next.js. In three hours, you’ll set up queries, handle fetching mutations caching & error states, & see how it streamlines state management. Leave knowing when and how to use it in real projects by @farisaziz’s workshop

Register now
singapore.cityjsconf...

0 0 1 0

@cityjsconf.bsky.social

3 months ago

Learn #TanStackQuery for modern React and Next.js. In three hours, you’ll set up queries, handle fetching mutations caching & error states, & see how it streamlines state management. Leave knowing when and how to use it in real projects by @farisaziz’s workshop

Register now
singapore.cityjsconf...

0 0 1 0

Nuru

@nuruzuri.bsky.social

3 months ago

Bellacao weekend.
Just me, TypeScript, caffeine, and a full-stack React Native app to ship.
Let the build speak. ⚡

#BuildingInPublic #ReactNative #Expo #TanStackQuery #ExpressJS #PostgreSQL #DevBuilds #SoftwareEngineer #WeekendHustle #IndieMaker

4 0 0 0

Forem

@forem.com.web.brid.gy

9 months ago

🔍 Learning TanStack Query — But First, Manual Caching Lately, I’ve been diving into **TanStack Query** (formerly React Query) to learn more about its powerful data fetching and caching features. But before I start relying on tools that abstract everything for me, I wanted to **understand the problem caching solves** and **implement a basic version myself**. This post walks through: * The problem I noticed in my app * How I came up with the idea of caching * How I built a simple in-memory cache * What I learned from the process ## 🧠 The Problem That Sparked the Idea In one of my projects, I display a paginated list of users. Every time I changed the page, an API call was made—even if I had already fetched that page before. This felt inefficient. Then I thought: > **"Why not store the results of each API call in memory, and reuse them if the same request is made again within a short time?"** That's when I got the idea of building a **simple in-memory cache** : ✅ If I’ve already fetched page 2, don’t fetch it again within 5 minutes. ❌ Otherwise, fetch it from the API and cache it. This idea led me to implement manual caching logic in my React hook. ## 🔄 First, The Hook Without Caching Initially, my custom hook looked like this: export const useGetAllUser = (currentPage, pageSize) => { const [users, setUsers] = useState([]); const [totalUsers, setTotalUsers] = useState(0); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchUsers = async () => { setLoading(true); setError(null); try { const res = await fetchData("/users", { _page: currentPage, _limit: pageSize, }); setUsers(res.data); setTotalUsers(Number(res.headers["x-total-count"])); } catch (err) { setError(err.message); } finally { setLoading(false); } }; fetchUsers(); }, [currentPage, pageSize]); return { users, totalUsers, loading, error }; }; It worked—but made **unnecessary API calls** whenever a user switched between pages. ## 💡 Adding Manual Caching (In-Memory) To fix this, I added a simple cache: const userCache = {}; // A JS object to store cached results const CACHE_DURATION = 5 * 60 * 1000; // Cache is valid for 5 minutes Then I modified the hook to check the cache before calling the API: export const useGetAllUser = (currentPage, pageSize) => { const [users, setUsers] = useState([]); const [totalUsers, setTotalUsers] = useState(0); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const cacheKey = `page_${currentPage}_limit_${pageSize}`; const now = Date.now(); const cached = userCache[cacheKey]; if (cached && now - cached.timestamp < CACHE_DURATION) { // Serve from cache setUsers(cached.data); setTotalUsers(cached.total); setLoading(false); return; } // Fetch from API and store in cache const fetchUsers = async () => { setLoading(true); setError(null); try { const res = await fetchData("/users", { _page: currentPage, _limit: pageSize, }); const data = res.data; const total = Number(res.headers["x-total-count"]); setUsers(data); setTotalUsers(total); userCache[cacheKey] = { data, total, timestamp: Date.now(), }; } catch (err) { setError(err.message); } finally { setLoading(false); } }; fetchUsers(); }, [currentPage, pageSize]); return { users, totalUsers, loading, error }; }; ## 🧩 How It Works – Step by Step 1. **Generate a unique key** (page_2_limit_10) based on the page and page size. 2. **Check the cache:** * If the key exists and the data is fresh (within 5 minutes), use it directly. * If not, fetch new data from the API. 3. **Update the cache** with new data and a timestamp. 4. **Avoid repeated fetches** for already-viewed pages within a short time. This was the “aha!” moment for me—simple caching reduced redundant network calls and made the app feel snappier. ## 💻 Example Usage in Component Here’s how I use the hook in the UI: const { users, totalUsers, loading, error } = useGetAllUser(currentPage, pageSize); return ( <> {loading ? <SkeletonLoader /> : ( <UserGrid users={users} /> )} <Pagination current={currentPage} total={totalUsers} pageSize={pageSize} onChange={(page) => setCurrentPage(page)} /> </> ); This is clean and declarative—the hook handles everything behind the scenes. ## 📘 What I Learned From this experience, I understood: * How to think like a caching system * How to build basic memoization logic * The **trade-offs of manual caching** (like global memory usage and no auto-invalidations) Most importantly, I **understood why TanStack Query exists** —it handles all this, and much more: * Automatic stale handling * Background refetching * DevTools for cache inspection * Garbage collection * React integration

0 0 0 0

Mioara

@myoara.bsky.social

10 months ago

I have to say I love react query!
RefetchType:active allows you to refetch invalidated queries when that query is mounted anywhere in the UI.
It helped me solve a nasty bug in my work project.

#reactquery #tanstackquery

2 0 0 0

Darshit Dudhaiya

@darshitdudhaiya.bsky.social

10 months ago

🚀 React Query vs Fetch/Axios

Stop writing:
🔁 Repetitive fetch code
😵‍💫 Manual loading/error handling
🧊 No caching

Start using:
⚡ Built-in caching
♻️ Background refetch
📊 Devtools

📦 TanStack Query = Smart data fetching in React

#ReactJS #TanStackQuery #ReactQuery

1 0 0 0

Jake Rita

@jakerita.bsky.social

10 months ago

GitHub - jayarerita/amplify-tanstack-query-to-do: Example of using tanstack query with amplify Example of using tanstack query with amplify. Contribute to jayarerita/amplify-tanstack-query-to-do development by creating an account on GitHub.

Check out the repo (github.com/jayarerita/a...) if you're looking to try it out or need a reference.

#AWS #Amplify #TanStackQuery #TypeScript #WebDev

1 0 0 0

Liran Tal

@lirantal.com

11 months ago

Struggling with data fetching in Vue.js 3? TanStack Query can be your superhero (at least worked well for me)

Say goodbye to messy fetch calls and hello to elegant data management. #Vuejs #TanStackQuery

4 0 0 0

Andri Óskarsson

@andri.dk

11 months ago

Are there any #React folks out there using #ReactRouter loaders/actions together with #TanStackQuery in a SPA?

In particular, it's a bit unclear to me when I should be using loaders and when I should stick the useQuery?

Also, where to store the auth token now so I can use it in both places?

0 0 0 0

react-admin

@react-admin.bsky.social

1 year ago

🎙️ In case you missed @tkdodo.eu's talk “React Query - The Bad Parts” at @reactdayberlin.gitnation.org, he recently uploaded the slides and transcript of his talk.

Definitely worth a read!👇

🔗 tkdodo.eu/blog/react-q...

#ReactQuery #TanstackQuery #react

14 3 0 0

Ronak Doshi

@rnkdsh.bsky.social

1 year ago

Important Defaults | TanStack Query React Docs Out of the box, TanStack Query is configured with aggressive but sane defaults. Sometimes these defaults can catch new users off guard or make learning/debugging difficult if they are unknown by the u...

8/ Understanding these defaults helps you get the most out of TanStack Query. Adjust them as your app's needs evolve, and enjoy the power of a performant, feature-rich querying library! 🚀

📖 Learn more: tanstack.com/query/latest...

#ReactJS #TanStackQuery

1 0 0 0

EmaDev / IndieHacker

@emadev.co

1 year ago

Currently loving my tech stack: Svelte 5 with SvelteKit, self-hosted Supabase on Hetzner, Tailwind CSS, DaisyUI, ShadCN, tRPC, and TanStack Query

It’s the perfect setup for building powerful apps quickly and efficiently! 🚀
#Svelte #SvelteKit #Supabase #TailwindCSS #tRPC #TanStackQuery #WebDev

8 0 1 0

Posts tagged #TanStackQuery