@tanstack/angular-query-experimental/providers.mjs.map

Signals for managing, caching and syncing asynchronous and remote data in Angular

{"version":3,"file":"providers.mjs","sources":["../src/providers.ts"],"sourcesContent":["import {\n  DestroyRef,\n  ENVIRONMENT_INITIALIZER,\n  InjectionToken,\n  PLATFORM_ID,\n  computed,\n  effect,\n  inject,\n} from '@angular/core'\nimport { QueryClient, noop, onlineManager } from '@tanstack/query-core'\nimport { isPlatformBrowser } from '@angular/common'\nimport { isDevMode } from './util/is-dev-mode/is-dev-mode'\nimport type { Provider } from '@angular/core'\nimport type {\n  DevtoolsButtonPosition,\n  DevtoolsErrorType,\n  DevtoolsPosition,\n  TanstackQueryDevtools,\n} from '@tanstack/query-devtools'\n\n/**\n * Usually {@link provideTanStackQuery} is used once to set up TanStack Query and the\n * {@link https://tanstack.com/query/latest/docs/reference/QueryClient|QueryClient}\n * for the entire application. Internally it calls `provideQueryClient`.\n * You can use `provideQueryClient` to provide a different `QueryClient` instance for a part\n * of the application or for unit testing purposes.\n * @param queryClient - A `QueryClient` instance, or an `InjectionToken` which provides a `QueryClient`.\n * @returns a provider object that can be used to provide the `QueryClient` instance.\n */\nexport function provideQueryClient(\n  queryClient: QueryClient | InjectionToken<QueryClient>,\n): Provider {\n  return {\n    provide: QueryClient,\n    useFactory: () => {\n      const client =\n        queryClient instanceof InjectionToken\n          ? inject(queryClient)\n          : queryClient\n      // Unmount the query client on injector destroy\n      inject(DestroyRef).onDestroy(() => client.unmount())\n      client.mount()\n      return client\n    },\n  }\n}\n\n/**\n * Sets up providers necessary to enable TanStack Query functionality for Angular applications.\n *\n * Allows to configure a `QueryClient` and optional features such as developer tools.\n *\n * **Example - standalone**\n *\n * ```ts\n * import {\n *   provideTanStackQuery,\n *   QueryClient,\n * } from '@tanstack/angular-query-experimental'\n *\n * bootstrapApplication(AppComponent, {\n *   providers: [provideTanStackQuery(new QueryClient())],\n * })\n * ```\n *\n * **Example - NgModule-based**\n *\n * ```ts\n * import {\n *   provideTanStackQuery,\n *   QueryClient,\n * } from '@tanstack/angular-query-experimental'\n *\n * @NgModule({\n *   declarations: [AppComponent],\n *   imports: [BrowserModule],\n *   providers: [provideTanStackQuery(new QueryClient())],\n *   bootstrap: [AppComponent],\n * })\n * export class AppModule {}\n * ```\n *\n * You can also enable optional developer tools by adding `withDevtools`. By\n * default the tools will then be loaded when your app is in development mode.\n * ```ts\n * import {\n *   provideTanStackQuery,\n *   withDevtools\n *   QueryClient,\n * } from '@tanstack/angular-query-experimental'\n *\n * bootstrapApplication(AppComponent,\n *   {\n *     providers: [\n *       provideTanStackQuery(new QueryClient(), withDevtools())\n *     ]\n *   }\n * )\n * ```\n *\n * **Example: using an InjectionToken**\n *\n * ```ts\n * export const MY_QUERY_CLIENT = new InjectionToken('', {\n *   factory: () => new QueryClient(),\n * })\n *\n * // In a lazy loaded route or lazy loaded component's providers array:\n * providers: [provideTanStackQuery(MY_QUERY_CLIENT)]\n * ```\n * @param queryClient - A `QueryClient` instance, or an `InjectionToken` which provides a `QueryClient`.\n * @param features - Optional features to configure additional Query functionality.\n * @returns A set of providers to set up TanStack Query.\n * @see https://tanstack.com/query/v5/docs/framework/angular/quick-start\n * @see withDevtools\n */\nexport function provideTanStackQuery(\n  queryClient: QueryClient | InjectionToken<QueryClient>,\n  ...features: Array<QueryFeatures>\n): Array<Provider> {\n  return [\n    provideQueryClient(queryClient),\n    features.map((feature) => feature.ɵproviders),\n  ]\n}\n\n/**\n * Sets up providers necessary to enable TanStack Query functionality for Angular applications.\n *\n * Allows to configure a `QueryClient`.\n * @param queryClient - A `QueryClient` instance.\n * @returns A set of providers to set up TanStack Query.\n * @public\n * @see https://tanstack.com/query/v5/docs/framework/angular/quick-start\n * @deprecated Use `provideTanStackQuery` instead.\n */\nexport function provideAngularQuery(queryClient: QueryClient): Array<Provider> {\n  return provideTanStackQuery(queryClient)\n}\n\n/**\n * Helper type to represent a Query feature.\n */\nexport interface QueryFeature<TFeatureKind extends QueryFeatureKind> {\n  ɵkind: TFeatureKind\n  ɵproviders: Array<Provider>\n}\n\n/**\n * Helper function to create an object that represents a Query feature.\n * @param kind -\n * @param providers -\n * @returns A Query feature.\n */\nexport function queryFeature<TFeatureKind extends QueryFeatureKind>(\n  kind: TFeatureKind,\n  providers: Array<Provider>,\n): QueryFeature<TFeatureKind> {\n  return { ɵkind: kind, ɵproviders: providers }\n}\n\n/**\n * A type alias that represents a feature which enables developer tools.\n * The type is used to describe the return value of the `withDevtools` function.\n * @public\n * @see {@link withDevtools}\n */\nexport type DeveloperToolsFeature = QueryFeature<'DeveloperTools'>\n\n/**\n * A type alias that represents a feature which enables persistence.\n * The type is used to describe the return value of the `withPersistQueryClient` function.\n * @public\n */\nexport type PersistQueryClientFeature = QueryFeature<'PersistQueryClient'>\n\n/**\n * Options for configuring the TanStack Query devtools.\n * @public\n */\nexport interface DevtoolsOptions {\n  /**\n   * Set this true if you want the devtools to default to being open\n   */\n  initialIsOpen?: boolean\n  /**\n   * The position of the TanStack logo to open and close the devtools panel.\n   * `top-left` | `top-right` | `bottom-left` | `bottom-right` | `relative`\n   * Defaults to `bottom-right`.\n   */\n  buttonPosition?: DevtoolsButtonPosition\n  /**\n   * The position of the TanStack Query devtools panel.\n   * `top` | `bottom` | `left` | `right`\n   * Defaults to `bottom`.\n   */\n  position?: DevtoolsPosition\n  /**\n   * Custom instance of QueryClient\n   */\n  client?: QueryClient\n  /**\n   * Use this so you can define custom errors that can be shown in the devtools.\n   */\n  errorTypes?: Array<DevtoolsErrorType>\n  /**\n   * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.\n   */\n  styleNonce?: string\n  /**\n   * Use this so you can attach the devtool's styles to a specific element in the DOM.\n   */\n  shadowDOMTarget?: ShadowRoot\n  /**\n   * Set this to true to hide disabled queries from the devtools panel.\n   */\n  hideDisabledQueries?: boolean\n\n  /**\n   * Whether the developer tools should load.\n   * - `auto`- (Default) Lazily loads devtools when in development mode. Skips loading in production mode.\n   * - `true`- Always load the devtools, regardless of the environment.\n   * - `false`- Never load the devtools, regardless of the environment.\n   *\n   * You can use `true` and `false` to override loading developer tools from an environment file.\n   * For example, a test environment might run in production mode but you may want to load developer tools.\n   *\n   * Additionally, you can use a signal in the callback to dynamically load the devtools based on a condition. For example,\n   * a signal created from a RxJS observable that listens for a keyboard shortcut.\n   *\n   * **Example**\n   * ```ts\n   *    withDevtools(() => ({\n   *      initialIsOpen: true,\n   *      loadDevtools: inject(ExampleService).loadDevtools()\n   *    }))\n   *  ```\n   */\n  loadDevtools?: 'auto' | boolean\n}\n\n/**\n * Enables developer tools.\n *\n * **Example**\n *\n * ```ts\n * export const appConfig: ApplicationConfig = {\n *   providers: [\n *     provideTanStackQuery(new QueryClient(), withDevtools())\n *   ]\n * }\n * ```\n * By default the devtools will be loaded when Angular runs in development mode and rendered in `<body>`.\n *\n * If you need more control over when devtools are loaded, you can use the `loadDevtools` option. This is particularly useful if you want to load devtools based on environment configurations. For instance, you might have a test environment running in production mode but still require devtools to be available.\n *\n * If you need more control over where devtools are rendered, consider `injectDevtoolsPanel`. This allows rendering devtools inside your own devtools for example.\n * @param withDevtoolsFn - A function that returns `DevtoolsOptions`.\n * @returns A set of providers for use with `provideTanStackQuery`.\n * @public\n * @see {@link provideTanStackQuery}\n * @see {@link DevtoolsOptions}\n */\nexport function withDevtools(\n  withDevtoolsFn?: () => DevtoolsOptions,\n): DeveloperToolsFeature {\n  let providers: Array<Provider> = []\n  if (!isDevMode() && !withDevtoolsFn) {\n    providers = []\n  } else {\n    providers = [\n      {\n        // Do not use provideEnvironmentInitializer while Angular < v19 is supported\n        provide: ENVIRONMENT_INITIALIZER,\n        multi: true,\n        useFactory: () => {\n          if (!isPlatformBrowser(inject(PLATFORM_ID))) return noop\n          const injectedClient = inject(QueryClient, {\n            optional: true,\n          })\n          const destroyRef = inject(DestroyRef)\n\n          const options = computed(() => withDevtoolsFn?.() ?? {})\n\n          let devtools: TanstackQueryDevtools | null = null\n          let el: HTMLElement | null = null\n\n          const shouldLoadToolsSignal = computed(() => {\n            const { loadDevtools } = options()\n            return typeof loadDevtools === 'boolean'\n              ? loadDevtools\n              : isDevMode()\n          })\n\n          const getResolvedQueryClient = () => {\n            const client = options().client ?? injectedClient\n            if (!client) {\n              throw new Error('No QueryClient found')\n            }\n            return client\n          }\n\n          const destroyDevtools = () => {\n            devtools?.unmount()\n            el?.remove()\n            devtools = null\n          }\n\n          return () =>\n            effect(() => {\n              const shouldLoadTools = shouldLoadToolsSignal()\n              const {\n                client,\n                position,\n                errorTypes,\n                buttonPosition,\n                initialIsOpen,\n              } = options()\n\n              if (devtools && !shouldLoadTools) {\n                destroyDevtools()\n                return\n              } else if (devtools && shouldLoadTools) {\n                client && devtools.setClient(client)\n                position && devtools.setPosition(position)\n                errorTypes && devtools.setErrorTypes(errorTypes)\n                buttonPosition && devtools.setButtonPosition(buttonPosition)\n                initialIsOpen && devtools.setInitialIsOpen(initialIsOpen)\n                return\n              } else if (!shouldLoadTools) {\n                return\n              }\n\n              el = document.body.appendChild(document.createElement('div'))\n              el.classList.add('tsqd-parent-container')\n\n              import('@tanstack/query-devtools').then((queryDevtools) => {\n                devtools = new queryDevtools.TanstackQueryDevtools({\n                  ...options(),\n                  client: getResolvedQueryClient(),\n                  queryFlavor: 'Angular Query',\n                  version: '5',\n                  onlineManager,\n                })\n\n                el && devtools.mount(el)\n\n                // Unmount the devtools on application destroy\n                destroyRef.onDestroy(destroyDevtools)\n              })\n            })\n        },\n      },\n    ]\n  }\n  return queryFeature('DeveloperTools', providers)\n}\n\n/**\n * A type alias that represents all Query features available for use with `provideTanStackQuery`.\n * Features can be enabled by adding special functions to the `provideTanStackQuery` call.\n * See documentation for each symbol to find corresponding function name. See also `provideTanStackQuery`\n * documentation on how to use those functions.\n * @public\n * @see {@link provideTanStackQuery}\n */\nexport type QueryFeatures = DeveloperToolsFeature | PersistQueryClientFeature\n\nexport const queryFeatures = ['DeveloperTools', 'PersistQueryClient'] as const\n\nexport type QueryFeatureKind = (typeof queryFeatures)[number]\n"],"names":[],"mappings":";;;AA6BO,SAAS,mBACd,aACU;AACH,SAAA;AAAA,IACL,SAAS;AAAA,IACT,YAAY,MAAM;AAChB,YAAM,SACJ,uBAAuB,iBACnB,OAAO,WAAW,IAClB;AAEN,aAAO,UAAU,EAAE,UAAU,MAAM,OAAO,SAAS;AACnD,aAAO,MAAM;AACN,aAAA;AAAA,IAAA;AAAA,EAEX;AACF;AAuEgB,SAAA,qBACd,gBACG,UACc;AACV,SAAA;AAAA,IACL,mBAAmB,WAAW;AAAA,IAC9B,SAAS,IAAI,CAAC,YAAY,QAAQ,UAAU;AAAA,EAC9C;AACF;AA8BgB,SAAA,aACd,MACA,WAC4B;AAC5B,SAAO,EAAE,OAAO,MAAM,YAAY,UAAU;AAC9C;AAyGO,SAAS,aACd,gBACuB;AACvB,MAAI,YAA6B,CAAC;AAClC,MAAI,CAAC,eAAe,CAAC,gBAAgB;AACnC,gBAAY,CAAC;AAAA,EAAA,OACR;AACO,gBAAA;AAAA,MACV;AAAA;AAAA,QAEE,SAAS;AAAA,QACT,OAAO;AAAA,QACP,YAAY,MAAM;AAChB,cAAI,CAAC,kBAAkB,OAAO,WAAW,CAAC,EAAU,QAAA;AAC9C,gBAAA,iBAAiB,OAAO,aAAa;AAAA,YACzC,UAAU;AAAA,UAAA,CACX;AACK,gBAAA,aAAa,OAAO,UAAU;AAEpC,gBAAM,UAAU,SAAS,OAAM,uDAAsB,CAAA,CAAE;AAEvD,cAAI,WAAyC;AAC7C,cAAI,KAAyB;AAEvB,gBAAA,wBAAwB,SAAS,MAAM;AACrC,kBAAA,EAAE,aAAa,IAAI,QAAQ;AACjC,mBAAO,OAAO,iBAAiB,YAC3B,eACA,UAAU;AAAA,UAAA,CACf;AAED,gBAAM,yBAAyB,MAAM;AAC7B,kBAAA,SAAS,UAAU,UAAU;AACnC,gBAAI,CAAC,QAAQ;AACL,oBAAA,IAAI,MAAM,sBAAsB;AAAA,YAAA;AAEjC,mBAAA;AAAA,UACT;AAEA,gBAAM,kBAAkB,MAAM;AAC5B,iDAAU;AACV,qCAAI;AACO,uBAAA;AAAA,UACb;AAEO,iBAAA,MACL,OAAO,MAAM;AACX,kBAAM,kBAAkB,sBAAsB;AACxC,kBAAA;AAAA,cACJ;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,gBACE,QAAQ;AAER,gBAAA,YAAY,CAAC,iBAAiB;AAChB,8BAAA;AAChB;AAAA,YAAA,WACS,YAAY,iBAAiB;AAC5B,wBAAA,SAAS,UAAU,MAAM;AACvB,0BAAA,SAAS,YAAY,QAAQ;AAC3B,4BAAA,SAAS,cAAc,UAAU;AAC7B,gCAAA,SAAS,kBAAkB,cAAc;AAC1C,+BAAA,SAAS,iBAAiB,aAAa;AACxD;AAAA,YAAA,WACS,CAAC,iBAAiB;AAC3B;AAAA,YAAA;AAGF,iBAAK,SAAS,KAAK,YAAY,SAAS,cAAc,KAAK,CAAC;AACzD,eAAA,UAAU,IAAI,uBAAuB;AAExC,mBAAO,0BAA0B,EAAE,KAAK,CAAC,kBAAkB;AAC9C,yBAAA,IAAI,cAAc,sBAAsB;AAAA,gBACjD,GAAG,QAAQ;AAAA,gBACX,QAAQ,uBAAuB;AAAA,gBAC/B,aAAa;AAAA,gBACb,SAAS;AAAA,gBACT;AAAA,cAAA,CACD;AAEK,oBAAA,SAAS,MAAM,EAAE;AAGvB,yBAAW,UAAU,eAAe;AAAA,YAAA,CACrC;AAAA,UAAA,CACF;AAAA,QAAA;AAAA,MACL;AAAA,IAEJ;AAAA,EAAA;AAEK,SAAA,aAAa,kBAAkB,SAAS;AACjD;AAYa,MAAA,gBAAgB,CAAC,kBAAkB,oBAAoB;"}