Управление кэшем для watchQuery (Angular-Apollo)

Question

У меня есть проблема, сочетающая разбиение на страницы, предварительную выборку и повторную выборку данных с помощью Apollo с Angular 2. Мое намерение в приложении заключается в том, что никогда не должно быть никакой разницы в данных между сервером и клиент. Я хочу уменьшить время загрузки для пользователя, предварительно запрограммировав данные в режиме мыши в меню и получив экран spinner/load в каждом компоненте, который скрывает контент до тех пор, пока данные не будут извлечены. Если компонент уже был посещен, я хочу вызвать refetch вместо prefetch onmouseover, чтобы клиент соответствовал серверу.

Сегодня, если я перехожу к компоненту и разбиваю на страницы, например, на третьей странице, которая показывает этот набор данных, и после этого перейдите к другому компоненту, а затем снова вернитесь к первому компоненту (до получения новых данных done) Я получаю кэшированные данные с третьей страницы, которые запускают прядильщик, чтобы скрыть, и неправильный набор данных для отображения за одну/пару секунд, прежде чем подписка получит «правильные» данные.

Мой вопрос: есть ли способ очистить/контролировать кеш конкретного запроса/watchQuery, чтобы я всегда не показывал кешированные данные в клиенте?

Answer 1

да, вы можете передать fetchPolicy возможность watchQuery:

• { fetchPolicy: 'cache-first' }: Это значение по умолчанию выборки политики, которая не использует Apollo Client при отсутствии выборки задается политикой. Сначала он попытается выполнить запрос из кеша. Только в случае сбоя поиска в кеше запрос будет отправлен на сервер.
• { fetchPol-icy: 'cache-only' }: При использовании этой опции Apollo Client попытается выполнить запрос только из кеша. Если не все данные доступны в кеше, будет выдана ошибка. Это эквивалентно первому noFetch.
• { fetchPolicy: 'network-only' }: При использовании этой опции Apollo Client обойдет кеш и напрямую отправит запрос на сервер. Это эквивалентно предыдущей forceFetch.
• { fetchPolicy: 'cache-and-network' }: При использовании этой опции Apollo Client будет запрашивать сервер, но возвращать данные из кэша во время ожидания запроса сервера, а затем обновлять результат при возврате ответа сервера.

Answer 2

Вот пример использования Apollo для Угловая, как описано @Eitan Frailich:

import { ApolloModule, Apollo } from 'apollo-angular'; 
import { HttpLinkModule, HttpLink } from 'apollo-angular-link-http'; 
import { InMemoryCache } from 'apollo-cache-inmemory'; 

class AppModule { 
    constructor(apollo: Apollo, httpLink: HttpLink) { 
     apollo.create({ 
      link: httpLink.create(), 
      cache: new InMemoryCache(), 
      defaultOptions: { 
      watchQuery: { 
       fetchPolicy: 'cache-and-network', 
       errorPolicy: 'ignore', 
      }, 
      query: { 
       fetchPolicy: 'network-only', 
       errorPolicy: 'all', 
      }, 
      mutate: { 
       errorPolicy: 'all' 
      } 
     } 
     }); 
    } 
}