Express使用時にデータベースサーバへデータを渡す方法

設定したidのデータのみ表示させる

① サンプルチュートリアル
https://docs.microsoft.com/ja-jp/azure/cosmos-db/mongodb/tutorial-develop-mongodb-react

② 上記チュートリアルソースコード
https://github.com/Azure-Samples/react-cosmosdb

上記チュートリアルに沿って、Azure上のMongoDBよりデータの読み出し等を行うWebアプリを構築していますが、指定したidのみのデータを、MongoDBより抽出したいと思っています。

②ソースコード内　react-cosmosdb/server/hero-service.js

javascript
1const Hero = require('./hero-model');
2const ReadPreference = require('mongodb').ReadPreference;
3
4require('./mongo').connect();
5
6function get(req, res) {
7  const docquery = Hero.find({}).read(ReadPreference.NEAREST);
8  docquery
9    .exec()
10    .then(heroes => {
11      res.json(heroes);
12    })
13    .catch(err => {
14      res.status(500).send(err);
15    });
16}

上記の

　function get(req, res) {
  const docquery = Hero.find({})

を

　function get(req, res) {
  const docquery = Hero.find({id:指定の値})

とすれば、データベースからデータベースサーバ上で指定した値のidに一致したデータのみを抽出できるのですが、その指定の値を、Reactのjsファイルから指定し、データベースサーバへ渡す方法を教えていただきたいです。
用途としてはReact上で認証情報を取得し、そのid等に一致するデータのみをデータベースサーバより取得する等です。

具体的には②ソースコード内の
react-cosmosdb/src/components/Heroes.js 等でapiの呼び出し時にid等を指定できれば
大変ありがたいです。
詳しい方おりましたら、ご教授のほどよろしくお願いします。

追記
react-cosmosdb/server/hero-service.jsで、React上のUser.jsxファイルから変数を読み込みはできるのですが、
User.jsx

function  Username(){
    const username = 'testuser'
    return (username);
};

hero-service.js

const username = require('../src/User.jsx');

//GET
function get(req, res) {
  
  const user = require('../src/User.jsx').Username();
  console.log('hero-service : '+ user);

User.jsxで、ログインユーザー情報を取得する下記関数を入れると失敗してしまします。

function  Username(){
    const {instance , accounts} = await useMsal();
    const username = accounts[0].username;
    return (username);
}

hoshi-takanori

2021/12/31 07:16

「クライアントサーバ」という言葉が謎というか矛盾してますが、普通にファイルを読み込んでそれを DB に渡せば良いのでは…。

marimo0

2022/01/01 23:55

ご指摘ありがとうございます。用語がちょっとわからなかったのでフロントサイドという用語に修正しました。ファイルの読み込みをやってみたのですが、うまくいかず…その部分も追記しましたので、ご教授よろしくお願いします。

hoshi-takanori

2022/01/02 02:37

用語の問題じゃなくて、JavaScript がどこで動いてるか混乱してるっぽいですね。普通 JavaScript というとブラウザで動くものという印象が強いと思いますが、node.js という処理系 (その言語を動かすためのプログラム) があって、コマンドラインで React のトランスパイルをしたり、Web サーバーとしても使われます。参考にされた記事 (さらっと眺めた程度ですが) には「Express と React を同じプロジェクトで設定する」などと書いてありますが、Express というのは node.js で Web サーバーを作るときによく使われるライブラリで、一方 React はもちろんブラウザで動くものです。つまり、クライアントとサーバーが両方とも JavaScript で書かれていて、それを一つのプロジェクトの中でまとめて管理してるのだと思われ、その区別がついてなくて混乱してるのでは。(jsx という拡張子は React のファイルで使われるものですが、hero-service.js の方は Express っぽいので、直接 require などはできません。) また、データベースはサーバーの一部というか、Web サーバーから呼ばれるものですね。クライアント (React) から直接アクセスすることはないと思います。

marimo0

2022/01/02 06:19

わかりやすいご説明ありがとうございます。今回のWebアプリだと、Node.js上でWebサーバを立ち上げて、その中で・Expressーデータベースへの接続を担うライブラリ・React.ークライアントへの描写を担うライブラリが動いているというイメージなのですね。データベースへはExpress経由でアクセスしてデータを取得しReactでクライアントへ描写という流れかと思いますが、Expressでのデータ取得のクエリに、React上のファイルの変数の反映というのはできたのですが、React上の関数の反映はエラーになってしまいました。hero-service.js で requireで読み込んでいるのでイレギュラーなやり方なのでしょうかね…

hoshi-takanori

2022/01/02 08:53

うーん、いまいち伝わってない気がします。・Express は Web サーバーを書くためのライブラリで、サーバー上で動きます。・React はクライアント (ブラウザ) 上で動きます。 Express と React は異なる場所 (マシン) で動く 2 つのまったく別のプログラムで、お互いに直接関数を呼び出したり、変数にアクセスすることはできず、Web API (HTTP) を介して通信することになります。