Is this style correct?

import { queryOptions } from "@tanstack/react-query";
import { FighterService } from "../api";

export class FighterQueries {
  public static getFighters() {
    return queryOptions({
      queryKey: ["fighters"],
      queryFn: () => FighterService.getFighters(),
    });
  }

  public static getFighter(name: string) {
    return queryOptions({
      queryKey: ["fighter", name],
      queryFn: () => FighterService.getFighter(name),
    });
  }

  public static getFighterNotes(name: string) {
    return queryOptions({
      queryKey: ["fighter-notes", name],
      queryFn: () => FighterService.getFighterNotes(name),
    });
  }
}

import { queryOptions } from "@tanstack/react-query";
import { FighterService } from "../api";

export class FighterQueries {
  public static getFighters() {
    return queryOptions({
      queryKey: ["fighters"],
      queryFn: () => FighterService.getFighters(),
    });
  }

  public static getFighter(name: string) {
    return queryOptions({
      queryKey: ["fighter", name],
      queryFn: () => FighterService.getFighter(name),
    });
  }

  public static getFighterNotes(name: string) {
    return queryOptions({
      queryKey: ["fighter-notes", name],
      queryFn: () => FighterService.getFighterNotes(name),
    });
  }
}

function Page() {
  const query = useSuspenseQuery(FighterQueries.getFighters());

  return (
      <DataTable columns={columns} data={query.data} />
  );
}

function Page() {
  const query = useSuspenseQuery(FighterQueries.getFighters());

  return (
      <DataTable columns={columns} data={query.data} />
  );
}