如何解决GraphQL错误与proxy和ServerParseError
如何解决以下错误?
代理错误:无法将请求/ localhost:3000 / graphql从localhost:3000代理到http:// localhost:3001 /。
这是我的server.js
const express = require('express');
const path = require('path');
const db = require('./config/connection');
const { ApolloServer } = require('apollo-server-express');
const { typeDefs,resolvers } = require('./schemas');
//const routes = require('./routes');
const { authMiddleware } = require('./utils/auth');
const app = express();
const PORT = process.env.PORT || 3001;
const server = new ApolloServer({
typeDefs,resolvers,context: authMiddleware
});
server.applyMiddleware({ app });
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
// if we're in production,serve client/build as static assets
if (process.env.NODE_ENV === 'production') {
app.use(express.static(path.join(__dirname,'../client/build')));
}
//app.use(routes);
db.once('open',() => {
app.listen(PORT,() => {
console.log(`? Now listening on localhost:${PORT}`);
console.log(`Use GraphQL at http://localhost:${PORT}${server.graphqlPath}`);
});
});
当我单击POST错误时,它表示该错误来自登录事件处理程序
const handleFormSubmit = async event => {
event.preventDefault();
// check if form has everything (as per react-bootstrap docs)
const form = event.currentTarget;
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
try {
const { data } = await login({
variables: {...userFormData}
});
Auth.login(data.login.token);
} catch (e) {
console.error(e);
setShowAlert(true);
}
setUserFormData({
username: '',email: '',password: '',});
};
当我在DevTools中扩展它们时,所有3个错误均指向该handleFormSubmit
函数。
这是我package.json
文件夹中的client
"proxy": "http://localhost:3001/","secure": false,
这是我的app.js
import React from 'react';
import { ApolloProvider } from '@apollo/react-hooks';
import ApolloClient from 'apollo-boost';
import { BrowserRouter as Router,Switch,Route } from 'react-router-dom';
import Navbar from './components/Navbar';
import SearchBooks from './pages/SearchBooks';
import SavedBooks from './pages/SavedBooks';
const client = new ApolloClient({
request: operation => {
const token = localStorage.getItem('id_token');
operation.setContext({
headers: {
authorization: token ? `Bearer ${token}` : ''
}
})
},uri: '/graphql'
});
function App() {
return (
<ApolloProvider client={client}>
<Router>
<>
<Navbar />
<Switch>
<Route exact path='/' component={SearchBooks} />
<Route exact path='/saved' component={SavedBooks} />
<Route render={() => <h1 className='display-2'>Wrong page!</h1>} />
</Switch>
</>
</Router>
</ApolloProvider>
);
}
export default App;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。