🗂

Nuxt3の「useFetch」の出番はないかもしれない

2023/12/08に公開

axios

前提知識

例えばNuxt2では、API呼び出しに「axios」を使用していたかもしれません。
が、ES6からJavaScriptに「Fetch API」が追加されました。
Nuxt3では特段理由がなければこの「Fetch API」を使用することになります。
公式にも書いてある。
参考：https://www.memory-lovers.blog/entry/2022/06/02/170000

ところで、その公式には「useFetch」が使えますよ、と、まるで「useFetch」が「axios」の代替になるかのような書き方に見えます。
「Nuxt3ではaxiosは使わずuseFetchらしい」という記事もあるくらいです。

が、私の理解では「axios」の代替となるのはどちらかというと「Fetch API」そのものであり、「useFetch」は「Fetch API」をラップした「unjs/ohmyfetch」をラップした「useAsyncData」をラップした関数で、生の「Fetch API」とはかなり異なるものです。

取り合えずの推奨事項

本題ではありませんが、所謂API接続を行いたい場合は「useFetch」ではなく生の「Fetch API」を使用するべきと考えています（個人の感想）。
なに、難しくはありません、例えばPOSTでも以下のように使用できます。

const response = await fetch(url,{
  method: 'POST',
  body: JSON.stringify(param),
  headers: {//例
    'Content-Type': 'application/json',
  },
});
let data = await response.json();

じゃあ「useFetch」とは何ぞや

では「useFetch」とは何でしょうか。
公式を読んでもよくわからん。。。
私の理解では、大きな違いは2つ。「キャッシュ」と「自動化」だと思っています。

キャッシュ

言わずと知れたキャッシュです。一度取得したデータを記録しておき、次回からの接続をスキップします。
例えばECサイトなら役に立つ思いますと。しかSNSならどうでしょう。"今"の状態が欲しくて更新するのに、過去取得したデータが返ってきても役には立ちません。
また、ただのTODOアプリでも、新しいタスクを追加した後更新するのに追加前のデータが返ってきては意味がありません。

以下の記事には、キャッシュによって2回目のAPI呼び出しがスルーされる件について記載されています。

自動化

もう一つ、「useFetch」にはAPI接続を自動化する機能があります。これもコードを覗いていないので私の理解では、ですが、与えたパラメータをWatchして、変更があった場合に自動的にAPI接続を実行します。
一見便利な機能に見えます。例えばセレクトボックスから並び順を変更したり、「次のページ」ボタンからページの値が変更されるなど、ユーザの操作に応じて自動的にAPI呼び出しができます。
しかし、例えばテキストボックスから自由検索するとしたら？直に値をバインドしていた場合、ユーザが文字を入力するたびにAPIに接続するということが発生してしまいます。

いつ使うか

ではこの「useFetch」はいつなら役に立つのか。

「キャッシュ」「自動化」どちらかだけを使いたい場合、或いはカスタマイズして使いたい場合

その場合は「useAsyncData」を使用しましょう。オプションからキャッシュやWatchを無効にしたりできます。

こちらは使い方によってかなり応用性が高い気がします。
ページ遷移時などに「useFetch」が使えるやん、と考えた方、おそらくその場合も「useAsyncData」が良いです。

んー私なら、実装が複雑化するくらいならキャッシュも自動化もせずに脳死で「Fetch API」使います。
クリティカルな部分だけは使うかもしれません。

そもそも

そもそも「Fetch」とは「取ってくる」というような意味です。「Fetch API」は割と何でも使える気がしますが、「useFetch」は値を「取ってくる」為に使うべきでしょう。

うーん、、、
過去のデータを解析、グラフ表示するようなアプリケーションで、特段処理が重いとかサーバが弱いとか、そういうときには役に立つかもしれませんね。

因みに

以下の記事も関連していて参考になるかもしれません。特にReactを使われている方には。

最後に

ご覧いただきましてありがとうございます。
本記事はいつもに増して感覚で書いておりますので誤りや、こういう時に役に立つんだよ！！というのはコメントでいただけるとありがたいです。