订阅显示在线用户

我们通过GraphQL查询和变更来巡航。我们查询待办事项，添加了一个新的待办事项，更新了一个现有待办事项，删除了一个现有待办事项。

现在让我们进入激动人心的部分。

GraphQL 订阅

我们有一个用户界面部分，用于显示在线用户列表。到目前为止，我们已经通过查询来获取数据并在用户界面上显示它们。但通常在线用户数据是动态的。

我们可以使用GraphQL订阅API从graphql 服务器获取实时数据，以高效率处理这个问题。

但是但是但是。。。

我们需要告诉服务器登录的用户是在线的。我们必须对服务器进行测试以进行变更，更新用户的时last_seen限标记值。

我们必须进行此改变才能首先看到自己在线。还记得您已经登录，在服务器中注册了您的数据，但没有更新您的 last_seen值吗？

目标是每隔几秒钟从客户端更新你的在线情况。理想情况下，你应该在成功通过Auth0身份验证后再做这件事。因此，让我们更新一些代码来处理这个问题。

打开src/components/OnlineUsers/OnlineUsersWrapper.js并添加以下导入

src/components/OnlineUsers/OnlineUsersWrapper.js

- import React from "react";
+ import React, { useEffect, useState } from "react";
+ import { useMutation, gql } from "@apollo/client";

在中useEffect，我们将创建一个，每30秒setInterval更新一次用户的最后_可见信息。

const OnlineUsersWrapper = () => {
+  const [onlineIndicator, setOnlineIndicator] = useState(0);
+  let onlineUsersList;
+  useEffect(() => {
+     // Every 20s, run a mutation to tell the backend that you're online
+     updateLastSeen();
+     setOnlineIndicator(setInterval(() => updateLastSeen(), 20000));
+
+     return () => {
+       // Clean up
+       clearInterval(onlineIndicator);
+     };
+ }, []);

现在让我们编写updateLastSeen定义。

const OnlineUsersWrapper = () => {
  const [onlineIndicator, setOnlineIndicator] = useState(0);
  let onlineUsersList;

  useEffect(() => {
    // Every 20s, run a mutation to tell the backend that you're online
    updateLastSeen();
    setOnlineIndicator(setInterval(() => updateLastSeen(), 20000));

    return () => {
      // Clean up
      clearInterval(onlineIndicator);
    };
  }, []);

+ const UPDATE_LASTSEEN_MUTATION = gql`
+   mutation updateLastSeen($now: timestamptz!) {
+     update_users(where: {}, _set: { last_seen: $now }) {
+       affected_rows
+     }
+   }
+ `;
+ const [updateLastSeenMutation] = useMutation(UPDATE_LASTSEEN_MUTATION);

+ const updateLastSeen = () => {
+   // Use the apollo client to run a mutation to update the last_seen value
+   updateLastSeenMutation({
+     variables: { now: new Date().toISOString() }
+   });
+ };