0

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.

2
  • Não entendi qual o problema. Porque não envia esse array no JSON via POST? Você não sabe como fazer isso usando fetch? Confesso que não entendi... 25/05/2021 às 1:15
  • Eu não sei como fazer isso usando fetch. Na verdade, descobri essa função hoje e havia entendido que ela só servia para receber dados da API (até tinha pensado em perguntar qual o contrário da função fetch). Como faço para enviar dados usando fetch?
    – Lucas
    25/05/2021 às 1:27

1 Resposta 1

0

Como sugerido nos comentários, é possível usar a mesma função fetch para enviar um objeto para o API do flask. Para isso é necessário adicionar alguns parâmetros na função:

useEffect(() => {
    const requestOptions = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({test: "Mensagem no terminal do flask e no console")
    };
        fetch('/home', requestOptions)
        .then(response => response.json())
        .then(data => console.log(data));        
    }, []);

No Flask, usa-se request.json para acessar o dado recebido, conforme documentação:

@app.route('/home', methods=['GET', 'POST'])
def post():
    result=request.json
    print(result)
    return result
1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .