如何将计算状态添加到 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——无需添加单独的 link 即可使用本地解析器和 @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()]),
});

定义您的 client-only 解析器：

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。

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

How can I add computed state to graph objects in React Apollo?

javascript

apollo

reactjs

graphql

react-apollo