Vue-storefront: Attributes loaded via `attribute/list` in SSR are not in base-state

[cewald]

Current behavior

If I enter a product page directly via URL as a server-side request, the state (list_by_id and list_by_code) won't be populated with the results of the attribute/list action from the ssr-request, and it remains empty.

The search query made in core/modules/catalog/store/attribute/actions.ts:77 is executed correctly and returns the correct data and commits them as expected into the state in its mutation core/modules/catalog/store/attribute/mutations.ts:13. But in the base state of the client the state object is empty again.

I noticed it when I was trying to load attribute option labels in a custom module via a mixin using asyncData in a component like:

asyncData ({ store }) {
  return store.dispatch('attribute/list', { filterValues: [ 'band', 'brand' ] })
}

I found out that the ATTRIBUTE_UPD_ATTRIBUTES mutation method is called as a async function which shouldn't be done according the Vuex docs. But if I remove it still delivers an empty state object.

If the page is entered using CSR, like when you are open a product over a category page, the state seems to be correct and complete.

Expected behavior

Show attribute lists in client-side base state.

Steps to reproduce the issue

On a plain installation, using the https://demo.storefrontcloud.io api-endoint, got to http://localhost:3000/women/tops-women/jackets-women/jackets-23/neve-studio-dance-jacket-1369.html?childSku=WJ11-XS-Black and use the Vue-Dev-Tools to inspect the current state:

You can see that the state objects are empty, despite the fact that they are loaded and commited on server-side prefetch via asyncData.

Repository

Latest develop e154dbb8d9346d01d5200f862fd958309eb8524d

Can you handle fixing this bug by yourself?

• [x] YES – I try, but I didn't found a reason yet, any hints are appreciated ;)
• [ ] NO

Which Release Cycle state this refers to? Info for developer.

Pick one option.

• [ ] This is a bug report for test version on https://test.storefrontcloud.io - In this case Developer should create branch from develop branch and create Pull Request 2. Feature / Improvement back to develop.
• [x] This is a bug report for current Release Candidate version on https://next.storefrontcloud.io - In this case Developer should create branch from release branch and create Pull Request 3. Stabilisation fix back to release.
• [ ] This is a bug report for current Stable version on https://demo.storefrontcloud.io and should be placed in next stable version hotfix - In this case Developer should create branch from hotfix or master branch and create Pull Request 4. Hotfix back to hotfix.

Environment details

• Browser: Chrome
• OS: OSX
• Node: LTS v10.15.3
• Code Version: e154dbb8d9346d01d5200f862fd958309eb8524d

[pkarw]

This is not an issue and it's intentionally filtered https://github.com/DivanteLtd/vue-storefront/pull/3326; the attributes are cached in the localStorage instead of being transferred with the HTML

[cewald]

@pkarw Ah I see. Thanks you, reading the changelogs could have saved me some time.

Okay, i get that change but I have two questions:

1. How I'm supposed to fetch product attributes that I need inside server-side html – like for SEO meta-tags in my case – when the initial state is completely flushed for attributes (without disabling useInitialStateFilter)?
2. How can I use the optionLabel helper method to get option labels that are already in the cache – is this already an intended usecase?

[pkarw]

ad1) The state is flushed only when transferring to Client's side - so they should be available in the state after attribute/list call + you should repeat this call client's side
ad2) after product/list you will be able to use the optionLabel

[cewald]

@pkarw Thank you for your answer!!
My problem here is, that I need to get the option labels in the metaInfo() method of vue-meta in a single-page component (theme/pages/Product.vue). BUT the ssr-renderer clears the initial state before metaInfo() is executed.

I worked my way around it by loading the attributes as before in asyncData to get it server-side into the state and then assign it to a components property. This way I can use this property in optionLabel() despite the fact it has already been cleared from the state of the ssr-renderer when the metaInfo() is called – Honestly this seems like a hack. I'm thinking about to disable this feature if there isn't any other solution. Do you maybe have another idea how to do it?

[pkarw]

You can still keep attributes in the SSR state by just removing the attribute from initialStateFilter -> this line