Closed sj602 closed 6 years ago
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?
@pat310 I don't understand by 'hit a route on a server'. I am learning to code now. Can you explain it more?
Gotcha, what I mean is you should set up a little API that you can use from your react-native app.
/interestOverTime/{keyword}
where {} denotes a parameterExample:
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.
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
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);
});
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.
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
The result I can get is from the console is Promise { "_40": 0, "_55": null, "_65": 0, "_72": null, }
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.
I think you should see the whole code in my github https://github.com/sj602/invescoin/blob/master/components/Bubble.js#L54
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.
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.
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.
it's the same. No log on the console...
Did you get it figured out @sj602 ?
Yeap. The problem was localhost. I changed it to my IP address and then It worked! Thank you for your sincere help!!
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