I wish to call an API on the path/route change of a react web app. How can I achieve this if I wish to call an API only once the route or the path changes.
Note that I have tried this in route file inside an useEffect by giving dependency of the route but it is executing for all the routes at once, eg. 50 routes, 50 API calls which is expected.
Is there anything with which help I can achieve this?
Related
I have a redux store containing multiple states which is populated by same api but multiple end-points.
I have a react app with multiple components, which access to one of these states, and they all call to the correspondent api no mount by dispatching a async function (redux-thunk) to the store.
In the App.js multiple components are used.
Problem:
When all the components mount they call to the api concurrently and exceeds the maximum number of call allowed for the short time frame. Thus all calls reply with status code 429: Too many request.
*Extra notes: I'm buliding a news web-app, and using gnews.io api with multiple search queries and end-points to get data.
In your case i believe one approach would be to create a request type and use it in your state instead of the raw value returned from the endpoint, something like:
type TApiRequestState<T> = {pending: boolean, response: T}
When you dispatch an action that will trigger the endpoint in thunks you would set the api state to loading.
After that all you need to do is check if the request is not already running on the other components.
if (!value.pending && !value.response) {
dispatch(thunksFn)
}
In theory you could dispatch all of the initial requests on a parent component and only render these child components when the initial requests are done. But this depends on a project to project basis IMO.
Given following middleware, whats the best way to rerun the logic when ever store.getters.authenticated changes, and not only on the initial load.
middleware/auth.js
export default function ({ store, redirect }) {
if (!store.getters.authenticated) {
return redirect({ name: "login" })
}
}
You asked how to rerun it inside of the middleware itself, which is the 2nd part of a possible middleware trigger (like if the user is not authenticated anymore while staying on the same page) and without any specific action, like when using polling or websockets I thought.
Meanwhile, the 1st part is the easiest: call the middleware globally (in nuxt.config.js) to trigger it on each page navigation.
If he stays on the same page, you can also move with the router as you did but at this point, checking if there is an error in your axios is maybe more appropriate since it's the initiator.
I also do like to use this.$nuxt.refresh() to trigger all the checks when switching accounts globally, helps re-running all those tasty fetch() hooks.
I created a React app which has four routes, user,admin,home and bus.
if I want to access http://localhost:300/user I was able to access that,
but after hosting it on Github( https://loveyourtrip.tk/ ), if I want to access https://loveyourtrip.tk/user , GitHub throws error status code 404.
However, I can log on https://loveyourtrip.tk/ . once I log on this URL, there is a button called "mange account". if you click there , you can see user. once clicked on user , you can go to https://loveyourtrip.tk/user. but I am not able to access it directly. How can I resolve this issue?
It's because you didn't handle the /user in the backend.
You can handle the whole thing from the front end by using HashRouter instead of BrowserRouter.
Or you can handle it from the backend by return the html page to all the routes.
Take a look at this https://stackblitz.com/edit/hashrouter-demo
So I have a routes.js file to handle my routing in my VUE app and I have used it to transition between components successfully using a router-link tag. However I would now like to execute routes using javascript. For example after I receive an authentication response from my server I would like to transition from the login page to my home page. What can I do to execute a route when I want to?
You can programmatically route using router.push('home'). Here is a a reference to see more options available.
My app uses react-router, redux, react-redux. Lets say I'm currently looking at /about route which renders the AboutPage component. Now I want to navigate to /news. Right now, when the route change happens the new component mounts, which fires off async actions to fetch the data. While that data is being fetched I am looking at the NewsPage component but with loading spinners.
What I'm trying to do is stay on the AboutPage component while all that data fetching is happening. I have successfully implemented the data fetching during react-router's onEnter hook. The problem is that, if AboutPage happens to use any of the same redux state as NewsPage, you'll see rendering changes while the data is being fetched and updated.
What I'd like is to somehow 'freeze' the current route while actions/state-changes are happening behind the scenes, and then render the new route component when thats ready (in the meantime users will see loading feedback via https://github.com/rstacruz/nprogress).
So either I need to completely unsubscribe the current route component from state changes or otherwise lock stuff in. Not sure if redux even exposes what I need but curious if others have solved this.