// app.config.ts
import { ApplicationConfig } from "@angular/core";
import { provideHttpClient, withFetch } from "@angular/common/http";
import { provideQueryClient } from "@coresync/ngx-query";

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(withFetch()),
    provideQueryClient({
      staleTime: 60_000,
      gcTime: 10 * 60_000,
      retry: 3,
      refetchOnFocus: true,
      refetchOnReconnect: true,
    }),
  ],
};

import { Component, inject } from "@angular/core";
import { CommonModule } from "@angular/common";
import { HttpClient } from "@angular/common/http";
import { queryBuilder, injectQueryClient } from "@coresync/ngx-query";

interface UserDto {
  id: string;
  name: string;
}

@Component({
  standalone: true,
  selector: "user-list",
  imports: [CommonModule],
  template: `
    <h2>Users</h2>
    @if (users$ | async; as users) {
    <ul>
      @for (user of users; track user.id) {
      <li>{{ user.name }}</li>
      }
    </ul>
    }
  `,
})
export class UserListComponent {
  private http = inject(HttpClient);
  private queryClient = injectQueryClient();

  users$ = queryBuilder<UserDto[]>(this.queryClient)
    .key(["users"])
    .fetcher(() => this.http.get<UserDto[]>("/api/users"))
    .build().data$;
}

import { mutationBuilder, injectQueryClient } from "@coresync/ngx-query";

const queryClient = injectQueryClient();

const createUser = mutationBuilder<UserDto, CreateUserInput>(queryClient)
  .key(["users", "create"])
  .affects(["users"])
  .mutateFn((input) => http.post<UserDto>("/api/users", input))
  .build();