IT

APIからの情報をReactで取得する

現在、React+Lumen+MySQLで掲示板を作っています。

MySQLに保存された情報(ユーザー情報や掲示板の投稿情報)をフロントエンド(React)に渡すAPIをLumenで作成しました。

React側では、このAPIから得た情報を表示させていくわけですが、いくつかハマりポイントがあったので、書いていきます。

前置き

開発環境

Docker-composeを使って、フロントエンドとバックエンド、それぞれのWEBサーバー、データベースのコンテナを用意しています。この手順は、今回は割愛させていただきます。

コンテナの概略図

作成したAPIについて

Lumenで作成したAPIは、ユーザーのログイン・ログアウトや新規登録、掲示板の投稿情報の取得などいくつかありますが、今回は例として、「掲示板へのコメント投稿」で話を進めていきます。

「掲示板へのコメント投稿」のAPIのURLは

http://localhost:8080/api/v1/store

となっており、POSTメソッドでやりとりします。このとき送る情報は、投稿内容や投稿者のユーザーIDなどがあります。

axiosのインストール

今回、フロントエンドとバックエンドの間で情報をやりとりするために、axiosというものを使います。

Reactのコンテナに入り、以下のコマンドでaxiosをインストールします。

  1. $ npm install axios –save

そして、axiosを使いたいコンポーネントのファイルでimportします。

  1. import axios from axios;

例えば、送信ボタンをクリックしたときに、状態変数(state)である『user_id, name, comment』の3つをバックエンドに送る関数は、

  1. const handleClick = () => {
  2.   const postData = {
  3.     user_id: user_id,
  4.     name: name,
  5.     comment: comment,
  6.   }
  7.   axios.post(‘http://localhost:8080/api/v1/store’, data)
  8.   .then(res => console.log(res.data))
  9.   .catch(err => console.error(err))
  10. }

となります。axiosの第一引数にはAPIのURL、第二引数には送る情報(POSTの時)が必要です。

今回はありませんが、Cookieを送信したいなーと思ったら、第三引数に{withCredentials: true,}が必要です。

また、APIとやりとりする際に、CORSのエラーが出ると思う、バックエンド(今回はLumen)でCORS対策をする必要があります。このやり方は、また別の機会に。

お問い合わせフォーム

気になる方はコチラからお問い合わせ!

    必須お名前
    必須メールアドレス
    必須郵便番号
    必須ご住所
    必須電話番号
    ご相談内容
    必須メッセージ本文