Syncing via wildcard on api-result

[urbanbratcoder]

Hi there, thanks for this awesome package. I love it!

I got a small project with some data fetched from a rest api. This happens within bevoreResolve/bevoreEach of the route. The result of the API contains customs attributes, so i do not know which attributes will be there when fetched. I tried several variations, but i got every time the state-data does not exist at the point of using the wildcard. Is there any hint for this situation how to solve it with pathify?

[davestewart]

Hmm. Can you share some code? What does and doesn't work?

[urbanbratcoder]

I tried around a little bit. It might be related to vue, not pathify. As i have not yet experienced deeper with vue i tried to bulid a scenario up from zero: https://codesandbox.io/s/nifty-golick-rgwi3 On route test it says property not defined but referenced. Even though the solution is probably on the part of vue, i would be happy about a hint to solve it.

[davestewart]

Hey,

Thanks for setting up the demo.

So the error you are getting is because there is no property "title" on the component.

In normal Vue code, this would need to be in data or computed.

The pathify path mouse@hobby.demo.* you are referencing points to an empty object, so there would be no initial "title" property to be spread in from there.

So Pathify and Vue work in similar ways - they need to have initial properties that exist.

If you declare your state like this, things work:

const state = {
  mouse: {
    name: "Mini",
    breed: "Disney",
    gender: "male",
    age: 2,
    color: "gray",
    weight: 0.2,
    location: "secret mousecave",
    notes: "it's supermouse",
    hobby: {
      greeting: { hello: "world" },
      climbing: { mountain: "everest", ocean: "pacific" },
      demo: {
        title: "test title"
      }
    }
  }
};

Note that the Pathify helper function that builds computed properties requires them to exist because it iterates over them to build the named functions. This is documented (though apologies, there are probably too many docs!)

https://davestewart.github.io/vuex-pathify/#/api/component?id=troubleshooting-wildcards

[urbanbratcoder]

Thanks for clarification. The response from the api is only partly known. There could be custom fields, which can be named as desired. Could there be a way to handle them dynamically within vue/pathify? (sorry, i don't want to abuse you as vue support)

[davestewart]

sorry, i don't want to abuse you as vue support

Ha! That's OK, luckily this repo isn't that high-traffic.

Well, wildcards just loop over properties internally, so you would have to provide them for * to work.

Will all your fields be editable? The best approach for something like this would be to have a component that knows what it is getting and write the markup / code accordingly.

Wildcards are just a convenience syntax, rather than meant to be a silver bullet! I actually don't use them much myself for reasons of explicitness.

I'd perhaps suggest getting this right without Pathify, then coming back to Pathify to simplify once you've nailed your first draft of the store setup.

Hope that helps :)