@bnussman/query-键

帮助您构建类型安全查询密钥的简单软件包 @tanstack/react-query 🔑

此软件包的灵感来自并类似于 @lukemorales/query-key-factory,但允许您输入查询.

🚀主要地物

• 根据对象形状生成类型安全查询密钥
• 严格夫妇查询键和查询Fn 这个 建议
• 允许无限地筑巢

使用量

import { getQueryKeys } from '@bnussman/query-key';
import { useQuery } from '@tanstack/react-query';

const queries = getQueryKeys({
  users: {
    paginated: (params: Params = {}, filter: Filter = {}) => ({
      queryFn: () => getUsers(params, filter),
      queryKey: [params, filter]
    }),
    user: (id: string) => ({
      queryFn: () => getUser(id)
    }),
    all: {
      queryFn: getAllUsers
    }
  },
});

const useUsersQuery = (params: Params, filter: Filter) => 
  useQuery<Page<User>, APIError[]>(queries.users.paginated(params, filter));

const useUserQuery = (id: string, enabled = true) => 
  useQuery<User, APIError[]>({
    ...queries.users.user(id),
    enabled,
  });

const useAllUsersQuery = (params: Params, filter: Filter) => 
  useQuery<User[], APIError[]>(queries.users.all);

const useUserMutation = (id: string) => {
  const queryClient = useQueryClient();

  return useMutation<User, APIError[], Partial<User>>({
    mutationFn: (data) => updateUser(id, data),
    onSuccess: (user) => {
      queryClient.setQueryData(queries.users.user(id).queryKey, user);
      queryClient.invalidateQueries(queries.users.paginated.queryKey);
      queryClient.invalidateQueries(queries.users.all.queryKey);
    },
  });
};