Data is not updated after changes in the Sanity Studio

Question

I am quite new to Sanity v3 + Next.js v13. Everything works great on my test site, but I have a problem when I update a document (project) or add a new one in the Sanity Studio – these changes are not updated on the pages. I am still on localhost. I want to see the changes right after they are made. If I update the query and save the file, the elements will be updated. Is it some kind of caching issue?

My example is here:

export async function getProjects(): Promise<Project[]> {
  return createClient(clientConfig).fetch(
    groq`*[_type=="project"]|order(_createdAt desc){
    _id,
    _createdAt,
    name,
    "slug": slug.current,
    "image": image.asset->url,
    url,
    content
  }`
  );
}

*** exported clientConfig ***
const config = {
  projectId: "xxxxxx",
  dataset: "production",
  apiVersion: "v1",
};

export default config;

Answer 1

You have option for revalidation in next-sanity. for time-based: you could do this:

    export async function getProjects(): Promise<Project[]> {
      return createClient(clientConfig).fetch(
         <groq-query>,
         {},
         { next : { revalidate : 3600 });
    }

You can find more on the Cache revalidation section of the next-sanity npm page.

Answer 2

To solve this problem, you can use the Route Segment Config options to opt out of caching for a specific route segment as follows.

const Projects = async () => {
         // component code
}

export const dynamic = "force-dynamic";

export default Projects;

This will make our page dynamically rendered at the request time. Additional information is available on this link from the official NextJS documentation.