Question

我有一个显示作业列表的应用程序，每个作业可以处于几种状态之一（作业状态在GraphQL-Yoga后端上处理并存储在Prisma DB中）。我可以在后端添加作业，删除作业，并更改作业状态。前端是使用React Apollo构建的

此刻，我正在使用查询组件，该组件显示所有当前作业及其状态。我在查询组件中使用轮询来使列表保持最新。如果添加或删除作业，或者后端更改其状态，则无需执行任何特殊操作。效果很好。

 <Query query={this.JOBS_QUERY} pollInterval={500}>

但是，我当时认为，更好的解决方案是利用订阅，但是我不确定如何做到这一点。

我的第一个想法是为整个作业列表设置一个订阅，然后在每次添加或删除作业以及更改工作状态时从后端发布到该订阅。就是这样

type Subscription {
    jobs: [Job] !
}

看过the official docs之后，我想知道这样做的更好方法是改为只订阅一次返回一个工作

  type Subscription {
        job: Job !
    }

并使用subscribeToMore将其集成到当前显示中，并使用纯函数将其集成到客户端存储中。在上面的页面中，他们的示例是

<CommentsPage
        {...result}
        subscribeToNewComments={() =>
          subscribeToMore({
            document: COMMENTS_SUBSCRIPTION,
            variables: { repoName: params.repoName },
            updateQuery: (prev, { subscriptionData }) => {
              if (!subscriptionData.data) return prev;
              const newFeedItem = subscriptionData.data.commentAdded;

              return Object.assign({}, prev, {
                entry: {
                  comments: [newFeedItem, ...prev.entry.comments]
                }
              });
            }
          })
        }
      />

我敢肯定，只需添加新作业（或在本例中为评论），该方法就能很好地工作，但是删除该作业或更改其状态又如何呢？这不会变得复杂吗？实际上，维护所有工作的订阅会更好吗？

如果要设置所有作业的订阅，该怎么做？我假设有人使用一个Subscription组件，它取代了原来的Query组件？如何在组件挂载上（即在未发布任何更改之前）加载数据列表？

tl; dr：当您具有数据列表（例如“工作”或注释）时，使用Apollo客户端Subscription组件在组件安装上加载和反映数据的最佳方法是什么？添加，删除和更改？

Apollo客户端的数据列表：如何用订阅组件替换轮询的查询组件？

0 个答案: