Overview | React Query | TanStack

教學： React Query Essentials | Learn TanStack

這個影片教學是 2.0 的

• github
• tannerlinsley/react-query-essentials: Module source code for the React Query Essentials course

有些更動請參考：

Migrating to React Query 3 | React Query | TanStack 來看。

Queries 都是從 server 讀取資料。

[[json-server]]

教學的資料 server 用的似乎是 next 框架提供的；然後我拿 json-server 來使用。在 api 寫法上還要自己去研究

useMutation

useMutation | React Query | TanStack

Migrating to React Query 3 | React Query | TanStack

36_Mutations with the useMutation Hook

`const { mutate, status, reset, ...props } = useMutation()`

• onSuccess 後，通常會使用 invalidateQueries 重新 GET 資料來更新頁面。

37_Mutation Side-Effects

要弄 sever 端的程式，需要寫一些 server 端的規則：

爲什麼 可以使用 error.response

1
2
3

onError: (error) => {
	console.log(error.response);
};

• onSuccess
• onError
• onSettled

38_Updating Query Data with Mutation Responses

• postForm 爲了可以在：
  • Posts 新增一筆 post
  • Post 修改並儲存此 post 必須把 postForm.js input 欄位的文字設定 function 改成較好的架構： 參考教學的 github ，這邊非常重要。 定義一個新的 functioin setValue，利用 setValues (useState 產生的 ) 去修改 postForm 本身的 state : values

1
2
3
4

const [values, setValues] = useState(defaultFormValues);

const setValue = (field, value) =>
	setValues((old) => ({ ...old, [field]: value }));

useMutation option

• 39_Optimistic Updates for List-Like Queries

useMutation option (onMutate / onCuccess / onError / onSettled)

假設 get/ post/ patch 等操作都有成功， 在收到 server response 之前做一些操作，馬上反應在 UI 上。

等到 onSuccess 之後，invalidateQueries 一次，更新 server 那邊最新的資料。（只是這樣超快速反應，user 會不會覺得很怪？ UI 反應也太快了） 實務上可能不是很實用吧？ #toThink

• 40_Rollbacks for List-Like Queries 成功就很好，但也要針對如果 req 失敗的話 需要 rollback 回去，這個部分比較複雜點。 onMutate 如果回傳一個 funciton，此 function 會被傳到 onError 跟 onSettled 當做 callback func，通常拿來做 rollback 使用的。

• The value returned from this function will be passed to both the onError and onSettled functions in the event of a mutation failure and can be useful for rolling back optimistic updates.

• 41_Optimistic Updates for Single Entity Queries 跟 Posts 做的差不多，換到 Post 而已 小發現： 打 PATCH 給 json-server ，雖然會回應 400 還有 error 資訊，但是資料照樣寫入 XD

嘗試要加個 return ，不執行 next() 就不會寫入了

1
2
3
4
5
6
7
8
9

module.exports = (req, res, next) => {
  console.log(req.body)
  if (req.body.title === "null") {
    res.status(400).send({ message: "the word 'null' is not passed" })
    return
  }
  next()
}

• 42_Rollbacks for Single Entity Queries 這邊 UI 狀態有點複雜，當送出後 要如何讓 Input 欄位保持顯示內容，而不是清空？

useQuery option keepPreviousData

43_Paginated Queries/ 44_Prefetching Paginated Queries

影片中使用的 usePaginatedQuery 廢棄了，改用 keepPreviousData Migrating to React Query 3 | React Query | TanStack

• 程式碼 Pagination | React Query | TanStack

• 44_Prefetching Paginated Queries 看不太懂爲何這樣寫？（參考上面官網的寫法，運作良好。）

1
2
3
4
5
6

useEffect(() => {
    if (page < postsQuery.data?.lastPage) {
      queryClient.prefetchQuery(["posts", page + 1], () => fetchPosts(page + 1))
    }
  }, [postsQuery.data?.lastPage, queryClient, page])

• todo: 進入到某個 post , 按下 back 要回上一頁，會直接回到 page1。如何回到原本那頁？

45_Infinite Queries

Migrating to React Query 3 | React Query | TanStack

useInfiniteQuery，更改了許多，教學影片都不一樣了。

• getNextPageParam （舊版是 getFetchMore） (lastPage, allPages) => unknown | undefined

  • When new data is received for this query, this function receives both the last page of the infinite list of data and the full array of all pages.
  • It should return a single variable that will be passed as the last optional parameter to your query function.
  • Return undefined to indicate there is no next page available.

• fetchNextPage （舊版是 fetchMore）

• hasNextPage （舊版是 canFetchMore）

• 最後兩個影片在講 next.js ，使用 getServerSideProps 達成 SSR 的目的。