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: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)

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?

Answer 1

the index.js file also contains the code for apollo client uri and since it was on top it rewrote the uri in the app.js

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

corrected code

Answer 2

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`,

Answer 3

You need to take some hosting service which provides both front end and back end support , such as aws. you can not use 2 different services on different platform and then connect them.