I have a little problem with my application in VUEJS.
I have an API build in DRF(Django Rest Framework), and application build in VUEJS, when I tested my API in postman working well because I just call one time and the response is one too.
When I tested in my app VUEJS, calling 3 times and more like this:
in first 3 rows calling almost correct, but my app in VUEJS calling many times like images.
my method is created like this:
created(){
// this.DoTransPenalties();
},
mounted(){
this.DoTransPenalties();
},
methods{
DoTransPenalties(){
console.log('transaction canceled ', this.transactioId);
}
}
the method 'DoTransPenalties' is on mounted, in other cases, I put the 'DoTransPenalties' in created, but the same thing always calling many times,
and you can see the error GET, the API get a URL incorrect because the stranges characters in the URL.
please help me, could you say me if is the problem with the configuration of web pack or I need to use vuex, because I used vuex but the same problem.
thanks for your attention.
Related
I am currently fetching data from a 3rd party api in a React application.
The way the api is structured, the flow goes like this:
// Get a list of data
response = GET /reviews
while response.data.nextPageUrl is not null
response = GET ${response.data.nextPageUrl}
I currently have this logic inside of a "fetch method"
const fetchMyData = () => {
// The logic above
}
const query = useQuery(['myKey'], () => fetchMyData, {...})
This works, but comes with some drawbacks.
There is no way to see the progress of the individual requests (to be used in a progress bar)
It cannot leverage React Query's caching functionality on an individual request.
For example: If there are 10 requests to be made, but during the 5th request the user refreshes the page, they will need to restart from the beginning.
I am aware of useQueries but since I do not know the query urls until I have received the first request I do not see how I could use it.
Is there a better approach or way to satisfy the 2 issues above?
Thank you in advance
What you need is Infinite Queries. useInfiniteQuery works similar to useQuery but it's made for fetching by chunks. useInfiniteQuery has extra parameters like getNextPageParam which you will use to tell React Query how to determine the next page. This hook also returns fetchNextPage, hasNextPage (among others), which will allow you to implement patterns like a "show more" button that appears for as long as there is a next page.
By using infinite queries you still leverage on React Query caching. Check the docs for more info.
Im not getting my data (notes) inside the props, it is giving undefined when im using console.log(notes).
My backend api is also in the same project in /pages/api/notes/index.js
The api which im calling is 'http://localhost:3000/api/notes'
Even my api is working fine when im testing it on postman. But on the frontend, data isnt available
Please checkout this issue.
I believe that you simply have a typo. Index.getinitialProps should be Index.getInitialProps. Note that the "i" in initial is capitalized.
Also as a tip, you don't explicitly need http://localhost:3000, if you just call it with /api/notes it will correctly resolve the request. That way when you deploy the app you don't have to go back and make a ton of changes for your data fetches.
I've got a new API from the backend team in a new project, when I call the api it returns "you need to enable java...", whereas I had used Postman for another project before... is it related to api, server or something else?
I don't think that POSTMAN is capable of executing JavaScript in its console.
Try doing the same in the web browser it will work (You won't see this error message).
I spent some times pondering on this trepidation.. and then suddenly i realized what was going on..
the endpoint does not exist, it could be a misspelling
not in the same directory as you expect it to be,
try adding or removing "/" at the beginning of the url, particularly if you don't specify the hostname, i.e. fetch('getusername') is different from fetch('/getusername') .
. This acceptable in development but NOT when already deployed, it points to different path.
the endpoint may be working fine in the Development,
but somewhere within in the Production/Staging, it generated some exception.
I updated Postman and now it works. I'm not sure if it was because of the update or the restart.
I had this problem with a project built using the new template in Visual Studio 2022 for a React app with .NET Core.
In my case I was only getting the response "You need to enable JavaScript to run this app" with calls to a new controller I added. Calls to the built-in WeatherForecastController were working just fine. My new controller was configured the same as the built-in controller so I could not figure out why this was happening. It has to do with how this project template creates both a React app and a back-end API both accessible on the same port. There's a setupProxy.js file that defines routes that should be forwarded to the API. All other routes are redirected to index.html. This is actually what was happening in my case, because my new controller had not been added to setupProxy.js the middleware was redirecting the request to index.html, and because it came from Postman rather than a browser the message regarding enabling JavaScript is displayed.
The solution is that each controller must be explicitly mapped in setupProxy.js or else it won't be proxied correctly. After making this change it worked perfectly in Postman as well as fetch calls from the React app.
const context = [
"/weatherforecast", // built-in controller than comes with the project template in VS2022
"/recaptcha" // controller I created (this line must be added)
];
While calling the REST API with the postman, if you miss the end-point, then also this issue will come, add the end-point to the URL and check
What worked for me was to turn-off / deselect the user-agent header field under request
componentWillUpdate() {
//Axios GET method for getting all the trades
//Adding data of db into mobx store/or syncing data of db and store
axios.get(`http://localhost:8091/trade`)
.then(res => {
this.props.store.arr = res.data;
})
}
This piece of code causing my browser to crash, my laptop to not responding.
Actually, whenever i was trying to delete the row of table containing trade by click of button then the trade was deleted but it took the need of refresh to see that the trade is deleted.
This was because my mobx store and db were not in sync.So as soon i refresh the (REST api) controller updates data in my mobx store.After this i can see that trade is deleted.
So in order to remove the need of refresh i thought to use component will update method.Within that method i tried to sync mobx store with controller data (db data).It worked but it caused the browser to take more than 2.5 gb of memory & at this point all the running applications starts getting crashed also.
So what is the good way to achieve the desired result?
Note i don't know why component will update is getting called too many times.
But i can verify the it because i can see the selection statements(of database) in spring (my server which is sending data to controller ).
Putting the above code inside component did mount is not removing the need of refresh but it is not causing the browser to crash also.
You should not be doing this type of operation in this lifecycle hook. You should use componentDidMount instead for any remote calls that need to happen. However since you are using mobx, you really should not be having these problems as they handle these type of problems for you with the observer pattern. Please read: https://mobx.js.org/getting-started.html to get up to speed and you should have no issues at that point.
Something in your component's props or state is causing it to update often, which is causing a lot of calls to the api. Your best bet would be to find out what is causing those updates and use nextState and nextProps arguments supplied to componentWillUpdate to check and send an api call only when needed. Something like:
componentWillUpdate(nextProps,nextState) {
if (nextProps.needToGetApi !== this.props.needToGetApi) {
//Axios GET here, so that unrelated prop/state change does not cause this to run
}
}
Hint: Add a breakpoint in componentWillUpdate and see what props or state mutations are happening on each call.
My application has to make an API call, that returns an array of items that gets styled and rendered to the screen. To make my SSR rendering work, I have to make the API request on server of course, but when using the SSR you also have to rerender (using ReactDOM.hydrate) on the client and I'm making the 2nd API request in here.
Since the API request takes more than 2 seconds, doing it 2 times is so inefficient. Is there a workaround around that by only doing 1 request and someway using the data on both server and client?
This is how you fetch data on a server and reuse it on client - straight from the redux documentation. If you are not using redux you will need to implement something very similar.
To answer the latter question - how to avoid making another request on the client? You just need to check if the data is there :)
componentDidMount() {
if(!this.props.isDataFetched) {
this.props.fetchData();
}
}
or maybe...
componentDidMount() {
if(this.props.data.length === 0) {
this.props.fetchData();
}
}