前回は、Prismaを使って、特定のPostgresSQLデータを取得しました。

今回は、PostgresSQLデータを追加や削除、更新します。

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

PostgresSQLデータを追加する

まずは、スキーマを修正します。

schema.tsのtypeDefsにある、AddBookInputを修正します。

input AddBookInput {
  title: String!
  author: String!
  categoryId: Int!
  isRead: Boolean!
}

エラーメッセージを提供するための型を作成します。

type Error {
  message: String!
}

addbookの型にErrorの型を含めたいので、新たに型を作成します。

type BookPayload {
  errors: [Error!]!,
  book: Book
}

Mutationaddbookを修正します。

型は、先程作成した、BookPayloadにしましょう。

type Mutation {
  addBook(input: AddBookInput!): BookPayload!
  deleteBook(id: Int!): Boolean!
  updateBook(id: Int!, input: UpdateBookInput!): Book!
}

スキーマが完成したので、次はリゾルバーを修正します。

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

MutationのaddBookのdbprismaに変更します。

また、inputのidは自動で作成されるので、削除します。

addBook: async (
  _: any,
  { input }: any,
  { prisma }: Context
) => {
  const { title, author, categoryId, isRead } = input;
}

入力データがない場合、エラーメッセージを提供するようにします。

また、bookは、nullを返すようにします。

addBook: async (
  _: any,
  { input }: any,
  { prisma }: Context
) => {
  const { title, author, categoryId, isRead } = input;
    if(!title || !author || !categoryId || !isRead) {
    return  {
      errors: [{
        message: "本の内容を入力してください"
      }],
      book: null
    }
  }
}

bookのデータを作成するための変数を設定します。

prismaでデータを作成するには、createを使います。

addBook: async (
  _: any,
  { input }: any,
  { prisma }: Context
) => {
  const { title, author, categoryId, isRead } = input;
    if(!title || !author || !categoryId || !isRead) {
    return  {
      errors: [{
        message: "本の内容を入力してください"
      }],
      book: null
    }
  }

    const newBook = await prisma.book.create({
    data: {
      title,
      author,
      categoryId,
      isRead,
    },
  });
}

errorsbookを返します。

addBook: async (
  _: any,
  { input }: any,
  { prisma }: Context
) => {
  const { title, author, categoryId, isRead } = input;
  if(!title || !author || !categoryId || !isRead) {
    return  {
      errors: [{
        message: "本の内容を入力してください"
      }],
      book: null
    }
  }

  const newBook = await prisma.book.create({
    data: {
      title,
      author,
      categoryId,
      isRead,
    },
  });

  return {
    errors: [],
    book: newBook
  }
},

addBookinputの型を作成します。

type MutationBook = {
  input : {
    title : string;
    author : string;
    categoryId : number;
    isRead: boolean;
  }
}

type BookPayload = {
  errors: {
    message: string
  }[],
  book: Book | null,
}
addBook: async (
  _: any,
  { input }: MutationBook,
  { prisma }: Context
): Promise<BookPayload> => {
  const { title, author, categoryId, isRead } = input;
  if(!title || !author || !categoryId || !isRead) {
    return  {
      errors: [{
        message: "本の内容を入力してください"
      }],
      book: null
    }
  }

  const newBook = await prisma.book.create({
    data: {
      title,
      author,
      categoryId,
      isRead,
    },
  });

  return {
    errors: [],
    book: newBook
  }
},

リゾルバーが完成したので、GraphQLでデータを作成してみます。

AddBookのmutationは、errorsbookを指定します。

mutation AddBook($input: AddBookInput!) {
  addBook(input: $input) {
    errors {
      message 
    }
    book {
      title
      author
    }
  }
}

Variablesにデータを作成します。

image2

AddBookボタンをクリックすると、

image3

bookが追加されました。

Prisma Studioで確認します。

image4

無事、データが追加されました。

エラーメッセージも表示されるか確認します。

試しに、titleを空白にすると、

image5

image6

エラーメッセージが表示されました。

PostgresSQLデータを削除する

データを削除するため、スキーマを修正します。

schema.tsのMutationdeleteBookの型をBookPayloadへ修正します。

type Mutation {
  addBook(input: AddBookInput!): BookPayload!
  deleteBook(id: Int!): BookPayload!
  updateBook(id: Int!, input: UpdateBookInput!): Book!
}

次は、リゾルバーを修正します。

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

addBookと同様に、deleteBookの型を指定します。

deleteBook: async (_:any, { id }: {id: number}, { prisma }: Context): Promise<BookPayload> => {
},

特定のidのbookデータがあるか確認し、本がなければエラーメッセージを表示するようにします。

まずは、prismaのfindUniqueを使って、特定のidのbookデータを指定します。

deleteBook: async (_:any, { id }: {id: number}, { prisma }: Context): Promise<BookPayload> => {
    const book = await prisma.book.findUnique({
    where: {
      id,
    },
  })
},

addBookのコードを参考にして、bookがなければ、『本のデータがありません』と表示するようにし、nullを返します。

