is there a way to prevent revalidation even if revalidatePath is run from a server action

Unanswered

Pacific sand lance posted this in #help-forum

Open in Discord

Pacific sand lanceOP

2023-12-21T05:10:52.000Z

i have an infinite scrolling component for my twitter clone and when you do anything that runs a server action that has revalidatePath("/") in it such as like a post or add a new comment to a post, it causes the infinite scrolling component to rerender and then it reloads the cards that are in view.

i tried adding client side state for this so that the ui shows only the state instead of whats i the db that way this doesnt happen but having to add state to every single component is alot of work. any ideas?

180 Replies

Pacific sand lanceOP

2023-12-21T05:12:22.000Z

Repo: https://github.com/ForkEyeee/odin-book

Live: https://odin-book-sand.vercel.app/

or if my infinite scrolling component is just bad you could say that too /app/components/loadmorediscover

@Pacific sand lance or if my infinite scrolling component is just bad you could say that too /app/components/loadmorediscover

2023-12-21T05:15:01.000Z

how about use revalidateTag instead on the server action?

https://nextjs.org/docs/app/api-reference/functions/unstable_cache

Pacific sand lanceOP

2023-12-21T05:19:08.000Z

ok ive heard about this revalidateTag thing but i didnt understand what its for when revalidatePath exists

@Ray how about use `revalidateTag` instead on the server action?

Pacific sand lanceOP

2023-12-21T05:19:25.000Z

also did you mean to link this ? https://nextjs.org/docs/app/api-reference/functions/revalidateTag

2023-12-21T05:22:00.000Z

yes but you need to tag your data function with unstable_cache since you are using prisma

@Ray yes but you need to tag your data function with `unstable_cache` since you are using prisma

Pacific sand lanceOP

2023-12-21T05:30:40.000Z

ok revalidateTag takes a string as the path, but how do you know whixh tag to use? this was the part that always confused me

'use server'
 
import { revalidateTag } from 'next/cache'
 
export default async function submit() {
  await addPost()
  revalidateTag('posts')
}

here they say posts but where do they get that from or how was it deceided

2023-12-21T05:32:24.000Z

the tag is what you assign in unstable_cache

Pacific sand lanceOP

2023-12-21T05:34:00.000Z

ok one sec

@Ray the tag is what you assign in `unstable_cache`

Pacific sand lanceOP

2023-12-21T05:42:05.000Z

export default async function Page() {
  try {
    const getCachedUser = unstable_cache(async id => getPosts(id), ['posts']);
    const { timelinePosts, timelinePostsCount } = (await getPosts(1)) ?? [];

    if (timelinePosts === undefined || timelinePosts.length === 0) return;

    await Promise.allSettled(
      timelinePosts.map(async (post: PostWithAuthor) => {
        try {
          const time = await getPostTime(post.createdAt);
          post.postTime = time;
        } catch (error) {
          return { message: 'Error calculating post time' };
        }
      })
    );
    const user = await getCachedUser(1);
    console.log(user);
    return (
      <Box minHeight="100vh">
        <TimeLineTabs />
        <LoadMoreForYou initialPosts={timelinePosts} timelinePostsCount={timelinePostsCount} />
      </Box>
    );
  } catch (error) {
    return <NoDataFound />;
  }
}

ok i did something like this, so then in the getPosts server action, i woudl do

revalidatePath ?

2023-12-21T05:47:01.000Z

const getCachedUser = unstable_cache(async id => getPosts(id), ['posts'], { tags: ['posts'] });

and move it out of the component

then use revalidateTag('posts') in your server action

Pacific sand lanceOP

2023-12-21T05:48:30.000Z

ok

@Ray ts const getCachedUser = unstable_cache(async id => getPosts(id), ['posts'], { tags: ['posts'] });

Pacific sand lanceOP

2023-12-21T05:52:56.000Z

'use client';
import { useEffect, useState, useCallback } from 'react';
import { unstable_cache } from 'next/cache';

const getCachedUser = unstable_cache(async id => getPosts(id), ['posts'], { tags: ['posts'] });

