herohoroブログ

入力フォームのテキストを別設置のNotionDBに追加する_POST



🔄   2022-11-22

記事末尾にいいねボタンを実装したPUT通信。

画像が読み込まれない場合はページを更新してみてください。

直接ブラウザからNotionDBへ送れないことから、

私は勝手に【二段階右折】と命名している。

流れとしては…..

二段階右折①
二段階右折②
二段階右折③

ほら。二段階右折でしょ!?

いいねボタンのコードをよくよく見てみると…

PUTの段階では空が飛んでいってることに気づきました。

画像が読み込まれない場合はページを更新してみてください。

空のPUTをした後に値を+1に更新する….

といった動きに気づいたのは、

今回の入力フォームのPOST通信に苦戦している時のことでした。(遅いッ!!!)

実際に作りたい機能(入力フォームからNotionDB送る)を

実装してみて

今回やっと分かったことを盛り込みながら解説します\(^o^)/

事前準備:入力フォームをReactする

POST通信をする前に

入力できる状態にしておきます。

あっち向いてホイな useState

React講座を受けた時、

なんとなくは理解できたものの

いまいちしっくり来なかったuseState。

今回

「とことん使って 表示のされ方を 確認したらやっと意味分かってきた!」

ということに気づきました。

頭で考えるより体で慣れろ!理論です。

const SubmitForm = (props: Props) => {

	const [text, setText] = useState('')

	return (
		<>
			<div>
         <label>
          Text:
         <textarea
	         value={text}
           onChange={(e) => setText(e.target.value)}
           />
         </label>
      </div>
    </>
	)
}
export default SubmitForm
src/components/submit.tsx の一部

useStateのおかげで、

入力部分がアクティブになって

文字を入力できるようになります。

隠し扉を開ける onClick

onClickもいじってやっと納得できました。

const SubmitForm = (props: Props) => {

	const [text, setText] = useState('')
+ const [addText, setAddText] = useState('')

+	const onClickSubmit = () => {
+	    setText('')
+	    setAddText(text)
+	}

	return (
		<>
			<div>
         <label>
          Text:
         <textarea
	         value={text}
           onChange={(e) => setText(e.target.value)}
           />
         </label>
      </div>

+			<button onClick={onClickSubmit}>
+				submit
+      </button>

+			<p>Text送信:{addText}</p>
    </>
	)
}
export default SubmitForm

  1. 通常モード:空状態のtext
  2. 入力されてじゃんけんモード:onChange の setText
  3. ボタンを押されてあっち向くモード:onClick の setText, setAddText

set〇〇なのか〇〇なのか、

どっちを入れたらいいのか分からなかったので、

両方入れて確認しながら選んでいきましたwww

onClickのおかげで、

ボタンを押すまで非表示にして

ボタンを押したら急に出現するサプライズもできるなと思い

追加してます😆


ここまでがPOSTするための事前準備。

