Next.js Discord

Discord Forum

App router Next 14- revalidationPath and revalidationTag not working

Unanswered
Pacific sand lance posted this in #help-forum
Open in Discord
Pacific sand lanceOP
//Page.tsx
'use client';
import Profile from '../components/Profile';
import { useFormState } from 'react-dom';
import { updateProfile } from '../lib/actions';
import { getSession } from 'next-auth/react';
import { getProfile } from '../lib/actions';
import { useEffect, useState } from 'react';
import { Profile as ProfileType } from '../lib/definitions';

const initialState = {
  message: null,
};

export default function Page() {
  const [state, formAction] = useFormState(updateProfile, initialState);
  const [profile, setProfile] = useState<ProfileType>();

  useEffect(() => {
    const getData = async () => {
      const session = await getSession();
      const userId = session?.user.id;
      const profile = await getProfile(userId);
      setProfile(profile);
    };
    getData();
  }, []);

  return (
    <>
      <form action={formAction}>
        <Profile profile={profile} formState={state} />
        <button type="submit">Submit</button>
      </form>
    </>
  );
}

2 Replies

Pacific sand lanceOP
// actions.ts
export async function updateProfile(prevState: any, formData: FormData) {
  const ProfileSchema = z.object({
    bio: z.string().optional(),
    gender: z.string().optional(),
    dateOfBirth: z.string().optional(),
  });
  try {
    const session = await getServerSession(authOptions);
    const userId = session?.user.id;
    let profile;

    const form = {
      bio: formData.get('bio'),
      gender: formData.get('gender'),
      dateOfBirth: formData.get('dateOfBirth'),
    };

    const parsedForm = ProfileSchema.parse(form);
    const parsedDateOfBirth = new Date(parsedForm.dateOfBirth ?? '');
    const isoDateString = parsedDateOfBirth.toISOString();

    const userProfile = {
      bio: parsedForm.bio,
      gender: parsedForm.gender,
      dateOfBirth: isoDateString,
      userId: userId,
    };

    const user = await prisma.user.findUnique({
      where: {
        id: userId,
      },
    });

    if (user === null) return NextResponse.json({ message: 'Unable to find user' });

    if (user.profileId === null) {
      let createUser = await prisma.profile.create({ data: userProfile });
      const updateUser = await prisma.user.update({
        where: {
          id: userId,
        },
        data: {
          profileId: createUser.id,
        },
      });
      profile = updateUser;
    } else {
      const updateProfile = await prisma.profile.update({
        where: {
          userId: userId,
        },
        data: userProfile,
      });
      profile = updateProfile;
    }

    revalidatePath('/profile');

    return { message: `Profile updated`, profile: profile };
  } catch (e) {
    return { message: `Unable to update profile` };
  }
}
I have a form set up with useFormState and it calls a server action when I submit it. However, I am trying to figure out how to update the UI after i submit the form. I know that react has no reason to update the UI, cause there is no profile state. its not like where you have handleSubmit and then you update the state after using fetch, but revalidatePath should be able to take care of that for me right? or even revalidateTag . Neither of these functions seem to have any effect. I read some issues with it and next14, is this feature bugged atm? any alternatives? I was thinking of router.refresh , but thats a client side function, I Dont think that will help me