nextjs api not working when fetching through isomorphic-unfetch - javascript

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.

Related

postman: You need to enable JavaScript to run this app

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

Can't get cookies with js-cookie and react

I'm using Nextjs and trying to make multi language application. Multi langugage working properly but when I'm trying get language code with cookie like 'en', getting error.
This way working;
initialLang = 'en';
setDefaultTranslations({en, fr});
setLanguage('en');
But when I'm trying to set initialLang with cookie not working.
This way not working
initialLang = Cookies.get('lang');
setDefaultTranslations({en, fr});
setLanguage(initialLang);
To solve your problem you need to step back and understand the problem. The main problem about the cookie is you need to split your code to read&write cookie for server and client. js-cookie works for only client-side. Basically, it works on the client because it works with document.cookie. When it calls document in next.js SSR, the backend code is not able to read the document because it does not exist. If you would like to read cookie in SSR you need to catch it from expressjs request and pass into react state. I would recommend you to use https://github.com/andreizanik/cookies-next which already solves this problem (implementation)
Probably, you're not using them in componentDidMount hook:
componentDidMount() {
// get cookie
// set state to update the language
}

how to stop calling more requests in vuejs

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.

error when I try to fetch calendar events through google API, JS React

For some reason; I get error when trying to get my calendar events through google API. I code in JS and use React and have no idea why it does not work.
I have the token stored in sessionStorage and do get personal information about the user like name email and such stuff but I cannot proceed and get the calendar events. Please help!
I'm not sure what exactly you would like to see inside my App but let me know and I'll provide with the stuff because I do not want to upload the whole project lol
https://gyazo.com/37433e19f07e441adf368d1bbcad78e6
Maybe try to return res.send as you use async/await and it returns promise
I changed the structure of the app and I do now receive cal events when I hit one of my endpoints, but receiving other kind of error now, anyway this one can be closed.
Cross-origin request blocked, origin 'null' no access

Notification count in Angular by the help of node js

i am new in programming. I have a conceptual question.
I have a API /getNotificationCount/{userId} to get count of any type of notification for every user. {userId} is int value. (Backend API buit in Symfony2)
In front end i am using angular, right now i am calling /getNotificationCount/{userId} API every time(by the help of timeout function) in angular controller(ajax call) to get count.
Is there is any way to do when server hits changes(increase or decrease count) then i will get api request to get count. I searched many thing i found by the help of node js i can do this but i am unable to understand how can i start ? Can anyone please give me suggestion on this ?
Sounds like you need WebSockets, have a look here to get started
try to use firebase to send notification.
for server side you should use firebase admin and messaging function .
i use it in my react native front and nodeJs back project

Categories

Resources