A simple package to help you construct typesafe query keys for [`@tanstack/react-query`](https://tanstack.com/query) 🔑
npm install @bnussman/query-keyA 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.
``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
const useUserQuery = (id: string, enabled = true) =>
useQuery
...queries.users.user(id),
enabled,
});
const useAllUsersQuery = (params: Params, filter: Filter) =>
useQuery
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);
},
});
};
``