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>
)
}
Я не уверен, что это правильный способ, но я думаю, что он может сработать.