2~3일 동안 머리를싸매면서 해결했던 방법을 공유하고자 이 글을 쓴다.
우선 필자는 Next.js, React-Query, Supabase를 사용중이다.

개요

사용자의 프로필을 수정하는 과정에서 닉네임 수정은 react-query에 의해 즉각적으로 반영이 되었고,
파일 업로드는 react-query, supabase와 supabase storage에서도 정상적으로 동작하였지만, Next.js에서 바뀐 이미지로 수정되지 않는 현상이 발생하였다.

생각해본 의문점들

1. React-Query의 mutation function을 제대로 작성하였는가?

// modifyUserData.ts
export type MutationType = {
  id: string;
  formData: FormData;
};

export const modifyUserData = async ({ id, formData }: MutationType) => {
  const res = await fetch(`/api/profile/${id}`, {
    method: 'POST',
    body: formData,
  });
  return res;
};

react-query 의 데이터를 콘솔로 찍어보았을때, 변경된 프로필의 주소로 데이터가 잘 나왔다.

2. Supabase가 캐싱을 진행하는가?

Supabase database와 storage에 변경사항이 즉각적으로 반영되는것을 확인 -> Pass

3. Supabase storage upsert 문제

이름을 같게하여 파일을 업로드함 storage 자체의 upsert에는 문제가 없었으나 Next.js에서 문제가 발생함

4. Next.js 캐싱문제

3번의 의문점에 확장하여 이름을 같게하면 Next.js에서 파일이 바뀌어도 이전(캐싱한)파일을 들고오는 문제점이 발생함.

해결방법

1. upsert 대신 upload 사용하기

서버에 부담을 줄 수도 있다는 생각에 기존 똑같은 이름의 파일만 대체하면 되지 않을까? 라고 처음엔 생각했지만, 이름이 같으면 캐싱을 해버리는 상황이 발생해 upload로 진행하고 새로운 url을 DB에 넣어줌

2. hackey 한 방식

{data?.profile_url && (
          <Image
            src={`${data?.profile_url}?${new Date().getTime()}` as string}
            width={120}
            height={120}
            alt='profile'
          />
        )}

?를 붙이고 Date의 getTime을 사용하여 캐싱이 되지 못하도록 src의 이름을 계속하여 바꾸어준다.
이 방식은 처음보는 방식인데 옵셔널 체이닝으로 쓰는 물음표가아닌 ? 뒤에 붙으면 무시가되어버린다.