Question
How do I load new data every time it is added to the server?
What I would like to have happen
User opens app
User uploads text to server
The app displays the text from the server immediately
What is currently happening
Users uploads text to server
User reloads app
The app displays the text from the server
Server Side
I am using expressJS for the server and then I am saving all of the text that the server gets to an off-site mongoose DB.
More info
I am using a Node JS server
I am using the fetch API to communicate between the server and the
client
The client app is written with React Native
I don't know how your app makes requests. Some code from both server and client would be useful. But i can think two possible solutions for your situation:
Return your text from upload request
Since you need server's response AFTER user uploads text to server, you can use response data within upload request. Here is an example code:
fetch('https://your-server.com/api/upload-text/', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
text: 'yourValue',
})
}).then(response => response.json())
.then(responseJson => {
// Here is your text returned from server
let serverText = responseJson.text
// Set your state here with new data
this.setState({
textFromServer: serverText
});
// Now you can display new data in your render method.
})
With this way, users do not need to reload the app to fetch new text data. Your app will be updated after server responds to upload request.
WebSocket
If the data that you need from server is not depends on a client request, you can use websockets. With this way, you can fetch / send any data from server or from other clients any time. React Native supports websockets. More on here
Related
I have an Express/Node server with an endpoint to provide the PDF, and a React client that is making a get request to that endpoint.
Currently the PDF is in what I believe is raw pdf binary data string form (obtained from the response of a separate api request), and on the client side I want to click a button in the browser and have the PDF download.
I'm not sure what is needed on the server side and on the client side to successfully trigger
the download on request.
Do I need to convert the binary PDF data to something on the server side first? Or does this get handled on the client side?
And what would be the code to do this?
Server:
const servePDF = async (req, res) => {
const pdfBinary = '%PDF-1.4 %âãÏÓ 2 0 obj <</ColorSpa ......'
~code here to send pdf as response~
}
Client:
const downloadPDF = async () => {
~get request code here, to run onClick of a button, to download file~
}
I have 2 node microservices and an event bus (which links all the microservices) running for my web app . one is basically a storage server and the other is the admin server . when a user signup the request (its content type is ['Content-Type', 'application/x-www-form-urlencoded' ] ) is first received by my event bus and if the request contains a profile photo as multipart/form-data the request is redirected to my storage server
but when storage server recives the request it is getting the body part as binary
and its content type is different
my storage server is working perfectly fine when I use postman and its content type will be this when I send it from postman
I am using AXIOS to redirect the request from one server to another is that is the problem ?
I think you shouldn't define content-type twice in axios.post() method. Check for example this:
axios.post('https://httpbin.org/post', { hello: 'world' }, {
headers: {
'content-type': 'text/json'
}
});
from https://masteringjs.io/tutorials/axios/post-headers
Apologies if I sound uneducated on the matter, I have never used JS until a few days ago and don't have much server/API experience.
Essentially I am using nextauth.js to authenticate a users twitter account and allow them to sign into an app. Next.js is providing them with a sign in option and once they sign in and authorize the app I now have access to their api key/ secret.
I also created an app in node.js that will allow me to change their twitter header for them. This runs on a separate port. I need to be able to send the key/secret I get from the next.js app to the node server so that I can use these keys to make the changes to their account. I am unsure of how to do this and what type of requests are required.
Ive spend a good amount of time looking into online resources but I haven't been able to conceptualize it fully. Any help/resources/explanations would be very appreciated! Thank you in advance!
if you have access to secret key you wanna send on the client-side you can simply use fetch
const response = await fetch('https://yourbackend.url/here', {
method: 'POST', // make sure the method is set to POST
headers: {
'Accept': 'application/json, text/plain, */*',
'Content-Type': 'application/json'
},
body: JSON.stringify({secretKey: "yourseceretkeyhereaslkdaasldkaslkdjlask"}) // send the secret as payload in the body
}).then(res => res.json())
.catch(console.log);
catching the payload on your server will totally depend on what kind of server you have setup.
I'm working on a web application built with react js in the front-end and express js in the back-end, i'm also using MongoDB as a database.
I was following this tutorial in which the YouTuber is using Axios in order to connect between the react js application and the express js API.
Right now i have two questions :
is Next JS used for these kind of things ? if not, what is Next js ?
Should i use Axios like the tutorial ? or there is a better solution for this situation ?
Thank you in advance.
Next Js is basically lets you build server-side rendering and static web applications using React.
You can use following way to connect to your Nodejs backed from react using axios
axios.post(url,data, {
headers: {
'authorization': your_token,
'Accept' : 'application/json',
'Content-Type': 'application/json'
}
})
.then(response => {
// return response;
})
.catch((error) => {
//return error;
});
Where your_token is authenticate token if you have any, url is the nodejs url you want to access and data is the body you supply to post data to your node server.
To fetch data you can use the awesome built in fetch or axios library:
fetch(/* url to your backend, eg. http://localhost:3000/mydata */
, /* notice comma */
/* other options, eg. method: ”post” */)
.then(response => res.json() /* convert server response from string to JSON */)
.then(data => /* your data array or object like */)
for details: MDN: fetch API
check your browser's console for cors issues 😟
Using create react app you are building a single page app (SPA) which is the standard, that whole app served as a JS bundle to your client browser and after that you fetch data only from server.
On the other hand Nextjs is a server side rendering which is the best of two worlds, it helps with higher page ranking on search engines, lift the heavy load from clients especially (low powered mobile devices) and more
Check this if interesting nextjs
I have two servers. One is my api server and other one is my rendering server. Both are in node js. When I call any api from my rendering server to my api server using axios and get the req.headers['user-agent'] in my api server then it gives me only axios/0.15.2. But I want the complete user agent info like browser, os, device etc. How do I get those info?
Set a custom header like:
var config = {
headers: {'X-My-Custom-Header': 'Header-Value'}
};
axios.get('https://api.github.com/users/codeheaven-io', config);
axios.post('/save', { firstName: 'Marlon' }, config);
https://github.com/axios/axios/issues/69