**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.

> [id=warning] 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.

<Contents>

- [What is a query?](#what-is-a-query)
- [What is React Query?](#what-is-react-query)
- [The big picture — evolution of data fetching in Javascript](#the-big-picture--evolution-of-data-fetching-in-javascript)
- [A simple CRUD example using React Query](#a-simple-crud-example-using-react-query)
- [Why does even a tiny front-end app need React Query?](#why-does-even-a-tiny-front--end-app-need-react-query)
- [A comparison of React Query alternatives](#a-comparison-of-react-query-alternatives)
- [Sophisticated React compiler problems with React Query](#sophisticated-react-compiler-problems-with-react-query)
- [The place of React Query in 12 factor app](#the-place-of-react-query-in-12-factor-app)
- [Bottom line](#bottom-line)
- [What next on chapter 2?](#what-next-on-chapter-2)

</Contents>

## 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](https://www.oxfordlearnersdictionaries.com/definition/english/query_1), 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**.

![Diagram of DBMS(C)](https://ytpmpkgcjlcdidphswzv.supabase.co/storage/v1/object/public/banner/database-management-system-diagram.png)

### 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](https://www.google.com/intl/en_us/search/howsearchworks/how-search-works/ranking-results/#:~:text=Relevance%20of%20content&text=Our%20systems%20look%20for%20quantifiable,results%20are%20relevant%20to%20queries.).

- **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.

> [id=info] 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)](https://search.google.com/) is vital. In order to utilize from the ranking benefits, do not forget to register the app into [GSC(Google Search Console)](https://search.google.com/) 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](https://developers.google.com/search/docs/fundamentals/seo-starter-guide)

- **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)](https://en.wikipedia.org/wiki/Search_engine_results_page) 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.

![Serp illustration 1. Credit goes to sitechecker.pro](https://ytpmpkgcjlcdidphswzv.supabase.co/storage/v1/object/public/banner/serp-illustration.webp)

---

![Serp illustration 2. Credit goes to seobility.net](https://ytpmpkgcjlcdidphswzv.supabase.co/storage/v1/object/public/banner/serp-illustration2.webp)

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](https://en.wikipedia.org/wiki/Query_string) is an optional part of a [URL (Uniform Resource Locator)](https://en.wikipedia.org/wiki/URL) 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](https://12factor.net/processes) 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.

![stateless always grater than states](https://ytpmpkgcjlcdidphswzv.supabase.co/storage/v1/object/public/banner/stateless-greater-than-states.png)

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.

![decomposition of a typicial URL](https://ytpmpkgcjlcdidphswzv.supabase.co/storage/v1/object/public/banner/url-parts-decomposition.png)

> [id=info] Interestingly, according to [Tim Berners-Lee](https://en.wikipedia.org/wiki/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](https://tanstack.com/query/v5/docs/framework/react/overview).

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...

The hidden gem behind the React query is revealed. Take a gigantic dive into the traditional ways of data fetching vs newfangled ways where the term "query" is mentioned. 