Eu estou fazendo um app em React e gostaria de usar o Flask para salvar os dados do usuário em uma base de dados local. Eu consegui fazer o react e o flask "rodarem na mesma porta" e, assim, viabilizar uma conexão entre eles. Para isso, segui os seguintes passos (que podem ser vistos nesse tutorial):
1º Cria App em React
Criei o app usando npx
:
npx create-react-app react-flask-app
2º Cria API em Flask
mkdir api
cd api
python3 -m venv venv
source venv/bin/activate
(venv)
Código mínimo para exemplo:
import time
from flask import Flask
app = Flask(__name__)
@app.route('/time')
def get_current_time():
return {'time': time.time()}
3º Configura package.json
Adiciono a linha:
"proxy": "http://localhost:5000"
No primeiro "dicionário" do arquivo package.json
. Isso garante que React vai rodar na mesma porta do Flask. Por fim, no mesmo arquivo na chave scripts, adiciono:
"start-api": "cd api && venv/bin/flask run --no-debugger"
Com essas configurações - e as duas aplicações rodando em terminais diferentes -, posso receber dados do API usando fetch na minha aplicação em React. Exemplo:
import React, { useState, useEffect } from 'react';
function App() {
const [currentTime, setCurrentTime] = useState(0);
useEffect(() => {
fetch('/time').then(res => res.json()).then(data => {
setCurrentTime(data.time);
});
}, []);
return (
<div className="App">
<header className="App-header">
<p>The current time is {currentTime}.</p>
</header>
</div>
);
}
export default App;
Isso funcionou perfeitamente. No entanto, não sei como faço para enviar dados da minha aplicação em React para o API do Flask. Obviamente, se os dados estão dentro de um form, consigo usar os métodos POST e GET para enviar os dados para o Flask.
No meu caso, porém, minha aplicação gera um array de objetos que gostaria de enviar para o API e tratá-la com python. Minha array tem uma cara como essa:
const users= [
{
id: 1,
name: 'Leanne Graham',
username: 'Bret',
email: 'Sincere@april.biz'
},
{
id: 2,
name: 'Ervin Howell',
username: 'Antonette',
email: 'Shanna@melissa.tv'
},
{
id: 3,
name: 'Clementine Bauch',
username: 'Samantha',
email: 'Nathan@yesenia.net'
},
{
id: 4,
name: 'Patricia Lebsack',
username: 'Karianne',
email: 'Julianne.OConner@kory.org'
},
{
id: 5,
name: 'Chelsey Dietrich',
username: 'Kamren',
email: 'Lucio_Hettinger@annie.ca'
},
{
id: 6,
name: 'Mrs. Dennis Schulist',
username: 'Leopoldo_Corkery',
email: 'Karley_Dach@jasper.info'
},
{
id: 7,
name: 'Kurtis Weissnat',
username: 'Elwyn.Skiles',
email: 'Telly.Hoeger@billy.biz'
},
{
id: 8,
name: 'Nicholas Runolfsdottir V',
username: 'Maxime_Nienow',
email: 'Sherwood@rosamond.me'
},
{
id: 9,
name: 'Glenna Reichert',
username: 'Delphine',
email: 'Chaim_McDermott@dana.io'
},
{
id: 10,
name: 'Clementina DuBuque',
username: 'Moriah.Stanton',
email: 'Rey.Padberg@karina.biz'
}
];
Em resumo, creio que entendi como faço para receber dados no React vindos da API do Flask e enviar dados de um form. Mas como faço para enviar uma array de objetos?
P.S: Talvez tenha ficado um pouco abstrato o porquê de eu querer passar uma lista de objetos para a API. Então aqui vai uma explicação menos abstrata: minha aplicação é um pomodoro que gerar uma array com informação das sessões do usuário. Veja o código no Github. A variável que quero enviar para o API do Flask chama-se userData.
fetch
? Confesso que não entendi...