使用React Query和Flask来发布和获取

Question

我正试图从一些输入字段发布一些数据，将其发送到我的Flask后端，然后有一些新的数据返回给我。

目前我用常规的fetch选项做这个，但我想我可能会尝试简化我的代码一点。然而，我可能只是愚蠢的，或者还没有找到它，但我似乎无法找出方法来做到这一点，例如React查询(也有像SWR这样的选项，我猜)。

现在我的fetch函数，在一个提交按钮上被调用，看起来像:

const MyApp = () => {
const returnObjects = {
returnData1: [],
returnData2: [],
returnData3: [],
};
const [data, setData] = useState(returnObjects);
const [loadingState, setLoadingState] = useState(false);
function fetchData(e?: any) {
e?.preventDefault();
setLoadingState(true);
fetch(`/api`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
input1: inputOne
input2: inputTwo,
}),
})
.then(async (response) => {
const json = await response.json();
setData({
returnData1: json.returnData1,
returnData2: json.returnData2,
returnData3: json.returnData3,
});
setLoadingState(false);
});
}
const [inputOne, setInputOne] = useState(null);
const [inputTwo, setInputTwo] = useState(null);
return (
<form onSubmit={fetchData}>
<input type="number" value={inputOne} onChange={(e) => setInputOne(e.target.value)} />
<input type="number" value={inputTwo} onChange={(e) => setInputTwo(e.target.value)} />
<button type="submit">Fetch data</button>
</form>
<div>
<p>{data.returnData1}</p>
<p>{data.returnData2}</p>
<p>{data.returnData3}</p>
</div>
)
}
export default MyApp;

所以基本上我从我的输入字段发布数据，然后给Flask后端，它做一些计算，并返回返回的数据对象。

再一次，这可以实现与React查询以及，还是…?

我见过人们使用mutation之类,但突然我不认为代码更加简洁是诚实的。我根本不需要存储作为输入的数据。当我点击提交按钮时，我只需要根据输入变量从后端输出一些结果。

Answer 1

你很可能寻找突变:如果你有一个POST请求,创建后端,这不是一个查询但突变。

如果突变返回数据，并且您也有一个获取该数据的查询，您可以使用来自突变响应的更新来更新该数据，而不是重新获取它。

Answer 2

看其他答案，使用变异是正确的方法。