如何使用 React Query 做下拉數(shù)據(jù)自動(dòng)刷新？

作者：寫代碼的寶哥 2024-07-02 10:00:55

本文我們講述了 React Query 中用于無限查詢 API useInfiniteQuery() 的使用。通過循序漸進(jìn)的 3 個(gè)案例，最終實(shí)現(xiàn)了一個(gè)下拉到底后自動(dòng)新數(shù)據(jù)的交互效果，還是比較好實(shí)現(xiàn)的。

useInfiniteQuery() API

看名字就能猜出來，useInfiniteQuery() 是專門用來應(yīng)付無限查詢場(chǎng)景的。不僅如此，useInfiniteQuery() API 能力也是基于 useQuery() 的。

之前的文章中我們介紹了 useQuery() 的核心 API，為了找回印象，我們?cè)诖速N出來：

import { useQuery } from 'react-query'

const {
  data,
  error,
  isError,
  isFetching,
  isLoading,
  isRefetching,
  isSuccess,
  refetch,
} = useQuery(queryKey, queryFn?, {
  enabled,
  onError,
  onSuccess,
  refetchOnWindowFocus,
  retry,
  staleTime,
})

如果我們把這些 API 簡(jiǎn)化如下：

const {
  ...result,
} = useQuery(queryKey, queryFn?, {
  ...options,
})

useInfiniteQuery() 其實(shí)就是在 useQuery() 基礎(chǔ)之上增添一些無限查詢場(chǎng)景的參數(shù)：

const {
  fetchNextPage,
  fetchPreviousPage,
  hasNextPage,
  hasPreviousPage,
  isFetchingNextPage,
  isFetchingPreviousPage,
  ...result
} = useInfiniteQuery(queryKey, ({ pageParam = 1 }) => fetchPage(pageParam), {
  ...options,
  getNextPageParam: (lastPage, allPages) => lastPage.nextCursor,
  getPreviousPageParam: (firstPage, allPages) => firstPage.prevCursor,
})

如你所見，增加的 API 其實(shí)就是跟上一頁/下一頁查詢動(dòng)作相關(guān)的參數(shù)，相比較于自己組裝的分頁查詢能力的 useQuery()，useInfiniteQuery() 需要配置上一頁/下一頁的參數(shù)獲取函數(shù)，并提供了相應(yīng)的查詢調(diào)用能力，更加自動(dòng)化和便捷。

當(dāng)然，增加的不只是參數(shù)，還有 2 處：

一個(gè)是 queryFn 參數(shù)的入?yún)ⅲ嗔艘粋€(gè)名為 pageParam 的參數(shù)。

pageParam 表示當(dāng)前頁數(shù)。這個(gè)值是每次 useInfiniteQuery() 調(diào)用時(shí)，通過 getNextPageParam()/getPreviousPageParam() 返回值自動(dòng)獲取并傳入 queryFn 的。

第二個(gè)還有返回值的數(shù)據(jù)結(jié)構(gòu)，即 data。

const { data } = useInfiniteQuery()

原來 data 就是表示內(nèi)部請(qǐng)求方法的返回值。而 useInfiniteQuery() 的返回 data 因?yàn)橐囗摂?shù)據(jù)（展示舊數(shù)據(jù)時(shí)，還要持有舊數(shù)據(jù)），因此 data 變更為：

data: { pages: TData[], pageParams: unknown[] }

pages 很好理解，就是用來承載過程中請(qǐng)求到的多頁數(shù)據(jù)；pageParams 則是每個(gè)頁面當(dāng)時(shí)在做數(shù)據(jù)獲取時(shí)使用的查詢參數(shù)。

簡(jiǎn)單一例

當(dāng)然語言上說得再多，也是蒼白無力的，實(shí)踐出真知。這里我們就舉一個(gè)簡(jiǎn)單的例子說明 useInfiniteQuery() 的使用。

首先，我們先創(chuàng)建一個(gè)獲取數(shù)據(jù)的請(qǐng)求函數(shù)（使用 Fetch API）。

const getPosts = async (pageParam) => {
  return fetch(`https://jsonplaceholder.typicode.com/posts?_page=${pageParam.page}&_limit=${pageParam.size}`).then(res => res.json())
}

接著，使用 useInfiniteQuery() 請(qǐng)求數(shù)據(jù)：

function Example() {
  const {
    isLoading,
    isError,
    error,
    data,
  } = useInfiniteQuery(
    'posts',
    ({ pageParam }) => getPosts(pageParam),
    {
      getNextPageParam: (lastPage, allPages) => ({ page: allPages.length + 1, size: 6 }),
      refetchOnWindowFocus: false, // Prevent refetching on window focus
    }
  )
  
  // ...
}

增加下加載中或出現(xiàn)異常時(shí)的處理邏輯。

function Example() {
  // ...
  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (isError) {
    return <div>Error: {error.message}</div>
  }
  
  // ...
}

最后渲染分頁數(shù)據(jù)。

