將反應阿波羅前端連接到 graphql 后端

Question

我已經准備好我的項目並且可以工作，但只在我的本地機器上。 我想部署它，以便展示我所做的。 我的后端已部署並在此處運行，代碼在此處

這是 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;

問題是前端只有當我的后端在本地機器上運行時才起作用，我部署的前端連接到我的本地后端。 我怎樣才能讓它連接到已部署的后端？

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`,
});

您正在使用刪除 URL 進行development

嘗試

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 種不同的服務，然后將它們連接起來。