@bnussman/query-key

A simple package to help you construct typesafe query keys for @tanstack/react-query 🔑

This package is inspired by and is similar to @lukemorales/query-key-factory, but allows you to nest queries.

🚀 Main Features

- Generates typesafe query keys based on an object's shape
- Tightly couples queryKey and queryFn based on this reccomendation
- Allows infinite nesting

Usage

``typescript
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, APIError[]>(queries.users.paginated(params, filter));

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

const useAllUsersQuery = (params: Params, filter: Filter) =>
useQuery(queries.users.all);

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

return useMutation>({
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);
},
});
};
``