javascript - connect react apollo frontend to graphql backend

Question

I have my project ready and working but only in my local machine. I want to deploy it so that I can showcase what I have made. My backend is deployed and running here the code is here

Here is the 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:[email protected]/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)

i have my frontend here the code is here

Here is the 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;

the problem is that the frontend works only when i have my backend running in the local machine, my deployed frontend is connected to my local backend. how can i make it connect to a deployed backend?

question from:https://stackoverflow.com/questions/65845338/connect-react-apollo-frontend-to-graphql-backend

Answer 1

This might not solve your issue but are you sure this shouldn't be the other way around?

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

You are using the remove URL for development

Try

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