new to backend- .json formatting data - node.js

Question

Hey guys I have been coding a little over a year now and focused almost entirely on front end (js, BUNCHA frameworks, CSS, html, etc etc)
it wasn't until literally yesterday that I came across the infamous CORS issue with spotify API.
while i have finished a udemy course that taught me a good deal of node.js/express i really didn't understand how to combine it all with front-end (react) until the other day. i started practicing
fetching data from the pokemon API before going to spotify simply because it is much easier to do (lol)... but i also know i can use express to enable cors etc. for the spotify app. ALL THAT ASIDE my question is essentially about parsing data into json using the simple .json() method.
how come in my backend (where i fetch the results) i have to use data.json() and then AGAIN i have to do it all? how come i also have to reimplement the async/await stuff in both iterations when it should all be done in the initial fetchdata function?
here is my fetchData.js file ---- where i initially call to the API
import fetch from "node-fetch"
const fetchData=async()=>{
const data=await fetch('https://pokeapi.co/api/v2/ability')
const res=await data.json()
const final=res.results
return res.results
}
export default fetchData
here is my server.js file where i call that function and send the data over when i client requests something from the path '/api/data'
import express from 'express';
const app=express()
import axios from 'axios'
import cors from 'cors'
import fetchData from './fetchData.js'
app.use(cors())
app.get('/api/data', async (req, res)=>{
const data=await fetchData()
res.send(data)
})
app.listen(3000, ()=>{
console.log('listening on port 3000')
})
and lastly here is my react component which makes a call to that path using the retrieval() function... how come i have to keep repeating async await logic AND .json() calls when the data seems to already be parsed and ready to go in the fetchData() function?
import React, {useState, useEffect} from 'react'
const Customers = () => {
const [pokemon, setPokemon]=useState([])
useEffect(()=>{
const retrieval=async()=>{
const data=await fetch('api/data')
const res=await data.json()
setPokemon(res)
}
retrieval()
console.log(pokemon)
},[])
return (
<div>
<ul>{pokemon.map(poke=>(
<li>{poke.name}</li>
))}</ul>
</div>
)
}
i guess if someone could just walk me through the whole process in layman's terms. im pretty decent with front-end, ui, and react etc.. but connecting backend is totally new to me and tbh the json.stringify(), json.parse(), and .json() stuff always confuses me... i usually just guess until it works haha. thanks in advance...

Answer 1

The reason you need to call .json() each time, is because you are actually making two API calls.
The first call is in the fetchData() function, where you are calling the Pokemon API.
The second call is in your retrieval() function, where you are actually calling your own API.
This is standard industry practice, and is always recommended to make calls to external APIs by way of a custom API endpoint from the frontend, instead of directly calling the external API from the frontend.
As a side note, you could easily utilize axios, which you seem to already have imported, to make the code a bit cleaner.
fetchData.js
import axios from 'axios';
const fetchData = async () => {
const response = await axios.get('https://pokeapi.co/api/v2/ability');
return response.data;
};
export default fetchData;
server.js
import express from 'express';
const app = express();
import cors from 'cors';
import fetchData from './fetchData.js';
app.use(cors());
app.get('/api/data', async (req, res) => {
const data = await fetchData();
return res.send(data);
});
app.listen(3000, () => {
console.log('listening on port 3000');
});
page.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';
const Customers = () => {
const [pokemon, setPokemon] = useState([]);
useEffect(() => {
const retrieval = async () => {
const response = await axios.get('http://localhost:3000/api/data');
setPokemon(response.data);
};
retrieval();
console.log(pokemon);
}, []);
return (
<div>
<ul>{pokemon.map(poke => (
<li>{poke.name}</li>
))}</ul>
</div>
);
};