I have a vue3-app that serves as the frontend of an asp.net core 2 api.
Much of the requested data gets used by multiple components. And in order not to make multiple identical requests, i want to store the response-data in my vuex-store if it's not in there already.
The problem is, that most of that data changes a lot, so i need to be able to tell vuex to refresh the data after some time.
But i don't want to refresh all of the requested data, since some of it doesn't need to be refreshed as often and some not at all (for example a list of countries).
So what I need is a way to tell vuex wheter i want to save the response of a specific axios request forever, or to re-request it after a set amount of time.
My questions are: Is there a plugin for this that I couldn't find? And if not, how could i implement the described functionality without rewriting it for every request?
There are some axios cache projects available:
axios-extensions (LRUCache)
axios-cache-adapter (localforage)
cachios (node-cache)
The 2 most popular currently are axios-extensions and axios-cache-adapter
Source of the chart
There is a library axios-cache-adapter that is a plugin for axios, to allow caching responses.
It is a great solution for implementing caching layer that takes care of validating cache outside of application's data storage logic and leverages it to requets library instead.
It can be used with both localstorage and indexedDB (via localforage library)
Related
I hope you are fine. I want to send a get request in nuxt3 without using composition api but I don't know how to do that. I will thank anyone who give me a piece of guidance.
Thanks.
async getPosters(){
const results = await this.$axios.get('posters')
this.posters = results.data
},
Write your code as you were used too with just Options API, nothing have changed on that matter.
You can totally use Options API while using Vue3/Nuxt3. They may have some small changes but nothing too major for a simple task of querying a backend.
It looks like this is more of an issue with trying to load Axios rather than it is with the composition API. Nuxt 3 makes Axios a redundant module.
Since Fetch is the go-to considered method of requesting data in Nuxt3, have you tried changing the method of your request? It means having to load one less module for your project, and will make it a lot easier to transition between SSR and Static in the future. If not, it might be worth using the previous version of Nuxt.
Here's the documentation: https://v3.nuxtjs.org/getting-started/data-fetching in Nuxt 3.
I'm using Nuxt 2.15 with target: "static" and hosting on a shared hosting "hostinger". I fetch the data from an external API using axios and Vuex state management and here comes the problem where the app doesn't load the new data it gets from the API.
How can I make the app rerenders its data and output the newly updated data it gets from fetching the API?
I assume you are using nuxtServerInit or asyncData for getting the data from API. This used with static mode means that data is get only during generation. Which is great for not too often updated content because it doesn't have to connect to server every time it's faster.
Depend on your needs you can:
Get data from API in mounted() hook this will get data from API every time the page is loaded BUT it also means that it could be loaded with some delay and it probably wouldn't be indexed by search engines
You can go with universal mode (https://nuxtjs.org/docs/configuration-glossary/configuration-mode/) and start your site on node.js server which will use up-to-date data from API each time user will open your site.
EDIT: as #kissu corrected me in comment this one is deprecated, please use this one: target:'server' instead of target:'static', which is default so you can just remove this line (https://nuxtjs.org/docs/configuration-glossary/configuration-target/ )
Firstly, I am new in nuxt. What I am trying to do is for every refresh I want to fetch data by calling api and set data to vuex store.
If I call it from mounted hook then all my problems will be solved but I want to take advantages of SSR in nuxt. What I want is to fetch data on server side and use it on client side.
There are two solutions for that- fetch (depricated) and anonymous middleware. It works fine when it is for server side application. My mode is Universal and target is static, for this configuration, what it does is, during npm run generate it calls the api and save the data for one time and use it for my static site.
Main problem is when my data changes, it does not reflect. How to solve this problem efficiently in nuxt by taking the advantage of SSR for load data on every page refresh.
And another problem to address, when I refresh my page other than '/', it shows the view of index.vue. How to overcome this problem?
I am setting up a custom widget in Sitefinity 13 that retrieves data from an external source and caches that data on the server-side. I need the widget data to refresh the data on whatever page it is on once that cache timeout is over, but it appears that the Sitefinity page caching mechanism will cache the rendered results of a page and won't make the call to my custom widget's controller to see if we need to update the data. I've looked into the built-in Sitefinity cache dependency functionality, like IHasCacheDependency and SubscribeCacheDependency, but that appears to be geared toward watching when a page, widget, or other item is updated through Sitefinity's mechanisms (e.g. update version of page is published). I don't see a way using that functionality to accomplish my goal.
Am I missing something with the built-in cache dependency module? What options do I have?
You have a few options:
Instead of getting the data from your controller, you can get it via javascript call. That call can be either towards the external source or, if that's not feasible, towards a proxy api controller on your site, which in turn requests the external api. This way the page will be cached, but the JS script will run and will not be dependent on the page cache at all.
Create a new page cache profile in the settings, that has no sliding expiration and lasts exactly the time you need, e.g. 5 minutes. Then set that profile as cache profile of your page. This way page cache will be invalidated exactly when you need it (time-wise).
How to refresh the interface after you add a strip of data to the backend database in Vue.js?
I mean, if I add a item data to the database. there are two case for refresh the interface.
refresh the list api to get the page data.
append the added item data to local list.
what is the best way to do this?
I think both the solutions are valid it depends on what kind of write operation we are planning to do. Given that you do all the validations on the front-end which leaves lesser chance for errors on the backend. I do the following based on the use case.
Add/Update the item locally and then based on the response from the server I remove it again in case of an error. This is an optimistic technique used by a lot of websites and worls really well for CRUD kind of operations.
Let's say that your new operating is going to creaate a new user in a 3rd party api. So doing an optimistic thing might not be the best. So what I do is make the request, show a toast/alert that the request is happening, and then use sockets or long polling to get the changes. When the request is finally done show the data. In the meanwhile you can insert a dummy item showing loading.