Open2022/11/26にコメント追加1

SupabaseでCRUD

React + Viteを使用

supabaseのnpmをinstall
supabase側でアクセスできるように設定をする

npm i @supabase/supabase-js

App.jsxに接続の設定をする

ProjectURLとAPI KEYをコピーする
createClient.js
App.jsxに接続の設定を書く

createClient.js

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

// Project URL, API KEYの設定
export const supabase = createClient(
  "https://********:*.supabase.co"
  ,// Project URL
"************************"//API KEY
  )

App.jsx

import React, { useState, useEffect } from 'react'
import { supabase } from './createClinent'//supabaseの設定をimport

const App = () => {

  const [users, setUsers] = useState([])// useStateでsupabaseにarrayを保存する

  useEffect(() => {
    // 下に書いたfetchUsersを実行する
    fetchUsers()
  },[])
  // supabaseからusers tableの情報を取得する
  async function fetchUsers() {
    const {data} = await supabase
      .from('users')
      .select('*')
      setUsers(data) // useStateにデータを保存する
      console.log(data) // supabaseからデータがfetchできているかdebugする
  }
  return (
    <div>App</div>
  )
}

export default App

画面にSupabaseのデータを表示する

import React, { useState, useEffect } from "react";
import { supabase } from "./createClinent"; //supabaseの設定をimport
import "./App.css";

