UI not updating first with swr mutate ( next.js project )

[Diego-Mike]

Hi comunnity !!

I'm doing a project for the first time with next.js and SWR, and i'ts been quite great so far since i don't have to use global state managment like redux or whatever.

However, in my journey trying to update the data in the cache of my SWR, i'm having problems since i'm only have been able to update my UI with mutate once ): ( before hitting the endpoint in my API then revalidating the data ).

So, let me give you some context, i'm doing a facebook clone, and whenever i want to click the like button, i want the UI to update at time, then hitting the endpoint of my API in order to check if data in the cache is right.

When i tried to do that, UI only updates after 4-5 seconds, it's like cache it's not updating

Let me show you some code

These are the interfaces of my data ( so you can understand what i'm doing )

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

Here i'm making the call to get all posts with getStaticProps

import styles from "styled-components";
import { GetStaticProps } from "next";
import axios from "axios";
import useSWR from "swr";

import Pubs from "../../Pubs/Pubs/Pubs";
import { thePublication } from "../../../GlobalInterfaces/DataInterfaces";

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

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

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

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

  return {
    props: data
  };
};

export default PublicationsHome;

Here's where i want to update the cache fast in the UI ( function to Like a post )

interface IlikesCommentsProps {
  publication: Ipublication;
}

const LikesComments: React.FC<IlikesCommentsProps> = ({ publication }) => {
  const [userAuth, setUserAuth] = useState<dataObject>({});

  useEffect(() => {
    const auth = JSON.parse(localStorage.getItem("Auth"));
    setUserAuth(auth);
  }, []);

  const LikePub = async (): Promise<void> => {
    if (publication.likes.find(f => f.identifier === userAuth.user.id)) {
      mutate(
        `${process.env.URL}/api/publication`,
        (allPublications: Ipublication[]) => {
          const currentPub = allPublications.find(f => f === publication);

          const deleteLike = currentPub.likes.findIndex(
            f => f.identifier === userAuth.user.id
          );

          currentPub.likes.splice(deleteLike, 1);

          const updatePub = allPublications.map(pub =>
            pub._id === currentPub._id ? currentPub : pub
          );

          return updatePub;
        }
      );
    } else {
      mutate(
        `${process.env.URL}/api/publication`,
        (allPublications: Ipublication[]) => {
          const currentPub = allPublications.find(f => f === publication);
          currentPub.likes.push({ identifier: userAuth.user.id });

          const updatePub = allPublications.map(pub =>
            pub._id === currentPub._id ? currentPub : pub
          );

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

 <motion.div
          onClick={LikePub}
          variants={Actions}
          whileHover="whileHover"
          whileTap="whileTap"
        >
          {userAuth &&
          userAuth.user &&
          publication.likes.find(
            like => like.identifier === userAuth.user.id
          ) ? (
            <>
              <motion.span>
                <LikeIcon colorIcon="rgb(32, 120, 244)" />
              </motion.span>
              <LikeCommentText
                separation="0.2rem"
                colorText="rgb(32, 120, 244)"
              >
                Me gusta
              </LikeCommentText>
            </>
          ) : (
            <>
              <LikeIcon colorIcon="rgba(0, 0, 0, 0.72)" />
              <LikeCommentText separation="0.2rem">Me gusta</LikeCommentText>
            </>
          )}
</motion.div>

So what happens after onClick={LikePub} is that everything works fine but, it takes to 4-5 seconds ( as i already explained ) to update the UI, i tried to change code multiple times, but couldn't acomplish what i want, what am i doing wrong ?

I'm kinda noob at this library yet, so if you know a way to help, me i would thank you !

Thanks for your time comunnity