javascript - 触发缓存以确保数据正确问题 - swr hook - next.js (使用 typescript )

Question

在我的 next.js 应用程序中，我使用 swr 钩子(Hook)，因为它提供缓存和实时更新，这对我的项目( facebook 克隆)来说非常有用，但是，有一个问题。

问题是，在我的出版物中，我将它们与 getStaticProps 一起获取，并且我只是映射数组和一切都很棒，但是，当我执行某个操作(例如喜欢帖子或评论帖子)时，我改变缓存，我认为它的作用是询问服务器缓存中的信息是否正确。

但是，它真正的作用是，它会进行另一个 API 调用，而问题是，如果我喜欢某个出版物，在调用 API 之后确保缓存中的一切都正确，如果有 30 个新出版物，它们将出现在屏幕上，我不希望这样，我希望屏幕上的用户在开始时请求的酒吧，想象一下在帖子上发表评论，然后有 50 个新帖子，所以你丢失了您发表评论的帖子...

让我向您展示一些我的代码。

首先，让我向您展示我的帖子界面

// Publication representation

export type theLikes = {
  identifier: string;
};

export type theComment = {
  _id?: string;
  body: string;
  name: string;
  perfil?: string;
  identifier: string;
  createdAt: string;
  likesComments?: theLikes[];
};

export interface Ipublication {
  _id?: string;
  body: string;

  photo: string;

  creator: {
    name: string;
    perfil?: string;
    identifier: string;
  };

  likes?: theLikes[];

  comments?: theComment[];

  createdAt: string;
}

export type thePublication = {
  data: Ipublication[];
};

这是我打电话获取所有帖子的地方

const PublicationsHome = ({ data: allPubs }) => {
  // All pubs

  const { data: Publications }: thePublication = useSWR(
    `${process.env.URL}/api/publication`,
    {
      initialData: allPubs,
      revalidateOnFocus: false
    }
  );


  return (
          <PublicationsHomeHero>
            {/* Show pub */}
            {Publications.map(publication => {
              return <Pubs key={publication._id} publication={publication} />;
            })}
          </PublicationsHomeHero>
        </>
  );
};

export const getStaticProps: GetStaticProps = async () => {
  const { data } = await axios.get(`${process.env.URL}/api/publication`);

  return {
    props: data
  };
};

export default PublicationsHome;

例如，这就是我创建评论、更新缓存、调用 API，然后进行变异以查看数据是否正确的方式

  // Create comment

  const handleSubmit = async (e: FormEvent<HTMLFormElement>): Promise<void> => {
    e.preventDefault();

    try {

      mutate(
        `${process.env.URL}/api/publication`,
        (allPubs: Ipublication[]) => {
          const currentPub = allPubs.find(f => f === publication);

          const updatePub = allPubs.map(pub =>
            pub._id === currentPub._id
              ? {
                  ...currentPub,
                  comments: [
                    {
                      body: commentBody,
                      createdAt: new Date().toISOString(),
                      identifier: userAuth.user.id,
                      name: userAuth.user.name
                    },
                    ...currentPub.comments
                  ]
                }
              : pub
          );

          return updatePub;
        },
        false
      );
      await createComment(
        { identifier: userAuth.user.id, body: commentBody },
        publication._id
      );
      mutate(`${process.env.URL}/api/publication`);

    } catch (err) {
      mutate(`${process.env.URL}/api/publication`);
    }
  };

现在，在创建评论后，正如我已经提到的，它会再次调用 API，如果有新帖子或其他内容，它将出现在屏幕中，我只想保留我拥有的帖子或如果我是创建它们的人，请添加新的。

那么，假设我喜欢某个帖子

一切都很棒而且很快，但是，在确保数据正确后，会出现另一篇文章，因为另一个用户创建了它

有没有一种方法可以确保数据正确，而无需再次调用 API 来向屏幕添加更多帖子？

我是这个 swr 钩子(Hook)的新手，所以，希望你能帮助我，感谢你的时间!

更新

有一种方法可以更新缓存而无需重新获取

许多 POST API 会直接返回更新后的数据，因此我们不需要再次重新验证。下面是一个显示“本地变异 - 请求 - 更新”用法的示例:

mutate('/api/user', newUser, false)      // use `false` to mutate without revalidation
mutate('/api/user', updateUser(newUser)) // `updateUser` is a Promise of the request,
                                         // which returns the updated document

但是，我不知道应该如何更改我的代码来实现这个，有什么想法吗!？

Answer 1

如果您想更新缓存，并确保一切正常，而无需再次调用 API，这似乎可行

改变这个

await createComment(
        { identifier: userAuth.user.id, body: commentBody },
        publication._id
      );

mutate(`${process.env.URL}/api/publication`);

为此

 mutate(
        `${process.env.URL}/api/publication`,
        async (allPublications: Ipublication[]) => {
          const { data } = await like(
            { identifier: userAuth.user.id },
            publication._id
          );

          const updatePub = allPublications.map(pub =>
            pub._id === data._id ? { ...data, likes: data.likes } : pub
          );

          return updatePub;
        },
        false
      );

您在那里所做的就是使用您将从 API 操作接收数据的数据更新缓存，并将其放入缓存中，但是，您还必须设置 false，这样它就不会重新验证再次，我尝试了一下，它工作正常，不知道将来是否会遇到问题，但据我所知，它工作得很好!