Skip to content

[Bug]: Category products not loading first time #308

@shozayen

Description

@shozayen

Expected Behavior

Products from Category.vue should be loaded

Actual Behavior

First time I navigate to categories page which should show all products, instead it showed and the below error screenhost.
If I leave the Categories page and navigate to any other page, then come back, the products are loaded. When I use the inspect, I can see the products are loaded and no issue.

Error description
The error I can see in the console refers to result.value being sent as undefined. All methods that use the result.value then start to throw errors, which lead to below screenshot.

image

Possible Solution

I have no idea why the result.value is not yet loaded, and the getters method called it before it was loaded.

Steps to reproduce

Steps:

  • Open localhost:3000 (or main page)
  • Navigate to products page, not to a specific category, but to page that has all products.
  • Component not loaded, and an error is shown instead.

What version of Spree integration are you using?

v1.5.0

What version of Node.js are you using?

v14.18.0

What browser (and version) are you using?

Chrome, Safari

What operating system (and version) are you using?

macOs, Iphone, Windows

Relevant log output

result.value is not yet defined when below methods were calling it:
    const products = computed(() => facetGetters.getProducts(result.value));
    const breadcrumbs = computed(() => facetGetters.getBreadcrumbs(result.value).map(e => ({...e, link: context.localePath(e.link)})));
    const pagination = computed(() => facetGetters.getPagination(result.value));
    const categoryTree = computed(() => facetGetters.getCategoryTree(result.value));



Error in chrome:
client.js:103 TypeError: Cannot read properties of undefined (reading 'parent')
    at buildBreadcrumbs (categoryGetters.ts:24:1)
    at getCategoryBreadcrumbs (categoryGetters.ts:34:1)
    at Object.getBreadcrumbs (facetGetters.ts:58:1)
    at VueComponent.eval (Category.vue:256:1)
    at Watcher.get (vue.common.dev.js:4490:1)
    at Watcher.evaluate (vue.common.dev.js:4592:1)
    at RefImpl.computedGetter [as value] (vue-composition-api.esm.js:1463:1)
    at VueComponent.get [as breadcrumbs] (vue-composition-api.esm.js:1689:1)
    at Object.get (vue.common.dev.js:2109:1)
    at Proxy.render (Category.vue:10:1)
image

Code of Conduct

  • I agree to follow this project's Code of Conduct

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions