何かをPOSTした後、即座にその内容がReactで表示されるようにしたいです。
データベース(prisma)の方には即座にデータが書き込まれていますが、そのfeedがReact側に更新されません。
一応更新はされるのですが、十秒くらい時間を置いた上で、そのウインドウを離れて別のウインドウをクリックしてから、元のウインドウに戻ってこないと、更新されません。
import { useState } from "react";
import { mutate } from "swr";
import { fetcher } from "./util/fetcher";
import { useFeed, useMe } from "./util/hooks";
import { Button, message, Input, Row, Col } from "antd";
export const CreateTweetForm = () => {
const [input, setInput] = useState("");
const { feed } = useFeed();
const { me } = useMe();
return (
<form
style={{ padding: "2rem" }}
onSubmit={async (e) => {
e.preventDefault();
if (input.length < 1) {
message.error("Oops! You can't create empty tweets.");
return;
}
mutate("/api/feed", [{ text: input, author: me }, ...feed], false);
fetcher("/api/tweet/create", {
text: input,
});
setInput("");
}}
>
<Row>
<Col>
<Input value={input} onChange={(e) => setInput(e.target.value)} />
</Col>
<Col>
<Button htmlType="submit">Tweet</Button>
</Col>
</Row>
</form>
);
};