这篇文章是Vue.js Advent Calendar第23天的文章。

对于实时更新的想法，我们会想到Firebase Firestore，但实际上也可以使用GraphQL的订阅功能来轻松实现！由于关于在vue-apollo中设置订阅的日语文章并不多，所以我将在这里介绍一下。

示例应用程序

如果有人说「不需要解释，快点给我代码」，请点击这里。
https://github.com/kawamataryo/hasura-vue-chat-app

這是一個為了練習而創建的即時同步聊天應用程式，可用於訂閱。
我們使用 Hasura 建立了一個 GraphQL 伺服器，並使用 vue-apollo 來執行訂閱。
根據 README 的指示，您只需啟動它，就能在幾分鐘內體驗到 Hasura 和 vue-apollo 的訂閱功能。
(由於是為練習而創建，請留下寬容的評價。)

Subscription是什么意思？

使用GraphQL的WebSocket是一种实时数据通信方法。使用订阅功能，可以实现在无需重新加载页面的情况下，直接从服务器向Web页面实时发送更新的内容通知。

在中国这是一个选项的问题，因为中文翻译可以有多个可能的选择。下面是一种可能的翻译：

Vue-Apollo的配置

以下是关于vue-apollo的subscription设置。
关键点是根据查询类型进行http通信或websocket通信的配置。
使用new HttpLink设置http，使用new WebSocketLink设置websocket的端点，
并通过split函数根据调用的查询来修改目标位置。

import Vue from "vue";
import { ApolloClient } from "apollo-client";
import { HttpLink } from "apollo-link-http";
import { InMemoryCache } from "apollo-cache-inmemory";
import { split } from "apollo-link";
import { WebSocketLink } from "apollo-link-ws";
import { getMainDefinition } from "apollo-utilities";
import VueApollo from "vue-apollo";

// 通常のquery, mutationsで使われるhttp通信のエンドポイントを指定
const httpLink = new HttpLink({
  uri: "http://localhost:8000/v1/graphql"
  // トークンによる認証を追加する場合は以下のように設定
  // headers: {
  //   authorization: `Bearer xxxxx`
  // }
});

// subscriptionで使われるwebsocket通信のエンドポイントを指定
const wsLink = new WebSocketLink({
  uri: "ws://localhost:8000/v1/graphql",
  options: {
    reconnect: true
 // トークンによる認証を追加する場合は以下のように設定
 // headers: {
 //   authorization: `Bearer xxxxx`
 // }
  }
});

// GraphQLのエンドポイントの向き先をクエリの種別で分離するための設定
// 参考 https://www.apollographql.com/docs/link/composition/#directional-composition
const link = split(
  ({ query }) => {
    // クエリから種別を取得してsubscriptionの場合は、wsLink（websocket）を利用する。
    const definition = getMainDefinition(query);
    return (
      definition.kind === "OperationDefinition" &&
      definition.operation === "subscription"
    );
  },
  wsLink,
  httpLink
);

// Apollo Clientの作成
const apolloClient = new ApolloClient({
  link,
  cache: new InMemoryCache(),
  connectToDevTools: true
});

Vue.use(VueApollo);

// vue-apolloへの接続
export const apolloProvider = new VueApollo({
  defaultClient: apolloClient
});

订阅的执行

根据示例应用程序的代码进行解释。
通过在普通的 vue-apollo 查询中添加 subscriptionsToMore，可以使用订阅的结果实时更新与该查询相关联的数据。
在文档中设置订阅的查询，并且当目标数据发生更改时，会调用设置的 updateQuery 函数，从而更新与查询相关联的数据（在这种情况下是 messages）。

export default {
  data() {
    return {
      messages: []
    }
  },
  apollo: {
    messages: {
      query: gql`
        query {
          messages {
            content
            userId: user_id
            iconColor: icon_color
            id
          }
        }
      `,
      subscribeToMore: {
        document: gql`
          subscription {
            messages {
              id
              userId: user_id
              iconColor: icon_color
              content
            }
          }
        `,
        updateQuery: (previousResult, { subscriptionData }) => {
          return subscriptionData.data;
        }
      }
    }
  .
  .
  .
}

结束

以上就是在vue-apollo中设置subscriptions的方法。
如果想要实现实时更新，首先想到的是Firestore，但是GraphQL的Subscription也是一种方便且推荐的选择。（如果使用Hasura会更加方便）

vue-apollo非常巧妙地将Apollo封装为Vue.js规范的形式，通过少量的代码就可以轻松地使用GraphQL，非常不错。

请参照以下内容。

以下是一个本地化的中文翻译选项：

1. https://vue-apollo.netlify.com/guide/apollo/subscriptions.html#setup
您可以在此链接中了解如何设置Apollo Subscriptions。

2. https://www.howtographql.com/vue-apollo/8-subscriptions/
您可以在此链接中了解有关Vue-Apollo中订阅的内容。