function Example() {
  // ...

  return (
    <div>
      <ol>
        {/* (1) */}
        {data.pages.map((page) => (
          {page.map((post) => (
            <li key={post.id}>{post.title}</li>
          ))}
        ))}
      </ol>
      
      {/* (2) */}
      <button onClick={() => fetchNextPage()}>More</button>
    </div>
  )
}

遍歷 data.pages 中所有頁面數(shù)據(jù)，渲染出來
使用 fetchNextPage() 函數(shù)加載更多（實(shí)際上即“下一頁”）數(shù)據(jù)

瀏覽器訪問，不幸運(yùn)是，報(bào)錯(cuò)了。

圖片

沒關(guān)系，點(diǎn)擊查看報(bào)錯(cuò)處。

圖片

發(fā)現(xiàn)是是由于首次請(qǐng)求接口時(shí)，pageParam 參數(shù)是 undefined，這就需要我們給 pageParam 一個(gè)默認(rèn)值。

- const getPosts = async (pageParam) => {
+ const getPosts = async (pageParam = { page: 1, size: 6 }) => {
  return fetch(`https://jsonplaceholder.typicode.com/posts?_page=${pageParam.page}&_limit=${pageParam.size}`).then(res => res.json())
}

再次訪問頁面，發(fā)現(xiàn)我們成功請(qǐng)求到了第一頁數(shù)據(jù)。

圖片

接下來點(diǎn)擊“More”按鈕，發(fā)現(xiàn)發(fā)起了到第二頁數(shù)據(jù)的請(qǐng)求。

圖片

這里邏輯是先調(diào)用 getNextPageParam() 函數(shù)獲得請(qǐng)求參數(shù)。getNextPageParam() 函數(shù)的類型聲明如下：

getNextPageParam: (lastPage, allPages) => unknown | undefined

第一個(gè)參數(shù)就是上一頁數(shù)據(jù)，第二個(gè)參數(shù)即到目前為止請(qǐng)求到的所有數(shù)據(jù)。對(duì)照本例，當(dāng)我們第一次點(diǎn)擊“More”按鈕時(shí)，返回的值為 { page:2, size:6 }。然后，再發(fā)起 getPosts 調(diào)用并這個(gè)參數(shù)，于是我們便發(fā)起了第二頁的數(shù)據(jù)請(qǐng)求，并最終得到了數(shù)據(jù)。

下面，我們?cè)俳o“More”按鈕增加一個(gè)加載狀態(tài)——我們可以使用通用的 isFetching 狀態(tài)，但這里我們使用更具體的 isFetchingNextPage 狀態(tài)。

function Example() {
  const {
    isLoading,
+   isFetchingNextPage,
    isError,
    error,
    data,
  } = useInfiniteQuery()

添加給按鈕。

- <button notallow={() => fetchNextPage()}>More</button>
+ <button disabled={isFetchingNextPage} notallow={() => fetchNextPage()}>More</button>

查看效果。

圖片

這樣，我們就能在請(qǐng)求下一頁數(shù)據(jù)的時(shí)候禁用按鈕點(diǎn)擊，避免用戶誤觸。

再來一例

以上案例中，我們是通過 getNextPageParam() 所提供的第二個(gè)參數(shù) allPages 來獲得下一頁頁碼的。

getNextPageParam: (lastPage, allPages) => ({ page: allPages.length + 1, size: 6 })

這是因?yàn)榉祷氐牡谝豁摂?shù)據(jù)總并未包含下一頁信息。

圖片

我們?cè)偕晕⑿薷南?/p>

const getPosts = async (pageParam = { page: 1, size: 6 }) => {
  return fetch(`https://jsonplaceholder.typicode.com/posts?_page=${pageParam.page}&_limit=${pageParam.size}`).then(res => {
    const total = res.headers.get('X-Total-Count')

    return res.json().then(data => {
      return {
        total,
        data,
        hasMore: pageParam.page * pageParam.size < total
      }
    })
  })
}

我們將返回?cái)?shù)據(jù)放在 data 屬性中，并返回?cái)?shù)據(jù)總數(shù)（total）以及是否還有數(shù)據(jù)（hasMore）。

有了這些信息，我們就可以有了更加細(xì)膩的交互了。

下面，修改渲染邏輯。

function Example() {
  // ...
  
  return (
    <div>
      <ol>
        {data.pages.map((page) => (
          <>
            {page.data.map((post) => (
              <li key={post.id}>{post.title}</li>
            ))}
          </>
        ))}
      </ol>
      <p>總共 <strong>{data.pages[0].total}</strong> 條數(shù)據(jù)</p>
      {
        data.pages[data.pages.length - 1].hasMore ? (
          <button disabled={isFetchingNextPage} onClick={() => fetchNextPage()}>More</button>
        ) : <span>--- 我是有底線的 ---</span>
      }
    </div>
  )
}

查看初始加載效果。

圖片

查看最終效果。

圖片

不過，按鈕顯隱邏輯還是有些冗余。

