Jonathan•2d ago

Where did useUtils go?

I am working through upgrading my project and I use useUtils here and there to do fetches from components like ag-grid which requires a data source It looks something like this

    const utils = useUtils();
    const dataSource = useMemo(() => {
        return {
            getRows: async (params: any) => {

                utils.contacts.grid.fetch().then((response) => {
                    params.success({
                        rowData: response.rows,
                        rowCount: response.totalCount,
                    });
                });
                
            }
        }
    }, []);

    const utils = useUtils();
    const dataSource = useMemo(() => {
        return {
            getRows: async (params: any) => {

                utils.contacts.grid.fetch().then((response) => {
                    params.success({
                        rowData: response.rows,
                        rowCount: response.totalCount,
                    });
                });
                
            }
        }
    }, []);

I thought it had moved to something under getting the trpc using the useTRPC but it doesn't seem to be there, how should I get this to work?

4 Replies

JonathanOP•2d ago

I am using these versions

  "@tanstack/react-query": ^5.66.5
  "@trpc/client": ^11.0.0-rc.772
  "@trpc/tanstack-react-query": ^11.0.0-rc.772
  "@trpc/server": ^11.0.0-rc.772

  "@tanstack/react-query": ^5.66.5
  "@trpc/client": ^11.0.0-rc.772
  "@trpc/tanstack-react-query": ^11.0.0-rc.772
  "@trpc/server": ^11.0.0-rc.772

pizza3927•2d ago

I believe the syntax has changed a couple of months ago. It works for me as follows:

const trpc = createTRPCReact<AppRouter>({ });

// access it via the trpc object
trpc.useUtils()

const trpc = createTRPCReact<AppRouter>({ });

// access it via the trpc object
trpc.useUtils()

JonathanOP•2d ago

yeah that is what i thought too, it wasnt showing up. Let me try again yeah it is missing for me I have

export const { useTRPC, TRPCProvider } = createTRPCContext<AppRouter>();

    const trpc = useTRPC();
    const utils = trpc.useUtils();

export const { useTRPC, TRPCProvider } = createTRPCContext<AppRouter>();

    const trpc = useTRPC();
    const utils = trpc.useUtils();

I have tried looking at the return of the createTRPCContext and it is not there , it is coming from the import

import { createTRPCContext } from "@trpc/tanstack-react-query";

import { createTRPCContext } from "@trpc/tanstack-react-query";

FluX•2d ago

useUtils is just a wrapper around Tanstack Query. See https://trpc.io/docs/client/react/useUtils#helpers The new integration uses native Tanstack Query, removing the wrappers. For your case (the fetch call) I believe you must change your code to:

const trpc = useTRPC()
await queryClient.fetchQuery(trpc.contacts.grid.queryOptions())

const trpc = useTRPC()
await queryClient.fetchQuery(trpc.contacts.grid.queryOptions())

Where did useUtils go?

Did you find this page helpful?