라이브러리 - Supabase JavaScript Client Library

Supabase JS Client Library

 

 

✅ Supabase JS Client Library란?

---

Supabase가 제공하는 전용 Client Library.

 

데이터베이스와 상호작용하려면 이걸 사용해야 한다.

뿐만 아니라, 유저 인증(user authentication)을 사용한다거나 실시간 데이터베이스 변경사항을 리스닝하거나 Edge Function을 호출하거나 로그인 기능을 만들 때도 사용한다.(유저의 쿠키를 가져와서 유효한 세션인지 확인도 가능)

 

✅ Installation

---

npm install @supabase/supabase-js

 

https://supabase.com/docs/reference/javascript/installing

JavaScript: Installing | Supabase Docs

 

 

✅ Initialize

---

<app/supa-client.ts>

import { createClient } from "@supabase/supabase-js";

const client = createClient(
  process.env.SUPABASE_URL!,
  process.env.SUPABASE_PUBLISHABLE_KEY!,
);

export default client;

 

 

✅ TypeScript Support

---

supabase gen types typescript --project-id abcdefghijklmnopqrst > database.types.ts

 

https://supabase.com/docs/reference/javascript/typescript-support

JavaScript: TypeScript support | Supabase Docs

 

package.json에 script로 추가해준다.

"db:typegen" : "supabase gen types typescript --project-id abcdefghijklmnopqrst > database.types.ts"

 

<app/supa-client.ts>

import { createClient } from "@supabase/supabase-js";
import type { Database } from "../database.types";

const client = createClient<Database>(
  process.env.SUPABASE_URL!,
  process.env.SUPABASE_PUBLISHABLE_KEY!,
);

export default client;

 

 

✅ Usage

---

<community/queries.ts>

export const getTopics = async () => {
  const { data, error } = await client.from("topics").select("name, slug");
  console.log(data, error);
  return data;
};

자동 완성으로 query 작성이 편해짐

 

export const getPosts = async () => {
  const { data, error } = await client
    .from("posts")
    .select(
      `post_id, title, created_at, topics (name), profiles (name, username, avatar)`,
    );
};

topics와 profiles를 수동으로 join할 필요없이 이렇게 하면 된다.(기본으로 left join이 되어서 topics의 name이나 profiles의 name 같은 것들이 nullable이다.)

 

null이 없도록 하기 위해서는 inner join을 해줘야 한다.

 

Inner Join 방법

export const getPosts = async () => {
  const { data, error } = await client.from("posts").select(
    `post_id, 
      title, 
      created_at, 
      topics!inner (name), 
      profiles!inner (name, username, avatar)`,
  );
};

 

Column 이름 지정하는 법

export const getPosts = async () => {
  const { data, error } = await client.from("posts").select(
    `post_id, 
      title, 
      created_at, 
      topic:topics!inner (name), 
      author:profiles!inner (name, username, avatar)`,
  );
};

 

Foreign Key Error

Error: Could not embed because more than one relationship was found for 'posts' and 'profiles'

  details: [
    {
      cardinality: 'many-to-one',
      embedding: 'posts with profiles',
      relationship: 'posts_profile_id_profiles_profile_id_fk using posts(profile_id) and profiles(profile_id)'
    },
    {
      cardinality: 'many-to-many',
      embedding: 'posts with profiles',
      relationship: 'post_upvotes using post_upvotes_post_id_posts_post_id_fk(post_id) and post_upvotes_profile_id_profiles_profile_id_fk(profile_id)'
    }
  ],

현재 posts와 profiles의 relationship을 연결하려는데 relationship이 1개 이상이라서 생기는 에러이다.(명확하게 지정해줘야 함)

 

(relationship이 1개 이상인 이유는 posts에 profile_id로 profiles가 연결되어 있는 relationship과 post_upvotes에 post_id와 profile_id의 composite primary key로 연결되어 있는 relationship, 이렇게 2개가 있기 때문)

 

export const getPosts = async () => {
  const { data, error } = await client.from("posts").select(
    `post_id, 
      title, 
      created_at, 
      topic:topics!inner (name), 
      author:profiles!posts_profile_id_profiles_profile_id_fk!inner (name, username, avatar)`,
  );
  console.log(error);
  if (error) throw new Error(error.message);
  return data;
};

이렇게 적어주면 된다.(Drizzle이 constraint를 생성할 때 자동 생성한 foreign key이다.)

(다른 방법도 있음)

 

count

export const getPosts = async () => {
  const { data, error } = await client.from("posts").select(
    `post_id, 
      title, 
      created_at, 
      topic:topics!inner (name), 
      author:profiles!posts_profile_id_profiles_profile_id_fk!inner (name, username, avatar),
      upvotes:post_upvotes (count)
      `,
  );
  console.log(error);
  if (error) throw new Error(error.message);
  return data;
};

count만 적어주면 된다.

그런데 이상한 형식으로 반환이 됨

왜 굳이 count를 반환할 때 object에 담고 array로 반환할까?

데이터 형태가 맘에 들지 않는 문제를 해결하기 위해 데이터베이스 view를 생성한다.

 

 

✅ View

---

<app/sql/views/community-post-list-view.sql>

CREATE VIEW community_post_list_view AS 
SELECT
    posts.post_id,
    posts.title,
    posts.created_at,
    topics.name AS topic,
    profiles.name AS author,
    profiles.avatar AS author_avatar,
    profiles.username AS author_username,
    COUNT(post_upvotes.post_id) AS upvotes
FROM posts
INNER JOIN topics USING (topic_id)
INNER JOIN profiles USING (profile_id)
LEFT JOIN post_upvotes USING (post_id)
GROUP BY posts.post_id, topics.name, profiles.name, profiles.avatar, profiles.username;

 

위에 적은 SQL Query를 Supabase에 views라는 폴더를 생성하고 안에 넣은 뒤 실행시켜 준다.

그리고 queries.ts를 수정해준다.

export const getPosts = async () => {
  const { data, error } = await client
    .from("community_post_list_view")
    .select(`*`);
  console.log(error);
  if (error) throw new Error(error.message);
  return data;
};

 

하지만 type이 null이 아니어야 하는데 null로 나오는 경우가 있다.

-> type-fest를 사용한다.

 

 

✅ type-fest

---

type-fest란?

type을 덮어 쓰거나 수정하는데 사용할 수 있는 TypeScript type의 모음

 

npm install type-fest

 

https://github.com/sindresorhus/type-fest

GitHub - sindresorhus/type-fest: A collection of essential TypeScript types

 

import { createClient } from "@supabase/supabase-js";
import type { MergeDeep, SetNonNullable, SetFieldType } from "type-fest";
import type { Database as SupabaseDatabase } from "../database.types";

type Database = MergeDeep<
  SupabaseDatabase,
  {
    public: {
      Views: {
        community_post_list_view: {
          Row: SetFieldType<
            SetNonNullable<
              SupabaseDatabase["public"]["Views"]["community_post_list_view"]["Row"]
            >,
            "author_avatar",
            string | null
          >;
        };
      };
    };
  }
>;

const client = createClient<Database>(
  process.env.SUPABASE_URL!,
  process.env.SUPABASE_PUBLISHABLE_KEY!,
);

export default client;

author_avatar는 nullable이기 때문에 string | null로 변경해줘야 한다.