【GraphQL】Prismaを使って、PostgresSQLデータを取得する
GraphQL

【GraphQL】Prismaを使って、PostgresSQLデータを取得する

作成日:2021年11月20日
更新日:2021年11月25日

前回は、Prisma を使って、PostgresSQL データベースと接続しました。

今回は、Prisma を使って、PostgresSQL データを取得します。

コードは、前回のコードを使用します。

graphql-prisma-postgres-setup

【GraphQL】Prismaを使って、PostgresSQLデータベースと接続する

スキーマを指定する

prisma フォルダの schema.prisma ファイルに、スキーマを指定します。

まず、Books という model を作成します。

model Book {
}

id を作成します。

id の型を指定します。

id の型は整数にしたいので、Intを指定します。

model Book {
id Int
}

prisma で ID を認識するために、@id を指定します。

model Book {
id Int @id
}

毎回 ID を指定したくないので、自動で取得できる様にするために、autoincrement を設定します。

model Book {
id Int @id @default(autoincrement())
}

title、author、categoryId を指定します。

また、インデントを揃えると、見やすくなります。

model Book {
id Int @id @default(autoincrement())
title String
author String
categoryId Int
}

isRead は、デフォルトでfalseを指定します。

model Book {
id Int @id @default(autoincrement())
title String
author String
categoryId Int
isRead Boolean @default(false)
}

作成日を作成します。

作成日は、デフォルトで、now を指定します。

model Book {
id Int @id @default(autoincrement())
title String
author String
categoryId Int
isRead Boolean @default(false)
createdAt DateTime @default(now())
}

Book と同様に、Category も作成します。

model Category {
id Int
name String
}

では、一度テーブルを作成します。

テーブルを作成するには、ターミナルでnpx prisma db pushを実行します。

image2

テーブルが作成されました。

作成されたかどうかを確認します。

ターミナルで、npx prisma studioを実行します。

image3

自動で、ブラウザが開きました。

Book をクリックしてみると、

image4

先ほど作成したテーブル名が表示されました。

リレーションシップを作成する

次は、Book と Category の関係を確立します。

Book の categoryId と Category の id を紐付けます。

Book の categoryId の下に category を設定しましょう。

model Book {
id Int @id @default(autoincrement())
title String
author String
isRead Boolean @default(false)
createdAt DateTime @default(now())
categoryId Int
category
}

category の中身は、Categoryなので、型はCategoryを指定します。

model Book {
id Int @id @default(autoincrement())
title String
author String
isRead Boolean @default(false)
createdAt DateTime @default(now())
categoryId Int
category Category
}

relationを使って紐付けます。

Book の対象は、categoryIdなので、fieldscategoryIdを指定します。

Category の対象は、idなので、referencesidを指定します。

model Book {
id Int @id @default(autoincrement())
title String
author String
isRead Boolean @default(false)
createdAt DateTime @default(now())
categoryId Int
category Category @relation(fields: [categoryId], references: [id])
}

Category では、booksを設定します。

booksには、Book[]を指定します。

model Category {
id Int @id @default(autoincrement())
name String
books Book[]
}

では、再度ブラウザで確認します。

prisma studio を解除して、ターミナルでnpx prisma db pushを実行します。

npx prisma studioを実行します。

image5

Book に category が追加されました。

image6

Category にも books が追加されています。

Book と Category にデータを入れてみます。

image7

image8

Book と Category の関係は、問題なく確立されています。

Postgres のデータを GraphQL で取得する

最後に、Postgres のデータを GraphQL で取得します。

まずは、index.ts で、PrismaClientPrismaをインポートします。

ts
import { PrismaClient, Prisma } from "@prisma/client";

Postgres のデータベースを接続するために、PrismaClient を呼び出します。

ts
const prisma = new PrismaClient();

server内のdbprismaに置き換えます。

ts
const server = new ApolloServer({
typeDefs,
resolvers: {
Query,
Mutation,
Category,
Book,
},
context: {
prisma,
},
});

context の型を作成しておきます。

ts
export type Context = {
prisma: PrismaClient<
Prisma.PrismaClientOptions,
never,
Prisma.RejectOnNotFound | Prisma.RejectPerOperation
>;
};

次に、shema.ts のスキーマを、schema.prisma で作成した型に合わせます。

ts
const { gql } = require("apollo-server");
export const typeDefs = gql`
type Query {
books(filter: BooksInput): [Book!]!
book(id: Int!): Book
categories: [Category!]!
category(id: ID!): Category
}
type Mutation {
addBook(input: AddBookInput!): Book!
deleteBook(id: Int!): Boolean!
updateBook(id: Int!, input: UpdateBookInput!): Book!
}
type Book {
id: Int!
title: String!
author: String!
createdAt: String!
category: Category!
}
type Category {
id: Int!
name: String!
books: [Book!]!
}
input BooksInput {
isRead: Boolean
}
input AddBookInput {
id: Int!
title: String!
author: String!
categoryId: Int!
isRead: Boolean!
}
input UpdateBookInput {
id: Int
title: String
author: String
categoryId: Int
isRead: Boolean
}
`;

resolvers フォルダの Query.ts を開きます。

books 内のdbを prisma へ変換します。

また、parent と filter は、取り敢えず『_』にしておきましょう。

ts
books: (_, _, { prisma }) => {
let filteredBooks = db.books;
if (filter) {
if (filter.isRead === true) {
filteredBooks = filteredBooks.filter((book) => {
return book.isRead;
});
}
}
return filteredBooks;
},

prisma に型指定をします。

型は、先ほど作成した Context を使用します。

ts
books: (_: any, __: any, { prisma }: Context) => {
let filteredBooks = db.books;
if (filter) {
if (filter.isRead === true) {
filteredBooks = filteredBooks.filter((book) => {
return book.isRead;
});
}
}
return filteredBooks;
},

prisma の findMany を使って、一覧を取得します。

ts
books: (_: any, __: any, { prisma }: Context) => {
return prisma.book.findMany();
},

では、GraphQL のサーバーを起動して、ブラウザで確認します。

image9

『addBooks』をクリックすると、

image10

Postgres のデータを取得することができました。

以下が、全文です。

次回は、リゾルバ内を整形して、特定の PostgresSQL データを取得します

graphql-prisma-postgres-unique

【GraphQL】Prismaを使って、特定のPostgresSQLデータを取得する

© 2024あずきぱんウェブスタジオ