Vue + Apollo + Graphql + 订阅 + 缓存？答案

【问题标题】：Vue + Apollo + Graphql + subscription + cache?Vue + Apollo + Graphql + 订阅 + 缓存？
【发布时间】：2020-07-07 13:42:00
【问题描述】：

我刚刚开始在我的业余项目（网络游戏）中使用 Apollo，但我在使用的一些订阅上遇到了问题。

在某些视图中，订阅不会直接运行，但如果我刷新页面，它会按预期工作。

// StartGame.vue

<script>
import store from "../store/index";
export default {
  data() {
    return {
      players: [],
      game: null
    };
  },
  methods: {
    async onStartGame() {
      const response = await this.$store.dispatch("updateGame", {
        started: true
      });

      if (!response) {
        alert("Something went wrong. Try again");
        return;
      }

      this.$router.push({ name: "GameProgress" });
    },
    onGoToGame() {
      this.$router.push({ name: "GameProgress" });
    }
  },
  mounted() {
    this.game = this.$store.getters.getGame;
  },
  created() {
    this.$apollo.subscriptions.gameAndPlayers.refresh();
  },
  apollo: {
    $subscribe: {
      gameAndPlayers: {
        query: require("../graphql/subscriptions/subscribeGameAndPlayers.gql"),
        variables: {
          game_id: store.getters.getGame.id
        },
        result(data) {
          console.log("subscribeGameAndPlayers", data);
          const game = data.data.game;

          this.game = { ...this.game, started: game.started };
          this.players = game.players;
        }
      }
    }
  }
};
</script>

有人能看出这段代码有什么明显的问题吗？正如我所写，如果我刷新此页面，订阅就会开始工作（玩家从其他浏览器加入游戏）。如果我可以让阿波罗部分工作，我想就不需要安装和创建，对吧？

我认为这可能是一些缓存，因为 Apollo 似乎经常使用它，而我对此还没有太多了解。

尝试添加 fetchPolicy: 'no-cache' 没有成功

// apollo.js (included in main.js)

export default new ApolloClient({
  link: link
  cache: new InMemoryCache(),
  defaultOptions: {
    fetchPolicy: "no-cache"
  }
});

更多视图具有相同的行为，所以我想这是我缺少的基本内容..

【问题讨论】：

标签： vue.js graphql apollo vue-apollo

【解决方案1】：

我解决了我的问题。正如我所想的那样，我错过了一些关于 vue-apollo 的基础知识..

在 apollo 中，我先通过查询获取数据，然后通过 subscribeToMore 添加订阅

可能有更好的方法，但这里是工作代码：

//start game

<script>
import store from "../store/index";

export default {
  data() {
    return {
      gameAndPlayers: null,
      loading: 0
    };
  },
  methods: {
    async onStartGame() {
      const response = await this.$store.dispatch("updateGame", {
        started: true
      });

      if (!response) {
        alert("Something went wrong. Try again");
        return;
      }

      this.$router.push({ name: "GameProgress" });
    },
    onGoToGame() {
      this.$router.push({ name: "GameProgress" });
    }
  },
  apollo: {
    gameAndPlayers: {
      query: require("../graphql/queries/getGameAndPlayers.gql"),
      variables() {
        return {
          id: store.getters.getGame.id
        };
      },
      update(data) {
        return { ...data.game };
      },
      subscribeToMore: [
        {
          document: require("../graphql/subscriptions/subscribeGameAndPlayers.gql"),
          variables() {
            return {
              game_id: store.getters.getGame.id
            };
          },
          updateQuery: (previous, { subscriptionData }) => {
            return { ...subscriptionData.data };
          }
        }
      ]
    }
  }
};
</script>

我希望这可以帮助遇到同样问题的其他人。

【讨论】：