Django ReactJS: exposición de múltiples puntos finales de graphql

Estoy creando una aplicación web utilizando Django backend y ReactJS frontend. Esta aplicación web será la culminación de varias aplicaciones más pequeñas como la aplicación Todo, Rastreador de inversiones, Análisis de presupuesto, etc.

Interfaz:

Así es como he estructurado la interfaz (proyecto ReactJS):

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

Aplicación.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'));

En función de los puntos finales, enrutaré al usuario a una de las subaplicaciones.

back-end:

Y así es como estructuré mi backend (proyecto Django):

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
  ...

En la aplicación 'base', definí un modelo de usuario personalizado y expuse puntos finales RESTful para inicio de sesión, registro, etc., lo que otorga tokens JWT.

Ahora, comencé a trabajar en la aplicación 'todo' donde planeo aprender e implementar el punto final GraphQL que maneja todas las operaciones pendientes. Del mismo modo, quería exponer puntos finales de graphql separados para la aplicación 'gastos' e 'inversiones'.

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

Preguntas:

¿Se considera una mala práctica tener múltiples puntos finales '/graphql'?

Tuve este dilema cuando estaba pensando en cómo se usaba graphql en reactjs. Me encontré con 'Apollo-Client'que la aplicación estaba envuelta en <ApolloProvider>.

Ejemplo de la documentación del cliente Apollo :

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

Como puede ver, el punto final de backend graphql también se pasa a <ApolloProvider>la clientprop.

Si voy a seguir con este enfoque (donde tendré extremos de graphql separados en el backend), entonces, ¿cómo debo manejar esto en el frontend? ¿Debería envolver cada una de mis aplicaciones secundarias <ApolloProvider>para poder proporcionar puntos finales de graphql separados? ¿O es una mala práctica?

Answer

Creo que no hay nada de malo en tener diferentes proveedores en las subaplicaciones. Simplemente proporciona un contexto diferente para las operaciones dentro de ellos.

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

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

No estoy seguro de si esta es la forma correcta de hacerlo, pero creo que podría funcionar.

Nuevo colaborador
izidormaklary is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.