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

问题描述

我的用例如下:

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

在用户界面中，我要突出显示新创建的注释.我试图在mutationResult中的新注释上添加属性isNew: true，但是Apollo在将该属性保存到商店之前将其删除(我认为这是因为gql查询中未请求isNew字段)./p>

有什么办法可以做到这一点?

解决方案

我可以看到这是通过两种方法完成的.没错，Apollo将剥离isNew值，因为它不是您的架构的一部分，并且未在查询选择集中列出.我想将对由apollo管理的服务器数据和前端应用程序状态的关注分开，这有助于使用redux/flux，甚至更简单地通过在组件状态下对其进行管理.

Apollo使您可以选择提供自己的Redux存储.您可以允许apollo管理其数据提取逻辑，然后与之一起管理自己的前端状态.这是一篇讨论如何执行此操作的文章: http://dev.apollodata.com/react/redux.html .

如果您使用的是React，则可以使用组件生命周期挂钩来检测何时出现新注释.这可能有点麻烦，但是您可以使用componentWillReceiveProps将新的注释列表与旧的注释列表进行比较，确定哪些是新的，将其存储在组件状态，然后在一段时间后使它们无效使用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} />
    })
  }
  ...
}

上面的代码是袖手旁观，因此您可能需要进行一些尝试.希望这会有所帮助:)

My use case is the following:

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.

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?

解决方案

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 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.

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屋！