Django ReactJS - Экспонирование нескольких конечных точек graphql

Я создаю веб-приложение, используя Django backend и ReactJS frontend. Это веб-приложение будет кульминацией нескольких небольших приложений, таких как Todo app, Investments Tracker, Budget Analysis и т.д.

Frontend:

Вот как я структурировал фронтенд (проект ReactJS):

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

Основываясь на конечных точках, я направлю пользователя в одно из суб-приложений.

Бэкэнд:

Вот как я структурировал свой бэкенд (проект 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
  ...

В "базовом" приложении я определил пользовательскую модель пользователя и выставил конечные точки RESTful для входа, регистрации и т.д., которые предоставляют токены JWT.

Сейчас я начал работать над приложением "todo", где я планирую изучить и реализовать конечную точку GraphQL, которая будет обрабатывать все операции todo. Аналогичным образом, я хотел выставить отдельные конечные точки graphql для приложений "расходы" и "инвестиции".

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

Вопросы:

Считается ли плохой практикой иметь несколько конечных точек '/graphql'?

У меня возникла дилемма, когда я просматривал, как graphql используется в reactjs. Я столкнулся с 'Apollo-Client', в котором приложение было обернуто в <ApolloProvider>.

Пример из Документации клиента 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'),
);

Как вы видите, конечная точка бэкенда graphql также передается в <ApolloProvider> в client prop.

Если я собираюсь придерживаться этого подхода (где у меня будут отдельные конечные точки graphql в бэкенде), то как я должен справиться с этим во фронтенде. Должен ли я обернуть каждый из моих суб-приложений с помощью <ApolloProvider>, чтобы я мог обеспечить отдельные конечные точки graphql. Или это плохая практика?

Я думаю, что нет ничего плохого в том, чтобы иметь разных провайдеров во вложенных приложениях. Это просто обеспечивает различный контекст для операций внутри них.

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

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

Я не уверен, что это правильный способ, но я думаю, что он может сработать.

Вернуться на верх