express ＋ react ＋ sequelizeでサーバーからフロントにデータ受け渡しをしたい

React側から

        fetch('/api')
          .then((res) => res.json())
          .then((data) => {
              console.log(data);
        });

を行い、
Express側でsequelizeを使って

        db.user.findAll({}).then((users) => {
            res.json(users);
        });

を行うと、React側に出力されるdataは希望通りの配列（？）になるのですが、

Express側で

        let hoge;
        db.user.findAll({}).then((users) => {
             hoge = users;
        });
        res.json(hoge);

と行うと、React側にわたるdataが変わってしまい、配列として使えなくなってしまいます。

なぜ上記のような事が起こるのか純粋に知りたいのと、
今後、下記のようなイメージで複数テーブルからデータを取得してReactに渡す、
ということが可能性としてありうるのですが、その場合はどのように実装したらいいのでしょうか？

        let hoge;
        let fuga;
        db.user.findAll({}).then((users) => {
             hoge = users;
        });
        db.address.findAll({}).then((addresses) => {
             fuga = addresses;
        });
        res.json({hoge:hoge,fuga:fuga});

行動規範の内容に同意します

回答1件

ベストアンサー

やや大雑把に回答します。
より正しく把握するには、MDNなどのリファレンスやQiita、ZennなどのサイトにてPromiseに関する記事を読むなどをしてみてください。

コードによる挙動差

SequelizeにおけるfindAll()は後続にthenを使っている通り非同期処理です。
つまり、

let hoge;
db.user.findAll({}).then((users) => {
    hoge = users;
});
res.json(hoge);  // findAllが終わっているとは限らないため、hogeの中身は不確定

このコードの場合、res.json(hoge)を実行するタイミングではfindAll().then()の中身の実行が完了されている保証がありません。
そのため、DB処理が確実に終わったタイミングを待ってからレスポンスを返す必要があります。

db.user.findAll({}).then((users) => {
    res.json(users);  // findAllが終わっているタイミングでの処理
});

このコードの場合、「then()の内部」=「findAll()の処理後のタイミング」でres.json(users)を実行しているため、正しくレスポンスが返るようになっています。

複数のデータ取得へのアプローチ例

今後、下記のようなイメージで複数テーブルからデータを取得してReactに渡す、

レスポンスに「2テーブルからそれぞれ取得したデータ」を含める必要があるため、
「それぞれのfindAll()の処理が終了するまでres.json()を呼ばない」ようにする必要があります。

例えば、

let hoge;
let fuga;
db.user.findAll({})
  .then((users) => {
    // hogeに一旦usersを保持してから、adress側の処理を開始
    hoge = users;
    return db.address.findAll({});
  })
  .then((addresses) => {
    // adress側の処理も終了するので、ここでres.json()を実行する
    fuga = addresses;
    res.json({hoge:hoge,fuga:fuga});
  });

// とりあえずDB処理の開始だけする（非同期処理なので、すぐに終了するわけではない
let promise_users = db.user.findAll({});
let promise_adresses = db.adress.findAll({});
// 上記2処理が終わってからres.json()を実行する
Promise.all([promise_users, promise_adresses])
  .then((values) => {
    let users = values[0];
    let adresses = values[1];
    res.json({ users, adresses });
  });

投稿2021/06/06 11:32