Page freezing after deletion + data table not updated after redirection

Answered

Amorph posted this in #help-forum

2024-10-24T18:31:06.119Z

Here's the live app:
https://bestroll-ecommerce-admin.vercel.app/75fedf2c-c3b9-40ea-9bf1-ccbbcdad2bda/sizes
And the code:
https://github.com/IordanDenis/bestroll-ecommerce-admin

Take the sizes page for example, I have a data table with all my sizes and this data table has 3 actions: copy id, update, delete and outside this this data table I also have an "add new" button to create new sizes

If i want to create a new size, i fill in the needed information then I get redirected back to the sizes page but my data table does not update with the new size, it only updates if i refresh the page myself

When I want to delete a size using the data table action, even if the product gets deleted(and here the data table always updates and removes the product) or fails the deletion, my page freezes and my "add new" button or main navigation links get disabled

This also happens for hero images, categories, colors and products, the code is pretty similar for all routes, but one thing I noticed is that for products the data table will always be updated with the new value after redirection and for the other routes I found out that sometimes the data table will also be updated after redirection, without me refreshing, but it's random

Also, when I want to update a product, to make it lets say from archived to featured, if i get redirected the data table will show the old values so i have to refresh for the new values

Answered by Anay-208

This is for invalidating server cache. but you need to invalidate client cache

View full answer

41 Replies

AmorphOP

2024-10-25T13:00:34.423Z

bump

AmorphOP

2024-10-26T15:15:17.355Z

bump

Bengal

2024-10-26T16:18:35.565Z

Could you point to the specific parts in your code you're talking about? Don't have the time to go through your project right now

Typically freezing is odd, curious how you handle the data insertion/deletion

But the old data showing up after an update issue is most likely resolved by using revalidatePath

AmorphOP

2024-10-26T18:26:04.795Z

@Bengal components/sizes-form.tsx is my sizes form that either creates a new size or if there is initial data, it will be a form for updating my size,

when its the updating form, i also have a button for deleting that size and if i click on it, i get the message "size got deleted", i get redirected back to the /sizes route, but just like in the case of creating a new size, the data table does not get updated, however the page does not freeze this way

components/ui/sizes-cell-action.tsx that's where i have my 3 data table actions: copy id,update and delete and if i delete the size this way, the data table will update but thats where freeze comes in

i tried with revalidate path but no change, am i using it wrong in my route handlers? for example:

export async function DELETE(
  req: Request,
  { params }: { params: { storeId: string; sizeId: string } }
) {
  try {
    if (!params.sizeId)
      return new NextResponse("Size id is required", { status: 400 });

    // confirm that this storeId exists for this user
    const storeByUserAndStoreId = await getStoreByUserAndStoreId(
      params.storeId
    );

    // if the store id in combination with the user id is not available, that means the user is trying to update someone elses store
    if (!storeByUserAndStoreId)
      return new NextResponse("Unauthorized", { status: 403 });

    const size = await deleteSize(params.sizeId);

    revalidatePath(`${params.storeId}/sizes`);

    return NextResponse.json(size);
  } catch (error) {
    console.log("[SIZE_DELETE]", error);
    return new NextResponse("Internal error", { status: 500 });
  }
}

Bengal

2024-10-26T19:54:56.846Z

Yeah you're using it incorrectly based on that piece of code, check out the docs. https://nextjs.org/docs/app/api-reference/functions/revalidatePath

