Is React(tanstack) Query Too Biased? Deep dive: Real Life Data Fetching Practices — Chapter 1

JUSTC0DE_SESSION00111/14/2025Intermediate

javascript

typescript

reactquery

astro

tailwindcss

tanstack

9 min

Welcome aboard — the very first article(justc0de_sessions001) so far Capitan!. I'm thrilled to share something with you especially when it's first — always makes the things more valuable(at least for me).

Before we move on to the context, make sure you have a golden shovel right next to you because we will be digging nonstop through the gap where you are likely feeling a huge hunger for something unique and immersive. By the way — if so, no worries with your hunger Capitan. This episode will help you overcome your hunger, which is no longer a problem. You already will be satiated because it's all about fetching. Therefore, you might ask "wtf fetching?". Well, well... Then I would say "literally whatever you want Capitan!".

My goal in overall is actually covering the web(roughly). I like to write down the steps I take and document them for myself and others. The intention is basically trying to touch as much of the field as possible in order to understand and explain it thoroughly, since the best learning method is to be able to teach the basics. In this case, I intended to cover traditional ways of data fetching vs. newfangled ways in Javascript. I'll try to address the answer of cause-effect relations.

In addition, I decided to divide the episode into three chapters(might be more, I'm just saying) under the name *Is React(tanstack)-router too biased?. Well, no more fluffs. Let's dive into the logic.

Disclaimer: None of my writing includes direct source of AI. All concrete, synthesized with the original source and my own conclusions/summaries. LLMs are only used in order to reach particular knowledge-bases in ease or create informative diagrams.

What is a query?

To address the related clarification for this article, I suppose that we must go back to the very beginning of the term "querying".

In dictioneries such as oxford dictionary, a query /ˈkwɪəri/ indicated as anglicized form of the Latin imperative quaere!, used in the 16th century. In English as a verb in the sense inquire and as a noun meaning ‘query’, from Latin quaerere ‘ask, seek’. In other words, it is a question or request for information.

When it comes to computer science, the term has specific — typically posed to a search engine or a database written in a special language, such as SQL to retrieve, add, change, or delete data known as ‘CRUD’ that you might likely familiar with. I believe, every reactive machine eventually does a CRUD and it is the thing that makes it reactive. You can think it as a high-level component inside your computer that provides you to read this article or when updating the research results obtained from a trained AI. As you can see, we can expand on examples numerous times — from the most primitive to the most advanced tech-beings where people utilize them, in various and common scenarios.

The brain is actually does millions of queries as well and in my opinion, as other things like planes(looking to the birds and it's aerodynamics), we might have ended-up finding the "query" term by evoking the formations around us. In our case, wouldn't it be fitting to make associations with our brains since the brain responds to stimuli just like the HTTP req-res cycle?.

As we mentioned earlier, the relevant fields for "query" regarding to the intention of this article might be grouped under three headings:

• Database Query
• Web Search Query
• Query String

Database Query

Database query is a request to database management system(DBMS) in order to retrive particular data that is saved in the remote accumilator server. The query usually contains bunch of utilities related to what the query was requested for. Say a fav track in your Spotify, an annoying thumbnail video in Netflix inside the movie listing. All these includes a query itself in stages like pending or success.

Web Search Query

A user types into a search engine in order to find information on the web. The search engine processes the query using algorithms to provide a list of relevant results. Better to break down the context list in order for better understanding. Source used down here.

• Query Interpretation: The search engine first analyzes the query to understand the user's intent. Corrects spelling errors, recognizes synonyms, and considers the context — say the user's location, language, and search history.
• Indexing: The system doesn't search the live internet; instead, it rapidly scours it's massive, pre-built, giant database of information gathered by "web crawlers" or "spiders" that constantly explore and categorize web pages.

When it comes to SEO, the importance of indexing is huge. Your boring clients most likely wants to see the product in higher-ranks rather than interesting in with the clean-codebase. At this point, GSC(Google Search Console) is vital. In order to utilize from the ranking benefits, do not forget to register the app into GSC(Google Search Console) for better indexing. In addition, creating meta tags, sitemaps, considering page's render method(SSR, PPR, SSG, CSR) regarding to app's intention are vital as well. FYI: Search central

• Ranking: Basically, the search engine assesses the indexed pages for relevance and quality in relation to the query. Hundreds of factors are considered, including:
• Content relevance
• Quality and authority
• User experience(This is where we will deep dive in this article)
• Freshness
• Results Presentation: The search engine results page (SERP) is generated and delivered to the user's browser, typically listing the most relevant results at the top, along with paid advertisements or other features like featured snippets or knowledge panels.

All of these above contribute to SEO directly. I couldn't move on without mentioning these things especially when it comes to query.

Query String

Query String is an optional part of a URL (Uniform Resource Locator) that assigns values to specified parameters, often used to track information or control page appearance. I have noticed that the most common use of a query string is to use URL as a shareble/public state managers in the fast-paced evolving modern web. This is what exactly the twelve factor app indirectly emphasizes.

Using states, which means saving an instance in the client's memory, indeed violates scalability. When a registered user adds an item to the their shopping cart in the device A(say PC) he should be able to see that added item also in device B(say mobile device). This both creates an impression and keeping the retention stable that is likely increase purchase rate. So at the end of the day focusing on being stateless is vital in terms of scalability and accessibility.

As we mentioned earlier, understanding the parts of a URL is essential knowledge and non-trivial fact. Therefore, I genuinely believe a URL is a must-known thing when it comes to programming and that's why I wanted to cover this topic thoroughly — especially when we're addressing the actual matter of query. Down below, I've tried to emphasize decomposition of the URL parts roughly.

Interestingly, according to Tim Berners-Lee later said the double slashes**'//'** inside a URL were actually unnecessary - they were included based on pre-existing conventions for server names, but he felt they could have been omitted XDD.

What is React Query?

Well, I think we are quite sure about what the query is so let's move on our actual topic — React Query or we also cane say Tanstack Query since the all ecosystem cumulated under one name, which is the great Tanstack.

Overview

As the name implies, in my words react query is a filling the missing gaps of data-fetching as mentioned in the official documentation of Tanstack Query.

Overall, React Query makes fetching, caching, synchronizing and updating server state in web apps. The documentation is also emphasizes that common state management libraries, such as redux are not as good as Tanstack in terms of server state because their structure designed for genereal use rather than server-driven goods. It's worth to mention that these are my understanding.

To be continued...