次.の投稿を投稿してください

こんにちは!過去2、3の記事で、PrismaとPostgresデータベースを見てきました.
この記事では、次を作成します.Postgresデータベースにデータを投稿できるJSアプリ.
我々は何を構築する:

Spotifyによるユーザ徴候

ユーザーはSpotifyからプレイリストを読み込みます

ユーザーは、我々のPostgresデータベースにプレイリストのうちの1つを同期させることができます

次のようになります.


出発点の設定
私は、使用するつもりですSpotify login example 今日の記事の出発点として昨日を作りました.
あなたが沿って続くならば、それをダウンロードしてくださいGitHub はい.
我々がする必要がある最初のことは、我々のアプリケーションにPrisma依存性を追加することです.

npm i -D prisma
npm i @prisma/client

次に、Prismaクライアントを初期化する必要があります.

npx prisma init

これはPrismaフォルダを生成し、データベースURLを.env ファイル.
開放する.env ファイルと貼り付けPostgres database URL .

データベースを設定する
我々がする必要がある次のことは、我々のプレイリストのためのスキーマを定義することです.開けるprisma/schema.prisma ファイルを下に追加します.

model Playlist {
  id           Int @default(autoincrement()) @id
  title        String
  image        String?
  uri          String @unique
  addedBy      String
}

ここからデータベースを構築する必要があります.

npx prisma db push

ローカルスキーマを生成します.

npx prisma generate

エンティティを投稿するAPIエンドポイントの作成
私たちは既にplaylists エンドポイントので、それを活用しましょうPOST リクエスト.
開けるpages/api/playlists.js ファイルとPrisma要件をインポートして起動します.

import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();

ではハンドラを修正しましょうPOST and GET .

const handler = async (req, res) => {
  const {
    token: { accessToken, email },
  } = await getSession({ req });
  if (req.method === 'POST') {
    // Do post stuff
  } else if (req.method === 'GET') {
    const response = await getUsersPlaylists(accessToken);
    const { items } = await response.json();
    return res.status(200).json({ items });
  }
  res.end();
};

に関してはPOST セクションでは、ポストクエリーから正しいデータを抽出し、新しいオブジェクトを作成してデータベースに送信します.

if (req.method === 'POST') {
    const { body } = req;
    const {
      name,
      images: { 0: { url } = {} },
      uri,
    } = JSON.parse(body);
    const playlistItem = {
      title: name,
      image: url,
      uri: uri,
      addedBy: email,
    };
}

それから、我々がする必要があるすべては、我々のPrismaクライアントを呼び出して、使用しますcreate 関数を挿入します.

const playlist = await prisma.playlist.create({
  data: playlistItem,
});
return res.status(200).json(playlist);

そして、我々が現在実行するならば、それはそれですPOST このAPIエンドポイントへのリクエストは、私たちのプレイリストが追加されます.

フロントエンドアクションの作成
フロントエンドのためにindex.js ページ.
map関数の中には、このようにクリックアクションでボタンを追加します.

{list.map((item) => (
  <div key={item.id}>
    <h1>{item.name}</h1>
    <img src={item.images[0]?.url} width='100' />
    <br />
    <button onClick={() => saveToDatabase(item)}>
      Save in database
    </button>
  </div>
))}

さあ行きましょうsaveToDatabase 関数.

const saveToDatabase = async (item) => {
    const res = await fetch('api/playlists', {
      method: 'POST',
      body: JSON.stringify(item),
    });
    const data = await res.json();
};

この例では、APIリクエストを渡すだけですが、返されたデータはまだ何もしません.
これは、一度ボタンをクリックすると、この関数を呼び出し、我々のAPIにそれを投稿するように完璧です.
を返します.

また、完全なコードを見つけることができますGitHub .

読んでいただきありがとうございます、接続しましょう!
私のブログを読んでくれてありがとう.私の電子メール会報を購読して、接続してくださいFacebook or