deleteBook: async (_:any, { id }: {id: number}, { prisma }: Context): Promise<BookPayload> => {
    const book = await prisma.book.findUnique({
    where: {
      id,
    },
  })

    if (!book) {
    return {
      errors: [
        {
          message: "本のデータがありません",
        }
      ],
      book: null,
    }
  }
},

prismaで、特定のデータを削除する場合、deleteを使用します。

deleteBook: async (_:any, { id }: {id: number}, { prisma }: Context): Promise<BookPayload> => {
    const book = await prisma.book.findUnique({
    where: {
      id,
    },
  })

    if (!book) {
    return {
      errors: [
        {
          message: "本のデータがありません",
        }
      ],
      book: null,
    }
  }

    await prisma.book.delete({
    where: {
      id
    }
  });
},

errorsbookを返します。

deleteBook: async (_:any, { id }: {id: number}, { prisma }: Context): Promise<BookPayload> => {
  const book = await prisma.book.findUnique({
    where: {
      id,
    },
  })
  
  if (!book) {
    return {
      errors: [
        {
          message: "本のデータがありません",
        }
      ],
      book: null,
    }
  }

  await prisma.book.delete({
    where: {
      id
    }
  });
  
  return {
    errors: [],
    book, 
  }
},

リゾルバーが完成したので、GraphQLで削除してみましょう。

mutationを作成します。

mutation DeleteBook($deleteBookId: Int!){
  deleteBook(id: $deleteBookId) {
    errors {
      message 
    }
    book {
      title
    }
  }
}

idが『4』のデータを削除します。

image7

DeleteBookのボタンをクリックすると、

image8

deleteBookの結果にbookデータが表示されました。

Prisma Studioで確認します。

Prisma Studioをリロードすると、

image9

idが4のデータを削除したので、存在していません。

エラーメッセージが正常に表示されるか、確認しましょう。

idが『8』のデータを削除してみます。

image10

エラーメッセージが返ってきました。

PostgresSQLデータを更新する

最後に、データの更新を修正します。

まずは、スキーマから修正します。

schema.tsのMutationにあるupdateBookの型をBookPayloadへ変更します。

また、UpdateBookInputidは、必要ないので削除しておきましょう。

type Mutation {
  addBook(input: AddBookInput!): BookPayload!
  deleteBook(id: Int!): BookPayload!
  updateBook(id: Int!, input: UpdateBookInput!): BookPayload!
}
input UpdateBookInput {
  title: String
  author: String
  categoryId: Int
  isRead: Boolean
}

次にリゾルバーを修正します。

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

updateBookに型を追加します。

updateBook: async (
    _: any,
    { id, input }: { id: number,  input: MutationBook["input"] },
    { prisma }: Context
  ): Promise<BookPayload> => {
},

deleteBookを参考に、データがない場合、エラーメッセージを表示するようにします。

updateBook: async (
    _: any,
    { id, input }: { id: number,  input: MutationBook["input"] },
    { prisma }: Context
  ): Promise<BookPayload> => {
    const { title, author, categoryId, isRead } = input;

    const book = await prisma.book.findUnique({
    where: {
      id,
    },
  });

  if (!book) {
    return {
      errors: [
        {
          message: "本のデータがありません",
        },
      ],
      book: null,
    };
  }
},

prismaで単一データを更新するには、updateを使います。

更新する内容は、inputで、対象は、指定したidになります。

updateBook: async (
  _: any,
  { id, input }: { id: number,  input: MutationBook["input"] },
  { prisma }: Context
): Promise<BookPayload> => {
  const { title, author, categoryId, isRead } = input;

  const book = await prisma.book.findUnique({
    where: {
      id,
    },
  });

  if (!book) {
    return {
      errors: [
        {
          message: "本のデータがありません",
        },
      ],
      book: null,
    };
  }

  const updateBooks = await prisma.book.update({
    data: {
      ...input
    },
    where: {
      id
    }
  });
},

errorsbookを返します。

updateBook: async (
  _: any,
  { id, input }: { id: number,  input: MutationBook["input"] },
  { prisma }: Context
): Promise<BookPayload> => {
  const { title, author, categoryId, isRead } = input;

  const book = await prisma.book.findUnique({
    where: {
      id,
    },
  });

  if (!book) {
    return {
      errors: [
        {
          message: "本のデータがありません",
        },
      ],
      book: null,
    };
  }

  const updateBooks = await prisma.book.update({
    data: {
      ...input
    },
    where: {
      id
    }
  });

  return {
    errors: [],
    book: updateBooks,
  };
},

リゾルバーが完成したので、GraphQLで確認します。

GraphQLでmutationを作成します。

mutation UpdateBook($updateBookId: Int!, $input: UpdateBookInput!){
  updateBook(id: $updateBookId, input: $input) {
    errors {
      message 
    }
    book {
      title
      author
    }
  }
}

Variablesを作成します。

image11

UpdateBookをクリックすると、

image12

指定したデータが更新されました。

Prisma Studioで確認します。

image13

正常にデータが更新されました。

エラーメッセージも確認しましょう。

image14

UpdateBookをクリックすると、

image15

『本のデータがありません』と出力されました。

コードの全文は、以下の通りです。

次回は、ユーザー登録します。

ブログ一覧