[英]connect react apollo frontend to graphql backend
我已经准备好我的项目并且可以工作,但只在我的本地机器上。 我想部署它,以便展示我所做的。 我的后端已部署并在此处运行,代码在此处
这是 app.js
const express = require("express");
const {graphqlHTTP} = require("express-graphql");
const schema = require("./schema/schema");
const mongoose = require("mongoose");
//need to see
const cors = require("cors")
const app = express();
app.use(cors());
mongoose.connect(
"mongodb+srv://administrator:administrator@cluster0.gqs94.mongodb.net/readerscorner?retryWrites=true&w=majority",
{ useNewUrlParser: true, useUnifiedTopology: true }
);
mongoose.connection.once("open", () => {
console.log("connected");
});
app.use("/graphql", graphqlHTTP({ schema, graphiql: true }));
const port = process.env.PORT || 4000
// Strating Server
app.listen(port)
这是 app.js
import React, { Component } from "react";
import BookList from "./components/BookList";
import AddBook from "./components/AddBook";
import ApolloClient from "apollo-boost";
import { ApolloProvider } from "react-apollo";
import LoginButton from "./components/LoginButton"
import LogoutButton from "./components/LogoutButton";
import Profile from "./components/Profile";
import {useAuth0} from '@auth0/auth0-react'
import "./App.css"
//import Search from "./components/Search";
// components
// apollo client setup
const client = new ApolloClient({
uri: process.env.NODE_ENV === 'development' ? `https://readers-corner-backend.herokuapp.com/graphql` : `http://localhost:4000`,
});
class App extends Component {
render() {
return (
<ApolloProvider client={client}>
<div id="main">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Readers Corner - The Books Store</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<Profile/>
<li class="nav-item mr-2">
<LoginButton />
</li>
<li class="nav-item">
<LogoutButton/>
</li>
</ul>
</div>
</nav>
<BookList />
<AddBook />
</div>
</ApolloProvider>
);
}
}
export default App;
问题是前端只有当我的后端在本地机器上运行时才起作用,我部署的前端连接到我的本地后端。 我怎样才能让它连接到已部署的后端?
这可能无法解决您的问题,但您确定这不应该反过来吗?
// apollo client setup
const client = new ApolloClient({
uri: process.env.NODE_ENV === 'development' ? `https://readers-corner-backend.herokuapp.com/graphql` : `http://localhost:4000`,
});
您正在使用删除 URL 进行development
尝试
uri: process.env.NODE_ENV === 'development' ? `http://localhost:4000` : `https://readers-corner-backend.herokuapp.com/graphql`,
index.js 文件还包含 apollo 客户端 uri 的代码,因为它在顶部,所以它重写了 app.js 中的 uri
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {Auth0Provider} from '@auth0/auth0-react'
import ApolloClient from 'apollo-boost';
import { ApolloProvider } from '@apollo/react-hooks';
const domain = process.env.REACT_APP_AUTH0_DOMAIN;
const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;
// components
// apollo client setup
const client = new ApolloClient({
uri: 'https://readers-corner-backend.herokuapp.com/graphql'
});
ReactDOM.render(
<Auth0Provider domain={domain} clientId={clientId} redirectUri={window.location.origin}>
<ApolloProvider client={client}>
<App />
</ApolloProvider>
</Auth0Provider>,
document.getElementById('root')
);
更正的代码
您需要使用一些同时提供前端和后端支持的托管服务,例如 aws。 您不能在不同平台上使用 2 种不同的服务,然后将它们连接起来。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.