codecret | Software Engineer•2mo ago

can I use useUtils hook in trpc 11 ?

export const usePublicBlogs = () => {
  const trpc = useTRPC();
  return trpc.blogs.getPublicBlogs.queryOptions();
};

export const usePublicBlogs = () => {
  const trpc = useTRPC();
  return trpc.blogs.getPublicBlogs.queryOptions();
};

  const { data: blogPosts, isLoading, error } = usePublicBlogs();

  const { data: blogPosts, isLoading, error } = usePublicBlogs();

this is my trpc query, trpc query dont provide data, isLoading or error

Property 'data' does not exist on type 'UnusedSkipTokenTRPCQueryOptionsOut<{ id: string; title: string; content: string; excerpt: string | null; author: string; category: string; readTime: string; status: string; isFeatured: boolean; image: string | null; createdAt: Date; updatedAt: Date; }[], { ...; }[], TRPCClientErrorLike<...>>'.ts(2339)

Property 'data' does not exist on type 'UnusedSkipTokenTRPCQueryOptionsOut<{ id: string; title: string; content: string; excerpt: string | null; author: string; category: string; readTime: string; status: string; isFeatured: boolean; image: string | null; createdAt: Date; updatedAt: Date; }[], { ...; }[], TRPCClientErrorLike<...>>'.ts(2339)

also i want to invalidate my queries for example invalidate fetching posts query when doing a mutation (IN THE NEW WAY)

 await utils.blogs.getBlogs.invalidate();

 await utils.blogs.getBlogs.invalidate();

Property 'invalidate' does not exist on type 'DecorateQueryProcedure<{ input: void; output: { id: string; title: string; content: string; excerpt: string | null; author: string; category: string; readTime: string; status: string; isFeatured: boolean; image: string | null; createdAt: Date; updatedAt: Date; }[]; transformer: true; errorShape: DefaultErrorShape; }...'.ts(2339)

Property 'invalidate' does not exist on type 'DecorateQueryProcedure<{ input: void; output: { id: string; title: string; content: string; excerpt: string | null; author: string; category: string; readTime: string; status: string; isFeatured: boolean; image: string | null; createdAt: Date; updatedAt: Date; }[]; transformer: true; errorShape: DefaultErrorShape; }...'.ts(2339)

3 Replies

FluX•2mo ago

You must use useQuery from tanstack/react-query and pass your tRPC queryOptions to it like so:

export const usePublicBlogs = () => {
  const trpc = useTRPC();
  return useQuery(trpc.blogs.getPublicBlogs.queryOptions());
};

export const usePublicBlogs = () => {
  const trpc = useTRPC();
  return useQuery(trpc.blogs.getPublicBlogs.queryOptions());
};

https://trpc.io/docs/client/tanstack-react-query/usage useUtils doesn't exist with trpc/tanstack-react-query. Instead use native Tanstack Query APIs to do the invalidation.

TanStack React Query | tRPC

TanStack React Query usage

codecret | Software EngineerOP•2mo ago

how about invalidating ?

Heitor.•2mo ago

const trpc = useTRPC();
const queryClient = useQueryClient();

queryClient.invalidateQueries(
  trpc.blogs.getPublicBlogs.queryFilter()
);
// OR
queryClient.invalidateQueries({
  queryKey: trpc.blogs.getPublicBlogs.queryKey(),
});

const trpc = useTRPC();
const queryClient = useQueryClient();

queryClient.invalidateQueries(
  trpc.blogs.getPublicBlogs.queryFilter()
);
// OR
queryClient.invalidateQueries({
  queryKey: trpc.blogs.getPublicBlogs.queryKey(),
});

You can see the all the utilities @trpc/tanstack-react-query provides in the documentation FluX linked

can I use useUtils hook in trpc 11 ?

Did you find this page helpful?