watchQuery（Angular-Apollo）的高速緩存管理

我使用Apollo和Angular 2合併分頁，預取和重新獲取數據的問題。我在應用程序中的行爲是，服務器之間的數據永遠不會有任何區別和客戶。我想通過在菜單中預取數據並在每個隱藏內容的組件中有一個微調器/加載屏幕來減少用戶的加載時間，直到數據被提取。如果一個組件已經被訪問過了，我想觸發一個重新讀取而不是預取onmouseover，以便客戶端匹配服務器。watchQuery（Angular-Apollo）的高速緩存管理

今天，如果我導航到一個組件並分頁到例如顯示該組數據的第三頁，然後導航到另一個組件，然後又返回到第一個組件（在獲取新數據之前完成）我從第三頁獲取緩存的數據，觸發微調器隱藏，並在訂閱獲得「正確」數據之前，顯示錯誤的數據集一秒/幾秒。

我的問題是：有什麼方法可以清除/控制特定查詢/ watchQuery的緩存，這樣我總是肯定不會在客戶端顯示緩存數據？

來源

2017-02-16 Patrik Nilsson

是的，你可以通過fetchPolicy選項watchQuery：

{ fetchPolicy: 'cache-first' }：這是默認獲取阿波羅客戶端使用指定策略時不獲取政策。首先它會嘗試從緩存中完成查詢。只有當緩存查找失敗時纔會將查詢發送到服務器。
{ fetchPol-icy: 'cache-only' }：使用此選項，Apollo客戶端將嘗試僅從緩存中完成查詢。如果不是所有數據都在緩存中可用，則會引發錯誤。這相當於前noFetch。
{ fetchPolicy: 'network-only' }：使用此選項，Apollo Client將跳過緩存並直接將查詢發送到服務器。這相當於以前的forceFetch。
{ fetchPolicy: 'cache-and-network' }：使用此選項，Apollo Client將查詢服務器，但在服務器請求未決時從緩存中返回數據，並在服務器響應返回時稍後更新結果。

來源

2017-07-11 19:49:46

你可以做這樣一個例子？ – Stefano

下面是使用阿波羅角由@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' 
      } 
     } 
     }); 
    } 
}

來源

2017-12-06 22:10:20

watchQuery（Angular-Apollo）的高速緩存管理

回答

相關問題