はじめに
現在、RailsとReactを用いてTwitterのクローンアプリを作成しています。
その中で、ツイートとユーザーを紐付け、誰がどの投稿をしたのかを関連づける必要がありました。今回はツイートに紐づけられているユーザ情報を取得する方法について紹介します。
問題点
Railsだけでアプリを作成する場合はtweet.userというように繋げて記述することができましたが、APIの場合はリクエストにユーザー情報を含めていないとReact側でその情報を取得することができません。
module Api
module V1
class TweetsController < ApplicationController
before_action :authenticate_api_v1_user!, only: %i[index create]
def index
tweets = Tweet.page(params[:page]).per(params[:limit]).order(created_at: 'DESC')
total_page = tweets.total_pages
render json: { tweet: tweets, total_page: }, status: :ok
end
end
end
end
{
"tweet": [
{
"id": 47,
"user_id": 1,
"content": "ドレスコード",
"created_at": "2024-04-20T03:00:15.973Z",
"updated_at": "2024-04-20T03:00:16.134Z",
},
{
"id": 46,
"user_id": 1,
"content": "スイミングスクール",
"created_at": "2024-04-20T02:59:53.534Z",
"updated_at": "2024-04-20T02:59:53.534Z",
},
{
"id": 45,
"user_id": 1,
"content": "絶不調",
"created_at": "2024-04-20T02:47:54.266Z",
"updated_at": "2024-04-20T02:47:54.266Z",
},
],
"total_page": 5
}
このように、上記のコードではユーザー情報が含まれません。
解決法
この問題を解決する方法は簡単です。
renderの部分にinclude: [:user]を追記するだけです。
module Api
module V1
class TweetsController < ApplicationController
before_action :authenticate_api_v1_user!, only: %i[index create]
def index
tweets = Tweet.page(params[:page]).per(params[:limit]).order(created_at: 'DESC')
total_page = tweets.total_pages
render json: { tweet: tweets, total_page: }, include: [:user], status: :ok
end
end
end
end
{
"tweet": [
{
"id": 47,
"user_id": 1,
"content": "ドレスコード",
"created_at": "2024-04-20T03:00:15.973Z",
"updated_at": "2024-04-20T03:00:16.134Z",
"user": {
"id": 1,
"provider": "email",
"uid": "test@test.com",
"allow_password_change": false,
"name": "test",
"nickname": null,
"image": null,
"email": "test@test.com",
"created_at": "2024-04-14T05:10:05.051Z",
"updated_at": "2024-04-20T02:09:05.446Z"
}
},
{
"id": 46,
"user_id": 1,
"content": "スイミングスクール",
"created_at": "2024-04-20T02:59:53.534Z",
"updated_at": "2024-04-20T02:59:53.534Z",
"user": {
"id": 1,
"provider": "email",
"uid": "test@test.com",
"allow_password_change": false,
"name": "test",
"nickname": null,
"image": null,
"email": "test@test.com",
"created_at": "2024-04-14T05:10:05.051Z",
"updated_at": "2024-04-20T02:09:05.446Z"
}
},
{
"id": 45,
"user_id": 1,
"content": "絶不調",
"created_at": "2024-04-20T02:47:54.266Z",
"updated_at": "2024-04-20T02:47:54.266Z",
"user": {
"id": 1,
"provider": "email",
"uid": "test@test.com",
"allow_password_change": false,
"name": "test",
"nickname": null,
"image": null,
"email": "test@test.com",
"created_at": "2024-04-14T05:10:05.051Z",
"updated_at": "2024-04-20T02:09:05.446Z"
}
},
],
"total_page": 5
}