Аполлон кеш + автоматическое обновление - PullRequest
Новая
       12

Аполлон кеш + автоматическое обновление

0 голосов
/ 11 февраля 2019

У меня есть приложение Angular 7, которое получает доступ к данным с сервера GraphQL.

Я непосредственно реализовал пример из документов: https://www.apollographql.com/docs/react/advanced/caching.html#automatic-updates

Это служба, которая получает сообщениеобъект и выполняет мутацию upvote. 

export class PostService {

  constructor(private apollo: Apollo) { }

  public getPost() {
    return this.apollo.query({
      query: gql`query getPost($id: String!) {
        post(id: $id) {
          id
          score
        }
      }`,
      variables: { id: '123' }
    });
  }

  public upvote() {
    return this.apollo.mutate({
      mutation: gql`mutation upvote($id: String!) {
        upvotePost(id: $id) {
          id
          score
        }
      }`,
      variables: { id: '123' }
    });
  }
}

в моем файле component.ts 

  public post = this.postService.getPost();
  public vote() {
    this.postService.upvote().subscribe(console.log);
  }

в моем component.html 

    <input type="text" [value]="(post | async).data.post.score" />
    <button class="button" (click)="vote()"></button>

Значение в полене меняется.

Если я добавлю дополнительную кнопку, которая вызывает эту функцию 

public updateView() {
  post = this.postService.getPost();
}

Графический интерфейс будет обновляться без запросов к серверу, поэтому, очевидно, из кеша.

Согласно спецификации, этот шаг обновления вручную не требуется. 

If the id field on both results matches up, then the score field everywhere in our UI will be updated automatically!

Версии моих пакетов:

  • apollo-angular: 1.5.0
  • apollo-angular-link-http: 1.4.0
  • apollo-angular-link-http-common: 1.4.0
  • apollo-cache: 1.1.25
  • apollo-cache-inmemory: 1.4.2
  • apollo-client: 2.4.12

Что мне нужно изменить, чтобы результат действительно обновлялсяв наблюдаемом, что было возвращено исходным запросом?

Или я просто не понимаю предполагаемых механизмов?

Ответы [ 2 ]

0 голосов
/ 11 февраля 2019

Теперь, когда я использовал угловую часть документа вместо части React, я нашел решение.(@tombraider Спасибо, что подтолкнули меня в правильном направлении.)

Вместо query мне нужно использовать watchQuery. 

  public getPost(id: string) {
    return this.apollo.watchQuery({
      query: gql`query getPost($id: String!) {
        post(id: $id) {
          id
          score
        }
      }`,
      variables: { id }
    }).valueChanges;
  }

Эта измененная версия сервиса-функция постоянно обновляет графический интерфейс.

0 голосов
/ 11 февраля 2019

Здесь немного странное предположение, но я собираюсь предположить, что это связано с тем, что вы не пишете встроенные запросы;документация будет несколько отличаться.Посмотрите на refetchQueries опору, которую вы можете передать своей мутации, т.е. 

  public upvote() {
    return this.apollo.mutate({
      mutation: gql`mutation upvote($id: String!) {
        upvotePost(id: $id) {
          id
          score
        }
      }`,
      variables: { id: '123' },
      refetchQueries: [],
    });

Когда ваша мутация выполняется, вы говорите GraphQL, что хотите выполнить запросы, которые вы предоставляете в этом refetchQueries массив.В результате этого кеш будет обновляться.Однако я не уверен на 100%, что ваш запрос будет выполнен, потому что вы технически на него не подписаны, все, что вы сделали, это выполнили одноразовое обещание получить данные из конечной точки GraphQL.

...