https://github.com/fizzyelt/custom-jotai-query-poc
https://github.com/fizzyelt/custom-jotai-query-poc
jotai react react-query
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/fizzyelt/custom-jotai-query-poc
- Owner: FizzyElt
- Created: 2023-12-21T08:20:14.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-26T15:07:56.000Z (over 2 years ago)
- Last Synced: 2025-02-11T11:39:10.003Z (over 1 year ago)
- Topics: jotai, react, react-query
- Language: TypeScript
- Homepage: https://sprightly-alpaca-553a7d.netlify.app/
- Size: 39.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Custom simple jotai query
## 功能/行為
- 在發出第一次 fetch 之前，任何 key change、invalidate 都不會重新觸發 refetch
- 連續的觸發 refetch 狀態只會取最後一個結果更新狀態(但一樣會發出多次)
- 沒有任何 cache 機制
- 多種不同 key 不會有多分資料同時存在
- 不會失敗自動重發
- 資料存放在哪取決於 atom 在哪個 scope (都沒放就會一直存在 global)
## 建議使用方式
- 在該 atom scope 內建議只使用一次 hook 並將 refetch 函數用傳遞方式傳下去(或是使用 Context)。使用多次的風險為參數會有好幾份並且都是改同一個 atom，會造成混亂。
- 在同一個 scope 底下想要用兩份相同 API 並且互不干擾的資料，請直接用 `createQueryAtom` 建兩個 atom 出來。
## 方法
- `createQueryAtom`
- `createInvalidatedAtom`
- `useMutation`
create
```typescript
export const [resultAtom, useApi] = createQueryAtom(fetchApi);
```
```jsx
const Component = () => {
const result = useAtomValue(resultAtom)
// auto fetch in mount
const refetch = useApi({params: xxx, enable: true})
const { mutate } = useMutation(xxxMutation, invalidatedAtom)
// ...
}
```