# WISE-DataConnect Apollo/client & GraphQL 學習筆記
---
###### tags: `WISE-DataConnect`

# Apollo/client & GraphQL

### 如何新增一個 GraphQL query or mutation
ifp-Console 利用 codegen 把 .graph 檔自動轉為相對應 tsx，轉換過程須從 GRAPHQL_API (in file .env.development.local) 後端 schema
1. `npm run dev`
2. .graphql 新增 -> codegen -> 必要時修改 graphqlApi/index.tsx -> import 使用

### useQuery 取回
單純取回

### Fetch policies
- cache-first, 預設，如果有cache使用cache，沒cache發query
- cache-only, 使用cache
- cache-and-network, 如果有cache先使用cache，並且不管有沒有cache皆發query
- network-only，直接query
- no-cache，query 成功不會 cache
- standby，如cache-first，但不會自動更新值

### useLazyQuery(很多問題，不要亂用)
如 useQuery ，但不即時發送，返回一個可執行 function，使用情境為例如事件觸發再去執行該返回function

### useMutation
帶資料送出，可返為資料自動更新也可不
useMutation -> update(回應前先更新cache) -> onQueryUpdated

### Chrome 擴充元件
[GraphQL Network Inspector](https://chrome.google.com/webstore/detail/graphql-network-inspector/ndlbedplllcgconngcnfmkadhokfaaln?hl=en-GB)