☹️

Nuxt3(rc)でクエリパラメータ変更時のrefresh

2022/05/21に公開

Nuxt

useFetch

refresh

tech

環境概要

nuxt3(rc),vue3,typescript

目的

useFetchを利用して、クエリパラメータが変更された際に、新しいクエリパラメーターで再度リクエストを送信できるようにしたい。

結論（要検討）

リアクティブにした、クエリパラメータを再設定するようにonRequestオプションを使用する。

Child.vue

<script setup lang="ts">
import {useFetch} from "#app";
import {computed, toRefs, watch} from "#imports";
import {FetchContext} from "ohmyfetch";

interface Props {
  limit?: number
}

const props = withDefaults(defineProps<Props>(), {
  limit: 10
})
const {limit} = toRefs(props)
const {data: rankings, refresh} = await useFetch('your/api/end_point', {
  baseURL: 'http://localhost/api',
  params: {
    limit: limit.value
  },
  onRequest(ctx: FetchContext): Promise<void> {
    ctx.options.params = {
      limit: limit.value
    }
  }
})
watch(() => limit.value, () => refresh())
</script>

試行錯誤

ドキュメントにあるように、refreshすると新しいクエリパラメーターで再送信できるよー、と記載してあったので素直にそのように実装してみた。

Child.vue

<script setup lang="ts">
import {useFetch} from "#app";
import {computed, toRefs, watch} from "#imports";
import {FetchContext} from "ohmyfetch";

interface Props {
  limit?: number
}

const props = withDefaults(defineProps<Props>(), {
  limit: 10
})
const {limit} = toRefs(props)
const {data: rankings, refresh} = await useFetch('your/api/end_point', {
  baseURL: 'http://localhost/api',
  params: {
    limit: limit.value
  },
})
watch(() => limit.value, () => refresh())
</script>

この場合に、親コンポーネントでボタンをクリックして、limitを１ずつ上げるなどの操作をしたときに、watchまでは適切にlimitが１ずつ増えていくのが確認できるが、devtoolのネットワークタブで確認すると実際に送信しているリクエストのクエリパラメータが10のまま変更されなかった。

なんでダメなのかは不明だったが、githubのディスカッションでリフレッシュ時にヘッダーを動的に変えたい場合はどうすれば良いか？というトピックのものがあり、そこでonRequestオプションを利用して変更している対応を見たのでそのように実装してみたところ更新されたクエリパラメータで送信することができた。

ただ、下記のディスカッションでは、リフレッシュできているようなので、おそらくどっか差分があるのだと思う。

親から渡されたプロパティの変更だからダメなのかな〜ということで、子コンポーネントの中でref()で別にlimitを定義して、ドキュメント通りの実装もしてみたが特に変化はなく、現状onRequestで無理やり対応。

環境概要

目的

結論（要検討）

試行錯誤

Discussion