91668


`nuxt ver:3.0.0-rc.11`

以下の構成で、composableのfetchメソッドを呼び出すコンポーネントを作成し、  
pagesで２回呼び出したところ、APIリクエストを１回しかcallしません

## tree

[code]

     components: composable define fetch method call
     composable: callAPI fetch typescript
     pages: view page
    
[/code]

### composable/api.ts

[code]

    export const useAnalyze = async (body: object): Promise<string> => {
      const { data, pending, refresh, error } = await useAsyncData(
        'key-analyze',
        () =>
          $fetch('/analyze', {
            method: 'POST',
            body: body,
            async onResponse({ request, response }) {
              console.log('FETCH', request, response.status)
            }
          }),
        {
          initialCache: false
        }
      )
      console.log('RESULT', data.value, error)
    
      return data.value
    }
    
[/code]

### components/Parts.vue

[code]

    <template>
      <div>
       {{ props.name }}:{{ resultValue }}
      </div>
    </template>
    <script lang="ts" setup>
    
    interface PartsProps {
      name: string
    }
    const props = withDefaults(defineProps<PartsProps>(), {})
    
    const resultValue = ref('')
    onMounted(async() => {
      const result = await useAnalyze(props.name)
      resultValue.value = result
    })
    </script>
    
[/code]

### pages/view.vue

[code]

    <template>
      <div>
       <Parts :name='value1' />
       <Parts :name='value2' />
      </div>
    </template>
    
[/code]

## result

networkの情報を見たところ1回分のリクエストのみ行っています

[![画像の説明をここに入力](https://i.stack.imgur.com/Lfwpu.png)](https://i.stack.imgur.com/Lfwpu.png)

### log

console.log FETCH :１行出力  
console.log RESULT:2行出力

２回リクエストを飛ばしてほしいのですが、こちらの解決方法を知ってる方がいればよろしくお願いします。


CC BY-SA 4.0
2022-10-18T13:27:00.590
91666
2022-10-18T16:46:56.073
54904
question
nuxt.js
nuxt3 2回fetchしても１回しかリクエストを飛ばさない


`useAsyncData`のkeyを固定値にしてしまっているために見えます。

> **key** : a unique key to ensure that data fetching can be properly de-
> duplicated across requests.  
>  \-- [useAsyncData · Nuxt
> Composables](https://v3.nuxtjs.org/api/composables/use-async-data/)

とあるように、keyはそのリクエストの識別（サーバーとブラウザなと）につかわれ、多重リクエストの回避を担います。ブラウザ内で複数箇所から呼び出された場合も同様です。異なるリクエストに用いるのであれば、それぞれがユニークになるキーの設定が必要でしょう。

もっとも、今回のケースにおいてuseAsyncDataの使用が適切なのかはわかりませんが。


CC BY-SA 4.0
2022-10-18T16:46:56.073
91668
2022-10-18T16:46:56.073
2376
91666
answer