将 react apollo 前端连接到 graphql 后端

Question

我的项目已准备好并可以运行，但仅在我的本地计算机上。我想部署它，以便展示我所做的。我的后端已部署并运行here 代码是here

这里是 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)

我有我的前端here 代码是here

这里是 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;

问题是前端只有在我的后端在本地机器上运行时才起作用，我部署的前端连接到我的本地后端。如何让它连接到已部署的后端？

Answer 1

这可能无法解决您的问题，但您确定不应该反过来吗？

// apollo client setup
const client = new ApolloClient({
  uri: process.env.NODE_ENV === 'development' ? `https://readers-corner-backend.herokuapp.com/graphql` : `http://localhost:4000`,
});

您正在使用 development 的删除 URL

试试

uri: process.env.NODE_ENV === 'development' ? `http://localhost:4000` : `https://readers-corner-backend.herokuapp.com/graphql`,

Answer 2

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')
);

更正的代码

Answer 3

您需要使用一些同时提供前端和后端支持的托管服务，例如 aws。您不能在不同平台上使用 2 种不同的服务，然后将它们连接起来。