NextJS Router 在页面重新聚焦之前不会重新加载数据

Question

目前正在使用 NextJS，但正在努力制作各种索引页面。使用路由器，我试图通过这样做来获取页码：

let router = useRouter()
let page = isNaN(router.query.page) ? 1 : parseInt(router.query.page);

因此，当我转到 page=1、page=2 等时，我会获得新的数据集。这个功能在同一个主要组件中被调用，并且是一个 React 查询函数：

const {data, status} = useQuery(["keycaps", {manu: manuId}, {prof: profileId}, {col: colorId}, {stat: statusId}], getKeycaps)

并且所述函数如下所示：

const getKeycaps = async(key) => {
    const manuId = key.queryKey[1].manu
    const profileIds = key.queryKey[2].prof.map(id => `profile.id=${id}`)
    const colorIds = key.queryKey[3].col.map(id => `filter_colors.id=${id}`)
    const statId = key.queryKey[4].stat

    const profileQueryString = profileIds.join("&")
    const colorQueryString = colorIds.join("&")

    let urlParams = new URLSearchParams(document.location.search);
    let page = urlParams.get("page") == null ? 1 : parseInt(urlParams.get("page"));

    let start = (page * 10) - 10

    const data = await axios(`
        ${process.env.REACT_APP_STRAPI_API}/keycaps?${manuId ? 'manufacturer.id=' + manuId + '&' : ''}${profileQueryString ? profileQueryString + '&' : ''}${colorQueryString ? colorQueryString + '&' : ''}_start=${start}&_limit=10`)
    return data.data
}

最初加载页面的时候，比如直接把索引的url粘贴进去（即keycaps?page=2），就可以得到所有的结果。但是，如果我开始使用这样的导航按钮：

<Link href={`/keycaps?page=${page - 1}`}> // next/link
    <div className="w-32 rounded-lg cursor-pointer">
        Prev
    </div>
</Link>
<Link href={`/keycaps?page=${page + 1}`}>
    <div className="w-32 rounded-lg cursor-pointer">
        Next
    </div>
</Link>

整个事情开始崩溃。本质上，在页面未聚焦之前，页面实际上不会重新加载任何数据或结果。所以，如果我按下 Next 按钮转到下一页，它不会加载数据，直到我对新的 window 执行选项卡或检查不同的 Internet 选项卡，然后当我回来时，数据将在一秒钟内神奇地加载。我也用 next build && next start 尝试过这个，这产生了相同的结果。我只想在按下下一页和上一页按钮时获取页面结果，并且不需要用户切换选项卡来获取内容。

我会注意到我对此也有 getStaticProps。它执行以下操作：

export async function getStaticProps() {
    const allKeycaps = (await getAllKeycaps() || 'Error')
    return {
        props: { allKeycaps }
    }
}

这将调用一个 api 脚本，并且所述脚本执行此操作：

async function fetchAPI(query, {variables} = {}) {
    const res = await fetch(`${process.env.REACT_APP_STRAPI_API}/graphql`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            query,
            variables,
        }),
    })

    const json = await res.json()
    
    if (json.errors) {
        console.error(json.errors)
        throw new Error('Failed to fetch API')
    }

    console.log('json', json.data, variables)

    return json.data
}
/* Keycap related grabs */

export async function getAllKeycaps() {
    const data = await fetchAPI(
        `
        {
            keycaps {
                id
                slug
                name
                published_at
                updatedAt
                profile {
                    id
                    name
                }
                manufacturer {
                    id
                    name
                    lead
                }
                status {
                    id
                    name
                }
                colors
                filter_colors {
                    color
                }
                kits
                designer
                thumb {
                    formats
                }
            }
        }
        `
    )
    return data
}

有人知道如何让它工作吗？要在这样的索引之间导航？我一直在尝试寻找使用第 1 页、第 2 页等导航的 Next 教程，但我所能找到的只是带有 slugs 的博客文章示例，没有任何类型的索引搜索。提前致谢。

Answer 1

找到答案：

使用useQuery设置数据和状态时

const curPage = router.query.page == null ? 1 : router.query.page

const {data, status} = useQuery(["keycaps", {manu: manuId}, {prof: profileId}, {col: colorId}, {stat: statusId}, {page: curPage}], getKeycaps)

然后，在 getKeycaps

const page = key.queryKey[5].page

我猜“urlParams”方法不是一个好方法？或者至少，更新速度不够快。所以通过路由器页码似乎效果更好。

NextJS Router 在页面重新聚焦之前不会重新加载数据

NextJS Router doesn't reload data until page refocus

javascript

reactjs

next.js

react-query

next-router