tag the fetch that fetches todo list on server side, then revalidateTag after mutation (creating a todo)

and/or router.refresh() on the client

in my case i fetch my tasks in a server-component and pass it to a client component. with revalidateTag, the tasks in the client-component are not updated. is the router.reload() the proper way to fix this or am i missing something?

just revalidatePath in a server action after the mutation , this will purge the Data Cache(ur fetch function) and Full Route Cache(ur route)

didn't work, the client-component doesn't reload (next.js 14.0.0 and server actions)

ur doing smtng wrong then , show me ur code

even with useEffect it doesnt know the change in the tasks

wym ?

i have this server-function, that is executed in a client-component onDrop. const updateTask = async (task: unknown): Promise<Task | ErrorResponse> => {
let response: Task | ErrorResponse | null = null;

if (task && typeof task === "object" && "id" in task)
response = await fetchServer<Task | ErrorResponse>(/tasks/${task.id}/, {
method: "PATCH",
body: JSON.stringify(task),
});

if (response && "id" in response) {
revalidateTag("tasks");
return response as Task;
}

return { status: 404, message: "Ups! Wrong password. Try again." } as ErrorResponse;
};

but the client-component in witch the tasks are ordered doesn't know the tasks changed

even when i pass the tasks to the client-component via props and updateing the state with

useEffect(() => {
setTasks(tasks);
}, [tasks]);

the useEffect doesn't execute

Idont get a lot of things in ur code , like where are u running this fn and what is fetchServer , and ur doing revalidateTag("tasks") to which function exactly , create a github repo so I can see everything

u doing dnd init ?

Hey guys, thanks for the responses!!

This worked for me:

'use server'

import { prismaClient } from '@/lib/prisma'
import { revalidatePath } from 'next/cache'

export const createTask = async (task: string, userId: string) => {
  const newTask = await prismaClient.task.create({
    data: {
      userId,
      description: task,
    },
  })

  revalidatePath('/')

  return newTask
}

However, as soon as this revalidation happens, an error is also triggered in the console.

fetchServer is just a custom fetch to my backend, thats returning the resposne.json(). Yes because of the dnd I made the component clientside. I can give you the repo but i already made a workaround but if you want i can give it to you