Как связать Gatsby.js с моим сервером Express

Question

Я пытаюсь создать очень простое приложение с полным стеком, в котором интерфейсом является Gatsby, а Backend - простым сервером Express. У меня есть база данных, где у меня есть несколько пользователей, и цель состоит в том, чтобы получить этих пользователей в бэкэнд с запросом, а затем отобразить их в компоненте Gatsby (React) с помощью fetch (). Очевидно, что-то идет не так, и я не могу отобразить их на экране, даже если с помощью Postman запрос обрабатывается правильно. Вот соответствующие фрагменты кода:

Экспресс: я использовал классический экспресс-генератор и изменил только файл маршрута users.js, чтобы связать его с базой данных. (поскольку Gatsby использует порт 8000, нет необходимости изменять порт, чтобы React и express не перекрывались).

var express = require('express');
var router = express.Router();
const mysql = require('mysql');

var mysqlconnection = mysql.createConnection({
  host     : ****,
  user     : ****,
  password : ****,
  database : ****
});

mysqlconnection.connect(function(err) {
  if (err) {
  console.log(err)
  }
  else {
  console.log(`You are now connected` )
  }
})

router.get('/', (req, res) => {
  mysqlconnection.query('SELECT * FROM table_basic', (err, rows, fields) => {
      if(!err) {
          res.send(JSON.stringify(rows, undefined, 2));
      }
      else {
          console.log(err)
      }        
  })
})



module.exports = router;

Страница Гэтсби: это НЕ основной файл index.js, это вторичная страница, закодированная как contacts.js в папке страницы (Гэтсби использует встроенный метод маршрутизации). Компонент обернут вокруг макета (нижний колонтитул и верхний колонтитул, работающий подобно частям hbs).

import React, { Component } from 'react';
import './contacts.css';
import Layout from '../components/layout';

export default class About extends Component {
    constructor(props) {
        super(props)

        this.state = {
            users: []
        }
    }


    componentDidMount() {
        fetch('/users')
          .then(res => res.json())
          .then(users => this.setState({ users }));
      }



  render() {
    return (
        <Layout>
            <h1>LISTING</h1>
            <ul>
              {this.state.users.map(user =>
                <li key={user.id}>{user.lastname}</li> 
                )}
            </ul>         
        </Layout>      
    )   
  }
}

И, наконец, чтобы связать серверную часть с интерфейсом, я добавил "proxy": "http://localhost:3000", в пакет Gatsby.json, чтобы указать на сервер Express. Там все отлично работает, используя Postman и везде, где я пытаюсь получить данные, но они не отображаются на экране. Есть идеи?

Answer 1

Добавьте это в ваш файл конфигурации Gatsby

module.exports = {
  proxy: {
    prefix: "/users",
    url: "http://localhost:3000",
  },
}

Таким образом, когда вы выбираете ('/ users / todos') в разработке, разработка сервер распознает, что это не статический ресурс, и прокси Ваш запрос на http://localhost:3000/users/todos в качестве запасного варианта.

Answer 2

У меня была точно такая же проблема, и я решил ее, следуя совету в разделе «Расширенные возможности прокси» на веб-сайте GatsbyJS:

https://www.gatsbyjs.org/docs/api-proxy/#advanced-proxying

Я предлагаю вам изменить файл gatsby-config.js (, а не package.json) следующим образом:

var proxy = require("http-proxy-middleware")

module.exports = {
  developMiddleware: app => {
    app.use(
      proxy({
        target: "http://localhost:3000",
      })
    )
  },
}

Возможно, вам потребуется создать файл gatsby-config.js. Вам также может понадобиться удалить строку «proxy» из вашего файла package.json.