Next.js Discord

Discord Forum

RevalidatePath does not update client correctly

Answered
Yellow croaker posted this in #help-forum
Open in Discord
Yellow croakerOP
Having a strange bug in my React/Next.js app where deleting an item from an array and then adding a new one results in the new item having the old item's data. The backend has the correct data though.

  const onSubmit = async (data, index) => {
    try {
    await updateWorkExperience(data.workExperience[index];
    } catch (error) {
    }
  };
  const handleDelete = async (field: WorkExperienceType, index: number) => {
    await deleteWorkExperience(field.id);
  };
return(
<Accordion type="single" collapsible>
  {workexperiences.map((field, index) => (
    <div key={field.id}>
      <AccordionItem value={`item-${index}`}>
        <AccordionTrigger>
          <div> {companyValues[index]?.company}</div>
        </AccordionTrigger>
        <AccordionContent>
          <Form {...workExperienceForm}>
            <form
              onSubmit={handleSubmit((data) => onSubmit(data, index))}>
              <div>
                <Input
                  className="hidden"
                  {...register(`workExperience.${index}.id`)}
                  defaultValue={field.id || undefined}
                />
                <FormField
                  control={control}
                  name={`workExperience.${index}.company`}
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>company</FormLabel>
                      <FormControl>
                        <Input placeholder="company" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              ...
                <Button>Submit</Button>
                <Button
                  type="button"
                  onClick={() => handleDelete(field, index)}>
                  Remove
                </Button>
              </div>
            </form>
          </Form>
        </AccordionContent>
      </AccordionItem>
    </div>
  ))}
</Accordion>;
)
Answered by Yellow croaker
The workExperiences that we map, contains the correct data from the server side, but for some reason making an add still gets the deleted data from somewhere, but not from the workexperiences.
View full answer

5 Replies

Yellow croakerOP
Here are my server actions at actions.ts

export async function updateWorkExperience(formData: WorkExperienceType) {
  const workExperience = await db.workExperience.update({
    where: {
      id: formData.id,
    },
    data: {
      ...formData,
    },
  });
  revalidatePath(`/resume/${workExperience.resumeId}`);
  return workExperience;
}

export async function createWorkExperience(formData: WorkExperienceType) {
  const workExperience = await db.workExperience.create({
    data: formData,
  });
  revalidatePath(`/resume/${workExperience.resumeId}`);
}
export async function deleteWorkExperience(id: string) {
  const workExperience = await db.workExperience.delete({
    where: { id },
  });
  revalidatePath(`/resume/${workExperience.resumeId}`);
  return workExperience;
}


And this is the CreateWorkButton component:
export function CreateWorkButton({
  className,
  variant,
  ...props
}: WorkCreateButton) {
  const [isLoading, setIsLoading] = React.useState<boolean>(false);
  const { resumeId } = props;
  async function onClick() {
    setIsLoading(true);

    const CreateIt = {
      company: '',
      position: '',
      description: '',
      resumeId: resumeId,
    };
await createWorkExperience(CreateIt);


    setIsLoading(false);
  }

  return (
    <button
      onClick={onClick}
      className={cn(
        buttonVariants({ variant }),
        {
          'cursor-not-allowed opacity-60': isLoading,
        },
        className,
      )}
      disabled={isLoading}
      {...props}
    >
      {isLoading ? (
        <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
      ) : (
        <Icons.add className="mr-2 h-4 w-4" />
      )}
      Add Work Experience
    </button>
  );
}
Yellow croakerOP
The workExperiences that we map, contains the correct data from the server side, but for some reason making an add still gets the deleted data from somewhere, but not from the workexperiences.
Answer
Yellow croakerOP
I also want to add that the revalidatePath triggers the re-render.
Yellow croakerOP
Problem was on useForm DefaultValues. Changed it to Be values
@Yellow croaker Problem was on useForm DefaultValues. Changed it to Be values
riský
so is your question solved? if so 🎉