Rails(API)+React 一部画像のURLが取得できません

Question

ローカル環境で開発しており、Rails(API)からusersテーブルとrecipesテーブルをJoinしてデータを取り出しています。画像保存にはGemのcarrierwaveを使用して画像をDBに保存しています。Reactでは取り出したデータを表示するだけとなります。取り出したデータの内、recipeImageのurlだけ取れない状況にあります。原因が分からず困っています。どなたかご教授していただけませんか？

#Rails実装
schema.rb(一部省略しています)

ActiveRecord::Schema.define(version: 2021_08_06_122553) do
  create_table "recipes", charset: "utf8mb4", force: :cascade do |t|
    t.integer "user_id"
    t.string "title"
    t.string "recipe_image"
    t.text "material"
    t.text "body"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
  end

  create_table "users", charset: "utf8mb4", force: :cascade do |t|
    t.string "name"
    t.string "email"
    t.string "image"
    t.string "profile"
  end
end

image_uploader.rb

class ImageUploader < CarrierWave::Uploader::Base
  storage :file

  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end

  # 受け付け可能なファイルの拡張子を指定
  def extension_allowlist
    %w(jpg jpeg png)
  end
end

carrierwave.rb

CarrierWave.configure do |config|
    config.asset_host = "http://localhost:3001"
    config.storage = :file
    config.cache_storage = :file
end

models/user.rb

class User < ActiveRecord::Base
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable
  include DeviseTokenAuth::Concerns::User
  mount_uploader :image, ImageUploader
  has_many :recipes, dependent: :destroy
end

models/recipe.rb

class Recipe < ApplicationRecord
    mount_uploader :recipe_image, ImageUploader
    belongs_to :user
end

recipes_controller.rb

class Api::V1::RecipesController < ApplicationController
    def index
        @recipes = User.joins(:recipes).select("users.*,recipes.*")
        @recipes.order(updated_at: :desc)
        render json: @recipes
    end
end

#React実装
index.ts

export interface User {
    id?: number
    uid?: string
    provider?: string
    email?: string
    name?: string
    image?: {
      url: string
    }
    profile?: string
    allowPasswordChange?: boolean
    created_at?: Date
    updated_at?: Date
  }

  export interface ShowRecipes extends User {
    id?: number
    user_id?: number
    title?: string
    recipeImage?:{
      url: string
    }
    material?:string
    body?: string
  }

return(
 <>
    <div className="w-full flex flex-wrap justify-between">
    {
      recipes.map((recipe) => (
      <Card className="my-1 px-1 w-64 md:w-1/2 lg:my-4 lg:px-4 lg:w-64" key={recipe.id}>
        <div className="my-4">
        <div>
        <Link to = {`${`/showRecipe/${recipe.id}`}`}>
        <img alt="Placeholder" className="block w-64 h-64" src={recipe.recipeImage?.url}/>
        </Link>
        </div>
        <div className="my-4">
        <h1 className="text-lg text-current font-bold">
        <Link to = {`${`/showRecipe/${recipe.id}`}`}
        className="no-underline hover:underline text-black">
        {recipe.title}
          </Link>
        </h1>
        </div>
    <div className="flex items-center justify-between leading-none">
        {/* アイコン画像 */}
        <Link to = "#"
        className="flex items-center no-underline hover:underline text-black">
            <img alt="Placeholder" className="block rounded-full w-8 h-8" src={recipe.image?.url}/>
            <p className="ml-2 text-sm">
                {recipe.name}
            </p>
        </Link>
    </div>
        </div>
    </Card>
     ))
     }
    </div>
    </>
)

Comments

[hoshi-takanori]

http://localhost:3001/〜 ってことは localhost からしか見えないのでは…。

[aaa11]

回答ありがとうございます。
まだ開発段階なのでhttp://localhost:3001/から画像を保存して表示しています。
usersとrecipesテーブルを内部結合してusersテーブルのimageのurlは取得して表示できている状態でrecipesテーブルのrecipeImageのurlが取得出来ていません。またrecipesのカラムだけを取得する際はrecipeImageのurlは取得できています。カラム名が競合して取得出来ていないとかでしょうか？

[hoshi-takanori]

失礼しました。Rails はよく分かりませんが、最初の画像が取得された JSON なら、image は url プロパティを持つオブジェクトですが、recipeImage は単なる url 文字列になってるように見えますね。つまり、export interface ShowRecipes は recipeImage?: { url: string } ではなく recipeImage?: string では。

[aaa11]

なぜそうなっているのかが分からず先に進まない状態ですね。単体では取得できるのでSQLの取り出し方に原因があるのでしょうか？