clientAction

clientAction: 클라이언트에서 뮤테이션 처리하기

action에 더해, 아니면 대신에, 클라이언트에서 실행될 clientAction 함수를 정의할 수 있어요. 각 라우트는 뮤테이션을 처리하는 clientAction 함수를 정의할 수 있어요.

출처: Remix 공식 문서 — clientAction

본문

export const clientAction = async ({
  request,
  params,
  serverAction,
}: ClientActionFunctionArgs) => {
  invalidateClientSideCache();
  const data = await serverAction();
  return data;
};

이 함수는 클라이언트에서만 실행되며 몇 가지 방식으로 사용할 수 있어요:

• 순수 클라이언트 라우트를 위한 서버 action 대신
• clientLoader 캐시와 함께 사용해 뮤테이션 시 캐시를 무효화하기 위해
• React Router에서 마이그레이션을 원활하게 하기 위해

인자

params

이 함수는 action과 같은 params 인자를 받아요.

request

이 함수는 action과 같은 request 인자를 받아요.

serverAction

serverAction은 이 라우트의 서버 action으로 fetch 호출을 하는 비동기 함수예요.

더 알아보기

• Client Data Guide
• clientLoader