how to get data from nodejs to reactjs-CodePudding

I'm using woocommerce rest API with node, I manage to get all orders and I can see it in my console. Now I would like to set up a route so I can fetch the data and be able to put or delete as well from react.

server.js

import express from 'express';
import cors from 'cors';
import pkg from '@woocommerce/woocommerce-rest-api';
const WooCommerceRestApi = pkg.default;
 const PORT = 5000;
  const app = express();

app.use(cors());
 const corsOptions={
origin: "*"
  };
const WooCommerce = new WooCommerceRestApi({
 url: "https:myste.com/",
consumerKey: "ck_4xxxxxxxxxxxxxxxxxxxxx",
consumerSecret: "cs_xxxxxxxxxxxxxxxxxxxxxx",
version: 'wc/v3'
});

 // List orders
 WooCommerce.get("orders")
 .then((response) => {
  console.log(response.data);
   })
 .catch((error) => {
 console.log(error.response.data);
            });



app.listen(PORT, () => {
console.log(`Example app listening at http://localhost:${PORT}`);
});

With this I get all orders just fine, now how or what should I do to then be able to access this from react and be able to put, get, delete

http://woocommerce.github.io/woocommerce-rest-api-docs/?javascript#list-all-orders

Here is where I get instructions and rest API from woocommerce

CodePudding user response：

If I understand correctly, you want the express server to be a proxy between the Woo API and the React front end. If so, then you can do something like this:

import express from 'express';
import cors from 'cors';
import WooCommerceRestApi from '@woocommerce/woocommerce-rest-api'; // when using ESM (import), it'll automatically import the "default" export

const PORT = 5000;
const app = express();
const router = express.Router()
const WooCommerce = new WooCommerceRestApi({
  url: "https://example.com/",
  consumerKey: "ck_4xxxxxxxxxxxxxxxxxxxxx",
  consumerSecret: "cs_xxxxxxxxxxxxxxxxxxxxxx",
  version: 'wc/v3'
});

/*
   Ideally, you'll want to limit origins to your front-end only
   ie: "localhost:3000" for dev and "example.com" for prod
   otherwise, anyone can point to your backend and request data from it
*/
app.use(cors({ origin: ["http://localhost:3000", "https://example.com"] }));

// *optional* parses incoming JSON args to the "req.body"
// https://expressjs.com/en/api.html#express.json
app.use(express.json());

// tell express to use router instance
app.use(router);

// set up a route to listen for "GET" requests to "/api/orders"
// https://expressjs.com/en/api.html#router.METHOD
router.get("/api/orders", async (req, res) => {
  try {
    const response = await WooCommerce.get("orders");

    // assuming response.data is an array of orders
    if(!response.data || !response.data.length) throw Error("No orders were found!");
    
    // sets status: https://expressjs.com/en/api.html#res.status
    // sends JSON: https://expressjs.com/en/api.html#res.json
    return res.status(200).json({ orders: response.data });
  } catch (error) {
    // in this case, sends a plain text response 
    // https://expressjs.com/en/api.html#res.send
    return res.status(404).send(error.toString());
  }
});

app.listen(PORT, () => {
  console.log(`Example app listening at http://localhost:${PORT}`);
});