Provide fetch key as an optional parameter to useAsyncGql composable

[DenFin]

Hi @Diizzayy ,

We are using the client to fetch data from Contentful in Nuxt's static mode. As soon as we have an entry twice on a page we get an empty/white page. When we deactivate Javascript in the browser and reload the page, the static HTMl is there and has all the data. It seems like the Javascript hydrates an empty data object into the DOM.

It seems like the problem occurs because there are two calls with the same fetch key.

We thought it would be good to provide a fetch key as a third parameter for the useAsyncGql composable. What's your opinion on that?

And I was wondering if it would be possible to handle the case where there are two calls with the same fetch key. The desired behaviour would be to prevent sending to seperate calls but instead use the data from the first call.

[DenFin]

I am currently taking a deep dive into how SSG and Data fetching in Nuxt 3 works 'under the hood'. I took a look into the Nuxt source code and in asyncData.ts I found this:

// Avoid fetching same key more than once at a time
    if (nuxt._asyncDataPromises[key]) {
      return nuxt._asyncDataPromises[key]
    }
    // Avoid fetching same key that is already fetched
    if (opts._initial && useInitialCache()) {
      return nuxt.payload.data[key]
    }

Doesn't this mean, that this should be handled by Nuxt? Two calls with identical keys are no problem, because only one gets sent and the second time only the payload is returned? Sorry if these are dumb questions. I'm still trying to figure a lot of this stuff out.

[Diizzayy]

@DenFin Apologies for the incredibly late response here.

We thought it would be good to provide a fetch key as a third parameter for the useAsyncGql composable. What's your opinion on that?

There is certainly merit in allowing the keys to be managed manually.

It seems like the problem occurs because there are two calls with the same fetch key.

I've attempted to reproduce the behavior you've described to no avail, A second call to useAsyncGql with a previously fetched key does infact return the data from the initial call as opposed to making an unnecessary request.

Doesn't this mean, that this should be handled by Nuxt? Two calls with identical keys are no problem, because only one gets sent and the second time only the payload is returned? Sorry if these are dumb questions. I'm still trying to figure a lot of this stuff out.

Not quite, the code you referenced applies both to auto generated keys as well as keys manually passed to useAsyncData, In both cases, nuxt is as you mentioned, able to reuse the payload previously returned for a specified key. PS. there is no such thing as a dumb question my friend.

@DenFin Also if this is an issue that your still facing, I'd love to hear more about it as well as have an even closer look at your use case to come to a proper solution.

[DenFin]

@Diizzayy No worries, and thanks for your reply!

We solved the issue by going back to use the client with the auto-generated functions and passing in custom fetch keys. Maybe I can set up a minimal reproduction of the issue. For now, it works.

Thanks again for your reply!