Implement a tanstack-query subproject

README.md

@@ -68,6 +68,13 @@ How do you query data in a React app? How do you avoid double `fetch` requests e
 See the README in [query/](query/).
 
 
+## `tanstack-query/`
+
+Example React program using [TanStack Query](https://tanstack.com/query/latest/docs/react/overview).
+
+See the README in [tanstack-query/](tanstack-query/).
+
+
 ## Wish List
 
 General clean-ups, todos and things I wish to implement for this project:
@@ -80,11 +87,12 @@ General clean-ups, todos and things I wish to implement for this project:
   would free up this playground to focus on features of React itself (a much better fit).
 * [ ] Consider bringing back the core content of `flat-ui` but use React Table or a viable/idiomatic alternative, if
   it would make a useful reference.
-* [ ] IN PROGRESS "Synchronizing with an external system". These are the words React uses describe the purpose of the `useEffect` hook.
+* [ ] HOLD (Partially implemented but I'm holding off until I finish a TanStack Query example subproject) "Synchronizing with an external system". These are the words React uses describe the purpose of the `useEffect` hook.
   I already have an example I like of the `useEffect` hook, but it's in terms of misunderstanding the dependencies array
   and I want an example that's a little different. I'm struggling with the prototypical problem where, because I'm using
   `<React.StrictMode>`, and a `fetch` request, I'm getting two calls which is just wrong. What's the right way to do this?
   I know tools like TanStack Query exist to handle this, but I want to implement it from React primitives (not that
   React/JavaScript is primitive at all). I've tried and failed to implement a [`useFetch` hook in another project](https://github.com/dgroomes/my-github-explorer/commit/a07cc9751d380594882eabb8d4a0734d570df00f#diff-8c1796409f2dc6b7d3584b5fe4249dd10e3ab35b5d8c90262a205497e48e269dL2)
   and that was too ambitious. So I want maybe a `query` subproject (and also I probably want a TanStack Query subproject
   for comparison and because that is a nice tool).
+* [x] DONE TanStack Query example very similar to the `query` subproject. 

query/README.md

@@ -51,6 +51,6 @@ General clean-ups, todos and things I wish to implement for this project:
 
 ## Reference
 
-* [*TanStack Query*](https://tanstack.com/query/latest/docs/react/overview)
+* [TanStack Query Docs](https://tanstack.com/query/latest/docs/react/overview)
   * This is a well-written library that solves (or works around?) how to query data in a React app. Ultimately this is
     a strong technical reference for what I'm trying to learn.

tanstack-query/README.md

@@ -0,0 +1,55 @@
+# tanstack-query
+
+Example React program using [TanStack Query](https://tanstack.com/query/latest/docs/react/overview).
+
+> Powerful asynchronous state management for TS/JS, React, Solid, Vue and Svelte
+> 
+> -- <cite>https://tanstack.com/query/latest</cite>
+
+
+## Overview
+
+This is my own "learn by doing" project for learning TanStack Query. The program is similar to the [`react/basic` official
+example in the TanStack Query codebase](https://github.com/TanStack/query/blob/3a127bfc13f9a147b3a3468f0ca1f3c7312dbb7c/examples/react/basic/src/index.jsx#L15).
+
+
+## Instructions
+
+Follow these instructions to build and serve the program:
+
+1. Pre-requisite: Node.js
+   * I used version 20.11.0
+2. Install the dependencies
+    * ```shell
+      npm install
+      ```
+3. Serve the content (and build continuously)
+    * ```shell
+      npm start
+      ```
+4. Open the browser
+    * Open <http://[::1]:8000>
+    * Open the browser dev tools, and you'll see that the program does not suffer from double `fetch` requests even
+      though `<React.StrictMode>` is enabled. You'll notice the extra renders, but only one `fetch` request. The logs
+      look something like the following.
+    * ```text
+       [News] Render function invoked.
+       [News] Render function invoked.
+       [queryFn] invoked.
+       [News] Render function invoked.
+       [News] Render function invoked.
+       ``` 
+
+
+## Wish List
+
+General clean-ups, todos and things I wish to implement for this project:
+
+* [x] DONE Implement
+* [ ] How to implement "refresh this data"? If I had a refresh button, do you call some method to invalidate the cache
+  for that key or something?
+
+
+## Reference
+
+* [TanStack Query docs](https://tanstack.com/query/latest/docs/react/overview)