これは、俺の最初のプログラミング投稿です。自信がどんどん高くそう、また新しいチャレンジをしたい。そして、「自分の考えを日本語で書こう！」って何数日まえに始まった、それに色々のことを学んだ。今回、「プログラミング投稿を書こう！」っての考えが飛び込んだ。フォーマルな文集を頑張って書きますけど、もしカジュアルになってしまって、申しわけございません。

まぁ、そんなことを心配するの価値がないんだよね。ここは自分のブログから。けどもしこの投稿は役に立ったら、それは嬉しいです。

あらすじ

あらすじってなに？わからない

今までに随分Reactを使います。最初からフロントエンドをした、Reactを使いました。クラスでコンポーネントを作る時代から、今には関数コンポーネントで作って、長く時間に通じた。だって、時代は変わるよね。

でも、最初からのなんとかまだ残っている問題はそれです。状態管理。State Managementです。それは正しい日本語か？わからない。その状態管理は今まで皆の悩み事になっておる。シンプルの手段で行こうか、ライブラリで行こうか、それにどっちのライブラリを使おうか、これは本当にReactフロントエンドエンジニアのなやみごとだよね。まぁ、ただのシンプルなウエブサイトのはuseStateとReact Contextで充分だと思います。けどもし、でかくなる、広くなる、もっと複雑なウエブサイトを作れば、状態管理も複雑になりますんだよね。だから、簡単な手段は皆が望みます。

だから、今回はTanstack Queryを話したい。理由は？答えは簡単です。このライブラリは「すげせえええええええええええ！」の感が爆発的に表れる。

Tanstack Queryとは？

React Queryって聞いたことがある？イエス？それなら、同じことです。Tanstack QueryはReact Queryの新ネーム、デス。けど、訊いたことがないから、次の文章はウルトラシンプルな説明です。

Queryで状態管理をするのライブラリです。ってQueryってなに？

これを考えてください。

今の時代、ウエブサイトは随分データを使っていて、そのデータはサーバからを取り出した。XHR(XmlHttpRequest)とかFetch APIとかでAPIリクエストがサーバを送って、その返事をフロントエンドが使います。だいたい、そのデータは『状態」って言われてもできる、特にReactの環境。皆Reactエンジニアは状態のコンセプトはもう慣れていて、この状態によるとコンポーネントの行動、結果、それに、サイドエフェクトを変わる。だから状態はReactに必要なことでありますのです。

コンプレックスなウエブサイトには色んなデータを使います。それに沿ってサーバからデータを取ることはいっぱいになる。だから、なにかでこんなことを簡単に管理する手段は皆が望みます。それにして、Tanstackの管理者は、この「APIリクエストを送って」パターンを調査して、APIエンドポイントがだいたい変わらないです。たとえば、ユーザのエンドポイントが、/api/v1/users へリクエストを送る。それに、詳しいのユーザのデータを気にしたら、/api/v1/users/:userId のエンドポイントを送る。OpenAPIに従ってAPIエンドポイントのパターンです。どこかこのパターンを活用する、Tanstackの管理者たちが考えた。これはQueryのコンセプトになりそうです。（後で確認する）

列：

全部の投稿データをしたい。これはだいたいインデクスページで使う。これは["posts"] のQueryで言う。
ある投稿の詳しいデータをしたい。これはいちいちの投稿ページで使う。たとえば、この投稿のIDは727、このQueryは["posts", "727"] になります。
他の投稿をしたい場合は、同じところになります。

「これは他に比べて随分同じじゃろう！利益はなに？」、多分そんな思いが内蔵の中から叫んだ。

Queryの利益

Queryのコンセプトを従ったら、データのモデル次第に状態を整理することができます。Tanstack Queryに、このQueryはテキストアレイでセットする。それで、もし、新しいデータを取りたいとかとあるデータを削除したいとか、そのQueryからをできます。

列：

今に、このQueryがあります：["users", "727", "posts"] 。ユーザ727の投稿データをリフレッシュしたら、Tanstack QueryのinvalidateQueries の関数を呼び出す。パラメータは{ queryKey: ["users", "727"] } になる
それで、全部ユーザ727のデータはまたAPIリクエストを送って、それでもユーザ727の投稿データもAPIリクエストを送る。
もし全部のユーザのデータをリフレッシュしたら、またinvalidateQueries の関数を{ queryKey: ["users"] } で呼んで、全部の今時点に使ってQueryのデータがAPIリクエストを送る。

これなら、使ってるデータだけがリフレッシュして、いらないリクエストがいなくなった。

あとがき

それ以上、まだいっぱい機能があるけど、この投稿はここまでです。今回は練習するのためだけです。でも、いつか、真面目な投稿を必ず書きます。

Tanstack Queryは(積極的に)恐ろしい