# SupabaseでRLS設定をGraphQL Codegenと連携する方法

1-1. **はじめに**
Supabaseは、オープンソースのFirebase代替として人気を集めているバックエンドプラットフォームです。その主要機能の一つにRLS（Row-Level Security）があります。このRLSは、ユーザーごとにデータアクセスを制御する方法を提供します。一方で、GraphQL Codegenは、GraphQLスキーマに基づいて型安全なコードを自動生成するツールです。この二つを連携させることで、強固で効率的なアプリケーションを構築することができます。

1-2. **目次**
1. 準備
   - Supabaseプロジェクトの設定
   - GraphQL Codegenのインストール
2. RLSルールの設定
   - テーブル作成およびポリシーの定義
3. GraphQL Codegenとの連携
   - クライアントの設定
   - 型安全なクライアントの生成
4. 実装の詳細
   - クエリの作成と実行
5. まとめ

1-3. **1. 準備**

1-3-1. **Supabaseプロジェクトの設定**
まずは、Supabaseのアカウントを作成し、新規プロジェクトを立ち上げます。プロジェクトができたら、データベースを構築するための初期設定を行います。Supabaseのダッシュボードからデータベーススキーマやテーブルを確認しましょう。

1-3-2. **GraphQL Codegenのインストール**
次に、Node.jsプロジェクトにGraphQL Codegenをインストールします。以下のコマンドを使用します。

![img](/mosaic-code.jpg)

1-4. **2. RLSルールの設定**

1-4-1. **テーブル作成およびポリシーの定義**
Supabaseでは、RLSを使用してデータのセキュリティを強化できます。RLSポリシーを設定する前に、必要なテーブルを作成します。

例えば、次のようなクエリで"tasks"というテーブルを作成します。

![img](/mosaic-code.jpg)

次に、RLSを有効化して、各ユーザーが自分のデータにのみアクセスできるようにします。

![img](/mosaic-code.jpg)

1-5. **3. GraphQL Codegenとの連携**

1-5-1. **クライアントの設定**
次に、GraphQL Codegenの設定ファイルを作成します。設定ファイルをプロジェクトのルートディレクトリに置きます(例: `codegen.yml`)。

![img](/mosaic-code.jpg)

1-5-2. **型安全なクライアントの生成**
次に、定義されたスキーマから型安全なクライアントを生成します。以下のスクリプトを実行します。

![img](/mosaic-code.jpg)

1-6. **4. 実装の詳細**

1-6-1. **クエリの作成と実行**
作成された型定義を活用して、クライアント側でGraphQLクエリを作成します。例えば、以下のように"tasks"を取得するクエリを実装します。

![img](/mosaic-code.jpg)

TypeScriptで定義された型情報を基にReactコンポーネントでQueryを実行します。

![img](/mosaic-code.jpg)

1-7. **5. まとめ**
SupabaseとGraphQL Codegenを連携させることで、RLSを効率的に活用し、セキュアかつ型安全なアプリケーションを構築することができます。本記事で示した手順を使えば、簡単に始めることができるでしょう。セキュリティと効率性を両立するための最適なアプローチの一つとして、ぜひ試してみてください。

記載した手順に従うことで、Supabaseを用いたアプリケーションのセキュリティ性とメンテナンス性を大幅に向上させることが可能です。 [cv:issue_marketplace_engineer]

# SupabaseでRLS設定をGraphQL Codegenと連携する方法

1-1. **はじめに**
Supabaseは、オープンソースのFirebase代替として人気を集めているバックエンドプラットフォームです。その主要機能の一つにRLS（Row-Level Security）があります。このRLSは、ユーザーごとにデータアクセスを制御する方法を提供します。一方で、GraphQL Codegenは、GraphQLスキーマに基づいて型安全なコードを自動生成するツールです。この二つを連携させることで、強固で効率的なアプリケーションを構築することができます。

1-2. **目次**
1. 準備
   - Supabaseプロジェクトの設定
   - GraphQL Codegenのインストール
2. RLSルールの設定
   - テーブル作成およびポリシーの定義
3. GraphQL Codegenとの連携
   - クライアントの設定
   - 型安全なクライアントの生成
4. 実装の詳細
   - クエリの作成と実行
5. まとめ

1-3. **1. 準備**

1-3-1. **Supabaseプロジェクトの設定**
まずは、Supabaseのアカウントを作成し、新規プロジェクトを立ち上げます。プロジェクトができたら、データベースを構築するための初期設定を行います。Supabaseのダッシュボードからデータベーススキーマやテーブルを確認しましょう。

1-3-2. **GraphQL Codegenのインストール**
次に、Node.jsプロジェクトにGraphQL Codegenをインストールします。以下のコマンドを使用します。

```bash
npm install @graphql-codegen/cli
```

1-4. **2. RLSルールの設定**

1-4-1. **テーブル作成およびポリシーの定義**
Supabaseでは、RLSを使用してデータのセキュリティを強化できます。RLSポリシーを設定する前に、必要なテーブルを作成します。

例えば、次のようなクエリで"tasks"というテーブルを作成します。

```sql
CREATE TABLE tasks (
  id serial PRIMARY KEY,
  user_id uuid REFERENCES auth.users NOT NULL,
  content text NOT NULL
);
```

次に、RLSを有効化して、各ユーザーが自分のデータにのみアクセスできるようにします。

```sql
ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;

CREATE POLICY "Users can view their own tasks"
  ON tasks USING (auth.uid() = user_id);
```

1-5. **3. GraphQL Codegenとの連携**

1-5-1. **クライアントの設定**
次に、GraphQL Codegenの設定ファイルを作成します。設定ファイルをプロジェクトのルートディレクトリに置きます(例: `codegen.yml`)。

```yml
schema: http://localhost:8000/graphql
documents: './src/**/*.graphql'
generates:
  ./src/types.ts:
    plugins:
      - 'typescript'
      - 'typescript-operations'
      - 'typescript-react-apollo'
```

1-5-2. **型安全なクライアントの生成**
次に、定義されたスキーマから型安全なクライアントを生成します。以下のスクリプトを実行します。

```bash
npx graphql-codegen
```

1-6. **4. 実装の詳細**

1-6-1. **クエリの作成と実行**
作成された型定義を活用して、クライアント側でGraphQLクエリを作成します。例えば、以下のように"tasks"を取得するクエリを実装します。

```graphql
query GetTasks {
  tasks {
    id
    content
  }
}
```

TypeScriptで定義された型情報を基にReactコンポーネントでQueryを実行します。

```typescript
import { useQuery } from '@apollo/client';
import { GetTasksDocument, GetTasksQuery } from './types';

const ExampleComponent = () => {
  const { data, loading, error } = useQuery<GetTasksQuery>(GetTasksDocument);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return (
    <ul>
      {data?.tasks.map(task => (
        <li key={task.id}>{task.content}</li>
      ))}
    </ul>
  );
};
```

1-7. **5. まとめ**
SupabaseとGraphQL Codegenを連携させることで、RLSを効率的に活用し、セキュアかつ型安全なアプリケーションを構築することができます。本記事で示した手順を使えば、簡単に始めることができるでしょう。セキュリティと効率性を両立するための最適なアプローチの一つとして、ぜひ試してみてください。

記載した手順に従うことで、Supabaseを用いたアプリケーションのセキュリティ性とメンテナンス性を大幅に向上させることが可能です。 

SupabaseでRLS設定をGraphQL Codegenと連携する方法

続きを読むには単価診断を受けてください（30秒）