Vue + Apollo + Graphql + подписка + кеш? - PullRequest
Новая
       80

Vue + Apollo + Graphql + подписка + кеш?

0 голосов
/ 26 марта 2020

Я только начал работать с Apollo над моим сайтом проекта (веб-игра) и застрял на некоторых подписках, которые я использую.

В некоторых представлениях подписка не запускается напрямую, но работает, как и ожидалось, если я обновлю sh страницу. 

// 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>

Может кто-то увидеть что-то явно не так с этим фрагментом код? Как я уже писал, если я обновлю sh эту страницу, подписка начнет работать (игроки присоединяются к игре из других браузеров). Я полагаю, что монтирование и создание не нужны, если я смогу заставить часть apollo работать, верно?

Я подумал, что это, вероятно, какой-то кэш, поскольку Apollo, кажется, часто его использует, и у меня мало знаний об этом пока нет.

Попытка добавить fetchPolicy: 'no-cache' без успеха 

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

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

Несколько других представлений имеют такое же поведение, поэтому я думаю, что это что-то фундаментальное, что я упускаю. .

1 Ответ

0 голосов
/ 29 марта 2020

Я решил свою проблему. Я упустил некоторые основы о 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>

Я надеюсь, что это может помочь кому-то еще с той же проблемой.

...