Django ReactJS - 公开多个 graphql 端点

Question

我正在使用 Django 后端和 ReactJS 前端构建一个 Web 应用程序。这个网络应用程序将是几个较小的应用程序的顶峰，例如Todo应用程序、投资跟踪器、预算分析等。

前端：

这是我如何构建前端（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”应用程序，我计划在其中学习和实现处理所有 todo 操作的 GraphQL 端点。同样，我想为“费用”和“投资”应用程序公开单独的 graphql 端点。

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

问题：

拥有多个“/graphql”端点是否被认为是一种不好的做法？

当我思考如何在 ReactJS 中使用 graphql 时，我遇到了这样的困境。我发现

'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

。

如果我要坚持这种方法（我将在后端有单独的 graphql 端点），那么我应该如何在前端处理这个问题。 我是否应该用

<ApolloProvider>

包装每个子应用程序，以便我能够提供单独的 graphql 端点。或者这是一个不好的做法？

Answer 1

我认为在子应用程序中拥有不同的提供者没有什么问题。它只是为它们内部的操作提供不同的上下文。

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

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

我不确定这是否是正确的方法，但我认为它可行。

Answer 2

你是如何做到的。我正在尝试使用多个 graphql 端点。一种是经过身份验证的，另一种是供公共使用的。 但我不知道该怎么做