It should be the full url segment. So /${params.storeId/sizes if that's your entire route

Or if you have other routes before it /route1/route2/${params.storeId/sizes

AmorphOP

2024-10-27T12:01:06.692Z

yes, that's my entire route, only localhost is before it

Bengal

2024-10-27T15:41:36.069Z

Don't forget about the slash at the beginning, before ${params.storeId}

AmorphOP

2024-10-28T20:00:00.225Z

ohhh you're right, still same issue tho

export async function POST(
  request: Request,
  { params }: { params: { storeId: string } }
) {
  try {
    const body = await request.json();
    const { name, value } = body;

    if (!name) return new NextResponse("Name is required", { status: 400 });

    if (!value) return new NextResponse("Value is required", { status: 400 });

    if (!params.storeId)
      return new NextResponse("Store id is required", { status: 400 });

    // confirm that this storeId exists for this user
    const storeByUserAndStoreId = await getStoreByUserAndStoreId(
      params.storeId
    );

    // if the store id in combination with the user id is not available, that means the user is trying to update someone elses store
    if (!storeByUserAndStoreId)
      return new NextResponse("Unauthorized", { status: 403 });

    const size = await createSize(name, value, params.storeId);

    revalidatePath(`/${params.storeId}/sizes`);

    return NextResponse.json(size);
  } catch (error) {
    console.log("[SIZES_POST]", error);
    return new NextResponse("Internal error", { status: 500 });
  }
}

export async function PATCH(
  req: Request,
  { params }: { params: { storeId: string; sizeId: string } }
) {
  try {
    const body = await req.json();
    const { name, value } = body;

    if (!name) return new NextResponse("Name is required", { status: 400 });

    if (!value) return new NextResponse("Value is required", { status: 400 });

    if (!params.sizeId)
      return new NextResponse("Size id is required", { status: 400 });

    // confirm that this storeId exists for this user
    const storeByUserAndStoreId = await getStoreByUserAndStoreId(
      params.storeId
    );

    // if the store id in combination with the user id is not available, that means the user is trying to update someone elses store
    if (!storeByUserAndStoreId)
      return new NextResponse("Unauthorized", { status: 403 });

    const size = await updateSize(params.sizeId, name, value);

    revalidatePath(`/${params.storeId}/sizes`);

    return NextResponse.json(size);
  } catch (error) {
    console.log("[SIZE_PATCH]", error);
    return new NextResponse("Internal error", { status: 500 });
  }
}

export async function DELETE(
  req: Request,
  { params }: { params: { storeId: string; sizeId: string } }
) {
  try {
    if (!params.sizeId)
      return new NextResponse("Size id is required", { status: 400 });

    // confirm that this storeId exists for this user
    const storeByUserAndStoreId = await getStoreByUserAndStoreId(
      params.storeId
    );

    // if the store id in combination with the user id is not available, that means the user is trying to update someone elses store
    if (!storeByUserAndStoreId)
      return new NextResponse("Unauthorized", { status: 403 });

    const size = await deleteSize(params.sizeId);

    revalidatePath(`/${params.storeId}/sizes`);

    return NextResponse.json(size);
  } catch (error) {
    console.log("[SIZE_DELETE]", error);
    return new NextResponse("Internal error", { status: 500 });
  }
}

AmorphOP

2024-10-30T14:28:11.508Z

bump

Anay-208

2024-10-30T14:42:17.529Z

Hi, will check this out locally when I'm free

Anay-208

2024-10-31T05:54:52.448Z

I don't think I need to check out the repo first.

Can you answer some questions first @Amorph,

Like are you sure that you are revalidating the correct path?

And try removing revalidatePath, and refresh the page after redirection. Does it update

AmorphOP

2024-10-31T13:37:47.407Z

yes, that's the correct path

revalidatepath is removed on production and yes it updates if i refresh the page after redirection but that's my issue

i want it to be updated without me refreshing the page

and also, about the page freezing, i found out it's not only after i click "continue" to delete an item, page freezes also if i click cancel,X or click outside of modal to close the modal, so it looks like the modal is the issue

Anay-208

2024-10-31T13:42:08.097Z

revalidatePath will only work, if you use that on server action

https://nextjs.org/docs/app/building-your-application/caching#invalidation-1

These are all the ways

you can run a server action which revalidates thaat route

AmorphOP

2024-10-31T13:43:44.954Z

https://nextjs.org/docs/app/api-reference/functions/revalidatePath#route-handler

but why does it say here route handler example?

Anay-208

2024-10-31T13:44:12.210Z

Its for if you cache server side

like if you are using ISR

Anay-208

2024-10-31T13:45:39.117Z

This is for invalidating server cache. but you need to invalidate client cache

Answer

AmorphOP

2024-10-31T15:40:58.849Z

oh right... got it, so checking that page only options for invalidating client cache are server actions or router refresh, so i have to change my route handlers to server actions

Anay-208

2024-10-31T16:08:45.022Z

Can you mark solution?

Anay-208

2024-11-01T06:30:19.220Z

@Amorph

AmorphOP

2024-11-01T12:01:22.990Z

yeah, do you have any idea about the modal issue?

Anay-208

2024-11-01T12:23:04.745Z

New issue = new thread