Next.js Discord

Discord Forum

Caching (I think)

Answered
Dutch Smoushond posted this in #help-forum
Open in Discord
Dutch SmoushondOP
Hey, Im having a problem with what I think is nextjs caching. Anyone get this problem before? Here is my code 
import { createClient } from "@supabase/supabase-js";

export const revalidate = 0;

export async function like({ postId, userId }, formData) {
  "use server";

  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
  const supabaseKey = process.env.SUPABASE_SERVICE_ROLE_KEY;
  const supabase = createClient(supabaseUrl, supabaseKey);

  const setLike = async (likes) => {
    console.log("Set like", { likes });
    if (likes === false) {

      const { data, error } = await supabase
        .from("likes")
        .insert([{ post_id: postId, user_id: userId }])
        .select();

      if (error) throw error;
    } else if (likes === true) {

      const { data, error } = await supabase
        .from("likes")
        .delete()
        .eq("user_id", userId)
        .eq("post_id", postId);

      if (error) throw error;
    }
  };

  try {
// This is the code I believe is getting cached 
    const { count, error } = await supabase
      .from("likes")
      .select("*")
      .match({ post_id: postId })
      .match({ user_id: userId });

    if (error) throw error;

    const liked = count > 0;
    await setLike(liked);
  } catch (e) {
    console.error({ e });
  }
}


I believe the request is getting cached because it returns data that has been deleted in a previous request. How do I stop nextjs from caching? I have tried 
export const revalidate = 0;

export const fetchCache = "force-no-store";

export const dynamic = "force-dynamic";


This file is in the libs folder
Answered by Arinji
what you can do is instead of doing those exporting of variables, in the code where you modify your db.. add a revalidatePath().. thsi will invalidate your cache for that page
View full answer

30 Replies

Toyger
did you tried it locally with npm run dev? locally you don't have caches.
@Toyger did you tried it locally with `npm run dev`? locally you don't have caches.
Dutch SmoushondOP
Interesting, I have been doing this on local host
Dutch SmoushondOP
Whenever I have a weird problem that I can't find that others have encountered, I think it might be a simple solution that I am missing. In this instance I think it might be where the file is located or where the code is located.
If anyone can help with that, I'll gladly dm and share screen
@Dutch Smoushond If anyone can help with that, I'll gladly dm and share screen
Toyger
that's not how it work
you want other people to help you, so you doing your part too and at least provide more information about problem
and if people understand what you are facing they will help.
initially you asked for solution of a problem that didn't exist at first place.
so instead you should describe what you are trying to achieve, how you are doing it in code with it examples, and what not expected result you get.
@Toyger that's not how it work you want other people to help you, so you doing your part too and at least provide more information about problem and if people understand what you are facing they will help. initially you asked for solution of a problem that didn't exist at first place. so instead you should describe what you are trying to achieve, how you are doing it in code with it examples, and what not expected result you get.
Dutch SmoushondOP
My apologizes. So the function is suppose to either remove a like or create one. But it works the first time in inserting or deleting but the subsequent requests do not work. I console logged the data that it gets from supabase and it is the same data from the first request. Except this data is suppose to be changed depending on the request. I tried putting 
export const revalidate = 0;

export const fetchCache = "force-no-store";

export const dynamic = "force-dynamic";
in every file that I thought would affect it. But still the same result, the data from supabase is the same, even though supabase has changed accordingly. And this is all run on localhost. So I think perhaps caching is the problem?
@Dutch Smoushond My apologizes. So the function is suppose to either remove a like or create one. But it works the first time in inserting or deleting but the subsequent requests do not work. I console logged the data that it gets from supabase and it is the same data from the first request. Except this data is suppose to be changed depending on the request. I tried putting export const revalidate = 0; export const fetchCache = "force-no-store"; export const dynamic = "force-dynamic"; in every file that I thought would affect it. But still the same result, the data from supabase is the same, even though supabase has changed accordingly. And this is all run on localhost. So I think perhaps caching is the problem?
Toyger
queries have problems, but performance not logic one.
cache shouldnt be a problem, iirc it not implemented in dev local runtime.

so queries looks ok, they didnt throw errors?
did you check data immidiately in supabase after click? is it changing?
on consequential clicks data changes in supabase and only ui not perform update? or supabase too not updating after first couple clicks?
maybe problem with ui?
tried to console.log() after each await of supabase? maybe it even not calling it?
Dutch SmoushondOP
If I switch these lines 
.match({ post_id: postId })
.match({ user_id: userId });
and press the like button, it works as expected for the first click with accurate data being returned. But subsequent requests return the same data as the first time, but supabase data has changed and is not reflected in the data that is being returned.
Arinji
what you can do is instead of doing those exporting of variables, in the code where you modify your db.. add a revalidatePath().. thsi will invalidate your cache for that page
Answer
@Toyger so if you console.log(count); it will became always 0 ?
Dutch SmoushondOP
It returns 1 or 0 according to the data that is returned from the db, but the returned data is wrong, it querys the db but returns outdated results.
@Dutch Smoushond It returns 1 or 0 according to the data that is returned from the db, but the returned data is wrong, it querys the db but returns outdated results.
Toyger
if it constantly changes from 1 to 0 and backwards without deviations then it's absolutely correct data.
returns the same number
Arinji
btw the function shld match your actual page
so if the page is actually locahost:300/test
you need to do revalidatePath("/test")
not the file system name like revalidatePath("/[dynamicURL]");
Dutch SmoushondOP
Am I suppose to chain it to the db query 
  
const { count, data, error } = await supabase
      .from("likes")
      .select("*", { count: "exact", head: true })
      .match({ user_id: userId })
      .match({ post_id: postId })
      .revalidatePath("/dashboard");
like this? Because this is returning an error
Nvm
    const { count, data, error } = await supabase
      .from("likes")
      .select("*", { count: "exact", head: true })
      .match({ user_id: userId })
      .match({ post_id: postId });
    revalidatePath("/dashboard");
this worked!
Thank you both! @Toyger @Arinji
Im so glad it worked, been stuck for a while
Arinji
No worries, i also love revalidatePath
also mark an answer
Original message was deleted
Arinji
boop
@Arinji boop
Dutch SmoushondOP
Just did, thanks again!
Arinji
no worries :D