0

I am first fetching xml data from an external api in my backend and then trying to send that to the frontend.

Backend (server):

app.get("/api", (req, res) => {

   var request = require('request');

   var options = {
     'method': 'GET',
     'url': 'http://link',
     'headers': {
     }
   };

   request(options, function (error, response) {
     console.log("TEST1")
     console.log(response.body)
     if (error){
       console.log("TEST2")
       res.status(404).write("NO LUCK"); 
     } 
     console.log("TEST3")
     res.status(200).write(response.body);
   });

});

The xml appears in my terminal correctly. TEST1 and TEST2 do too.

Frontend (client):

import XMLParser from 'react-xml-parser';

useEffect(() => {
    
  fetch("/api")
  .then(res => res.text())
  .then(data => {
      var xml = new XMLParser().parseFromString(data); 
      console.log(xml)
  })
  .catch(err => console.log(err));
        
}, []);

Nothing appears on the console. I got the frontend code from this stack overflow post.

fetch("/api")
   .then((res) => res.body)
   .then((data) => console.log(data));

If I log the response body like this I get a ReadableStream object. This is the only functionality I've been implementing so far so nothing should be interfering with it. When I try different approaches I keep needing to restart React or it will load endlessly when I refresh.

When I open http://localhost:3001/api I can see the xml data I'm trying to transfer.

Samkayoki
  • 59
  • 5
  • Debug the code. First make sure you reach the code. The make sure you have data. – jdweng Jan 13 '23 at 10:45
  • @jdweng I made some edits based on your feedback, didn't realize to console.log in the backend. In the frontend console.log(xml) is not being reached as it doesn't log anything, even if I change it to console.log("xml"). – Samkayoki Jan 13 '23 at 11:25
  • 1
    I'm not sure which is your client and which is the server. Frontend/Backend is confusing in this posting. A client sends a request (PUT) and then server receives request (GET). The server returns a response (Post) and client receives the response (GET). Often the Get and Are backwards. You can use a Controller at both client and server and often the same code on web don't specify if the code is running at a Client Controller or a Server Controller. – jdweng Jan 13 '23 at 11:34
  • @jdweng In my case frontend is client and backend is server. I'm trying to have the client make a GET request to the server, have the server make a GET request to the external API. Server (my backend) should receive the xml, and send it to client. Will edit the post again. – Samkayoki Jan 13 '23 at 11:57
  • @jdweng Nodemon was not restarting the server for some reason and that's why TEST's weren't appearing. Also when I open http://localhost:3001/api in browser (server is running on port 3001) it displays the xml data – Samkayoki Jan 13 '23 at 13:06
  • 1
    Your server is a two port application. Port one is the server to client. Port two is a client to a database (or equivalent). Are you still having a restart issue? – jdweng Jan 13 '23 at 13:53
  • @jdweng Yeah it still won't restart by itself, but for now I've been more focused on solving the problem of the xml so I've just been restarting it manually. I can send res.json({message: "hello!" }) to frontend no problem, but parsing or logging any xml is still unsuccessful. – Samkayoki Jan 13 '23 at 17:01
  • See if this helps : https://stackoverflow.com/questions/17951384/how-to-post-xml-into-mvc-controller-instead-of-key-value What error are you getting? – jdweng Jan 13 '23 at 17:26
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/251125/discussion-between-samkayoki-and-jdweng). – Samkayoki Jan 13 '23 at 19:01
  • The only real difference between a Get and a Post is the Post contains a body while a Get does not have a body. Get usually means you request is asking server to return data. A Post contains body data. The response from either a Get or Post may or may not contain a body. A server usually will give an error if it expects a body and does not find the body. Also some servers will report an error if a request has a body and doesn't expect a body. Every server is different and some will do error checking and others will not. – jdweng Jan 14 '23 at 10:27

1 Answers1

0

Still not sure why it didn't work before but it works with this.

Frontend (client):

import axios from "axios";

axios.get('/api')
.then(xml => {
    console.log(xml.data);
})

Backend (server):

app.get('/api', (req, res) => {

   var axios = require('axios');

   var config = {
     method: 'get',
     url: 'http://link',
     headers: {'Content-Type': 'application/xml'}
   };

   axios(config)
   .then(function (response) {
     res.json(response.data);
   })
   .catch(function (error) {
     console.log(error);
   })

})
Samkayoki
  • 59
  • 5