Javascript 如何在React Apollo中向图形对象添加计算状态？

我非常喜欢让组件请求自己的数据的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);

因此，我想将

ischester

属性添加到播放器中，并使其代码为：

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;
}

我该怎么做

---

另一种说法是：如何使ischester属性看起来像来自后端？（但是，如果应用了乐观更新，则该函数应在新数据上重新运行）

注意：本地状态管理现在被烘焙到阿波罗客户端中——无需添加单独的链接来使用本地解析程序和

@client

指令。有关混合本地字段和远程字段的示例。原来的答案如下

只要您使用的是Apollo 2.0，就可以使用

Apollo链接状态

As

修改客户端配置以包括阿波罗链路状态：

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

---

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

根据，您似乎可以将第二个参数传递给

graphql

以传递计算属性？@Varinder这就是您将属性传递给查询的方式，这与我在这里提出的问题不同。是的，这会有任何帮助吗？不，这相当于从组件本身内部计算属性值。我希望每个组件只声明它需要

Player{ischester}

，然后让数据显示出来，就像数据来自远程设备一样。

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