如何将计算状态添加到 React Apollo 中的图形对象？

Posted 2023-03-10

【中文标题】如何将计算状态添加到 React Apollo 中的图形对象？

【英文标题】：How can I add computed state to graph objects in React Apollo?

【发布时间】：2018-07-31 12:11:53

【问题描述】：

我真的很喜欢让组件请求自己的数据的 graphQL 模式，但是某些数据属性的计算成本很高，所以我想本地化逻辑（和代码）来做到这一点。

function CheaterList( data:  PlayerList: players  ) 
  return (
    <ul>
      players && players.map(( name, isCheater ) => (
        <li key=name>name seems to be a isCheater ? 'cheater' : 'normal player'</li>
      ))
    </ul>
  );


export default graphql(gql`
  query GetList 
    PlayerList 
      name,
      isCheater
    
  
`)(CheaterList);

架构如下：

type Queries 
    PlayerList: [Player]


type Player 
    name: String,
    kills: Integer,
    deaths: Integer

所以我想将 isCheater 属性添加到 Player 并使其代码为：

function computeIsCheater(player: Player)
    // This is a simplified version of what it actually is for the sake of the example
    return player.deaths == 0 || (player.kills / player.deaths) > 20;

我该怎么做？

另一种表述方式是：如何让 isCheater 属性看起来像是来自后端？ （但是，如果应用了乐观更新，则该函数应在新数据上重新运行）

【问题讨论】：

根据docs，您似乎可以将第二个参数传递给graphql 以传递计算属性？

@Varinder 这就是您将属性传递给查询的方式，这与我在这里询问的不同。

是的，Arbitrary Transformation 有什么帮助吗？

不，这相当于从组件本身计算属性值。我希望每个组件只声明它需要Player isCheater ，然后显示数据，类似于数据来自远程的情况。

【参考方案1】：

注意：本地状态管理现在包含在 apollo-client 中——无需添加单独的链接即可使用本地解析器和 @client 指令。有关混合本地和远程字段的示例，check out of the docs。原始答案如下。

只要您使用的是 Apollo 2.0，这应该可以通过将 apollo-link-state 用作 outlined in the docs 来实现。

修改您的客户端配置以包含apollo-link-state：

import  withClientState  from 'apollo-link-state';

const stateLink = withClientState(
  cache, //same cache object you pass to the client constructor
  resolvers: linkStateResolvers,
);

const client = new ApolloClient(
  cache,
  link: ApolloLink.from([stateLink, new HttpLink()]),
);

定义您的仅限客户端的解析器：

const linkStateResolvers = 
  Player: 
    isCheater: (player, args, ctx) => 
      return player.deaths == 0 || (player.kills / player.deaths) > 20
    
  

在查询中使用@client 指令

export default graphql(gql`
  query GetList 
    PlayerList 
      name
      kills
      deaths
      isCheater @client
    
  
`)(CheaterList);

但是，在单个查询中组合本地和远程字段目前似乎已被破坏。您可以跟踪一个未解决的问题here。