Return data from modules to render in react page

Question

I have the following structure of the project:

• project
  • client
  • bot
  • node_modules
  • index.js

Files:

• Client contains the GatsbyJS (react)
• Bot contain all the modules to specific task to do
• Index.js Is my expressjs server

I already made the connection between them, my question is, I want to retrieve specifics response from each module in my bot modules, ie:

async function login(page) {
  await page.goto(LOGIN_PAGE);
  await page.waitFor("#loginForm");
  await page.type(NAME, "USER");
  await page.type(PW, "PASSWORD");
  await page.click(SUBMIT);

  var Data = [
    ...document.querySelectorAll(
    "#data"
    )
  ];
}

I want to render the var Data in:

React file:

import React from "react"

const Header = () => (

  <div className="header-content">
    HERE
  </div>

)

And in my index.js (Express server) render directly the index.html generated by gatsby :

app.get("/home", (req, res) => {
  res.sendFile(path.join(__dirname, "/client/public/index.html"));
});

Is possible pass the data on this way or there's other correct and possible way to made it?

I don't know to much about how express works with react, thanks for read.

Regards, Luis.

Answer 1

Maybe u can use the following options.

1. using sessionStorage, localStorage, or even cookies to pass the data to your client side
2. Using templating like ejs, or you use your own customized html rather than gatsby generated, and embedded your data in script tag.
3. Maybe can use react context by providing value in server side (haven't tested)