使用NextJs路由响应查询

Question

我有一个页面，里面有几个查询，在我更新URL参数，然后react查询停止工作，也从开发工具中消失之前，它一直在工作。

当我点击一行时，它会触发handleRowClick函数，该函数会用params更新URL，然后react查询停止工作。

1.第一图像

2.点击一行(更新URL参数(第二个图像

const Volumes: NextPage = () => {
const apiRef = useGridApiRef()
const [volumes, setVolumes] = useState<IDataset[] | undefined>(undefined)
const [isOpen, setOpen] = useState(false)
const [rightWingData, setRightWingData] = useState<IDataset | undefined>(undefined)
const [searchValue, setSearch] = useState('')
const [volumeId, setVolumeId] = useState('')
const { isLoading, data } = useVolumeData()
const { isLoading: searchIsLoading, data: searchData } = useSearchVolumes(searchValue)
const { isLoading: volumeByIdLoading, data: volumeByIdData } = useVolumeDataById(volumeId)
const router = useRouter()
useEffect(() => {
if(router.isReady && router.query?.id && !rightWingData){
const volumeId = router.query.id.toString()
setVolumeId(volumeId)
}
if (!isLoading && data && !searchData) {
setVolumes(data.data.result)
}
else if (!searchIsLoading) {
setVolumes(searchData)
}
if(!volumeByIdLoading && volumeByIdData){
showVolumeData(volumeByIdData)
}
}, [data, isLoading, searchIsLoading, searchData, isOpen, rightWingData, volumeByIdLoading, volumeByIdData])

const handleRowClick = (rowData: IRowData) => {
showVolumeData(rowData.row)
Router.push({
pathname: '/volumes',
query: { id: rowData.row.id},
})
}
const showVolumeData = (volumeData: IDataset) => {
apiRef.current.updateColumns(thinColumns)
setRightWingData(volumeData)
setOpen(true)
setVolumeId('')
}
const closeRightWing = () => {
setOpen(false)
Router.push('/volumes')
apiRef.current.updateColumns(columns)
}
if (isLoading || !volumes) return <h1>Is Loading...</h1>
return (
<div className={`volumes ${isOpen ? "open" : "close"}`}>
<div className="volumes-table">
<InfTable setSearch={setSearch} searchValue={searchValue} apiRef={apiRef}
rows={volumes} columns={columns} initialState={initialState} onRowClick={handleRowClick} />
</div>
{rightWingData &&
<div className="right-wing-wrapper" >
<VolumeRightWing volume={rightWingData} onClose={closeRightWing} />
</div>
}
</div>
)

}

function MyApp({ Component, pageProps }: AppProps) {
const queryClient = new QueryClient()
return (
<QueryClientProvider client={queryClient}>
<Layout>
<Component {...pageProps} />
<ReactQueryDevtools initialIsOpen={false} position="bottom-right" />
</Layout>
</QueryClientProvider>
)

}

Answer 1

如代码所示，您正在App组件中重新创建一个new QueryClient：

function MyApp({ Component, pageProps }: AppProps) {
const queryClient = new QueryClient()

这意味着每次应用程序重新渲染时，都会丢弃查询缓存(存储在客户端内部(。

当您更改路线参数时，很可能会发生这种情况。如果您无法在MyApp的外部创建客户端(例如，因为您使用的是服务器端渲染(，建议创建一个稳定的client：

function MyApp({ Component, pageProps }: AppProps) {
const [queryClient] = React.useState(() => new QueryClient())

这也显示在SSR文档中。