Type Safety Lost in Custom Mutation Hooks within Monorepo Structure

[jotaachm]

Hey all!

I'm experiencing TypeScript type inference issues with custom mutation hooks in a pnpm workspaces monorepo. The hooks are defined in a shared package and consumed across different apps.

Setup

• Monorepo structure with a shared package containing common hooks
• Using @tanstack/react-query v4
• TypeScript
• React Router v6 for routing and data loading

While my custom mutation hooks are properly typed in the shared package (see example below), the type information is lost when consuming these hooks in the applications. The .mutate() method accepts any instead of the defined parameter types.

This is an example of how I am typing mutation hooks in my shared package:

export const useCreateLabelMutation = (
  queryClient: QueryClient,
  options?: UseMutationOptions<CreateLabelResponse, Error, CreateLabelParams>
) => {
  return useMutation<CreateLabelResponse, Error, CreateLabelParams>(
    {
      mutationFn: (params: CreateLabelParams) => {
        const { id_itr, name, shade, icon } = params;
        return request<CreateLabelResponse>({
          url: `manager/itrs/${id_itr}/labels/create`,
          method: "post",
          data: { name, shade, icon },
        });
      },
      ...options,
    },
    queryClient
  );
};

When consuming:

const createLabelMutation = useCreateLabelMutation(queryClient);
createLabelMutation.mutate(params); // TypeScript doesn't enforce CreateLabelParams type

Any insights on why mutation types aren't being preserved across the package boundary would be greatly appreciated. I've uploaded an MRE here: https://github.com/jotaachm/react-query-hooks/tree/master

Interestingly, my query hooks (using useQuery) maintain proper type inference throughout the application, including when used with React Router's loaders for data preloading. I'd also love to hear any insights on whether my query preloading pattern + passing the loader data as initialData to the useQuery is a good practice. My goal was to take advantage of the prefetching and loaders functionality of react router while also keeping queries "alive" for invalidations, inspired by this article