Vue Apollo 每 x 毫秒重新获取一次

Vue Apollo 是一个基于 Vue.js 的 GraphQL 客户端。它提供了一种简单的方法来与 GraphQL 服务器进行交互。当需要每隔一定时间重新获取数据时，Vue Apollo 提供了一些选项来实现此功能。

在 Vue 组件中设置定时器

我们可以在 Vue 组件的 created 钩子中使用 setInterval 函数来设置定时器，以每隔一定时间重新获取数据。

<template>
  <div>
    {{ data }}
  </div>
</template>

<script>
import gql from "graphql-tag";
import { ApolloClient } from "apollo-client";
import { HttpLink } from "apollo-link-http";
import { InMemoryCache } from "apollo-cache-inmemory";

export default {
  data() {
    return {
      data: null
    };
  },
  created() {
    setInterval(() => {
      const client = new ApolloClient({
        link: new HttpLink({ uri: "http://localhost:4000/graphql" }),
        cache: new InMemoryCache()
      });

      client
        .query({
          query: gql`
            {
              getMyData {
                id
                name
              }
            }
          `
        })
        .then(result => {
          this.data = result.data.getMyData;
        });
    }, 5000);
  }
};
</script>

上面的代码使用了 setInterval 函数每 5 秒对 GraphQL 服务器进行查询。在每次查询后，结果将存储在 Vue 组件实例的 data 属性中，并在模板中使用。

使用 Vue Apollo 的选项

除了在组件中使用 setInterval 函数之外，Vue Apollo 还提供了一些选项来实现定时查询。

<template>
  <div>
    {{ data }}
  </div>
</template>

<script>
import gql from "graphql-tag";
import { ApolloClient } from "apollo-client";
import { HttpLink } from "apollo-link-http";
import { InMemoryCache } from "apollo-cache-inmemory";
import { ApolloQuery } from "vue-apollo";

export default {
  data() {
    return {
      data: null
    };
  },
  apollo: {
    myData: {
      query: gql`
        {
          getMyData {
            id
            name
          }
        }
      `,
      pollInterval: 5000
    }
  }
};
</script>

以上代码使用了 Vue Apollo 的 apollo 选项来声明查询。query 属性定义了查询语句，而 pollInterval 属性定义了查询间隔。在每个间隔周期内，查询将被重新执行，并将结果存储在 Vue 组件实例中的 myData 属性中，供使用者在模板中使用。

结论

在 Vue 应用程序中经常需要在一定时间内定期获取后端数据，Vue Apollo 提供了多种方式来实现这种功能。当需要每隔一定时间重新获取数据时，使用 Vue Apollo 提供的 pollInterval 属性，或在 Vue 组件中使用 setInterval 函数来设置定时器。