MERN应用部署Heroku遇内存超限及/graphql 404问题求助

我刚完成一个MERN栈Web应用，部署到Heroku后看似成功，但登录或创建用户时出现/graphql 404错误。执行heroku log --tails查看日志，发现请求提交后应用因内存使用超出配额崩溃。

本地运行时通过DevTools观察到，登录、搜索操作会触发内存大幅峰值，原因是通过循环从API获取数据并渲染到页面。目前已经重构搜索功能，用React.lazy只渲染视口内的内容，但不知道如何重构登录和注册功能来降低内存占用。

相关代码与配置文件 #

LoginPage.js #

import { Link } from 'react-router-dom';
import { useMutation } from '@apollo/client';
import { authService } from '../utils/auth';
import { LoginForm } from '../components/Login/LoginForm'
import { Alert } from 'react-bootstrap';
import { LOGIN_USER } from '../utils/mutations';

export const Login = (props) => {
  const [formState, setFormState] = useState({ email: '', password: '' });
  const [login, { error }] = useMutation(LOGIN_USER);

  const handleSubmit = (e) => {
      const { name, value } = e.target;

      setFormState({
          ...formState,
          [name]: value,
      });
  };

  // submit form
  const handleFormSubmit = async (e) => {
    e.preventDefault();
    console.log(formState);

    if (!formState.email || !formState.password) {
      alert('Failed to submit form! Please fill all requested fields.');
      document.location.replace('/');
    }

    try {
      const { data } = await login({
        variables: { ...formState },
      });

      authService.login(data.login.token)

    } catch (e) {
      console.log(e);
    }

    // clear form values
    setFormState({
      email: '',
      password: '',
    });
  };
  
  return (
    <> {authService.loggedIn() ? (
      <p>
        Success! You may now head{' '}
        <Link to="/">back to the homepage.</Link>
      </p>
    ) : (
      <LoginForm 
        onSubmit={handleFormSubmit} 
        handleSubmit={handleSubmit} 
        handleFormSubmit={handleFormSubmit}
        formState={formState}
      />
    )}
      
      {error && (
        <Alert severity='error'>
          {error.message}
        </Alert>       
      )}
    </>
  );
};

export default LoginForm;

LoginForm.js #

import React from 'react'
import { Form, Button } from 'react-bootstrap';

export const LoginForm = ({handleFormSubmit, handleSubmit, formState}) => {

    return (
        <Form onSubmit={handleFormSubmit} style={{padding:'15%', justifyContent:'center'}}>
            <Form.Group>
                <Form.Label htmlFor='email'>Email</Form.Label>
                <Form.Control
                    type='email'
                    placeholder='Your email'
                    name='email'
                    onChange={handleSubmit}
                    value={formState.email}
                    required
                />
                <Form.Control.Feedback type='invalid'>Email is required!</Form.Control.Feedback>
            </Form.Group>

            <Form.Group>
                <Form.Label htmlFor='password'>Password</Form.Label>
                <Form.Control
                    type='password'
                    placeholder='Your password'
                    name='password'
                    onChange={handleSubmit}
                    value={formState.password}
                    required
                />
                <Form.Control.Feedback type='invalid'>Password is required!</Form.Control.Feedback>
            </Form.Group>
            <Button style={{margin:'5%', justifyContent:'center', textAlign:'center'}}
            disabled={!(formState.email && formState.password)}
            type='submit'
            variant='success'>
            Submit
            </Button>
        </Form>
    )
}

Client端package.json #

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "engines": {
    "node": "14.2.0",
    "npm": "6.14.5"
  },
  "dependencies": {
    "@apollo/client": "^3.7.3",
    "@apollo/react-hooks": "^4.0.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "apollo-cache-inmemory": "^1.6.6",
    "apollo-cache-persist": "^0.1.1",
    "apollo-client": "^2.6.10",
    "apollo-link-http": "^1.5.17",
    "apollo-link-rest": "^0.9.0",
    "axios": "^1.2.2",
    "bootstrap": "^5.2.3",
    "graphql": "^15.8.0",
    "http-proxy-middleware": "^2.0.6",
    "jwt-decode": "^3.1.2",
    "qs": "^6.11.0",
    "react": "^18.2.0",
    "react-bootstrap": "^2.7.0",
    "react-dom": "^18.2.0",
    "react-moment": "^1.1.3",
    "react-router-dom": "^6.7.0",
    "react-scripts": "^5.0.1",
    "react-use": "^17.4.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "main": "index.js"
}

Server端package.json #

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "start": "node server.js",
    "watch": "nodemon server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "apollo-server-express": "^3.11.1",
    "axios": "^1.2.5",
    "bcrypt": "^5.1.0",
    "cors": "^2.8.5",
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "graphql": "^16.6.0",
    "jsonwebtoken": "^9.0.0",
    "mongoose": "^6.9.0",
    "nodemon": "^2.0.20"

  }
}

根目录package.json #

{
  "name": "foodgenie",
  "version": "1.0.0",
  "description": "",
  "main": "server/server.js",
  "scripts": {
    "start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
    "start:prod": "cd server && npm start",
    "start:dev": "concurrently \"cd server && npm run watch\" \"cd client && npm start\"",
    "install": "cd server && npm i && cd ../client && npm i",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
  },
  "keywords": [],
  "author": "Chris H",
  "license": "ISC",
  "dependencies": {
    "concurrently": "^7.6.0",
    "dotenv": "^16.0.3",
    "if-env": "^1.0.4",
    "nodemon": "^2.0.20"
  }
}

Procfile #

web: npm run start:dev

恳请各位提供建议或反馈，谢谢。

内容的提问来源于stack exchange，提问作者iAmWasabi