Nuxt.js: asyncData does a shallow merge instead of deep one

[vicu-retargeting]

Version

v2.10.2

Reproduction link

https://codesandbox.io/s/codesandbox-nuxt-nqisq?fontsize=14

Steps to reproduce

export default {
  data() {
    return {
      user: {
        name: "John",
        age: 20
      }
    };
  },
  asyncData() {
    return {
      user: {
        name: "Dave"
      }
    };
  },
  created() {
    console.log("user", this.user);
  }
};

What is expected ?

{
    name: "Dave",
    age: 20
}

What is actually happening?

{
    name: "Dave"
}

_{This bug report is available on Nuxt community (#c9970)}

[lennoximus]

Probably, we can use merge method from lodash's to solve this. At least, it's working as expected in your particular case.

[rchl]

Nuxt doesn't do any merge. It just overwrites. Why did you expect it to merge? Did you see that being specified like that somewhere?

You can manually merge in a computed property or something if you need to.

[vicu-retargeting]

Nuxt doesn't do any merge. It just overwrites. Why did you expect it to merge? Did you see that being specified like that somewhere?

You can manually merge in a computed property or something if you need to.

From documentation:

asyncData is called every time before loading the page component and is only available for such. It will be called server-side once (on the first request to the Nuxt app) and client-side when navigating to further routes. This method receives the context object as the first argument, you can use it to fetch some data and return the component data.

The result from asyncData will be merged with data.

[rchl]

Right. Shallow merge and overwrite mean the same pretty much.

But it wouldn't make sense to change that IMO.
A) it would be a breaking change
B) it's not a bug, more a feature request
C) I'm not sure what would be the benefits of that behavior. You can do a deep merge manually, using two different keys so it's not like it would allow something that is not possible now.

[vicu-retargeting]

I'm not sure what would be the benefits of that behavior. You can do a deep merge manually, using two different keys so it's not like it would allow something that is not possible now.

What is the benefit of the asyncData then?

In my case i use the asyncData to get information from the server and in 90% of cases there is a multidimensional object that i want to merge with another multidimensional object that is already stored in data of the component and in such cases i need to store the asyncData result in another key and do a deep merge in created() hook. And for a big project where we have more than 500 components this duplicate cod will down the performance....

Anyway i changed a bit template/utils.js and replaced

return { ...data, ...asyncData }

with

return mixinDeep(data, asyncData)

and mixinDeep is https://www.npmjs.com/package/mixin-deep

[rchl]

Well, ok, you have your use case but to be fair I'm not sure it's that common. And as I said you can do that already and you can even do that in more efficient way than Nuxt could, by merging from computed properties (will be more efficient if you don't need your data immediately). Granted, you will need to write more code.

[vicu-retargeting]

Well, ok, you have your use case but to be fair I'm not sure it's that common. And as I said you can do that already and you can even do that in more efficient way than Nuxt could, by merging from computed properties (will be more efficient if you don't need your data immediately). Granted, you will need to write more code.

Ok than can you explain, what are the benefits of using the asyncData?

[rchl]

Are you asking generally?
The obvious benefit is that you can asynchronously fetch data that you need for your page component. You wouldn't be able to do that otherwise in SSR-compatible way.

[vicu-retargeting]

Are you asking generally?
The obvious benefit is that you can asynchronously fetch data that you need for your page component. You wouldn't be able to do that otherwise in SSR-compatible way.

Ok and in this case if i can't deep merge data with request result directly in asyncData, why should i use it then? I could extend vue component with a function that will do the same thing that asyncData does but will deep merge the result.

You trying to explain me that you guys did a method to fetch data but this method does that half of the job, so another half you need to do by your self.

[rchl]

• Typical use cases don't need to deep merge data.
• asyncData is necessary to make SSR (server-side-rendering) function properly. You want the data to be loaded on the server already and page be fully rendered upon client receiving it. That's mostly for SEO purposes. That's the whole point of Nuxt framework. You don't want to delay data loading until after client receives the data. And you can't replicate that behavior using your custom methods as the server would not wait for those async methods to finish then.
• I don't represent the team. I'm just an active member of the community.

I think the whole issue is due to you not understanding the purpose of asyncData. Maybe you'd receive some tips on how to handle things properly if you'd show some code (even minimal code that shows the idea you are employing).

[manniL]

I personally don't think that asyncData doing a deep merge would make sense in the majority of use cases and instead would confuse users / cause bugs.

What you want is to retrieve a fresh (and potentially cached) state as the result from asyncData that contains all information that should be included on the server side. If you load a page with a blog post for example, you'd want the content of the blog post (and the meta data and so on) coming from asyncData.
If you have some default data you want to merge, then you either want to the transformation in your API or in the asyncData method itself.

[vicu-retargeting]

Guys i understand what you say, but don't forget that nuxt can be used as SPA...

[manniL]

@vicu-retargeting This doesn't change the situation IMO. I'm still not sure what the use case would be (and what you can't do on your own in the asyncData method. 🤔
Can you provide such a use case?

[vicu-retargeting]

@manniL an eg you can find in my first post of this page

[rchl]

@vicu-retargeting that doesn't seem like a very realistic example.
You would normally fetch whole user data from the API using asyncData - you wouldn't merge static user data with API data. Especially in the case of users it doesn't make sense as it won't always be "John" visiting the site.

[manniL]

Fully agree with @rchl here.

And as stated above, if you need deep-merge with some defaults, you can do that in the asyncData fn yourself. :relaxed:

[vicu-retargeting]

@manniL Can you give me an example how to do a deep-merge in asyncData function please?