Closed5
TanStack Query入門
![てずか](https://res.cloudinary.com/zenn/image/fetch/s--e0cPvczl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/d02ef57b49.jpeg)
データフェッチと状態管理をやってくれそうなライブラリ
![てずか](https://res.cloudinary.com/zenn/image/fetch/s--e0cPvczl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/d02ef57b49.jpeg)
SWRは使ったことがあるのでおそらく同じような使い心地なのでは
keyを指定して、keyが同じものは再度リクエストが走らないようなイメージ?
![てずか](https://res.cloudinary.com/zenn/image/fetch/s--e0cPvczl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/d02ef57b49.jpeg)
keyをいい感じに管理してくれるライブラリ
![てずか](https://res.cloudinary.com/zenn/image/fetch/s--e0cPvczl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/d02ef57b49.jpeg)
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));
};
こんな感じで使うらしい
![てずか](https://res.cloudinary.com/zenn/image/fetch/s--e0cPvczl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/d02ef57b49.jpeg)
シンプルに引数(パラメーター)からkeyを生成してくれてるだけかな?
このスクラップは3ヶ月前にクローズされました