NextJS + React-query，查询丢失，当第二次点击同一页面的链接时，从react-query-devtools中消失

zsbz8rwp 于 2023-06-22 发布在 React

关注(0)|答案(1)|浏览(78)

React查询钩

export const useSearchClient: UseSearchClient = (filters) => {
  return useQuery({
    queryKey: ['clients'],
    queryFn: queryFn(filters),
    enabled: false,
  })
}

客户端组件

const { data, error, isLoading, refetch } = useSearchClient(filters)

  useEffect(() => {
    refetch()
  }, [refetch])

客户端页面

const ClientsPage: NextPage = () => <Client />

export default ClientsPage

网站Map

import Link from 'next/link'

<Link href="/client">client</Link>

在页面加载时，我可以在devtools中看到查询。当点击客户端链接从侧边栏再次。并且查询丢失，当第二次点击同一页面的链接时，从react-query-devtools中消失。
在链接点击时，我是同一页。查询不应丢失。

next.js

来源：https://stackoverflow.com/questions/74293041/nextjs-react-query-query-is-lost-disappears-from-react-query-devtools-when-s

1条答案

按热度按时间

brtdzjyr1#

您的问题与我的情况非常相似，我的数据在第一次加载时被提取并立即消失，在一秒钟之内。在深入研究我的代码并将其与我的上一个项目进行比较后，我发现QueryClient不能在应用程序函数中。下面是一个例子
错误示例

function App({ Component, pageProps }: AppProps) {

    const queryClient = new QueryClient({
        defaultOptions: {
            queries: {
                retry: false,
                refetchOnWindowFocus: false,
            },
        },
    });

    return (
        <QueryClientProvider client={queryClient}>
            <Component {...pageProps} />
            <ReactQueryDevtools />
        </QueryClientProvider>
    );
}

正确示例

const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            retry: false,
            refetchOnWindowFocus: false,
        },
    },
});

function App({ Component, pageProps }: AppProps) {

    return (
        <QueryClientProvider client={queryClient}>
            <Component {...pageProps} />
            <ReactQueryDevtools />
        </QueryClientProvider>
    );
}

我知道这已经太迟了，但希望它能帮助别人。

赞(0）回复(0）举报 2023-06-22

我来回答

NextJS + React-query，查询丢失，当第二次点击同一页面的链接时，从react-query-devtools中消失

1条答案

相关问题

热门标签

最新问答