export default function LoadMoreDiscover({
  initialPosts,
  otherTimelinePostsCount,
}: LoadMoreDiscoverProps) {
  const [posts, setPosts] = useState<PostWithAuthor[]>([]);
  const [totalPostCount, setTotalPostCount] = useState(0);
  const [isLoading, setIsLoading] = useState(false);
  const [initialLoading, setInitialLoading] = useState(true);
  const { ref, inView } = useInView();
  const { data: session } = useSession();

  useEffect(() => {
    setPosts(initialPosts);
    setTotalPostCount(otherTimelinePostsCount);
    setTimeout(() => setInitialLoading(false), 1000);
  }, [initialPosts, otherTimelinePostsCount]);

  const getNewPosts = useCallback(async () => {
    const nextPage = posts.length / 5 + 1;

    // const { otherTimeLinePosts, otherTimelinePostsCount } = (await getPosts(nextPage)) ?? [];
    const { otherTimeLinePosts, otherTimelinePostsCount } = (await getCachedUser(nextPage)) ?? [];

    if (otherTimeLinePosts === undefined) return;

    await Promise.allSettled(
      otherTimeLinePosts.map(async (post: PostWithAuthor) => {
        try {
          const test = await getPostTime(post.createdAt);
          post.postTime = test;
        } catch (error) {
          return { message: 'Error calculating post time' };
        }
      })
    );

    setPosts(prevPosts => {
      const newPosts = otherTimeLinePosts.filter(
        newPost => !prevPosts.some(prevPost => prevPost.id === newPost.id)
      );
      return [...prevPosts, ...newPosts];
    });
    setTotalPostCount(otherTimelinePostsCount);
    setIsLoading(false);
  }, [posts.length]);

ok so i am assuming that this doesnt work in client components?`

cause it says

Error: Invariant: incrementalCache missing in unstable_cache async (id)=>(0,_lib_actions__WEBPACK_IMPORTED_MODULE_2__.getPosts)(id)

2023-12-21T05:54:29.000Z

are you calling getCachedUser in client component?

Pacific sand lanceOP

2023-12-21T05:55:05.000Z

yea

const { otherTimeLinePosts, otherTimelinePostsCount } = (await getCachedUser(nextPage)) ?? [];

2023-12-21T05:55:33.000Z

it need to be use on server

Pacific sand lanceOP

2023-12-21T05:55:50.000Z

ok

@Ray it need to be use on server

Pacific sand lanceOP

2023-12-21T06:00:47.000Z

import NoDataFound from '../components/NoDataFound';
import { Box } from '@chakra-ui/react';
import TimeLineTabs from '../components/TimeLineTabs';
import { getPosts, getPostTime } from '../lib/actions';
import { PostWithAuthor } from '../lib/definitions';
import LoadMoreDiscover from '../components/LoadMoreDiscover';
import { unstable_cache } from 'next/cache';

const getCachedUser = unstable_cache(async id => getPosts(id), ['posts'], { tags: ['posts'] });

export default async function Page() {
  try {
    const { otherTimeLinePosts, otherTimelinePostsCount } = (await getCachedUser(offset)) ?? [];

    if (otherTimeLinePosts === undefined || otherTimeLinePosts.length === 0) return;

    await Promise.allSettled(
      otherTimeLinePosts.map(async (post: PostWithAuthor) => {
        try {
          const time = await getPostTime(post.createdAt);
          post.postTime = time;
        } catch (error) {
          return { message: 'Error calculating post time' };
        }
      })
    );

    return (
      <Box minHeight="100vh">
        <TimeLineTabs />
        <LoadMoreDiscover
          initialPosts={otherTimeLinePosts}
          otherTimelinePostsCount={otherTimelinePostsCount}
        />
      </Box>
    );
  } catch (error) {
    return <NoDataFound />;
  }
}

problem is though how will i know what offset to use for my infinte scroll if i am in a server component? there is no state to remember anything?

dont really think it makes sense to use query params for an infinte scroll either

2023-12-21T06:05:36.000Z

I think you should load the first set of data on server component then pass it to a client component with a useState hook. And create a server action for client component to fetch with offset

and the other server action, use revalidateTag to invalidate the data instead of revalidatePath('/')

assuming the infinity scroll is on the route "/"

Pacific sand lanceOP

2023-12-21T06:08:15.000Z

ok

Pacific sand lanceOP

2023-12-21T06:19:13.000Z

still doesnt seem to work. its not refreshing the infinite scroll anymore thankfully but i dont think that any of this data is being refreshed. i can press the â¤ï¸ or comment and the ui doesnt change

export async function getFirstPosts() {
  try {
/* gets first 5 posts */
  ...stuff
    revalidateTag('posts');

    return {
      timelinePosts,
      otherTimeLinePosts,
      userId,
    };
  } catch (error) {
    return { message: 'Unable to fetch posts' };
  }
}

export async function getPosts(page: number = 1) {
  try {
/* gets posts from offset*/
   ...stuff
    revalidateTag('/');
    return {
      timelinePosts,
      otherTimeLinePosts,
      timelinePostsCount,
      otherTimelinePostsCount,
      userId,
    };
  } catch (error) {
    return { message: 'Unable to fetch posts' };
  }
}

const getCachedUser = unstable_cache(async () => getFirstPosts(), ['posts'], { tags: ['posts'] });

export default async function Page() {
  try {
    const { otherTimeLinePosts } = (await getCachedUser()) ?? [];

    if (otherTimeLinePosts === undefined || otherTimeLinePosts.length === 0) return;

    await Promise.allSettled(
      otherTimeLinePosts.map(async (post: PostWithAuthor) => {
        try {
          const time = await getPostTime(post.createdAt);
          post.postTime = time;
        } catch (error) {
          return { message: 'Error calculating post time' };
        }
      })
    );

    return (
      <Box minHeight="100vh">
        <TimeLineTabs />
        <LoadMoreDiscover
          initialPosts={otherTimeLinePosts}
          otherTimelinePostsCount={otherTimeLinePosts.length}
        />
      </Box>
    );
  } catch (error) {
    return <NoDataFound />;
  }
}

'use client';

export default function LoadMoreDiscover({
  initialPosts,
  otherTimelinePostsCount,
}: LoadMoreDiscoverProps) {
  const [posts, setPosts] = useState<PostWithAuthor[]>(initialPosts);
  const [totalPostCount, setTotalPostCount] = useState(otherTimelinePostsCount);
  const [isLoading, setIsLoading] = useState(false);
  const [initialLoading, setInitialLoading] = useState(true);
  const { ref, inView } = useInView();
  const { data: session } = useSession();

  useEffect(() => {
    setTimeout(() => setInitialLoading(false), 1000);
  }, []);

  const getNewPosts = useCallback(async () => {
    const nextPage = posts.length / 5 + 1;

    const { otherTimeLinePosts, otherTimelinePostsCount } = (await getPosts(nextPage)) ?? [];

    if (otherTimeLinePosts === undefined) return;

    await Promise.allSettled(
      otherTimeLinePosts.map(async (post: PostWithAuthor) => {
        try {
          const test = await getPostTime(post.createdAt);
          post.postTime = test;
        } catch (error) {
          return { message: 'Error calculating post time' };
        }
      })
    );
    setPosts(prevPosts => {
      const newPosts = otherTimeLinePosts.filter(
        newPost => !prevPosts.some(prevPost => prevPost.id === newPost.id)
      );
      return [...prevPosts, ...newPosts];
    });
    setTotalPostCount(otherTimelinePostsCount);
    setIsLoading(false);
  }, [posts.length]);

2023-12-21T06:21:31.000Z

why you have revalidateTag('/') in the getPosts function?

Pacific sand lanceOP

2023-12-21T06:22:02.000Z

oh

ok i changed it to revalidatePath("/")

but still the same result

i see the post flicker when i press â¤ï¸ but no ui changes

2023-12-21T06:23:23.000Z

well, i think getPost doesn't need to revalidate at all?

Pacific sand lanceOP

2023-12-21T06:24:18.000Z

i commented it out but stillt he saem result,

when i press â¤ï¸ the post flickers but i dont see any updates

2023-12-21T06:24:52.000Z

what function is called when you press â¤ï¸

Pacific sand lanceOP

2023-12-21T06:25:10.000Z

likeComment

2023-12-21T06:25:14.000Z

and how you fetch the data of like?

Pacific sand lanceOP

2023-12-21T06:25:25.000Z

export async function likeComment(commentId: number, postId: number) {
  try {
    const userId = await getUserId();

    const userLike = await prisma.commentLike.findMany({
      where: {
        authorId: userId,
        commentId: commentId,
        postId: postId,
      },
    });

    if (userLike.length > 0) {
      const deletedLike = await prisma.commentLike.delete({
        where: {
          id: userLike[0].id,
        },
      });
    } else {
      const likeData = {
        authorId: userId,
        commentId: commentId,
        createdAt: new Date(),
        postId: postId,
      };

      const createdLike = await prisma.commentLike.create({
        data: likeData,
      });
    }

    revalidateTag('/');
  } catch (error) {
    return { message: `Unable to like comment` };
  }
}

2023-12-21T06:25:48.000Z

revalidateTag('/')

tag should be a tag, not a path

you need to tag the fetch comment function then use revalidateTag with the tag

Pacific sand lanceOP

2023-12-21T06:27:28.000Z

i dont have a getComment function persay i just use getPosts and get the comments from there it is part of the object

export async function getPosts(page: number = 1) {
  try {
/* gets posts from offset*/
   ...stuff
    revalidateTag('/');
    return {
      timelinePosts,
      otherTimeLinePosts,
      timelinePostsCount,
      otherTimelinePostsCount,
      userId,
    };
  } catch (error) {
    return { message: 'Unable to fetch posts' };
  }
}

2023-12-21T06:28:49.000Z

use revalidateTag('posts') if getPosts is taged with 'posts'

and see if the ui change

Pacific sand lanceOP

2023-12-21T06:29:36.000Z

no ui change it seems

export async function getPosts(page: number = 1) {
  try {
   stuff
    revalidateTag('posts');
    return {
      timelinePosts,
      otherTimeLinePosts,
      timelinePostsCount,
      otherTimelinePostsCount,
      userId
,

2023-12-21T06:31:12.000Z

you don't need revalidateTag('posts') inside the getPosts function

Pacific sand lanceOP

2023-12-21T06:31:21.000Z

ok

2023-12-21T06:31:31.000Z

where is this page on github?

Pacific sand lanceOP

2023-12-21T06:31:53.000Z

https://github.com/ForkEyeee/odin-book/commit/94d795bf6b3878a1edb11606854aab82c02b7a92

i think you should look at this version

all the ones after i started added client state to fix the issue

the commit is called

styling changes

after this point i started messing everyting up i think

2023-12-21T06:34:18.000Z

const [userId, post] = await Promise.all([getUserId(), getPost(postId)]);
the data is comming from these, right?

Pacific sand lanceOP

2023-12-21T06:34:30.000Z

yes

i meanno

no

my bad

for the discover page which si the home route

if you press on the top left icon

its using /discover

/post is just for individual posts with slugs and stuff

its no problem if i use revalidatePath(/) for /post

the problem is /discover and /for-you

2023-12-21T06:38:30.000Z

const getCachedPost = (postId: number) => {
  return unstable_cache(id => getPost(id), ['post'], {tags: [`post-${postId}`]})(postId)
}

export default async function Page({ params }: { params: { slug: string } }) {
  try {
    if (params.slug === null) throw new Error();

    const postId = Number(params.slug);

    const [userId, post] = await Promise.all([getUserId(), getCachedPost(postId)]);

    if (post === null || post === undefined || userId === undefined) return <NoDataFound />;

    await new Promise(resolve => setTimeout(resolve, 500));

    return (
      <Box mt={10} minH={'100vh'} mb={10}>
        <Post post={post} userId={userId} />
      </Box>
    );
  } catch (error) {
    return <NoDataFound />;
  }
}

export async function likeComment(commentId: number, postId: number) {
  try {
    const userId = await getUserId();

    const userLike = await prisma.commentLike.findMany({
      where: {
        authorId: userId,
        commentId: commentId,
        postId: postId,
      },
    });

    if (userLike.length > 0) {
      const deletedLike = await prisma.commentLike.delete({
        where: {
          id: userLike[0].id,
        },
      });
    } else {
      const likeData = {
        authorId: userId,
        commentId: commentId,
        createdAt: new Date(),
        postId: postId,
      };

      const createdLike = await prisma.commentLike.create({
        data: likeData,
      });
    }

    revalidateTag(`post-${postId}`);
  } catch (error) {
    return { message: `Unable to like comment` };
  }
}

Pacific sand lanceOP

2023-12-21T06:39:20.000Z

ok

2023-12-21T06:40:12.000Z

1. tag the data function with unstable_cache
2. in the server action, use revalidateTag with the tag in the data function

Pacific sand lanceOP

2023-12-21T06:40:39.000Z

ok

2023-12-21T06:41:06.000Z

try it, and like a comment to see if the ui change

Pacific sand lanceOP

2023-12-21T06:41:19.000Z

no it does not for some reason

i see the flickerish behavior thing but the ui doesnt change when i press â¤ï¸

2023-12-21T06:43:36.000Z

ah i know the problem. its because revalidateTag only invalidate the cache

Pacific sand lanceOP

2023-12-21T06:44:09.000Z

ok

2023-12-21T06:51:01.000Z

which action has revalidatePath("/") ?

Pacific sand lanceOP

2023-12-21T06:51:28.000Z

one sec

createComment, deleteComment,

and

i think thats it

atleast from what i ssee

2023-12-21T06:54:47.000Z

so if I make a comment, the infinity scroll will be scrolled to top?

Pacific sand lanceOP

2023-12-21T06:55:03.000Z

yes

well not to the top it will just reload the last 5 posts, using the current state posts..length

2023-12-21T06:55:39.000Z

it doesn't scroll to top for me on https://odin-book-sand.vercel.app/discover

Pacific sand lanceOP

2023-12-21T06:55:48.000Z

oh

that is because this is a newer deployment that has client state

2023-12-21T06:56:03.000Z

ah ok

Pacific sand lanceOP

2023-12-21T06:56:03.000Z

i shold have kept the old oen i think

mayb ei can get it back i think

i will get it back

2023-12-21T06:56:48.000Z

yes state is better for this

I thought you have data in state and it still reset the scroll position with revalidatePath

Pacific sand lanceOP

2023-12-21T06:57:43.000Z

oh ok

no it was cause before when i would like a comment for example, it would refetch all of the data for the post and then it would reload the infinite scroll

i would see the loading spinner

and it looks kidna weird so

i thought maybe i should add state

but then i realized that all components that need to refetch data would need state like comment component and post component

there is a bug where openign the sidebar will trigger the infinite scrol too

cause

i havent fixed that yet

2023-12-21T06:59:35.000Z

where is the sidebar?

@Ray where is the sidebar?

Pacific sand lanceOP

2023-12-21T06:59:47.000Z

it is the message icon on the top right

2023-12-21T07:00:16.000Z

I think you just need to put the posts in state to keep the scroll position

Pacific sand lanceOP

2023-12-21T07:01:03.000Z

export default function LoadMoreDiscover({
  initialPosts,
  otherTimelinePostsCount,
}: LoadMoreDiscoverProps) {
  const [posts, setPosts] = useState<PostWithAuthor[]>(initialPosts);
  const [totalPostCount, setTotalPostCount] = useState(otherTimelinePostsCount);
  const [isLoading, setIsLoading] = useState(false);
  const [initialLoading, setInitialLoading] = useState(true);
  const { ref, inView } = useInView();
  const { data: session } = useSession();

yeah i have them in state, here i set the initial state to the initial posts.

2023-12-21T07:01:15.000Z

why you need revalidatePath('/'); in getFriendsSideBar?

Pacific sand lanceOP

2023-12-21T07:02:01.000Z

im not sure tbh, making the notifications show hen i wanted too was kinda finicky and i dont know anything about web sockets so i just kept using revalidate path where i wanted dat ato frefresh

i will try removing it and see

ok removing it fixes it so it doesnt trigger infinite scroll to reload anymore

but

i think now notifications may be broken i have to test it i think

2023-12-21T07:06:40.000Z

not showing notification?

Pacific sand lanceOP

2023-12-21T07:07:05.000Z

oh

nvm i think its workign fine without it i think

without the revalidatePath("/")

i mean

one sec

ok i think its workign good actually

without the revalidatePath("/")

i dont think that i need it

2023-12-21T07:09:14.000Z

cool

Pacific sand lanceOP

2023-12-21T07:09:35.000Z

ok

Pacific sand lanceOP

2023-12-21T07:10:47.000Z

i think that my problems are fixed then i think but what do you think about my code though

i dont think anyone has ever looked at it before i think this is the first time

firs titme using next too

2023-12-21T07:12:20.000Z

I think you should separate the data loading function and server action

https://github.com/leerob/leerob.io/tree/main/app/db
like this

the data function itself shouldn't use revalidatePath or revalidateTag

Pacific sand lanceOP

2023-12-21T07:14:04.000Z

oh

2023-12-21T07:14:38.000Z

https://github.com/vercel/next-learn/tree/main/dashboard/final-example/app/lib
like this example, data.ts and action.ts

Pacific sand lanceOP

2023-12-21T07:16:16.000Z

ok so the genreal rule is to seperate server actions that fetch data and then server actions that perform creates, updates, deletes?

cause i always jsut ptu eveyrting in the same actions.ts

and revalidatePath should only be used in queries.ts

@Pacific sand lance ok so the genreal rule is to seperate server actions that fetch data and then server actions that perform creates, updates, deletes?

2023-12-21T07:17:10.000Z

yes

revalidatePath should only use in action.ts

and you could use not-found.tsx

Pacific sand lanceOP

2023-12-21T07:18:22.000Z

ok, what is the reason for seperatering the server actions like that?

2023-12-21T07:18:39.000Z

then you can do

import { notFound } from 'next/navigation'

if (userData === undefined || userId === undefined) notFound();

instead of try catch the whole page component

Pacific sand lanceOP

2023-12-21T07:18:55.000Z

oh

oh

ok

@Pacific sand lance ok, what is the reason for seperatering the server actions like that?

2023-12-21T07:19:08.000Z

because 'use server' is for server action

https://joulev.dev/blogs/when-not-to-use-use-client-and-use-server
joulev has explain it on his blog

Pacific sand lanceOP

2023-12-21T07:20:23.000Z

yeah for your blog, you have actions.ts and queries.ts, they are both full of server actions. so they both have 'use server' at the top

2023-12-21T07:20:50.000Z

oh really lol

Pacific sand lanceOP

2023-12-21T07:21:02.000Z

yes

2023-12-21T07:21:09.000Z

https://github.com/vercel/next-learn/tree/main/dashboard/final-example/app/lib
use this as example then lol

its not my blog btwðŸ˜†

Pacific sand lanceOP

2023-12-21T07:22:02.000Z

oh ok

2023-12-21T07:22:27.000Z

https://github.com/vercel/next.js/pull/59602
he made change on the doc of nextjs too

Pacific sand lanceOP

2023-12-21T07:22:46.000Z

so they have actions.ts and data.ts. in actions.ts they are both querying the database, so why are they seperated, i am just tyring to understand this part

2023-12-21T07:23:21.000Z

action.ts is mostly for data mutation

server action should be the user trigger a event on their browser then it make a post request to the server

not the function render the page

Pacific sand lanceOP

2023-12-21T07:24:18.000Z

ok so action.ts is like for post requests and stuff, but to render a page you would use data.ts

2023-12-21T07:24:24.000Z

it can be querying the database, like what you did with infinity scroll

yep

Pacific sand lanceOP

2023-12-21T07:24:47.000Z

ok

i had no idea

i just put eveyrthing in the same file

became so long

2023-12-21T07:25:06.000Z

ðŸ˜†

well it fine, personal preference

Pacific sand lanceOP

2023-12-21T07:25:50.000Z

ok thanks for the links i will save them. do you haev any other advice for me i think we are about doen here right?

2023-12-21T07:27:29.000Z

no other things look good

Pacific sand lanceOP

2023-12-21T07:28:30.000Z

ok thx this was the firs titme someone actuall ylooked at my code i think so i appreciate it

@Pacific sand lance ok thx this was the firs titme someone actuall ylooked at my code i think so i appreciate it

2023-12-21T07:29:32.000Z

np ðŸ˜€