Javascript 触发缓存以确保数据正确无误问题-swr hook-next.js（使用typescript）

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

问题是，在我的出版物中，我将它们与getStaticProps一起获取，我只是映射数组和所有伟大的东西，但是，当我做一个动作时，比如，喜欢一篇文章，或者评论一篇文章，我会改变缓存，我认为这样做的目的是询问服务器缓存中的信息是否正确

但是，它真正做的是，它进行另一个API调用，问题是，如果我喜欢一个发布，在调用API以确保缓存中的所有内容都正确后，如果有30个新发布，它们将出现在屏幕上，我不希望这样，我想要屏幕上的用户在Begging请求的酒吧，想象一下在一个帖子上出现，然后有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;

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

// 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，这似乎是可行的

改变这个

等待评论(
{标识符：userAuth.user.id，正文：commentBody}，
出版物。\u 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，这样它就不会再重新验证了，我试过了，它正在工作，不知道我将来是否会遇到问题，但就我所知，它工作得很好