ここからが本題です🔥 ლ(ಠ益ಠლ

入力されたテキストを受け取る_POST

事前準備で作ったsrc/components/submit.tsx は…..こんな感じ

二段階右折を始められず引き返す….

src/apiディレクトリ に入力されたテキストを受け取れるようにsubmit.tsxファイル (中身空)を用意します。

事前準備で用意したsrc/components/submit.tsx を使って

入力されたテキストを

src/api/submit.tsxへ送れるようにしちゃいます。

const SubmitForm = (props: Props) => {

	const [text, setText] = useState('')
  const [addText, setAddText] = useState('')

	const onClickSubmit = () => {
	    setText('')
	    setAddText(text)

+			const apiPost = {
+	      Text: text
+	    }
+		  axios.post(`/api/submit`, apiPost)
	}

	return (
		<>
			<div>
         <label>
          Text:
         <textarea
	         value={text}
           onChange={(e) => setText(e.target.value)}
           />
         </label>
      </div>

			<button onClick={onClickSubmit}>
				submit
      </button>

			<p>Text送信:{addText}</p>
    </>
	)
}
export default SubmitForm
src/components/submit.tsx

二段階右折①__無事開始!!

src/api/like.tsをコピペして不要部分を削除して

POSTで必要そうな部分を追加します。

でも、受けた側のsrc/api/submit.ts からしたら「?」な状態。

import { NextApiRequest, NextApiResponse } from 'next'

const ApiAddsubmit = async function (
  req: NextApiRequest,
  res: NextApiResponse
) {
  // res.setHeader('Content-Type', 'application/json')
+  if (req.method !== 'POST') {
    res.statusCode = 400
    res.end()
    return
  }

+ const submitData = req.body

  if (!submitData) {
    res.statusCode = 400
    res.end()
    return
  }

  try {

    res.statusCode = 200
    res.end()
  } catch (e) {
    console.log(e)
    res.statusCode = 500
    res.end()
  }
}

export default ApiAddsubmit
src/api/like.tsをコピペして不要部分を削除したあとに追加した部分が「+」

👾
「req.bodyにデータ来たけど…これどうするの?」

受け取った情報を指定されたところへ配達_POST

二段階右折②_いよいよ渡る

送る先は、

私の場合 ブログとは別に用意したNotionDB。

なので、

本家のlibディレクトリsubmit_formディレクトリを作り

interfaces.ts , client.ts を追加しました。

画像が読み込まれない場合はページを更新してみてください。

このclient.tsに受け取った情報を配達するように指定します。

import { NextApiRequest, NextApiResponse } from 'next'

+ import { submitPost } from '../../lib/submit_form/client'

const ApiAddsubmit = async function (
  req: NextApiRequest,
  res: NextApiResponse
) {
  // res.setHeader('Content-Type', 'application/json')
  if (req.method !== 'POST') {
    res.statusCode = 400
    res.end()
    return
  }

  const submitData = req.body

  if (!submitData) {
    res.statusCode = 400
    res.end()
    return
  }

  try {
+		await submitPost(submitData)
    res.statusCode = 200
    res.end()
  } catch (e) {
    console.log(e)
    res.statusCode = 500
    res.end()
  }
}

export default ApiAddsubmit
src/api/submit.ts

POST通信の「?」が解消されました\(^o^)/

client.ts でsubmitPost関数を使ってNotionDBへ情報を収納できるようにすれば無事ゴールです★

NotionDBに情報を収納

二段階右折③

目指すのはこれ!!!

画像が読み込まれない場合はページを更新してみてください。
行を追加→送られたテキストが収納される

Notion リファレンスのPages > Create a Page を使います。

画像が読み込まれない場合はページを更新してみてください。

https://developers.notion.com/reference/post-page

ただ、親がデータベースの場合にはデータベースIDを指定しないといけないようです。

サンプルコードで使える部分は存分に使ってしまいます。

画像が読み込まれない場合はページを更新してみてください。

“Name”はNotionDBの列名なので

今回”Text”という列名にしているので差し替えます。

import { Post } from './interfaces'
import {
  SUBMIT_NOTION_API_SECRET,
  SUBMIT_DATABASE_ID,
} from '../notion/server-constants'
import { Post } from './interfaces'

const { Client } = require('@notionhq/client')
const client = new Client({
  auth: SUBMIT_NOTION_API_SECRET,
})

export async function submitPost(submitData: Post) {
  const result = await client.pages.create({
    parent: {
      database_id: SUBMIT_DATABASE_ID,
    },

    properties: {
      Text: {
        title: [
          {
            text: {
              content: submitData.Text,
            },
          },
        ],
      },
    },
  })

  if (!result) {
    return null
  }

  return _buildPost(result)
}
src/lib/submit_form/client.ts

returnの後は….

function _buildPost(data) {
  const prop = data.properties

  const post: Post = {
    Text: prop.Text.title[0].plain_text,
  }

  return post
}
src/lib/submit_form/client.tsの_buildPost部分

submitPostの引数にあるPostという型は、

本家に習ってinterfaces.tsに記述しています。

export interface Post {
  Text: string
}
src/lib/submit_form/interfaces.ts

これで無事に完走です\(^o^)/

おつかれさまでしたーーーーー

POSTっていろいろ使えそう

POSTを実装するのに14時間ほどかかりましたwww

いいねボタンはPUTで

自分の作ろうとしているのはPOSTだということに気づけずにいたのがそもそもの原因。

過去にアルパカ先生が推薦していた書籍をもう一度読み返してやっと気づきました。

画像が読み込まれない場合はページを更新してみてください。

https://amzn.to/3ViL4No

一応は読破したものの

実際に作ってなかったので

なんとなくしか理解できていませんでした。

今回必死に

「slug指定しないで新たなページを追加した先にデータを送るのは何だ!?」

と探した結果、

POSTだということに気づきました。

やっぱ作らないとダメだなと反省。。。

こんな仕組みでPOSTを使ってみるよ

入力フォームを使ってどんなことをしようかと思い立ったかというと….

単純に1人で勉強するのが寂しくなったのです。

だから、誰かの単語帳が私のNotionDBに追加されたら楽しいなって思って作りました。

端的過ぎるとツッコまれたので、

図にして実装することにしました(๏д๏)

語学もプログラミングも

楽しく勉強できるように

easy-notion-blogをふんだんに使いこなそうと思います🔥🔥

POSTができると

一気にいろんな改造ができると思うので..

easyさん!!

面白い改造を実装したら教えてくださいねーーーー\(^o^)/\(^o^)/

画像が読み込まれない場合はページを更新してみてください。

https://data.herohoro.com/world/submit

Twitterでは更新のお知らせを随時行っています

興味ある方はLet'sフォロー★

▼ この記事に興味があったら同じタグから関連記事をのぞいてみてね

新着記事を通知したい??


RSSリーダーにatomのリンクを登録すると通知が行くよ🐌

https://herohoro.com/atom

やってみてね(*´ω`*)(*´ω`*)

Twitter Timeline


フォロー大歓迎\(^o^)/