BridgeServer does not support URL/GET variables

[silencer07]

Basically I am trying to workaround issue #32

I am appending the fields as URL params:

const body = {
  id: escape(song.id),
  title: song.title,
  thumbnailUrl: song.thumbnailUrl,
  duration: song.duration,
};
const appendToUrl = new URLSearchParams(body).toString();
const result = await fetch(
  `http://${get().ipAddress}/songs?${appendToUrl}`,
  {
    method: "POST",
    body: JSON.stringify(body),
  },
);

however it seems that the server stopped responding anymore. I encountered this problem when the url path is wrong (i.e. /songsWrongPath instead of /songs)

[Alwinator]

I did a patch in 1.2.10 (https://www.npmjs.com/package/react-native-http-bridge-refurbished/v/1.2.10).
Please run npm install react-native-http-bridge-refurbished@1.2.10 and test again. Let me know if it is fixed! :)

[silencer07]

Hi. Sure I will be testing out

[silencer07]

hi @Alwinator

After installing the 1.2.10 version, basically I created a test endpoint to test this out

server.get("/", async (req, res) => {
    console.log("req", req);
    console.log("req.postData", req.postData);
    console.log("req.url", req.url);
    return { message: "OK" }; // or res.json({message: 'OK'});
  });

I am getting this output:

req {"postData": undefined, "requestId": "1705275411896:699522", "type": "GET", "url": "/"}

is there a way for me to get the url params given the this curl request?

curl -X GET -H "Content-Type: application/json" http://192.168.254.112:30000/\?hello\=hi

I don't think i can do something with the url field if the params are being stripped.

Thank you very much.

[Alwinator]

@silencer07 Sorry, I forgot to pass the parameters. Please try npm install react-native-http-bridge-refurbished@1.3.1. In addition to the postData (data) there is now a getData (urlData) which should provide your parameters. Again, please test it carefully, if it works I will move it to the main branch.

[silencer07]

Hi @Alwinator,

basically i tried using this snippet

server.get("/foo", async (req, res) => {
  console.log("req", req);
  console.log("req.getData", (req as any).getData);
  console.log("req.postData", req.postData);
  console.log("req.url", req.url);
  return { message: "OK" }; // or res.json({message: 'OK'});
});

i tried doing

curl -X GET -H "Content-Type: application/json" http://192.168.254.112:30000/foo\?hello\=hi

However I am getting this log

 LOG  req {"getData": undefined, "postData": undefined, "requestId": "1705981089030:487642", "type": "GET", "url": "/foo"}
 LOG  req.getData undefined
 LOG  req.postData undefined
 LOG  req.url /foo

so two issues:

• You need to update the typescript typing as it is showing error on IDE
• getData does not work

P.S. I checked the code in the node_modules folder but I am not seeing the getData implementation. maybe you forgot to package the newest code?

[Alwinator]

@silencer07 That is very weird, because on npm there is the latest code in: https://www.npmjs.com/package/react-native-http-bridge-refurbished/v/1.3.1?activeTab=code

Can you check out your node_modules folder if the bridgeServer.js file includes the getData attribute?
If npm is still not working please copy the contents of this file from GitHub to your local file in the npm folder and then test if it works.

I will do the TypeScript types once that works.

[silencer07]

@Alwinator alright will test. maybe I will delete the node_modules folder of the library to force it to redownload again

[silencer07]

@Alwinator I am seeing this code in bridgeServer.js

if(urlSplit.length > 1){
    const regex = /[?&]([^=#]+)=([^&#]*)/g;
    const params = {};
    let match;
    while (match = regex.exec(rawRequest.url)) {
      params[match[1]] = match[2];
    }
    this.getData = params;
  }else
    this.getData = undefined;

but same output, getData is undefined. maybe there is something wrong with the published code

[Alwinator]

@silencer07 Okay, I thought I can write it out of my mind. I need to setup React Native again. I hope I have time for that soon. Then, I will take a look at it. Thanks for testing. :)

[silencer07]

@Alwinator the fix is just let the url object be passed as it is and we can use URLSearchParams of javascript

i.e.

var url = 'foo?hello=hi'
var params = new URLSearchParams(url.substring(url.indexOf('?'))

console.log(params.get('hello')

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/URLSearchParams

[Alwinator]

@silencer07 I know that URLSearchParams are available in ReactJS, but are they also available in React Native?

[silencer07]

Definitely! we can use the latest ecma version(even bleeding edge) as long as it is supported by hermes itself(at least if you don't opt out of it)

If RN does not support it just in case, I think it won't be your problem as it is easy to create a key-value pair parser out of url string :D

[silencer07]

Sorry I entered too fast.

Basically if you pass the raw url with the url params, that's it. It is up to the consumer of your library to handle it :)

[Alwinator]

@silencer07 However, if you find another solution, feel free to submit a pull request that would speed it up! ;)

[silencer07]

@Alwinator fine with me. same predicament I am still busy productionizing my hobby app :D

Will definitely do!

[github-actions]

🎉 This issue has been resolved in version 1.3.2 🎉

The release is available on:

• npm package (@next dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[Alwinator]

@silencer07 I now had the time to actually test my code xD
It turns out that there were some changes needed in the Android code. URL Parameters are now supported for Android. ios support does not exist currently. Please test again and get back to me.

[silencer07]

@Alwinator i checked the commit, are you already passing the url as it is? i.e. foo?hi=hello

It is fine if getData won't be supported in iOS but at least I think I will need the raw url so I can do manipulations with it.

[Alwinator]

@silencer07 No I am passing the getData directly from the native Android Code.