How to revalidating data with fetch request from nest js backend server

[rakibulinux]

Hi, @leerob, @toolmantim @timneutkens, How are you guys today?

I see data is not getting revalidating when I click on the button but if I refresh the page it's working fine. How can I fix this issue without reloading the page data should show update. My tech stack is Nest.js as a frontend and Nest.js as a Backend.

This is my function to post and PATCH or PUT data

export async function postData(
url: string,
data: Record<string, any>,

token?: string
): Promise {
try {
const response = await fetch(${Backend_URL}/${url}, {
method: "POST",
headers: {
"Content-Type": "application/json",
authorization: Bearer ${token},
},
body: JSON.stringify(data),
});

if (!response.ok) {
  throw new Error(`HTTP error! Status: ${response.status}`);
}
const responseData: T = await response.json(); // Parse the response JSON
revalidatePath("/");
revalidateTag("collection");
return responseData; // Return the parsed data

} catch (error) {
console.error("Error:", error);
throw error; // Rethrow the error for further handling or logging
}
}
export async function patchPutData(
url: string,
id: string,
data: Record<string, any>,
method: "PATCH" | "PUT",
token: string
): Promise {
try {
const response = await fetch(${Backend_URL}/${url}/${id}, {
method,
headers: {
"Content-Type": "application/json",
authorization: Bearer ${token},
},
body: JSON.stringify(data),
});

if (!response.ok) {
  throw new Error(`HTTP error! Status: ${response.status}`);
}
const responseData: T = await response.json(); // Parse the response JSON
revalidatePath("/admin/orders");
revalidateTag("collection");
return responseData; // Return the parsed data

} catch (error) {
console.error("Error:", error);
throw error; // Rethrow the error for further handling or logging
}
}

This function is for get data
export async function getData(url: string, token?: string): Promise {
let apiUrl = ${Backend_URL}/${url};
try {
const response = await fetch(apiUrl, {
headers: {
"Content-Type": "application/json",
authorization: Bearer ${token},
},
next: { tags: ["collection"] },
});

const responseData = await response.json();
return responseData.data;

} catch (error) {
console.error("Error:", error);
throw error;
}
}

In order page I am calling like this

const orders: Order[] = await getData("review", token);
revalidateTag("collection");

fetch-revalidation.mp4

[jpainam]

I have the same tech stack and can’t get my page updated after a form submission through fetch. Did you fix your issue?

[ArjunJunna]

One way to do would be to use data fetching libraries like react query or swr to revalidate data on client side. If you have done the same without data fetching libraries then please do share. Thanks in advance.

[jpainam]

Hil.
I used react-query on the client side and got it working with useMutation
Thanks.