javascript - 如何将计算状态添加到 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 指令。有关混合本地和远程字段的示例，check out of the docs .原始答案如下。

只要您使用的是 Apollo 2.0，这应该可以通过使用 apollo-link-state as 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);

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