fetch is not being called for components added on the client side

[woutervdm]

When adding components on the client side fetch is not being called or is linked to the wrong payload data. For instance when showing a dialog that fetches CMS content.

Versions

• nuxt: v2.15.3
• node: v14.15.1

Reproduction

https://github.com/woutervdm/nuxt-fetch-test-case

<template>
  <div class="container">
    <button
      type="button"
      @click="click"
    >
      Add component
    </button>
    <hello-world
      v-for="i of number"
      :key="i"
    />
  </div>
</template>

<script>
export default {
  data: () => ({
    number: 1
  }),
  methods: {
    click () {
      this.number++
    }
  }
}
</script>

Using the HelloWorld component:

<template>
  <div>
    {{ data }}
    <pre>{{ $fetchState }}</pre>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data: () => ({
    data: ''
  }),
  fetch () {
    this.data = 'Hello world!'
  }
}
</script>

Steps to reproduce

Run yarn generate and yarn start and click on the "add component" button multiple times.

What is Expected?

fetch should be called for each new component and each added component should contain the text "Hello world!".

What is actually happening?

fetch is not being called and only the firstly added component contains the text. Probably because it is using the same fetch key as the staticly generated component (which also seems incorrect behavior).

[danielroe]

@woutervdm For this use case, I'd recommend using a custom fetchKey implementation (see PR). Try assigning using a custom fetchKey in the component and see if that makes a difference.

[woutervdm]

Thank you @danielroe, I have tried using fetchKey first with a simple string

fetchKey: 'hello-world',

Even using a function that makes sure server and client are using different keys:

fetchKey: getKey => `hello-world-${process.server ? 'server' : 'client'}-${getKey()}`,

But it seems that fetch is still not being called even if the key does not exist in the payload data.

[danielroe]

@woutervdm Thanks for this! If you are expecting dynamic data on a fully static site then you probably want to use fetchOnServer: false. But I do think it's reasonable to expect that if the data isn't in the payload it would refetch. (Current behaviour is to assume that if the payload exists then there is no need to run fetch at all.)

[woutervdm]

Thanks. Would be nice if a refetch is performed once the data is not in the payload. I am reusing the same component for parts of the page that are statically generated and for dynamic components.

[dovahkiin1225]

NICE,When I refresh the page again, I find that the issue has been closed.