Vue Composition API - Create Composable wrapper

[zdenkolini]

Hi, I'm trying to find an example/solution to creating a reusable composable (custom hook in React terminology) for my application.
Composable documentation:
https://vuejs.org/guide/reusability/composables.html

[jonnedeprez]

The fact that the TanStack composables detect if they are run inside a setup hook and throw an error if they aren't, is a show stopper for us. It means we are forced to repeat the logic for query invalidation after a mutation (for example) in all components that use that particular mutation. In a project with 50+ components and a bigger development team, it will be impossible to keep the overview of which queries have been written and how they are cached.

[khaledOghli]

Hi Bro : do you know how to use useQuery inside method in setup?
Uncaught Error: vue-query hooks can only be used inside setup() function.

[jonnedeprez]

You can't, useQuery can only be used in setup itself. But there's an easy way to delay the execution of the query. I now always wrap useQuery in a composable, and whenever I need to delay the execution of the query, I pass an enabled boolean Ref. The query will run as soon as you do enabled.value = true, which you can for example include in any function in setup.

export const useFindCustomer = (
  id: Ref<string>,
  enabled: Ref<boolean>
) => {
  const query = useQuery({
    queryKey: ['customer', id],
    queryFn: async ({ signal }): Promise<Customer | undefined> => {
      ...
      return customer;
    },
    enabled,
  });

  return query;
};

and inside the setup of a component:

const enabled = ref(false);
const { data, isFetching } = useFindCustomer(customerId, enabled);

[khaledOghli]

i want on every toggle to call again useQuery with a different key.
so I should onSuccess change enabled to false!

[DamianOsipiuk]

i want on every toggle to call again useQuery with a different key. so I should onSuccess change enabled to false!

Just include your dependency ref in the query key and whenever it changes, query would be run again. You do not have to juggle with enabled. Maybe only for the initial state when this variable might be unset.

[kacou12]

this is an example that work well:
export function useIssuersFiltersQuery(limit?: number) {
const queryClient = useQueryClient()
const initialFilters: DefaultFiltersPayload = {
q: undefined,
page: 1,
limit: limit ?? 10,
}

const filters = reactive({
...initialFilters,
})

const invalidateQuery = () => {
queryClient.invalidateQueries({
queryKey: issuersQueryKeys.issuersFilters({
...filters,
// country: country.value?.id,
}),
})
}

const query = useQuery({
queryKey: computed(() =>
issuersQueryKeys.issuersFilters({
...filters,
// country: country.value?.id,
}),
),
queryFn: ({ signal }) => fetchFiltersIssuers(filters),
})
// si les autres filtre a part la page change , on reset la page courante
watch(
() => ({
q: filters.q,
}),
() => {
filters.page = 1
query.refetch()
},
{ deep: true },
)

return {
...query,
filters,
invalidateQuery,
}
}