Zenn
Closed5

TanStack Query入門

TanStack Query
てずかてずか

SWRは使ったことがあるのでおそらく同じような使い心地なのでは

keyを指定して、keyが同じものは再度リクエストが走らないようなイメージ？

てずかてずか
import { createQueryKeys, mergeQueryKeys } from "@lukemorales/query-key-factory";

// queries/users.ts
export const users = createQueryKeys('users', {
  all: null,
  detail: (userId: string) => ({
    queryKey: [userId],
    queryFn: () => api.getUser(userId),
  }),
});

こんな感じでkeyを定義して

import { queries } from '../queries';

export function useUsers() {
  return useQuery({
    ...queries.users.all,
    queryFn: () => api.getUsers(),
  });
};

export function useUserDetail(id: string) {
  return useQuery(queries.users.detail(id));
};

こんな感じで使うらしい

てずかてずか

シンプルに引数（パラメーター）からkeyを生成してくれてるだけかな？

このスクラップは3ヶ月前にクローズされました