使用 Apollo，如何区分新创建的对象? [英] Using Apollo, how can I distinguish newly created objects?

问题描述

我的用例如下:

我有一个使用 GraphQL 查询获取的评论列表.当用户编写新评论时，它会使用 GraphQL 更改提交.然后我使用 updateQueries 将新评论附加到列表中.

I have a list of comments that I fetch using a GraphQL query. When the user writes a new comment, it gets submitted using a GraphQL mutation. Then I'm using updateQueries to append the new comment to the list.

在 UI 中，我想突出显示新创建的评论.我试图在 mutationResult 中的新注释上添加一个属性 isNew: true，但 Apollo 在将其保存到商店之前删除了该属性(我认为这是因为 gql 查询中未请求 isNew 字段).

In the UI, I want to highlight the newly created comments. I tried to add a property isNew: true on the new comment in mutationResult, but Apollo removes the property before saving it to the store (I assume that's because the isNew field isn't requested in the gql query).

有什么办法可以实现吗?

Is there any way to achieve this?

推荐答案

我可以看到有几种方法可以做到这一点.你是对的，Apollo 将剥离 isNew 值，因为它不是你的架构的一部分，也没有列在查询选择集中.我喜欢将 apollo 管理的服务器数据的关注点与有助于使用 redux/flux 的前端应用程序状态分开，或者更简单地通过在您的组件状态下管理它.

I could see this being done a couple of ways. You are right that Apollo will strip the isNew value because it is not a part of your schema and is not listed in the queries selection set. I like to separate the concerns of the server data that is managed by apollo and the front-end application state that lends itself to using redux/flux or even more simply by managing it in your component's state.

Apollo 为您提供了提供您自己的 redux 存储的选项.您可以允许 apollo 管理其数据获取逻辑，然后管理您自己的前端状态.这是一篇讨论如何做到这一点的文章:http://dev.apollodata.com/反应/redux.html.

Apollo gives you the option to supply your own redux store. You can allow apollo to manage its data fetching logic and then manage your own front-end state alongside it. Here is a write up discussing how you can do this: http://dev.apollodata.com/react/redux.html.

如果您使用的是 React，您或许可以使用组件生命周期钩子来检测何时出现新评论.这可能有点麻烦，但您可以使用 componentWillReceiveProps 将新评论列表与旧评论列表进行比较，确定哪些是新评论，将其存储在组件状态中，然后使它们无效使用 setTimeout 一段时间后.

If you are using React, you might be able to use component lifecycle hooks to detect when new comments appear. This might be a bit of a hack but you could use componentWillReceiveProps to compare the new list of comments with the old list of comments, identify which are new, store that in the component state, and then invalidate them after a period of time using setTimeout.

componentWillReceiveProps(newProps) {

  // Compute a diff.
  const oldCommentIds = new Set(this.props.data.allComments.map(comment => comment.id));
  const nextCommentIds = new Set(newProps.data.allComments.map(comment => comment.id));
  const newCommentIds = new Set(
    [...nextCommentIds].filter(commentId => !oldCommentIds.has(commentId))
  );
  this.setState({
    newCommentIds
  });

  // invalidate after 1 second
  const that = this;
  setTimeout(() => {
    that.setState({
      newCommentIds: new Set()
    })
  }, 1000);
}

// Then somewhere in your render function have something like this.
render() {
  ...
  {
    this.props.data.allComments.map(comment => {
      const isNew = this.state.newCommentIds.has(comment.id);
      return <CommentComponent isNew={isNew} comment={comment} />
    })
  }
  ...
}

上面的代码就在袖口上，所以你可能需要玩一会儿.希望这会有所帮助:)

The code above was right off the cuff so you might need to play around a bit. Hope this helps :)

这篇关于使用 Apollo，如何区分新创建的对象?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！