

何かをPOSTした後、即座にその内容がReactで表示されるようにしたいです。

データベース(prisma)の方には即座にデータが書き込まれていますが、そのfeedがReact側に更新されません。

一応更新はされるのですが、十秒くらい時間を置いた上で、そのウインドウを離れて別のウインドウをクリックしてから、元のウインドウに戻ってこないと、更新されません。

[code]

    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>
      );
    };
    
[/code]


CC BY-SA 4.0
2022-12-03T09:07:23.547
92552
2022-12-03T09:07:23.547
25296
question
reactjs
POSTした後、mutateでデータが更新されない swr fetcher