supabase로 웹사이트 클론하기 정리 (1) - React Query로 페이지 갱신, supabase 초기 세팅

참고한 강의

[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
: https://inf.run/6SLYm

서론

Supabase는 부트캠프 수강 중 마지막 프로젝트에서 사용한 경험이 있다.
경험한 바로는 firebase와 비슷하지만 더 직관적인 편이기 때문에 사용하긴 수월하다.

다만 supabase를 이용하려고 하면 한국어 자료가 없어 깊게 배우긴 어려웠기 때문에
강의로 다시 기초를 다지고자 했다.

기본 개념 정리

supabase로 클론 코딩 전에 next.js, tailwind, recoil,react-query를 간략하게 배운다.
그 중에서 react-query 부분 중 React Query 갱신 방법을 정리한다.

React Query 갱신

• refetch 함수

  const { data, isLoading, refetch } = useQuery({
    queryKey: ['myPage'],
    queryFn: userProfileApi,
  });
   imageUploadMutation.mutate(formData, {
      onSuccess: (data) => {
        alert(data.message);
        setTimeout(() => {
          refetch();
        }, 300);
      },
      onError: (error) => {
        alert(error.message);
      },
    });
  };

위처럼 refetch 함수를 이용했었다.
쿼리클라이언트도 이용할 수 있어 정리.

• 쿼리 클라이언트 이용 queryClient.invalidateQueires

    import { queryClient } from "../config/ReactQueryProvider";
    
    const createTodoMutation = useMutation({
    mutationFn: async () => {
    if (todoInput === "") throw new Error("TODO를 입력해주세요");
    return createTodo(todoInput);
    },
    onSuccess: (TODOS) => {
    //   todosQuery.refetch();
    queryClient.invalidateQueries(["todos"]);
    },
    onError: (error: any) => {
    alert(error.message);
    },
    });
    - <button onClick={() => createTodoMutation.mutate()}>
    {createTodoMutation.isLoading ? "생성중..." : "투두 생성"}
    </button>

supabse 프로젝트 기본설정

과정

우선 회원가입 및 프로젝트 생성, 프로젝트의 비밀번호를 설정한다.

1..env에 설정값 넣어주기.

위처럼 프로젝트의 HOME 탭에서 project api 부분에서
KEY값들을 .env에 옮겨온다.
이는 supabase db와 내가 개발할 프로젝트를 연결할 때 쓰인다.

설정 탭으로 들어가 project api keys에서
service role도 .env로 옮겨온다.

2. 타입스크립트 설정하기 (supabase에서 제공)

npx supabase login 후에,
package.json에서 typescript 설정을 쉽게 하기 위해 script를 수정한다.
docs : https://supabase.com/docs/guides/api/rest/generating-types

"scripts":{
"generate-types": "npx supabase gen types typescript --project-id [project_id] --schema public > types_db.ts"

project id는 url 부분에서 가져오면 되며
npm run generate-types를 실행해줘야 한다.