入力フォームのテキストを別設置のNotionDBに追加する_POST
記事末尾にいいねボタンを実装した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 SubmitFormuseStateのおかげで、
入力部分がアクティブになって
文字を入力できるようになります。
隠し扉を開ける 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- 通常モード：空状態の
text - 入力されてじゃんけんモード：
onChange の setText - ボタンを押されてあっち向くモード：
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 SubmitFormsrc/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受け取った情報を指定されたところへ配達_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 ApiAddsubmitPOST通信の「？」が解消されました＼(^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)
}returnの後は….
function _buildPost(data) {
const prop = data.properties
const post: Post = {
Text: prop.Text.title[0].plain_text,
}
return post
}submitPostの引数にあるPostという型は、
本家に習ってinterfaces.tsに記述しています。
export interface Post {
Text: string
}これで無事に完走です＼(^o^)／
おつかれさまでしたーーーーー
POSTっていろいろ使えそう
POSTを実装するのに１４時間ほどかかりましたwww
いいねボタンはPUTで
自分の作ろうとしているのはPOSTだということに気づけずにいたのがそもそもの原因。
過去にアルパカ先生が推薦していた書籍をもう一度読み返してやっと気づきました。
一応は読破したものの
実際に作ってなかったので
なんとなくしか理解できていませんでした。
今回必死に
「slug指定しないで新たなページを追加した先にデータを送るのは何だ！？」
と探した結果、
POSTだということに気づきました。
やっぱ作らないとダメだなと反省。。。
こんな仕組みでPOSTを使ってみるよ
入力フォームを使ってどんなことをしようかと思い立ったかというと….
単純に１人で勉強するのが寂しくなったのです。
だから、誰かの単語帳が私のNotionDBに追加されたら楽しいなって思って作りました。
端的過ぎるとツッコまれたので、
図にして実装することにしました(๏д๏)
語学もプログラミングも
楽しく勉強できるように
easy-notion-blogをふんだんに使いこなそうと思います🔥🔥
POSTができると
一気にいろんな改造ができると思うので..
easyさん！！
面白い改造を実装したら教えてくださいねーーーー＼(^o^)／＼(^o^)／
▼ この記事に興味があったら同じタグから関連記事をのぞいてみてね
新着記事を通知したい？？
RSSリーダーにatomのリンクを登録すると通知が行くよ🐌
https://herohoro.com/atomやってみてね(*´ω`*)(*´ω`*)
Posts in the same tag
Tag List
Latest posts
Twitter Timeline
フォロー大歓迎＼(^o^)／
Posts in the same tag
Latest posts
Tag List
Twitter Timeline
フォロー大歓迎＼(^o^)／