T
TanStack•2y ago
rare-sapphire

Is this style correct?

Hello 👋 I use this style to "group" and organize my queries: 
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} />
  );
}
I'd like to have confirmation that I'm not making a serious mistake by using this kind of style. Does that seem correct to you? (There is no Suspense because router ensure query data before the page load)
4 Replies
stormy-gold
stormy-gold•2y ago
It is okay, but your queryKeys are not hierarchical which might bite you in the long run
rare-sapphire
rare-sapphireOP•2y ago
I should find a better way to manage the keys thank you! 😄 I wonder if something like this would do the trick? 
import { queryOptions } from "@tanstack/react-query";
import { FighterService } from "../api";

export class FighterKeys {
  static all() {
    return ["fighters"];
  }

  static notes() {
    return [...this.all(), "note"];
  }
}

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

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

  public static getFighterNotes(name: string) {
    return queryOptions({
      queryKey: [...FighterKeys.notes(), name],
      queryFn: () => FighterService.getFighterNotes(name),
    });
  }
}
import { queryOptions } from "@tanstack/react-query";
import { FighterService } from "../api";

export class FighterKeys {
  static all() {
    return ["fighters"];
  }

  static notes() {
    return [...this.all(), "note"];
  }
}

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

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

  public static getFighterNotes(name: string) {
    return queryOptions({
      queryKey: [...FighterKeys.notes(), name],
      queryFn: () => FighterService.getFighterNotes(name),
    });
  }
}
stormy-gold
stormy-gold•2y ago
Look into tkdodo.eu‘s blog or lukesmith query key factory
rare-sapphire
rare-sapphireOP•2y ago
Nice, I'll have a look, thanks a lot!

Did you find this page helpful?