本地无网络时 Refine 请求不发起到怎么处理如何配置 networkMode 离线工作【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine在本地环境调试 Refine 应用时如果你断开了网络或公司内网环境访问不到外部 API会发现页面的数据请求根本没有发出去列表一直停留在加载状态即使你想用本地 mock 数据或本地服务的数据也拿不到。这是因为 Refine 底层使用tanstack/query管理请求而它的networkMode默认值为online——在浏览器没有网络连接时所有 queries 和 mutations 都会被拦截直到连接恢复。Refine 官方 FAQ 针对这一场景给出了明确的解决方案在Refine/组件的reactQuery配置中把networkMode设为always让请求无视连接状态照常发出从而可以在无网络环境下继续操作自己的数据。现象与原因按官方 FAQHow to work offline in local environment?的描述无网络连接时tanstack/query会阻止请求发出直到建立成功的连接因此本地开发时即使后端是本机服务或数据来自本地只要浏览器判定当前离线Refine 发出的查询取数据和变更提交数据都不会执行默认的networkMode行为是online即无连接时阻止请求。也就是说问题不在 dataProvider 或 API 地址配置而在于查询客户端的网络模式。只要把默认网络模式改成always离线时请求就会照常发起。配置 networkMode 为 always修改你的应用入口组件Vite 项目通常是src/App.tsxNext.js 项目在src/app/layout.tsx等挂载Refine/的位置在Refine/的options.reactQuery.clientConfig.defaultOptions下分别为queries和mutations添加networkMode: alwaysimport { Refine } from refinedev/core; const App () ( Refine dataProvider{dataProvider(https://api.example.com)} options{{ reactQuery: { clientConfig: { defaultOptions: { queries: { // 取数据离线时也允许 query 发出请求 networkMode: always, }, mutations: { // 提交数据mutation 同样需要设置。 // 默认值是 online无连接时会阻止请求 networkMode: always, }, }, }, }, }} resources{[ { name: posts, list: /posts, }, ]} / );几点说明均来自 Refine Component 文档reactQuery.clientConfig是 Refine 内部使用的 React Query 客户端配置入口clientConfig既可以是配置对象也可以传入你自己的QueryClient实例Refine 对该客户端已有两个默认值refetchOnWindowFocus: false、keepPreviousData: true上面的配置只是在此基础上新增defaultOptions不影响这些默认行为如果queries只改、mutations不改离线时表单提交类请求仍会被拦截所以两处都要设置。如果你的项目已经传入自定义QueryClient也可以在构造它时带上同样的defaultOptions效果一致。组件文档中给出的自定义客户端示例形式如下import { QueryClient } from tanstack/react-query; const myQueryClient new QueryClient({ defaultOptions: { queries: { networkMode: always }, mutations: { networkMode: always }, }, }); const App () ( Refine dataProvider{dataProvider(https://api.example.com)} options{{ reactQuery: { clientConfig: myQueryClient, }, }} / );两种写法二选一即可不要同时保留以最终传入clientConfig的那个为准。配置后的验证方式按 FAQ 描述的目标场景验证在浏览器处于无网络状态断开 Wi-Fi/网线时启动本地应用打开列表页观察useList等查询触发的请求配置前这些请求根本不会发出配置networkMode: always后请求会照常发起。如果你的数据来自本地服务或本地 mock此时页面应能正常渲染自己的数据而不必依赖互联网连接——这正是 FAQ 中 Must I use an internet connection to run this library? 一节所回答的问题同时提交一次表单触发 mutation确认离线状态下变更请求也能发出而不是被静默挂起。需要明确边界networkMode: always只改变是否允许发起请求它不能替代可用的 API 端点。请求发出后能否成功仍取决于你的 dataProvider 指向的服务是否可达该配置解决的是离线时请求被tanstack/query整体拦截的问题。参考文档FAQdocumentation/docs/guides-concepts/faq/index.mdHow to work offline in local environment? 小节组件配置documentation/docs/core/refine-component/index.mdreactQuery.clientConfig小节【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考