T
TanStack•2y ago
foreign-sapphire

How to work with custom queries?

Hello. We have a custom queries which are wrappers on useQuery hooks. Example: 
export const useBillingPlansListQuery = <TSelect = BillingPlansListOutputType>({
  paramsToApi,
  ...options
}: UseQueryOptions<BillingPlansListOutputType, InkitErrorType, TSelect> & {
  paramsToApi?: BillingPlansListInputType;
} = {}) => {
  return useQuery<BillingPlansListOutputType, InkitErrorType, TSelect>({
    queryKey: [...billingKeys.plansList, paramsToApi],
    queryFn: () => billingPlansList(paramsToApi),
    ...options,
  });
};
export const useBillingPlansListQuery = <TSelect = BillingPlansListOutputType>({
  paramsToApi,
  ...options
}: UseQueryOptions<BillingPlansListOutputType, InkitErrorType, TSelect> & {
  paramsToApi?: BillingPlansListInputType;
} = {}) => {
  return useQuery<BillingPlansListOutputType, InkitErrorType, TSelect>({
    queryKey: [...billingKeys.plansList, paramsToApi],
    queryFn: () => billingPlansList(paramsToApi),
    ...options,
  });
};
According to router docs we should use ensureQueryData fn of query client. What is a best way to deal with Router and Query consigdering custom queries? Is it a best way to create additional abstraction to keep queryFn and queryKey to use it in ensureQueryData?
2 Replies
metropolitan-bronze
metropolitan-bronze•2y ago
See the Basic - React Query example, that shows this. https://tanstack.com/router/v1/docs/examples/react/basic-react-query
React Router Basic React Query Example | TanStack Router Docs
An example showing how to implement Basic React Query in React Router
metropolitan-bronze
metropolitan-bronze•2y ago
TLDR; You extract away the queryOptions, and use its return value comfortably in the loader and a React component. So you'll be dumping the custom hooks for functions that return the queryOptions.

Did you find this page helpful?