Apollo 客户端中的抽象中继式连接

Posted 2023-03-08

【中文标题】Apollo 客户端中的抽象中继式连接

【英文标题】：Abstract relay-style connections in Apollo client

【发布时间】：2019-12-25 01:27:43

【问题描述】：

我正在构建一个应用程序，它将在后端使用 GraphQL，在前端使用 Apollo-client。我将使用Relay-style connection types，因为它允许我们将元数据放在关系上。

但是，我们不希望我们的 React 组件必须处理连接增加的额外复杂性。出于遗留原因，也因为它看起来更干净，我希望我的反应组件不必处理 nodes 和 edges。我更喜欢绕过：

片段 1：

const ticket = 
  title: 'My bug'
  authors: [ login: 'user1', login: 'user2' ]

而不是

片段 2：

const ticket = 
  title: 'My bug'
  authors: 
    nodes: [
      login: 'user1',
      login: 'user2',
    ]
  

同样在打字稿中，我真的不认为自己定义了包含节点和元数据的票证类型，例如nextPage、lastPage 等...

我正在尝试提出一个抽象，可能是在 apollo 客户端级别，它允许我自动将 Snippet 2 转换为 Snippet 1，同时在我实际需要这些元数据时仍然允许访问 Snippet 1。

这个问题已经被其他人解决了吗？您对可能的解决方案有什么建议吗？我是不是走错方向了？

【参考方案1】：

您可以简单地在架构中公开其他字段，而不是尝试解决此客户端问题。您可以通过official SWAPI example 看到这一点：

query 
  allFilms 

    # edges
    edges 
      node 
        ...FilmFields
      
    

    # nodes exposed directly
    films 
      ...FilmFields
    
  

通过这种方式，您可以根据需要查询有或没有连接的节点，而不必在客户端使事情复杂化。