{
  data.pages[data.pages.length - 1].hasMore ? (
    <button disabled={isFetchingNextPage} onClick={() => fetchNextPage()}>More</button>
  ) : <span>--- 我是有底線的 ---</span>
}

這一點(diǎn) useInfiniteQuery 也幫我們想到了，便提供了一個(gè) hasNextPage 供我們使用。

{
-  data.pages[data.pages.length - 1].hasMore ? (
+  hasNextPage ? (
    <button disabled={isFetchingNextPage} notallow={() => fetchNextPage()}>More</button>
  ) : <span>--- 我是有底線的 ---</span>
}

hasNextPage 為 true 表示有下一頁數(shù)據(jù)，為 false 表示沒有數(shù)據(jù)了。

不過 hasNextPage 的值是受到 getNextPageParam() 返回值影響的——當(dāng) getNextPageParam() 返回 undefined 時(shí)，hasNextPage 值為 false，否則為 true。

因此，我們修改下 getNextPageParam() 的判斷邏輯。

getNextPageParam: (lastPage, allPages) => {
  return lastPage.hasMore 
    ? { page: allPages.length + 1, size: 50 } 
    : undefined
},

如此，我們?cè)賮聿榭聪滦Ч?/p>

圖片

發(fā)現(xiàn)沒有數(shù)據(jù)的時(shí)候，同樣也不會(huì)展示“More”按鈕了。大功告成！

下拉拉取新數(shù)據(jù)

當(dāng)然，以上通過點(diǎn)擊“More”按鈕加載新數(shù)據(jù)的方式還是太麻煩了一些。如果我們?cè)诰W(wǎng)頁下拉到底部的時(shí)候自動(dòng)獲取數(shù)據(jù)不是更好嗎？

下面就來實(shí)現(xiàn)一下。

我們將借助 IntersectionObserver API[4] + 底部一個(gè) .loadMore 元素來實(shí)現(xiàn)。

首先，將 “More” 按鈕部分的代碼替換成：

<div className="loadMore" style={{ height: '30px', lineHeight: '30px' }} ref={loadMoreRef}>
  {
    isFetchingNextPage 
      ? <span>Loading...</span> 
      : <span>--- 我是有底線的 ---</span>
  }
</div>

注意，我們同時(shí)通過 loadMoreRef 拿到 DOM 元素。

然后，我們監(jiān)聽 .loadMore 元素，一旦出現(xiàn)在屏幕中，就調(diào)用 fetchNextPage() 獲取下一頁數(shù)據(jù)。

useEffect(() => {
  const observer = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting && hasNextPage) {
      fetchNextPage();
    }
  });

  if (loadMoreRef.current) {
    observer.observe(loadMoreRef.current);
  }

  return () => observer.disconnect();
}, [hasNextPage, fetchNextPage]);

來查看效果。

圖片

完美。

最后，再把完整代碼貼出來，方便大家學(xué)習(xí)。

import { useEffect, useRef } from 'react'
import { QueryClient, QueryClientProvider, useInfiniteQuery } from 'react-query'

// Create a client
const queryClient = new QueryClient()

export default function App() {
  return (
    // Provide the client to your App
    <QueryClientProvider client={queryClient}>
      <Example />
    </QueryClientProvider>
  )
}

const getPosts = async (pageParam = { page: 1, size: 25 }) => {
  return fetch(`https://jsonplaceholder.typicode.com/posts?_page=${pageParam.page}&_limit=${pageParam.size}`).then(res => {
    const total = res.headers.get('X-Total-Count')

    return res.json().then(data => {
      return {
        total,
        data,
        hasMore: pageParam.page * pageParam.size < total
      }
    })
  })
}

function Example() {
  const {
    isLoading,
    isFetchingNextPage,
    hasNextPage,
    isError,
    error,
    data,
    fetchNextPage
  } = useInfiniteQuery(
    'posts',
    ({ pageParam }) => getPosts(pageParam),
    {
      getNextPageParam: (lastPage, allPages) => {
        return lastPage.hasMore ? { page: allPages.length + 1, size: 25 } : undefined
      },
      refetchOnWindowFocus: false, // Prevent refetching on window focus
    }
  )

  const loadMoreRef = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting && hasNextPage) {
        fetchNextPage();
      }
    });

    if (loadMoreRef.current) {
      observer.observe(loadMoreRef.current);
    }

    return () => observer.disconnect();
  }, [hasNextPage, fetchNextPage]);


  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (isError) {
    return <div>Error: {error.message}</div>
  }

  return (
    <div>
      <p>總共 <strong>{data.pages[0].total}</strong> 條數(shù)據(jù)</p>
      <ol>
        {data.pages.map((page) => (
          <>
            {page.data.map((post) => (
              <li key={post.id}>{post.title}</li>
            ))}
          </>
        ))}
      </ol>
      <div className="loadMore" style={{ height: '30px', lineHeight: '30px' }} ref={loadMoreRef}>
        {
          isFetchingNextPage ? <span>Loading...</span> : <span>--- 我是有底線的 ---</span>
        }
      </div>
    </div>
  )
}