CODEWITHSUNDEEP
node.jsreactjs
Thomas_Vcheck
Thomas_Vcheck

Reputation: 192

How to use my node API calls in my react?

I'm new to react and I have some comprehension issue. On my project I have the backend made in node. Node is use to make the api's call. But my issue is that how Am I suppose to get the data from the json returned by the node in my react ? I tried to store the function inside a variable, but I have an error saying that it's an object and not a function so toto can't hold it. Here's the example.

Nodejs

module.exports.getArtistTopTracks = async (id, market = "from_token") => {
    if (!global.userInfo && !global.userInfo.access_token)
        return undefined;

    const result = await fetch(`https://api.spotify.com/v1/artists/${ id }/top-tracks?market=${ market }`, {
        method: "GET",
        headers: { "Authorization": `Bearer ${ global.userInfo.access_token }` }
    });

    return await result.json();
};

and in my react I tried to stock it like that

import { 'getArtistTopTracks' } from 'my_path'
function tata()
{
var toto = getArtistTopTracks()
console.log(toto)
return (
        <div>
            <PrimarySearchAppBar />
            <h1 style={{fontSize: 50}}>Discover</h1>
        </div>
    ) 
}

Upvotes: 0

Views: 25

Answers (1)

cyco130
cyco130

Reputation: 4934

React is a frontend library. With the exception of server-side rendering (which I'll talk about below), it is supposed to run on the client-side (the browser), not on Node.JS. You will need to find a way of communication between your Node.JS backend and your React frontend. The usual way is to issue HTTP requests from your frontend and handle them on your backend.

One exception to this is using server-side rendering where the React library is used to create HTML (as a string) so that the page loads instantly, at which point the client-side React takes over to process events and such. But even then, since the same React code is gonna run on the client as well as the server, using Node.JS functions will not work.

Upvotes: 2

Related Questions