provideAngularQuery should support lazy import/ initialization

[NateRadebaugh]

provideAngularQuery should support lazy import/ initialization.

The tool is great but if I'm only using this on a few pages, I'd love to not pay the price of importing into my main bundle. It's currently around 28+ KB for the @tanstack/query-core + the experimental angular layer.

Is this possible today or does the library need updated to support a lazy load?

[arnoud-dv]

Hi, provideAngularQuery allows you to easily configure and provide a QueryClient. In almost all applications a single QueryClient would be used throughout the whole application and this is what that function is designed for. I just checked and the compressed difference in main bundle size between a minimal Angular application and an application with only provideAngularQuery without any queries is 5,67 KB. injectQuery, injectMutation etc. are tree-shaken and not included in the main bundle. It is similar to provideRouter from Angular itself which adds some KBs to the main bundle as well even if you would not define any routes.

There is rarely a need to optimize beyond this point and if there is (maybe a public landing page and the like) I would consider not using a JavaScript framework at all.

If you want to you could skip provideAngularQuery, use provideQueryClient in lazily loaded routes instead and no code would be added to the main bundle.

Note that you would need to manually mount and unmount the QueryClient in that case if you want window focus refetching. See the provideAngularQuery source code how to do that.

Also, caching would be separate per lazily loaded route.

I tested the following code and it works:

@Component({
    selector: 'my-files',
    standalone: true,
    template: `
        {{ query.data() }}
    `,
    providers: [
        provideQueryClient(new QueryClient())
    ],
})
export default class MyFilesComponent {
    query = injectQuery(() => ({
        queryKey: ['my-files'],
        queryFn: async () => {
            const response = await fetch('https://jsonplaceholder.typicode.com/posts');
            return response.json();
        }
    }))
}