Svelte 5 SvelteKit中queryClient导入是否重复创建？如何实现单例？

核心问题解答 #

你当前的写法不会每次导入都重建实例。ES模块本身是单例机制：第一次导入./src/query.ts时，模块代码会被执行并创建queryClient实例，后续所有导入操作都会直接复用这个已经创建好的实例，不会再次执行new QueryClient()。

确保单例的额外保障方案 #

如果担心特殊场景（比如SvelteKit的服务端/客户端边界、热重载）出现意外重复创建，可以做以下优化：

• 惰性初始化封装
  修改query.ts，把实例创建逻辑包裹在函数里，确保只初始化一次：

  import { QueryClient } from '@tanstack/svelte-query';
  
  let queryClient: QueryClient | undefined;
  
  export function getQueryClient() {
    if (!queryClient) {
      queryClient = new QueryClient({
        defaultOptions: {
          // 你的配置项
        }
      });
    }
    return queryClient;
  }
  

  后续其他文件通过调用getQueryClient()获取实例，彻底避免重复创建的可能。

• 区分端实例（针对SSR场景）
  如果你的应用用到服务端渲染，要注意服务端和客户端的queryClient不能共用（避免实例泄露）。可以拆分文件分别创建单例：

  • src/lib/query.client.ts：仅在客户端初始化的实例
  • src/lib/query.server.ts：仅在服务端初始化的实例
    根据导入场景选择对应文件即可。

内容的提问来源于stack exchange，提问作者Fred Hors