# Apollo queries

> 每當 Apollo 用戶端從伺服器取得查詢結果時，它都會自動在本機快取這些結果。 這使得以後執行相同的查詢變得非常快。

> 從下拉清單中選擇鬥牛犬即可查看其照片。 然後切換到另一個品種，然後再切換回鬥牛犬。 您會注意到，鬥牛犬照片第二次會立即載入。 這就是快取在工作！
## query的使用方法


1. 程式碼1到8行是在定義查詢語法 (可選擇要不要傳入參數)
2. 可以利用loading、error判斷query的狀態
3. data是query成功後的資料 (資料的結構跟在查詢語法裡寫的一樣)
4. useQuery 第一個變數是模板名稱，第二個可對useQuery進行設定

**※ loading error data 是 state**
## 刷新query結果的方法
刷新query結果的方法有兩種: **Polling** 跟 **Refetching**

### **Polling**
> 根據 **固定時間間隔** 重新query


設定時間的參數 **pollInterval** 單位是毫秒
如果將 pollInterval 設為 0，則Polling不會執行。

與伺服器幾乎同步，因為會在固定時間間隔後重新query

### **Refetching**
> 根據 **使用者的行為** 重新query


1. 如果refetch( )裡沒有寫變數會根據上一個變數重新query
2. 也可以提供新的變數重新query (onClick={() =>refetch({breed: 'dalmatian'})})
3. 如果只輸入部分的變數，則refetch會使用每個省略變數的原始值
(假設總共有4個變數，但我只輸入1個， 那剩下3個就會用原始值)

## 檢查載入狀態

1. NetworkStatus 是 networkStatus 的 enum
2. notifyOnNetworkStatusChange 必須改成true networkState才會更新

這裡有NetworkStatus的所有載入狀態
https://github.com/apollographql/apollo-client/blob/main/src/core/networkStatus.ts

## 使用 useLazyQuery 手動執行

跟useQuery很像，唯一的差別在useQuery是**自動執行** useLazyQuery是**手動執行**
**useQuery** 會在渲染前就執行
**useLazyQuery** 在使用者觸發前都不會執行，它會給你一個查詢函數(例:第五行的getDog)，當使用者觸發後才會執行query

**※ useLazyQuery是 [function ,{obj}]，function名稱可以自己取**

## 設定獲取策略
> **fetchPolicy** 是第一次query的時候，要用什麼方法查詢資料
> **nextFetchPolicy** 是之後的query要用什麼方法查詢資料

nextFetchPolicy也可傳入函式，讓query的方法變得更靈活
下面的網址是有哪些方法可以查詢資料
https://www.apollographql.com/docs/react/data/queries/#supported-fetch-policies

### 參考文獻
https://www.apollographql.com/docs/react/data/queries/#manual-execution-with-uselazyquery

### 上課後筆記
**※ useQuery 是 react custom hook**
**※ 盡量多用useQuery**
**※ useEffect是渲染後執行**