I have a react-admin based app.
API in my server has been changed and some data for my component is coming from another endpoint (but chunk from the first one as early).
I have difficulties with using this new-way-got data in my old component.
Is there any way to use data in arComponent from some array with data except the source? Maybe there is a possibility in react-admin to use data from one resource ("firstResource") in the child-component to <Resource name="secondResource" ... /> if there are no references in "secondResource" to data from "firstResource"?
The way is to use prop record in raComponents. It overrides default RecordContext.
Related
My app consumes an self made - HTTP REST API. I use vueX for state management.
I have some nested components that needs access to the same http result as the parent, but I also use the component in other places where the parent does not fetch the result. Is there a way (pattern) to make sure a resource is not fetched multiple times.
I found this, and like the way of doing things, but I can't figure out how to make a new request to the server for updating the result. https://tkacz.pro/use-vuex-to-avoid-multiple-requests-from-different-components/
and is this even best practice ?
anyone has a better way ?
Using vuex and checking if your state is already populated is good enough. If it's not, then call a vuex action. It will help you to have a state shared globally in your app.
Not sure about this part
how to make a new request to the server for updating the result
What would be the issue or calling the API a second time? If needed, you can use the suggested solution in the comment, like adding a ?refresh or even and id to it id={randomId}.
Good afternoon.
I have an interesting problem at the moment. We have a third party server that offer translations for static html content. I need to fetch this content via Ajax and display it in my Vue components.
The current situation
These translations are fetched via a dictionary-like data structure, i.e. via a category and a key. We have incorporated a Vue plugin to load these into our components via a function t, like this:
<template>
<section>
<h1>{{ t('CommonHeaders', 'HomePage') }}</h1>
<p v-html="t('Articles', 'SiteDescription')"></p>
</section>
</template>
At the moment these translations are shipped to the browser by embedding them in the HTML, after which our client-side hydration mechanism reads them and adds them to the Vuex store. The t function then looks up the translations and displays them where needed. These translations are reactive and accept data parameters to format translations.
We use Vue SFC to render user flows in an SPA-like fashion, although the site is not yet an SPA.
The problem
In order for this to work the translations required for a page have to be listed in the back-end controller methods in a dictionary.
This has become un-maintainable and much more data is shipped to the front-end than what is necessary. Additionally, the back-end system has no definitive end-point when a page is built before being shipped to the browser that we can hook into in order to add the translations to the HTML and content often end up being duplicated.
The back-end system was built using DotNet MVC 4, so we have no SSR capabilities at this point.
The solution (hopefully)
In order to better maintain our code I would like to utilise the 't' function from the plugin to load translations via an AJAX call before the vue engine has rendered the template, i.e. via the beforeCreate or created hook. The problem is that the Vue instance will have to know about translations required in child component templates before the AJAX call can be fired, and I have no idea how to accomplish this.
On a side note, delaying rendering like this goes against all my instincts but it doesn't look like we have a choice at this point.
I am planning to cache the translations client side with a content hash in case they get updated, so the ajax calls will hopefully not be required very often, only on first load.
The site is gradually being converted into an SPA, at which point I will be able to split off the FE and utilise SSR via node. Up until that point though this is the best idea I could come up with.
Any help will be greatly appreciated.
I have been thinking about this my self as at the moment I just send an entire cached json to the client on App Init with a loading screen, is not bad at the moment since there is not a lot to translate but was considering the following approach otherwise:
Have an array in the translation vuex module store a list of keys that need to translate (array).
Have t() push the keys to translate if not already in translated store and return either empty string or a placeholder until the translation is re-actively available.
On mounted dispatch a fetch method on the store to perform the ajax call and set the translation state and clear out the translate list when complete.
Vue should by default it's behavior re-render upon the VUEX state being changed and cause t() in the template body to be recalled and return matching values on nextTick instead of placeholder value previously returned.
I'm using Vue.js and vuex to work with data from a backend store that I access via and api.
My question may be more about semantics and how to actually ask this question and search for better answers because I don't even know the correct terms to be searching on. So here goes...
Within my vue code I make a call to my back end api and it returns a json blob with a block of data that i want to work with in the ui. No problems there. But then I need to slightly modify that data to present it to the user. this entails assessing a few fields and changing them (say, if the value is 0 put in 'n/a', etc.), maybe doing some math on a few fields and so on. Then I present that to the user in a grid/table. I want the user to be able to sort and search on the fields as well. So I may display a field named fullName that comes from the back end but allow the user to sort on a field named lastName that is not actually in the grid.
With that said, here is my question - should I be creating a single 'transformer/reducer' in code to translate the data object coming from the api into what I need for the ui? Or should I be writing multiple filters (by this I mean Vue.js filters that go directly in the html with the '|' pipe) to just modify the fields directly in the html template?
My concern is the once i modify the object coming back from the api what if I have to post/patch/put back some kind of update - then I need a 'reverse' transformer to get back to an object that my api wants to see.
Generically, I suppose my question could be boiled down to "how do I locally handle an api response object so that I can maintain its 'purity'?"
Or something along those lines. I'm obviously fumbling for the correct terms and that is why i'm struggling to even google for info on this topic. For that I apologize and any help would be appreciated.
Also, I realize there is nothing Vue-specific about my question as this issue could apply to any data-driven ui framework.
I think I get what you're asking now. You just want to know if you need to modify the response before making it consumable by the UI. Let's say you're using axios. What I would do in Vue is use the response.data object as the data to inject into the vue data property. For example, your response.data returns an array of objects. You would hardcode a data variable in Vue like this:
data () {
return {
apiData: []
}
}
and with the API response, set the data array like this:
const response = await axios.get(...);
this.apiData = response.data.filter(item => return item.foo === bar);
Now apiData holds a filtered version of the response data, which was asynchronously retrieved for processing, including the ObjectId's for each object. Note: I would call this during created(){} hook to allow time for the GET request to process prior to DOM mounting.You can reference the array objects by the ObjectID within the UI, like this:
<div v-for="item in apiData" :key='item_id' :item="item">
<p> {{item.whateverProperty}} </p>
</div>
In my Vue.js project, I have many components, in some of them, those component will all use a fetched data list, called it server_list.
I don't want to fetch it in every component who used it.
so, how can I optimize this?
only in one place to fetch it?
such as, In component_foo, I will invoke fetch_server_list(), in component_bar, I will invoke fetch_server_list() too.
How can I deal with in multi places to fetch server list data?
What's your best way to deal with this?
There are many ways to do that.
Props
Props lets you pass data to child component.
Provide/Inject
Providers lets you pass data nested, more than one level.
Vuex
Vuex stores lets you cache your data in $store object to use later, wherever you want.
I have a component that at creation fires two requests to a RESTful server. Responses are then stored in the Vue Store appropriately.
This component has a computed property that depends on both responses.
But, as designed, any relevant change in the store triggers recomputation of the property and all the consequent updates, for example in the related template.
How would I indicate that the property in fact did not change if only one of the required responses is received and there is no need to do any updates?
The post is from quite a while ago but I was running into the same problem. I have not tried this yet but I believe this to be the solution for this problem:
https://vuex.vuejs.org/en/actions.html#composing-actions
Especially the last part with the async/await example. It makes it clear how you can perform a mutation with multiple async actions.