'https' module issue

[sj602]

I want to use google-trends-api in React Native. I tried to do that but it returned an error saying:

I installed 'https' module in my project folder and in node_module folders but it didn't help. I thought it would be because of only RN's problem so I tested it out on the webpage in React and I checked it worked on the web in React! but why not React Native? I also guess I made my project with 'create-react-native-app' so possibly that would be it.

node.js : 8.9.4 npm : 4.6.1 google-trends-api : 4.3.0 https : 1.0.0 react : 16.0.0 react-native : 0.50.3

[pat310]

hello @sj602! The https module that google-trends-api uses is from node https://nodejs.org/api/https.html. Really this library is meant to be used in node on the server because of CORS issues. Can you set up your react-native app to hit a route on a server that is hosting the google-trends library?

[sj602]

@pat310 I don't understand by 'hit a route on a server'. I am learning to code now. Can you explain it more?

[pat310]

Gotcha, what I mean is you should set up a little API that you can use from your react-native app.

1. Set up a basic server using express js.
2. Put your google-trends code on this server.
3. Create your API by setting up various routes like /interestOverTime/{keyword} where {} denotes a parameter
4. When the user makes a GET request to the route you setup (via an ajax request on your react-native app), you run your google-trends code the response of which you return from your API.

Example: Say your server is setup on port 8080 and you create a route /interestOverTime/{keyword}. The user comes on your react-native app and types dogs into a text box and clicks a button. That button then fires off an ajax request to http://localhost:8080/interestOverTime/dogs which runs your google-trends server code `googleTrends.interestOverTime({keyword: 'dogs'}). Google-trends eventually returns some JSON response about dogs, which your server then sends back to the react-native app. The app then renders that JSON response accordingly.

[sj602]

OK. I made a server but I don't know if this is a right way to do this. Can you check it out please?

app.js(server) `` const express = require('express'); const googleTrends = require('google-trends-api');

const app = express(); const port = 3000;

app.get('/interestOverTime/:keyword', (req, res) => { return googleTrends.interestOverTime({ keyword: req.params.keyword }) .then(data => data) .catch(err => console.log(err)) }); app.get('/', (req, res) => { console.log('hello world!') }) app.listen(port, () => { console.log(Server running on http://localhost:${port}) }); ``

api.js(frontend : React Native) const GoogleTrends_URL =http://localhost:3000/interestOverTime/; export const getGoogleTrendsData = (keyword) => { return fetch( ${GoogleTrends_URL}${keyword}, { method: 'GET', headers, } ) .then(res => res.json()) .then(data => data) }

For more details : Link

[pat310]

This looks pretty good! One comment, I think for the server instead of returning the promise inside of app.get you should use the res parameter from expressJS to send back the response:

app.get('interestOverTime/:keyword', (req, res) => {
  googleTrends.interestOverTime({
    keyword: req.params.keyword,
  })
  .then((data) => {
    res.json(JSON.parse(data));
  })
  .catch((err) => {
    console.log(err);
    res.sendStatus(500);
  });

[sj602]

Thanks! but I have a problem rendering the result into my react native app.

`

       <View>

        <TextInput
         value={this.state.keyword}
         onChange={(e) => this.handleKeyword(e)}
         placeholder='keyword'
        />

        <Button
          onPress={() => this.setState({
            result: api.getGoogleTrendsData(this.state.keyword)
          })}
          title='Find'
        />

      </View>

      <Text>

        Google Trends Result for {this.state.keyword}: {this.state.result}
      </Text>

    </View>

` The error is : Invariant Violation : Objects are not valid as a React child (found: object with keys{_40, _65, _55, _72). if you eant to render a collection of children, use an array instead.

[pat310]

Can you check that the API is returning the right stuff? Either check in the dev console or add a console.log in your server to make sure the data looks correct. I think what you'll probably see is that the data is a object where one of the values is an array - you probably want to render that instead of the object. Either that, or JSON.stringify what you get back from api.getGoogleTrendsData so it renders as text

[sj602]

The result I can get is from the console is Promise { "_40": 0, "_55": null, "_65": 0, "_72": null, }

[pat310]

Can you show the code you are console logging?

On Feb 5, 2018, at 07:04, Jin Seon notifications@github.com wrote:

The result I can get is from the console is Promise { "_40": 0, "_55": null, "_65": 0, "_72": null, }

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[sj602]

I think you should see the whole code in my github https://github.com/sj602/invescoin/blob/master/components/Bubble.js#L54

[pat310]

api.getGoogleTrendsData returns a promise which is why you are seeing what you are seeing when you console log it. Read about promises.

Also, add a console.log in your serve to log “data”. You should see trend data

On Feb 5, 2018, at 08:05, Jin Seon notifications@github.com wrote:

I think you should see the whole code in my github https://github.com/sj602/invescoin/blob/master/components/Bubble.js#L54

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[sj602]

Okay. I tried every way that I could come up with.

1. server.js console.log(res.json(JSON.parse(data))) but there is no log on the console.

2. api.js export const getGoogleTrendsData = (keyword) => { return fetch( ${GoogleTrends_URL}${keyword}, { method: 'GET', headers, } ) .then(res => console.log('res', res)) } it's the same.

3. Bubble.js onPress={() => { api.getGoogleTrendsData(this.state.keyword).then(data => console.log(data)); }} it's the same.

[pat310]

On the server, console.log(data)

On Feb 5, 2018, at 09:33, Jin Seon notifications@github.com wrote:

Okay. I tried every way that I could come up with.

server.js console.log(res.json(JSON.parse(data))) but there is no log on the console.

api.js export const getGoogleTrendsData = (keyword) => { return fetch(${GoogleTrends_URL}${keyword}, { method: 'GET', headers, } ) .then(res => console.log('res', res)) } it's the same.

Bubble.js onPress={() => { api.getGoogleTrendsData(this.state.keyword).then(data => console.log(data)); }} it's the same.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[sj602]

it's the same. No log on the console...

[pat310]

Did you get it figured out @sj602 ?

[sj602]

Yeap. The problem was localhost. I changed it to my IP address and then It worked! Thank you for your sincere help!!