タグ

tanstackとTypeScriptに関するmkusakaのブックマーク (3)

  • useEffect で API を叩くのを卒業しよう

    はじめに 「useEffectでデータ取得するのはやめた方がいい」— こんな話を聞いたことはないだろうか。 でも自分はずっと、useEffect + fetch でAPIを叩いていた。中でtry-catchして、useStateにセットして、ローディングもエラーも自分で管理して。チュートリアルで覚えたそのパターンを、特に疑うこともなく使い続けていた。 「やめた方がいいのは分かった。じゃあ何を使えばいいの?」— この記事は、その疑問に対する自分なりの答えを、実際にTanStack Queryに置き換えてみた過程から書いている。 useEffect + fetch で書くとこうなる 例として、APIから投稿一覧を取得して表示するコンポーネントを考える。 const [posts, setPosts] = useState<Post[]>([]); const [isLoading, setIs

    useEffect で API を叩くのを卒業しよう
    mkusaka
    mkusaka 2026/02/17
    useEffect + fetchの冗長さ(useStateが3つ)をTanStack QueryのuseQuery(queryKeyとqueryFn)で簡潔化する記事。
  • TypeScript 向けの AI フレームワーク TanStack AI を試してみた

    TanStack AI は TanStack チームが開発する TypeScript 向けの軽量な AI フレームワークです。LLM プロバイダーのインターフェイスを抽象化し、ツール呼び出しやチャット機能を提供します。この記事では TanStack AI の概要と基的な使い方を紹介します。 AI エージェントの開発をする上で LLM の API 呼び出しを抽象化してくれるフレームワークは欠かせないものと言えるでしょう。OpenAI や Anthropic などの主要な LLM プロバイダーはそれぞれ公式 SDK を提供していますが、それぞれ異なるインターフェイスを提供しているため複数の LLM モデルを切り替えながら開発する場合には煩雑さが増してしまいます。 この差異を吸収してくれるフレームワークとして TypeScript なら AI SDK、Python なら LangChain が

    TypeScript 向けの AI フレームワーク TanStack AI を試してみた
    mkusaka
    mkusaka 2025/12/07
    TanStack AI をTypeScriptで試す入門。chatやtoolDefinition、Next.js+useChat連携までコード付き解説。
  • TanStack DB ~状態管理の新しい考え方~

    こちらの記事はReact Tokyo ミートアップ #8にて発表させていただいた内容をより深堀りした記事となっています。 登壇資料はこちらです。 TanStack DB ~状態管理の新しい考え方~ TanStack DBとは TanStack DBは、フロントエンドに 永続化層(DB) を設け、コンポーネントから直接クエリできる仕組みを提供します。 従来は、バックエンドのDBを正とし、フロントエンドはそれを定期的に問い合わせる形が一般的でした。 TanStack DBはこれを逆転させ、フロントエンドがデータの主導権を持つ 形にします。 つまり「DBフロントエンドに持ってきた」感覚で使えるのが魅力です。 TanStack DBは何が嬉しいのか 楽観的更新の自動化 同じTanStackシリーズのTanStack QueryはデフォルトではUIの楽観的更新をしません。 つまり、失敗することを前

    TanStack DB ~状態管理の新しい考え方~
    mkusaka
    mkusaka 2025/09/07
    npmで @tanstack/db と @tanstack/react-db を導入すれば、更新だけで楽観的更新が自動化、localStorageなどストレージを自由に差し替え可能です。
  • 1