1

I am building a web app using Django backend and ReactJS frontend. This web app will be a culmination of several smaller applications like Todo app, Investments Tracker, Budget Analysis etc.

Frontend:

This I how I have structured the frontend (ReactJS project):

src
  - apps
    - Home
      - index.jsx
    - Todo
      - index.jsx
    - Expenses
      - index.jsx
    - Investments
      - index.jsx
    - index.js
  - App.jsx

App.jsx

function App() {
  return (
    <Routes>
      {/* COMMON ROUTES */}
      <Route path="/todos" element={<Register />} />
      <Route path="/activate/pending" element={<PendingActivation />} />
      <Route path="/activate" element={<Activate />} />
      <Route path="/login" element={<Login />} />

      {/* APP ROUTES */}
      <Route path="/todos" element={<Todo />} />
      <Route path="/expenses" element={<Expenses />} />
      <Route path="/investments" element={<Investments />} />
    </Routes>
  );
}

function AppWrapper() {
  return (
    <Provider store={store}>
      <BrowserRouter>
        <Alerts />
        <App />
      </BrowserRouter>
    </Provider>
  );
}

ReactDOM.render(<AppWrapper />, document.getElementById('root'));

Based on the endpoints, I will route the User to one of the sub-apps.

Backend:

And this is how I structured my backend (Django project):

backend
  - app # project
    - settings.py
  - base        # app 0 - has custom User model
  - todo        # app 1 - to maintain todo list
  - expenses    # app 2 - to maintain budget
  - Investments # app 3 - to track investments
  ...

In the 'base' app I have defined a custom user model and I have exposed RESTful endpoints for Login, Registration etc which gives JWT tokens.

Now, I have started working on the 'todo' app where I am planning to learn and implement GraphQL endpoint which handles all todo operations. Similarly, I wanted to expose separate graphql endpoints for the 'expenses' & 'investments' app.

POST /api/todos/graphql
POST /api/expenses/graphql
POST /api/investments/graphql

Questions:

Is this considered a bad practice to have multiple '/graphql' endpoints?

I had this dilemma when I was going though how graphql was being used in reactjs. I came across 'Apollo-Client' in which the app was being wrapped in <ApolloProvider>.

Example from Apollo Client documentation:

const client = new ApolloClient({
  uri: 'https://48p1r2roz4.sse.codesandbox.io',
  cache: new InMemoryCache()
});

function App() {
  return (
    <div>
      <h2>My first Apollo app </h2>
    </div>
  );
}

render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root'),
);

As you can see, the backend graphql endpoint is also being passed to the <ApolloProvider> in the client prop.

If I am going to stick with this approach (where I will have separate graphql endpoints in the backend), then how should I handle this in the frontend. Should I wrap each of my sub-app with <ApolloProvider> so that I would be able to provide separate graphql endpoints. Or is this a bad practice?

Sreekar Mouli
  • 1,313
  • 5
  • 25
  • 49
  • 1
    I can only speak to your first question: I don't see anything that explicitly speaks against this practice, even though this would be an optimal opportunity to switch to microservices. For your second question regarding Apollo I can't speak, as I have no experience with that. Also maybe https://stackoverflow.com/q/38071714/7454177 helps! – creyD Jan 18 '22 at 12:49
  • I have gone though https://stackoverflow.com/q/38071714/8208804 and I think I will go ahead with having only one graphql api from my django backend – Sreekar Mouli Jan 19 '22 at 15:16

1 Answers1

0

I think there is nothing wrong about having different providers in the sub apps. It is just providing different context for the operations inside them.

import {client1,client2,client3} from "../clients"

function App(){
  return(
    <Apolloprovider client={client1}/>
      <SubApp1/>
    </Apolloprovider>
    <Apolloprovider client={client2}/>
      <SubApp2/>
    </Apolloprovider>
    <Apolloprovider client={client3}/>
      <SubApp3/>
    </Apolloprovider>
  )
}

I am not sure if this is the correct way of doing this but I think it could work.

izidormaklary
  • 71
  • 6