const App = () => {
  const [users, setUsers] = useState([]); // useStateでsupabaseにarrayを保存する

  useEffect(() => {
    // 下に書いたfetchUsersを実行する
    fetchUsers();
  }, []);
  // supabaseからusers tableの情報を取得する
  async function fetchUsers() {
    const { data } = await supabase.from("users").select("*");
    setUsers(data); // useStateにデータを保存する
    console.log(data); // supabaseからデータがfetchできているかdebugする
  }
  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Age</th>
          </tr>
        </thead>
        <tbody>
          {users.map((user) => (
            <tr>
              <td>{user.id}</td>
              <td>{user.name}</td>
              <td>{user.age}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default App;

supabaseにデータを追加する

import React, { useState, useEffect } from "react";
import { supabase } from "./createClinent"; //supabaseの設定をimport
import "./App.css";

const App = () => {
  const [users, setUsers] = useState([]); // useStateでsupabaseにarrayを保存する
  console.log(users);

  // Formで使うuseState,Objectでsupabaseにデータを保存する
  const [user, setUser] = useState({
    name: '',
    age: '',
  });

  console.log(user);

  // supabaseからデータをGETする
  useEffect(() => {
    // 下に書いたfetchUsersを実行する
    fetchUsers();
  }, []);
  // supabaseからusers tableの情報を取得する
  async function fetchUsers() {
    const { data } = await supabase.from("users").select("*");
    setUsers(data); // useStateにデータを保存する
    console.log(data); // supabaseからデータがfetchできているかdebugする
  }
  // parameterでデータを渡す関数
  function handleChange(event) {
    // useStateにFormのデータを保存数r
    setUser(prevFormData => { // prevFormDataは違う名前でも良い!
      return {
        ...prevFormData, // Objectのスプレッド演算子は複製やマージができる
        [event.target.name]: event.target.value,
      };
    });
  }

  async function createUser() {
    await supabase.from("users").insert({
      name: user.name, age: user.age
    })

  }

  return (
    <div>
      <form onSubmit={createUser}>
        <input type="text" placeholder="Name" name="name" onChange={handleChange} />

        <input type="number" placeholder="Age" name="age" onChange={handleChange} />

        <button type="submit">Create</button>
      </form>

      <table>
        <thead>
          <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Age</th>
          </tr>
        </thead>
        <tbody>
          {users.map((user) => (
            <tr key={user.id}>
              <td>{user.id}</td>
              <td>{user.name}</td>
              <td>{user.age}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default App;

supabaseのデータを削除する

import React, { useState, useEffect } from "react";
import { supabase } from "./createClinent"; //supabaseの設定をimport
import "./App.css";

const App = () => {
  const [users, setUsers] = useState([]); // useStateでsupabaseにarrayを保存する
  console.log(users);

  // Formで使うuseState,Objectでsupabaseにデータを保存する
  const [user, setUser] = useState({
    name: '',
    age: '',
  });

  console.log(user);

  // supabaseからデータをGETする
  useEffect(() => {
    // 下に書いたfetchUsersを実行する
    fetchUsers();
  }, []);
  // supabaseからusers tableの情報を取得する
  async function fetchUsers() {
    const { data } = await supabase.from("users").select("*");
    setUsers(data); // useStateにデータを保存する
    console.log(data); // supabaseからデータがfetchできているかdebugする
  }
  // parameterでデータを渡す関数
  function handleChange(event) {
    // useStateにFormのデータを保存数r
    setUser(prevFormData => { // prevFormDataは違う名前でも良い!
      return {
        ...prevFormData, // Objectのスプレッド演算子は複製やマージができる
        [event.target.name]: event.target.value,
      };
    });
  }

  async function createUser() {
    await supabase.from("users").insert({
      name: user.name, age: user.age
    })

    fetchUsers()

  }

  async function deleteUser(userId) {
  // 古い書き方
  //   const { data, error } = await supabase
  // .from('users')
  // .delete()
  // .eq('id', userId)
  // 新しい書き方. 2022/11/23
  const { data, error } = await supabase
  .from('users')
  .delete()
  .match({ id: userId })
  console.log('新しい書き方で削除!')

  fetchUsers()

  if (error) {
    console.log(error);
  }

  if (data) {
    console.log(data);
  }

  }

  return (
    <div>
      <form onSubmit={createUser}>
        <input type="text" placeholder="Name" name="name" onChange={handleChange} />

        <input type="number" placeholder="Age" name="age" onChange={handleChange} />

        <button type="submit">Create</button>
      </form>

      <table>
        <thead>
          <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Age</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {users.map((user) => (
            <tr key={user.id}>
              <td>{user.id}</td>
              <td>{user.name}</td>
              <td>{user.age}</td>
              <td><button onClick={()=> {deleteUser(user.id)}}>Delete</button></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default App;

supabaseのデータを更新する

import React, { useState, useEffect } from "react";
import { supabase } from "./createClinent"; //supabaseの設定をimport
import "./App.css";

const App = () => {
  const [users, setUsers] = useState([]); // useStateでsupabaseにarrayを保存する
  console.log(users);

  // Formで使うuseState,Objectでsupabaseにデータを保存する
  const [user, setUser] = useState({
    name: "",
    age: "",
  });

  // 編集Formで使うuseState,Objectでsupabaseにデータを保存する
  const [user2, setUser2] = useState({
    id: "",
    name: "",
    age: "",
  });

  console.log(user);

  // supabaseからデータをGETする
  useEffect(() => {
    // 下に書いたfetchUsersを実行する
    fetchUsers();
  }, []);
  // supabaseからusers tableの情報を取得する
  async function fetchUsers() {
    const { data } = await supabase.from("users").select("*");
    setUsers(data); // useStateにデータを保存する
    console.log(data); // supabaseからデータがfetchできているかdebugする
  }
  // parameterでデータを渡す関数
  function handleChange(event) {
    // useStateにFormのデータを保存数r
    setUser((prevFormData) => {
      // prevFormDataは違う名前でも良い!
      return {
        ...prevFormData, // Objectのスプレッド演算子は複製やマージができる
        [event.target.name]: event.target.value,
      };
    });
  }
  // parameterでデータを渡す関数
  function handleChange2(event) {
    // useStateにFormのデータを保存数r
    setUser2((prevFormData) => {
      // prevFormDataは違う名前でも良い!
      return {
        ...prevFormData, // Objectのスプレッド演算子は複製やマージができる
        [event.target.name]: event.target.value,
      };
    });
  }

  // 新規作成の関数
  async function createUser() {
    await supabase.from("users").insert({
      name: user.name,
      age: user.age,
    });

    fetchUsers();
  }

  // 削除をするための関数
  async function deleteUser(userId) {
    // 古い書き方
    //   const { data, error } = await supabase
    // .from('users')
    // .delete()
    // .eq('id', userId)
    // 新しい書き方. 2022/11/23
    const { data, error } = await supabase.from("users").delete().match({ id: userId });
    console.log("新しい書き方で削除!");

    fetchUsers();

    if (error) {
      console.log(error);
    }

    if (data) {
      console.log(data);
    }
  }
  // 編集ボタンの関数。ボタンを押すと、ユーザーの現在の名前と年齢が、
  // 編集用の検索フォームに表示される
  async function displayUser(userId) {

    users.map((user) => {
      if (user.id == userId) {
        setUser2({ id: user.id, name: user.name, age: user.age });
      }
    });
  }
  // 更新用の関数
  // Form2の送信ボタンを押すと実行される
  async function updateUser(userId) {
   // 古い書き方
    // const { data, error } = await supabase.from("users").update({ id: user2.id, name: user2.name, age: user2.age }).eq("id", userId);

    // 新しい書き方. 2022/11/23
      const { data, error } = await supabase
    .from('users')
    .update({ id: user2.id, name: user2.name, age: user2.age })
    .match({ id: userId })

    fetchUsers();

    if (error) {
      console.log(error);
    }

    if (data) {
      console.log(data);
    }
  }

  return (
    <div>
      {/* FORM1 */}
      <form onSubmit={createUser}>
        <input type="text" placeholder="Name" name="name" onChange={handleChange} />

        <input type="number" placeholder="Age" name="age" onChange={handleChange} />

        <button type="submit">Create</button>
      </form>

      {/* FORM2 */}
      {/* 更新の処理はアロー関数で書かないと画面に描画できないエラーが出た! */}
      <form onSubmit={() => updateUser(user2.id)}>
        <input type="text" name="name" onChange={handleChange2} defaultValue={user2.name} />

        <input type="number" name="age" onChange={handleChange2} defaultValue={user2.age} />

        <button type="submit">Save Changes</button>
      </form>

      <table>
        <thead>
          <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Age</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {users.map((user) => (
            <tr key={user.id}>
              <td>{user.id}</td>
              <td>{user.name}</td>
              <td>{user.age}</td>
              <td>
                <button
                  onClick={() => {
                    deleteUser(user.id);
                  }}
                >
                  Delete
                </button>
                <button
                  onClick={() => {
                    displayUser(user.id);
                  }}
                >
                  Edit
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default App;