【Laravel x React】SPAで新規登録時に中間テーブルで紐付いた状態の登録データを返す方法

※備忘のためかなり簡略化して記載します

前提

家計簿が付けられるSPAをLaravel x Reactで作ってみようとしています。

フロント

type CategoryType = {
  id: string;
  name: string
};

type PostDataType = {
  register_date: string;
  content: string;
  amount: string;
  categories: CategoryType[];
};

// ~~~~~省略~~~~~

// ボタンでonClickされたらこのonSubmitが呼ばれる。　 react-hook-form使ってます
const onSbumit: SubmitHandler<PostDataType> = async (data) => {

      // axiosでapiに送信するデータを生成
      const postData = {
        register_date: data.register_date,
        content: data.content,
        amount: Number(data.amount),
        categories: categories.map((category) => category.id),
      };

      await axios.post("/api/balance/create", postData)
        .then((response) => {
	  // 既存のbalancesにresponseで帰ってきたdataを結合してセット
          setBalances([...balances, response.data]);
          setCategories([]);
          setIsDialogOpen(false);
        })
        .catch((error) => console.log(error));
  };

バックエンド(コントローラー)

class PostController extends Controller
{
    public function create(Request $request) {
        $balance = new Balance;
        
        $balance->register_date = $request->register_date;
        $balance->content = $request->content;
        $balance->amount = $request->amount;
        $balance->save();

        // カテゴリータグを新規のbalanceに紐づける
        $balance->categories()->syncWithoutDetaching($request->get('categories', $request->categories));
        // 紐付けたカテゴリー情報も一緒にレスポンスデータとして返すためwhereで絞り込んでいる
        $responseData = $balance->where('id', $balance->id)->with('categories')->first();
        return response()->json($responseData);
    }
}

ここ👇ポイント！！

// 紐付けたカテゴリー情報も一緒にレスポンスデータとして返すためwhereで絞り込んでいる
$responseData = $balance->where('id', $balance->id)->with('categories')->first();

こうなる前は上記の記述が思い浮かばず、save()して中間テーブルにcategoriesを紐づけて、
そのまま$balancesをreturnしていました。