Revalidate, doesn't work on builded web page, but works on npm run dev
Unanswered
kubas posted this in #help-forum
kubasOP
Hi, I have a small problem, after sending a good get request to my api, on npm run dev I normally refresh the data on the /blog page. On the other hand, on the built page, I do not refresh the data, although the api works.
### API Code:
### /BLOG page Code:
Anyone know how to fix it?
### API Code:
import { revalidatePath } from "next/cache";
import { NextRequest, NextResponse } from "next/server";
export async function GET(req: NextRequest) {
const url = new URL(req.url);
const auth = url.searchParams.get('auth');
if(!auth) return NextResponse.json({revalidated: false, message: 'NO AUTH ID'}, {status: 400})
if(auth != process.env.HYGRAPH_WEBHOOK_REVALIDATE_AUTHID) return NextResponse.json({revalidated: false, message: 'INVALID AUTH ID'}, {status: 401})
revalidatePath('/blog')
return NextResponse.json({revalidated: true, message: 'OK'}, {status: 200})
}### /BLOG page Code:
import BlogCard from '@/components/blog/PostCard';
import { GraphQLClient, gql } from 'graphql-request';
import styles from './blog.module.scss';
const hygraphContentApi = process.env.HYGRAPH_CONTENT_API;
const graphcms = new GraphQLClient(hygraphContentApi);
const QUERY = gql`
query {
posts {
title
createdAt
shortDescription
slug
author {
name
picture {
url
}
}
coverImage {
url
}
}
}
`;
interface Post {
title: string;
createdAt: string;
slug: string;
shortDescription: string;
author: {
name: string;
picture: {
url: string;
};
};
coverImage: {
url: string;
};
}
const Home = async() => {
const response = await graphcms.request<{ posts: Post[] }>(QUERY);
const posts = [...response.posts].sort((a, b) => {
const dateA: Date = new Date(a.createdAt);
const dateB: Date = new Date(b.createdAt);
return dateB.getTime() - dateA.getTime();
});
return (
<main>
{posts ? (
<div className={styles.blogCardsContainer}>
{posts.length > 0 ? (
posts.map((post) => (
<BlogCard key={post.slug} post={JSON.stringify(post)} />
))
) : (
null
)}
</div>
) : <div className={styles.loading}>Loading...</div>}
</main>
);
};
export default Home;Anyone know how to fix it?
10 Replies
Carolina Dog
Same here. Works on my Local Build but no on Vercel.
@Carolina Dog Same here. Works on my Local Build but no on Vercel.
kubasOP
I honestly tried everything and it didn't help
on local build, it works. On hosting (netlify) no longer works...
@kubas I honestly tried everything and it didn't help
Carolina Dog
Yep
Just use the ISR Revalidation and wait for the revalidateTag or revalidatePath works.
Just use the ISR Revalidation and wait for the revalidateTag or revalidatePath works.
every route is SSR'd (not ssg) on
npm run dev.. maybe try using Route Segment Config to tell nextjs that the route is SSR@Carolina Dog Yep
Just use the ISR Revalidation and wait for the revalidateTag or revalidatePath works.
Carolina Dog
Honestly I'm quite disapointed wasting few hours on this lol.
@Carolina Dog Yep
Just use the ISR Revalidation and wait for the revalidateTag or revalidatePath works.
kubasOP
You mean I'll set it to revalidate every X time?
@kubas You mean I'll set it to revalidate every X time?
Carolina Dog
Yep true. It works for me (I'm using version 13.4.6).
kubasOP
i will check it
@Carolina Dog Yep true. It works for me (I'm using version 13.4.6).
Carolina Dog
Work both in local build and deployment (I tested it in vercel)