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

Question

我真的很喜欢让组件请求他们自己的数据的 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 属性看起来好像来自后端？（但是，如果应用了乐观更新，则该函数应在新数据上重新运行）

Answer 1

注意：本地状态管理现在已融入apollo-client——无需添加单独的链接即可使用本地解析器和@client指令。有关混合本地和远程字段的示例，请查看文档。原答案如下。

只要你使用阿波罗2.0，这应该利用可以apollo-link-state为在文档中列出。

修改您的客户端配置以包括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);

但是，在单个查询中组合本地和远程字段目前似乎已被破坏。有一个开放的问题，在这里，你可以跟踪。