useUtils (v11)

useUtils is a hook that gives you access to helpers that let you manage the cached data of the queries you execute via @trpc/react-query. These helpers are actually thin wrappers around @tanstack/react-query's queryClient methods. If you want more in-depth information about options and usage patterns for useUtils helpers than what we provide here, we will link to their respective @tanstack/react-query docs so you can refer to them accordingly.

Usage

useUtils returns an object with all the available queries you have in your routers. You use it the same way as your trpc client object. Once you reach a query, you'll have access to the query helpers. For example, let's say you have a post router with an all query:

server.ts

import { const initTRPC: TRPCBuilder<object, object>initTRPC } from '@trpc/server';
import { import zz } from 'zod';

const const t: TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, {
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}>t = const initTRPC: TRPCBuilder<object, object>initTRPC.TRPCBuilder<object, object>.create<RuntimeConfigOptions<object, object>>(opts?: RuntimeConfigOptions<object, object> | undefined): TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, {
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}>create();

const const appRouter: BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>appRouter = const t: TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, {
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}>t.TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, { ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: false; }>.router: RouterBuilder
<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>(_: {
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}) => BuiltRouter<...>router({
  post: BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    all: QueryProcedure<{
        input: void;
        output: {
            posts: {
                id: number;
                title: string;
            }[];
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>post: const t: TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, {
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}>t.TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, { ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: false; }>.router: RouterBuilder
<{
    all: QueryProcedure<{
        input: void;
        output: {
            posts: {
                id: number;
                title: string;
            }[];
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>(_: {
    all: QueryProcedure<{
        input: void;
        output: {
            posts: {
                id: number;
                title: string;
            }[];
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}) => BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    all: QueryProcedure<{
        input: void;
        output: {
            posts: {
                id: number;
                title: string;
            }[];
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>router({
    all: QueryProcedure<{
    input: void;
    output: {
        posts: {
            id: number;
            title: string;
        }[];
    };
    meta: object;
    errorShape: DefaultErrorShape;
}>all: const t: TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, {
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}>t.TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, { ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: false; }>.procedure: ProcedureBuilder<object, object, object, UnsetMarker, UnsetMarker, UnsetMarker, UnsetMarker, false, DefaultErrorShape>procedure.ProcedureBuilder<object, object, object, UnsetMarker, UnsetMarker, UnsetMarker, UnsetMarker, false, DefaultErrorShape>.query<{
    posts: {
        id: number;
        title: string;
    }[];
}>(resolver: ProcedureResolver<object, object, object, UnsetMarker, UnsetMarker, {
    posts: {
        id: number;
        title: string;
    }[];
}>): QueryProcedure<{
    input: void;
    output: {
        posts: {
            id: number;
            title: string;
        }[];
    };
    meta: object;
    errorShape: DefaultErrorShape;
}>query(() => {
      return {
        posts: {
    id: number;
    title: string;
}[]posts: [
          { id: numberid: 1, title: stringtitle: 'everlong' },
          { id: numberid: 2, title: stringtitle: 'After Dark' },
        ],
      };
    }),
  }),
});

export type type AppRouter = Router<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>> & DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>AppRouter = typeof const appRouter: BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>appRouter;

Now in our component, when we navigate the object useUtils gives us and reach the post.all query, we'll get access to our query helpers!

MyComponent.tsx

import { function createTRPCReact<TRouter extends AnyRouter, TSSRContext = unknown>(opts?: CreateTRPCReactOptions<TRouter>): CreateTRPCReact<TRouter, TSSRContext>createTRPCReact } from '@trpc/react-query';
import type { type AppRouter = Router<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>> & DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>AppRouter } from './server';

const const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & DecorateRouterRecord<...>trpc = createTRPCReact<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown>(opts?: CreateTRPCReactOptions<...> | undefined): CreateTRPCReactBase<...> & DecorateRouterRecord<...>createTRPCReact<type AppRouter = Router<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>> & DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>AppRouter>();

function function MyComponent(): voidMyComponent() {
  const const utils: TRPCContextPropsBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & {
    ...;
} & DecorateRouter & {
    ...;
}utils = const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & DecorateRouterRecord<...>trpc.function useUtils(): TRPCContextPropsBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & {
    ...;
} & DecorateRouter & {
    ...;
}useUtils();
  const utils: TRPCContextPropsBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & {
    ...;
} & DecorateRouter & {
    ...;
}utils.post: DecorateRouter & {
    all: DecorateQueryProcedure<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, QueryProcedure<{
        input: void;
        output: {
            posts: {
                id: number;
                title: string;
            }[];
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>>;
}post.all: DecorateQueryProcedure<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, QueryProcedure<{
    input: void;
    output: {
        posts: {
            id: number;
            title: string;
        }[];
    };
    meta: object;
    errorShape: DefaultErrorShape;
}>>all.ffetch
fetchInfinite;Property 'f' does not exist on type 'DecorateQueryProcedure<{ ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: false; }, QueryProcedure<{ input: void; output: { posts: { id: number; title: string; }[]; }; meta: object; errorShape: DefaultErrorShape; }>>'.
}

Helpers

These are the helpers you'll get access to via useUtils. The table below will help you know which tRPC helper wraps which @tanstack/react-query helper method. Each react-query method will link to its respective docs/guide:

tRPC helper wrapper	`@tanstack/react-query` helper method
`fetch`	`queryClient.fetchQuery`
`prefetch`	`queryClient.prefetchQuery`
`fetchInfinite`	`queryClient.fetchInfiniteQuery`
`prefetchInfinite`	`queryClient.prefetchInfiniteQuery`
`ensureData`	`queryClient.ensureData`
`invalidate`	`queryClient.invalidateQueries`
`refetch`	`queryClient.refetchQueries`
`cancel`	`queryClient.cancelQueries`
`setData`	`queryClient.setQueryData`
`setQueriesData`	`queryClient.setQueriesData`
`getData`	`queryClient.getQueryData`
`setInfiniteData`	`queryClient.setInfiniteQueryData`
`getInfiniteData`	`queryClient.getInfiniteData`
`setMutationDefaults`	`queryClient.setMutationDefaults`
`getMutationDefaults`	`queryClient.getMutationDefaults`
`isMutating`	`queryClient.isMutating`
`reset`	`queryClient.resetQueries`

❓ The function I want isn't here!

@tanstack/react-query has a lot of functions that we haven't put in the tRPC context yet. If you need a function that isn't here, feel free to open a feature request requesting it.

In the meantime, you can import and use the function directly from @tanstack/react-query. We also provide a getQueryKey which you can use to get the correct queryKey on the filters when using these functions.

Proxy client

In addition to the above react-query helpers, the context also exposes your tRPC proxy client. This lets you call your procedures with async/await without needing to create an additional vanilla client.

import { function useState<S>(initialState: S | (() => S)): [S, React.Dispatch<React.SetStateAction<S>>] (+1 overload)useState } from 'react';
import { const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    apiKey: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        create: MutationProcedure<{
            input: void;
            output: string;
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & DecorateRouterRecord<...>trpc } from './utils/trpc';

function function MyComponent(): React.JSX.ElementMyComponent() {
  const [const apiKey: stringapiKey, const setApiKey: React.Dispatch<React.SetStateAction<string>>setApiKey] = useState<string>(initialState: string | (() => string)): [string, React.Dispatch<React.SetStateAction<string>>] (+1 overload)useState('');
  const const utils: TRPCContextPropsBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    apiKey: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        create: MutationProcedure<{
            input: void;
            output: string;
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & {
    ...;
} & DecorateRouter & {
    ...;
}utils = const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    apiKey: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        create: MutationProcedure<{
            input: void;
            output: string;
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & DecorateRouterRecord<...>trpc.function useUtils(): TRPCContextPropsBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    apiKey: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        create: MutationProcedure<{
            input: void;
            output: string;
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & {
    ...;
} & DecorateRouter & {
    ...;
}useUtils();

  return (
    <React.JSX.IntrinsicElements.form: React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>form
      React.DOMAttributes<HTMLFormElement>.onSubmit?: React.SubmitEventHandler<HTMLFormElement> | undefinedonSubmit={async (event: React.SubmitEvent<HTMLFormElement>event) => {
        const const apiKey: stringapiKey = await const utils: TRPCContextPropsBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    apiKey: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        create: MutationProcedure<{
            input: void;
            output: string;
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & {
    ...;
} & DecorateRouter & {
    ...;
}utils.client: TRPCUntypedClient<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    apiKey: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        create: MutationProcedure<{
            input: void;
            output: string;
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>> & DecoratedProcedureRecord<...> & {
    ...;
}client.apiKey: DecoratedProcedureRecord<{
    transformer: false;
    errorShape: DefaultErrorShape;
}, DecorateCreateRouterOptions<{
    create: MutationProcedure<{
        input: void;
        output: string;
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>apiKey.create: {
    mutate: Resolver<{
        input: void;
        output: string;
        errorShape: DefaultErrorShape;
        transformer: false;
    }>;
}create.mutate: (input: void, opts?: TRPCProcedureOptions) => TRPCTaggedPromise<string, DefaultErrorShape>mutate();
        const setApiKey: (value: React.SetStateAction<string>) => voidsetApiKey(const apiKey: stringapiKey);
      }}
    >
      {/* form content */}
    </React.JSX.IntrinsicElements.form: React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>form>
  );
}

Query Invalidation

You invalidate queries via the invalidate helper. invalidate is actually a special helper given that, unlike the other helpers, it's available at every level of the router map. This means you can either run invalidate on a single query, a whole router, or every router if you want. We get more in detail in the sections below.

Invalidating a single query

You can invalidate a query relating to a single procedure and even filter based on the input passed to it to prevent unnecessary calls to the back end.

Example code

import { const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: number;
            };
            output: {
                post: {
                    id: number;
                    title: string;
                };
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        edit: MutationProcedure<{
            input: {
                ...;
            };
            output: {
                ...;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & DecorateRouterRecord<...>trpc } from './utils/trpc';

function function MyComponent(): voidMyComponent() {
  const const utils: TRPCContextPropsBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: number;
            };
            output: {
                post: {
                    id: number;
                    title: string;
                };
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        edit: MutationProcedure<{
            input: {
                ...;
            };
            output: {
                ...;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & {
    ...;
} & DecorateRouter & {
    ...;
}utils = const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: number;
            };
            output: {
                post: {
                    id: number;
                    title: string;
                };
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        edit: MutationProcedure<{
            input: {
                ...;
            };
            output: {
                ...;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & DecorateRouterRecord<...>trpc.function useUtils(): TRPCContextPropsBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: number;
            };
            output: {
                post: {
                    id: number;
                    title: string;
                };
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        edit: MutationProcedure<{
            input: {
                ...;
            };
            output: {
                ...;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & {
    ...;
} & DecorateRouter & {
    ...;
}useUtils();

  const const mutation: UseTRPCMutationResult<{
    id: number;
    title: string;
}, TRPCClientErrorLike<{
    input: {
        ...;
    };
    output: {
        ...;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    ...;
}, unknown>mutation = const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: number;
            };
            output: {
                post: {
                    id: number;
                    title: string;
                };
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        edit: MutationProcedure<{
            input: {
                ...;
            };
            output: {
                ...;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & DecorateRouterRecord<...>trpc.post: DecorateRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    all: QueryProcedure<{
        input: void;
        output: {
            posts: {
                id: number;
                title: string;
            }[];
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    byId: QueryProcedure<{
        input: {
            id: number;
        };
        output: {
            post: {
                id: number;
                title: string;
            };
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    edit: MutationProcedure<{
        input: {
            ...;
        };
        output: {
            ...;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>post.edit: DecoratedMutation<{
    input: {
        ...;
    };
    output: {
        ...;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>edit.useMutation: <unknown>(opts?: UseTRPCMutationOptions<{
    id: number;
    title: string;
}, TRPCClientErrorLike<{
    input: {
        id: number;
        title: string;
    };
    output: {
        id: number;
        title: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    id: number;
    title: string;
}, unknown> | undefined) => UseTRPCMutationResult<{
    id: number;
    title: string;
}, TRPCClientErrorLike<{
    input: {
        id: number;
        title: string;
    };
    output: {
        id: number;
        title: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    id: number;
    title: string;
}, unknown>useMutation({
    onSuccess?: ((data: {
    id: number;
    title: string;
}, variables: {
    id: number;
    title: string;
}, onMutateResult: unknown, context: MutationFunctionContext) => Promise<unknown> | unknown) | undefinedonSuccess(input: {
    id: number;
    title: string;
}input) {
      const utils: TRPCContextPropsBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: number;
            };
            output: {
                post: {
                    id: number;
                    title: string;
                };
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        edit: MutationProcedure<{
            input: {
                ...;
            };
            output: {
                ...;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & {
    ...;
} & DecorateRouter & {
    ...;
}utils.post: DecorateRouter & {
    all: DecorateQueryProcedure<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, QueryProcedure<{
        input: void;
        output: {
            posts: {
                id: number;
                title: string;
            }[];
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>>;
    byId: DecorateQueryProcedure<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, QueryProcedure<{
        input: {
            id: number;
        };
        output: {
            post: {
                id: number;
                title: string;
            };
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>>;
    edit: DecorateMutationProcedure<...>;
}post.all: DecorateQueryProcedure<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, QueryProcedure<{
    input: void;
    output: {
        posts: {
            id: number;
            title: string;
        }[];
    };
    meta: object;
    errorShape: DefaultErrorShape;
}>>all.function invalidate(input?: void | undefined, filters?: (Omit<InvalidateQueryFilters<readonly unknown[]>, "predicate"> & {
    predicate?: ((query: Query<{
        posts: {
            id: number;
            title: string;
        }[];
    }, TRPCClientError<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }>, {
        posts: {
            id: number;
            title: string;
        }[];
    }, QueryKeyKnown<void, "infinite">>) => boolean) | undefined;
}) | undefined, options?: InvalidateOptions): Promise<void>invalidate();
      const utils: TRPCContextPropsBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: number;
            };
            output: {
                post: {
                    id: number;
                    title: string;
                };
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        edit: MutationProcedure<{
            input: {
                ...;
            };
            output: {
                ...;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & {
    ...;
} & DecorateRouter & {
    ...;
}utils.post: DecorateRouter & {
    all: DecorateQueryProcedure<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, QueryProcedure<{
        input: void;
        output: {
            posts: {
                id: number;
                title: string;
            }[];
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>>;
    byId: DecorateQueryProcedure<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, QueryProcedure<{
        input: {
            id: number;
        };
        output: {
            post: {
                id: number;
                title: string;
            };
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>>;
    edit: DecorateMutationProcedure<...>;
}post.byId: DecorateQueryProcedure<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, QueryProcedure<{
    input: {
        id: number;
    };
    output: {
        post: {
            id: number;
            title: string;
        };
    };
    meta: object;
    errorShape: DefaultErrorShape;
}>>byId.function invalidate(input?: {
    id?: number | undefined;
} | undefined, filters?: (Omit<InvalidateQueryFilters<readonly unknown[]>, "predicate"> & {
    predicate?: ((query: Query<{
        post: {
            id: number;
            title: string;
        };
    }, TRPCClientError<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }>, {
        post: {
            id: number;
            title: string;
        };
    }, QueryKeyKnown<{
        id: number;
    }, "query">>) => boolean) | undefined;
}) | undefined, options?: InvalidateOptions): Promise<void>invalidate({ id?: number | undefinedid: input: {
    id: number;
    title: string;
}input.id: numberid }); // Will not invalidate queries for other id's
    },
  });

  // [...]
}

Invalidating across whole routers

It is also possible to invalidate queries across an entire router rather than just one query.

Example code

Backend code

server/routers/_app.ts

import { const initTRPC: TRPCBuilder<object, object>initTRPC } from '@trpc/server';
import { import zz } from 'zod';

export const const t: TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, {
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}>t = const initTRPC: TRPCBuilder<object, object>initTRPC.TRPCBuilder<object, object>.create<RuntimeConfigOptions<object, object>>(opts?: RuntimeConfigOptions<object, object> | undefined): TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, {
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}>create();

export const const appRouter: BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                post: {
                    id: string;
                    title: string;
                };
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        edit: MutationProcedure<{
            input: {
                id: number;
                title: string;
            };
            output: {
                ...;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
    user: BuiltRouter<...>;
}>>appRouter = const t: TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, {
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}>t.TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, { ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: false; }>.router: RouterBuilder
<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                post: {
                    id: string;
                    title: string;
                };
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        edit: MutationProcedure<{
            input: {
                id: number;
                title: string;
            };
            output: {
                post: {
                    id: number;
                    title: string;
                };
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
    user: BuiltRouter<...>;
}>(_: {
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: string;
            };
            output: {
                post: {
                    id: string;
                    title: string;
                };
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        edit: MutationProcedure<{
            input: {
                id: number;
                title: string;
            };
            output: {
                post: {
                    id: number;
                    title: string;
                };
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
    user: BuiltRouter<...>;
}) => BuiltRouter<...>router({
  // sub Post router
  post: BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    all: QueryProcedure<{
        input: void;
        output: {
            posts: {
                id: number;
                title: string;
            }[];
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    byId: QueryProcedure<{
        input: {
            id: string;
        };
        output: {
            post: {
                id: string;
                title: string;
            };
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    edit: MutationProcedure<{
        input: {
            id: number;
            title: string;
        };
        output: {
            ...;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>post: const t: TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, {
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}>t.TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, { ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: false; }>.router: RouterBuilder
<{
    all: QueryProcedure<{
        input: void;
        output: {
            posts: {
                id: number;
                title: string;
            }[];
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    byId: QueryProcedure<{
        input: {
            id: string;
        };
        output: {
            post: {
                id: string;
                title: string;
            };
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    edit: MutationProcedure<{
        input: {
            id: number;
            title: string;
        };
        output: {
            post: {
                id: number;
                title: string;
            };
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>(_: {
    all: QueryProcedure<{
        input: void;
        output: {
            posts: {
                id: number;
                title: string;
            }[];
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    byId: QueryProcedure<{
        input: {
            id: string;
        };
        output: {
            post: {
                id: string;
                title: string;
            };
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    edit: MutationProcedure<{
        input: {
            id: number;
            title: string;
        };
        output: {
            post: {
                id: number;
                title: string;
            };
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}) => BuiltRouter<...>router({
    all: QueryProcedure<{
    input: void;
    output: {
        posts: {
            id: number;
            title: string;
        }[];
    };
    meta: object;
    errorShape: DefaultErrorShape;
}>all: const t: TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, {
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}>t.TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, { ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: false; }>.procedure: ProcedureBuilder<object, object, object, UnsetMarker, UnsetMarker, UnsetMarker, UnsetMarker, false, DefaultErrorShape>procedure.ProcedureBuilder<object, object, object, UnsetMarker, UnsetMarker, UnsetMarker, UnsetMarker, false, DefaultErrorShape>.query<{
    posts: {
        id: number;
        title: string;
    }[];
}>(resolver: ProcedureResolver<object, object, object, UnsetMarker, UnsetMarker, {
    posts: {
        id: number;
        title: string;
    }[];
}>): QueryProcedure<{
    input: void;
    output: {
        posts: {
            id: number;
            title: string;
        }[];
    };
    meta: object;
    errorShape: DefaultErrorShape;
}>query(() => {
      return {
        posts: {
    id: number;
    title: string;
}[]posts: [
          { id: numberid: 1, title: stringtitle: 'everlong' },
          { id: numberid: 2, title: stringtitle: 'After Dark' },
        ],
      };
    }),
    byId: QueryProcedure<{
    input: {
        id: string;
    };
    output: {
        post: {
            id: string;
            title: string;
        };
    };
    meta: object;
    errorShape: DefaultErrorShape;
}>byId: const t: TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, {
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}>t.TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, { ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: false; }>.procedure: ProcedureBuilder<object, object, object, UnsetMarker, UnsetMarker, UnsetMarker, UnsetMarker, false, DefaultErrorShape>procedure
      .ProcedureBuilder<object, object, object, UnsetMarker, UnsetMarker, UnsetMarker, UnsetMarker, false, DefaultErrorShape>.input<z.ZodObject<{
    id: z.ZodString;
}, z.core.$strip>>(schema: z.ZodObject<{
    id: z.ZodString;
}, z.core.$strip>): ProcedureBuilder<object, object, object, {
    id: string;
}, {
    id: string;
}, UnsetMarker, UnsetMarker, false, DefaultErrorShape>input(
        import zz.function object<{
    id: z.ZodString;
}>(shape?: {
    id: z.ZodString;
} | undefined, params?: string | {
    error?: string | z.core.$ZodErrorMap<NonNullable<z.core.$ZodIssueUnrecognizedKeys | z.core.$ZodIssueInvalidType<unknown>>> | undefined;
    message?: string | undefined | undefined;
} | undefined): z.ZodObject<{
    id: z.ZodString;
}, z.core.$strip>object({
          id: z.ZodStringid: import zz.function string(params?: string | z.core.$ZodStringParams): z.ZodString (+1 overload)string(),
        }),
      )
      .ProcedureBuilder<object, object, object, { id: string; }, { id: string; }, UnsetMarker, UnsetMarker, false, DefaultErrorShape>.query<{
    post: {
        id: string;
        title: string;
    };
}>(resolver: ProcedureResolver<object, object, object, {
    id: string;
}, UnsetMarker, {
    post: {
        id: string;
        title: string;
    };
}>): QueryProcedure<{
    input: {
        id: string;
    };
    output: {
        post: {
            id: string;
            title: string;
        };
    };
    meta: object;
    errorShape: DefaultErrorShape;
}>query(({ input: {
    id: string;
}input }) => {
        return {
          post: {
    id: string;
    title: string;
}post: { id: stringid: input: {
    id: string;
}input?.id: stringid, title: stringtitle: 'Look me up!' },
        };
      }),
    edit: MutationProcedure<{
    input: {
        id: number;
        title: string;
    };
    output: {
        ...;
    };
    meta: object;
    errorShape: DefaultErrorShape;
}>edit: const t: TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, {
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}>t.TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, { ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: false; }>.procedure: ProcedureBuilder<object, object, object, UnsetMarker, UnsetMarker, UnsetMarker, UnsetMarker, false, DefaultErrorShape>procedure
      .ProcedureBuilder<object, object, object, UnsetMarker, UnsetMarker, UnsetMarker, UnsetMarker, false, DefaultErrorShape>.input<z.ZodObject<{
    id: z.ZodNumber;
    title: z.ZodString;
}, z.core.$strip>>(schema: z.ZodObject<{
    id: z.ZodNumber;
    title: z.ZodString;
}, z.core.$strip>): ProcedureBuilder<object, object, object, {
    id: number;
    title: string;
}, {
    id: number;
    title: string;
}, UnsetMarker, UnsetMarker, false, DefaultErrorShape>input(import zz.function object<{
    id: z.ZodNumber;
    title: z.ZodString;
}>(shape?: {
    id: z.ZodNumber;
    title: z.ZodString;
} | undefined, params?: string | {
    error?: string | z.core.$ZodErrorMap<NonNullable<z.core.$ZodIssueUnrecognizedKeys | z.core.$ZodIssueInvalidType<unknown>>> | undefined;
    message?: string | undefined | undefined;
} | undefined): z.ZodObject<{
    id: z.ZodNumber;
    title: z.ZodString;
}, z.core.$strip>object({ id: z.ZodNumberid: import zz.function number(params?: string | z.core.$ZodNumberParams): z.ZodNumbernumber(), title: z.ZodStringtitle: import zz.function string(params?: string | z.core.$ZodStringParams): z.ZodString (+1 overload)string() }))
      .ProcedureBuilder<object, object, object, { id: number; title: string; }, { id: number; title: string; }, UnsetMarker, UnsetMarker, false, DefaultErrorShape>.mutation<{
    post: {
        id: number;
        title: string;
    };
}>(resolver: ProcedureResolver<object, object, object, {
    id: number;
    title: string;
}, UnsetMarker, {
    post: {
        id: number;
        title: string;
    };
}>): MutationProcedure<{
    input: {
        id: number;
        title: string;
    };
    output: {
        post: {
            id: number;
            title: string;
        };
    };
    meta: object;
    errorShape: DefaultErrorShape;
}>mutation(({ input: {
    id: number;
    title: string;
}input }) => {
        return { post: {
    id: number;
    title: string;
}post: { id: numberid: input: {
    id: number;
    title: string;
}input.id: numberid, title: stringtitle: input: {
    id: number;
    title: string;
}input.title: stringtitle } };
      }),
  }),
  // separate user router
  user: BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    all: QueryProcedure<{
        input: void;
        output: {
            users: {
                name: string;
            }[];
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>user: const t: TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, {
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}>t.TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, { ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: false; }>.router: RouterBuilder
<{
    all: QueryProcedure<{
        input: void;
        output: {
            users: {
                name: string;
            }[];
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>(_: {
    all: QueryProcedure<{
        input: void;
        output: {
            users: {
                name: string;
            }[];
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}) => BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    all: QueryProcedure<{
        input: void;
        output: {
            users: {
                name: string;
            }[];
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>router({
    all: QueryProcedure<{
    input: void;
    output: {
        users: {
            name: string;
        }[];
    };
    meta: object;
    errorShape: DefaultErrorShape;
}>all: const t: TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, {
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}>t.TRPCRootObject<object, object, RuntimeConfigOptions<object, object>, { ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: false; }>.procedure: ProcedureBuilder<object, object, object, UnsetMarker, UnsetMarker, UnsetMarker, UnsetMarker, false, DefaultErrorShape>procedure.ProcedureBuilder<object, object, object, UnsetMarker, UnsetMarker, UnsetMarker, UnsetMarker, false, DefaultErrorShape>.query<{
    users: {
        name: string;
    }[];
}>(resolver: ProcedureResolver<object, object, object, UnsetMarker, UnsetMarker, {
    users: {
        name: string;
    }[];
}>): QueryProcedure<{
    input: void;
    output: {
        users: {
            name: string;
        }[];
    };
    meta: object;
    errorShape: DefaultErrorShape;
}>query(() => {
      return { users: {
    name: string;
}[]users: [{ name: stringname: 'Dave Grohl' }, { name: stringname: 'Haruki Murakami' }] };
    }),
  }),
});

import { const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: number;
            };
            output: {
                post: {
                    id: number;
                    title: string;
                };
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        edit: MutationProcedure<{
            input: {
                ...;
            };
            output: {
                ...;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
    user: BuiltRouter<...>;
}>>, unknown> & DecorateRouterRecord<...>trpc } from './utils/trpc';

function function MyComponent(): voidMyComponent() {
  const const utils: TRPCContextPropsBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: number;
            };
            output: {
                post: {
                    id: number;
                    title: string;
                };
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        edit: MutationProcedure<{
            input: {
                ...;
            };
            output: {
                ...;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
    user: BuiltRouter<...>;
}>>, unknown> & {
    ...;
} & DecorateRouter & {
    ...;
}utils = const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: number;
            };
            output: {
                post: {
                    id: number;
                    title: string;
                };
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        edit: MutationProcedure<{
            input: {
                ...;
            };
            output: {
                ...;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
    user: BuiltRouter<...>;
}>>, unknown> & DecorateRouterRecord<...>trpc.function useUtils(): TRPCContextPropsBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: number;
            };
            output: {
                post: {
                    id: number;
                    title: string;
                };
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        edit: MutationProcedure<{
            input: {
                ...;
            };
            output: {
                ...;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
    user: BuiltRouter<...>;
}>>, unknown> & {
    ...;
} & DecorateRouter & {
    ...;
}useUtils();

  const const invalidateAllQueriesAcrossAllRouters: () => voidinvalidateAllQueriesAcrossAllRouters = () => {
    // 1️⃣
    // All queries on all routers will be invalidated
    const utils: TRPCContextPropsBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: number;
            };
            output: {
                post: {
                    id: number;
                    title: string;
                };
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        edit: MutationProcedure<{
            input: {
                ...;
            };
            output: {
                ...;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
    user: BuiltRouter<...>;
}>>, unknown> & {
    ...;
} & DecorateRouter & {
    ...;
}utils.function invalidate(input?: undefined, filters?: InvalidateQueryFilters, options?: InvalidateOptions): Promise<void>invalidate();
  };

  const const invalidateAllPostQueries: () => voidinvalidateAllPostQueries = () => {
    // 2️⃣
    // All post queries will be invalidated
    const utils: TRPCContextPropsBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: number;
            };
            output: {
                post: {
                    id: number;
                    title: string;
                };
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        edit: MutationProcedure<{
            input: {
                ...;
            };
            output: {
                ...;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
    user: BuiltRouter<...>;
}>>, unknown> & {
    ...;
} & DecorateRouter & {
    ...;
}utils.post: DecorateRouter & {
    all: DecorateQueryProcedure<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, QueryProcedure<{
        input: void;
        output: {
            posts: {
                id: number;
                title: string;
            }[];
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>>;
    byId: DecorateQueryProcedure<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, QueryProcedure<{
        input: {
            id: number;
        };
        output: {
            post: {
                id: number;
                title: string;
            };
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>>;
    edit: DecorateMutationProcedure<...>;
}post.function invalidate(input?: undefined, filters?: InvalidateQueryFilters, options?: InvalidateOptions): Promise<void>invalidate();
  };

  const const invalidatePostById: () => voidinvalidatePostById = () => {
    // 3️⃣
    // All queries in the post router with input {id:1} invalidated
    const utils: TRPCContextPropsBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: number;
            };
            output: {
                post: {
                    id: number;
                    title: string;
                };
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        edit: MutationProcedure<{
            input: {
                ...;
            };
            output: {
                ...;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
    user: BuiltRouter<...>;
}>>, unknown> & {
    ...;
} & DecorateRouter & {
    ...;
}utils.post: DecorateRouter & {
    all: DecorateQueryProcedure<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, QueryProcedure<{
        input: void;
        output: {
            posts: {
                id: number;
                title: string;
            }[];
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>>;
    byId: DecorateQueryProcedure<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, QueryProcedure<{
        input: {
            id: number;
        };
        output: {
            post: {
                id: number;
                title: string;
            };
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>>;
    edit: DecorateMutationProcedure<...>;
}post.byId: DecorateQueryProcedure<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, QueryProcedure<{
    input: {
        id: number;
    };
    output: {
        post: {
            id: number;
            title: string;
        };
    };
    meta: object;
    errorShape: DefaultErrorShape;
}>>byId.function invalidate(input?: {
    id?: number | undefined;
} | undefined, filters?: (Omit<InvalidateQueryFilters<readonly unknown[]>, "predicate"> & {
    predicate?: ((query: Query<{
        post: {
            id: number;
            title: string;
        };
    }, TRPCClientError<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }>, {
        post: {
            id: number;
            title: string;
        };
    }, QueryKeyKnown<{
        id: number;
    }, "query">>) => boolean) | undefined;
}) | undefined, options?: InvalidateOptions): Promise<void>invalidate({ id?: number | undefinedid: 1 });
  };

  // Example queries
  const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: number;
            };
            output: {
                post: {
                    id: number;
                    title: string;
                };
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        edit: MutationProcedure<{
            input: {
                ...;
            };
            output: {
                ...;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
    user: BuiltRouter<...>;
}>>, unknown> & DecorateRouterRecord<...>trpc.user: DecorateRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    all: QueryProcedure<{
        input: void;
        output: {
            users: {
                name: string;
            }[];
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>user.all: DecoratedQuery<{
    input: void;
    output: {
        users: {
            name: string;
        }[];
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>all.useQuery: ProcedureUseQuery
<{
    users: {
        name: string;
    }[];
}, {
    users: {
        name: string;
    }[];
}>(input: void | unique symbol, opts?: UseTRPCQueryOptions<{
    users: {
        name: string;
    }[];
}, {
    users: {
        name: string;
    }[];
}, TRPCClientErrorLike<{
    input: void;
    output: {
        users: {
            name: string;
        }[];
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    users: {
        name: string;
    }[];
}> | undefined) => UseTRPCQueryResult<{
    users: {
        name: string;
    }[];
}, TRPCClientErrorLike<{
    input: void;
    output: {
        users: {
            name: string;
        }[];
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>> (+1 overload)useQuery(); // Would only be validated by 1️⃣ only.
  const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: number;
            };
            output: {
                post: {
                    id: number;
                    title: string;
                };
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        edit: MutationProcedure<{
            input: {
                ...;
            };
            output: {
                ...;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
    user: BuiltRouter<...>;
}>>, unknown> & DecorateRouterRecord<...>trpc.post: DecorateRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    all: QueryProcedure<{
        input: void;
        output: {
            posts: {
                id: number;
                title: string;
            }[];
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    byId: QueryProcedure<{
        input: {
            id: number;
        };
        output: {
            post: {
                id: number;
                title: string;
            };
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    edit: MutationProcedure<{
        input: {
            ...;
        };
        output: {
            ...;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>post.all: DecoratedQuery<{
    input: void;
    output: {
        posts: {
            id: number;
            title: string;
        }[];
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>all.useQuery: ProcedureUseQuery
<{
    posts: {
        id: number;
        title: string;
    }[];
}, {
    posts: {
        id: number;
        title: string;
    }[];
}>(input: void | unique symbol, opts?: UseTRPCQueryOptions<{
    posts: {
        id: number;
        title: string;
    }[];
}, {
    posts: {
        id: number;
        title: string;
    }[];
}, TRPCClientErrorLike<{
    input: void;
    output: {
        posts: {
            id: number;
            title: string;
        }[];
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    posts: {
        id: number;
        title: string;
    }[];
}> | undefined) => UseTRPCQueryResult<{
    posts: {
        id: number;
        title: string;
    }[];
}, TRPCClientErrorLike<{
    input: void;
    output: {
        posts: {
            id: number;
            title: string;
        }[];
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>> (+1 overload)useQuery(); // Would be invalidated by 1️⃣ & 2️⃣
  const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: number;
            };
            output: {
                post: {
                    id: number;
                    title: string;
                };
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        edit: MutationProcedure<{
            input: {
                ...;
            };
            output: {
                ...;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
    user: BuiltRouter<...>;
}>>, unknown> & DecorateRouterRecord<...>trpc.post: DecorateRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    all: QueryProcedure<{
        input: void;
        output: {
            posts: {
                id: number;
                title: string;
            }[];
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    byId: QueryProcedure<{
        input: {
            id: number;
        };
        output: {
            post: {
                id: number;
                title: string;
            };
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    edit: MutationProcedure<{
        input: {
            ...;
        };
        output: {
            ...;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>post.byId: DecoratedQuery<{
    input: {
        id: number;
    };
    output: {
        post: {
            id: number;
            title: string;
        };
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>byId.useQuery: ProcedureUseQuery
<{
    post: {
        id: number;
        title: string;
    };
}, {
    post: {
        id: number;
        title: string;
    };
}>(input: {
    id: number;
} | unique symbol, opts?: UseTRPCQueryOptions<{
    post: {
        id: number;
        title: string;
    };
}, {
    post: {
        id: number;
        title: string;
    };
}, TRPCClientErrorLike<{
    input: {
        id: number;
    };
    output: {
        post: {
            id: number;
            title: string;
        };
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    post: {
        id: number;
        title: string;
    };
}> | undefined) => UseTRPCQueryResult<{
    post: {
        id: number;
        title: string;
    };
}, TRPCClientErrorLike<{
    input: {
        id: number;
    };
    output: {
        post: {
            id: number;
            title: string;
        };
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>> (+1 overload)useQuery({ id: numberid: 1 }); // Would be invalidated by 1️⃣, 2️⃣ and 3️⃣
  const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        byId: QueryProcedure<{
            input: {
                id: number;
            };
            output: {
                post: {
                    id: number;
                    title: string;
                };
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        edit: MutationProcedure<{
            input: {
                ...;
            };
            output: {
                ...;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
    user: BuiltRouter<...>;
}>>, unknown> & DecorateRouterRecord<...>trpc.post: DecorateRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    all: QueryProcedure<{
        input: void;
        output: {
            posts: {
                id: number;
                title: string;
            }[];
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    byId: QueryProcedure<{
        input: {
            id: number;
        };
        output: {
            post: {
                id: number;
                title: string;
            };
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    edit: MutationProcedure<{
        input: {
            ...;
        };
        output: {
            ...;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>post.byId: DecoratedQuery<{
    input: {
        id: number;
    };
    output: {
        post: {
            id: number;
            title: string;
        };
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>byId.useQuery: ProcedureUseQuery
<{
    post: {
        id: number;
        title: string;
    };
}, {
    post: {
        id: number;
        title: string;
    };
}>(input: {
    id: number;
} | unique symbol, opts?: UseTRPCQueryOptions<{
    post: {
        id: number;
        title: string;
    };
}, {
    post: {
        id: number;
        title: string;
    };
}, TRPCClientErrorLike<{
    input: {
        id: number;
    };
    output: {
        post: {
            id: number;
            title: string;
        };
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    post: {
        id: number;
        title: string;
    };
}> | undefined) => UseTRPCQueryResult<{
    post: {
        id: number;
        title: string;
    };
}, TRPCClientErrorLike<{
    input: {
        id: number;
    };
    output: {
        post: {
            id: number;
            title: string;
        };
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>> (+1 overload)useQuery({ id: numberid: 2 }); // would be invalidated by 1️⃣ and 2️⃣ but NOT 3️⃣!

  // [...]
}

Invalidate full cache on every mutation

Keeping track of exactly what queries a mutation should invalidate is hard, therefore, it can be a pragmatic solution to invalidate the full cache as a side-effect on any mutation. Since we have request batching, this invalidation will simply refetch all queries on the page you're looking at in one single request.

We have added a feature to help with this:

import { function createTRPCReact<TRouter extends AnyRouter, TSSRContext = unknown>(opts?: CreateTRPCReactOptions<TRouter>): CreateTRPCReact<TRouter, TSSRContext>createTRPCReact } from '@trpc/react-query';
import type { type AppRouter = Router<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>> & DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>AppRouter } from '../server';

export const const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & DecorateRouterRecord<...>trpc = createTRPCReact<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown>(opts?: CreateTRPCReactOptions<...> | undefined): CreateTRPCReactBase<...> & DecorateRouterRecord<...>createTRPCReact<type AppRouter = Router<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>> & DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        all: QueryProcedure<{
            input: void;
            output: {
                posts: {
                    id: number;
                    title: string;
                }[];
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>AppRouter>({
  CreateTRPCReactOptions<BuiltRouter<{ ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: false; }, DecorateCreateRouterOptions<{ post: BuiltRouter<{ ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: false; }, DecorateCreateRouterOptions<...>>; }>>>.overrides?: {
    useMutation?: Partial<UseMutationOverride>;
} | undefinedoverrides: {
    useMutation?: Partial<UseMutationOverride> | undefineduseMutation: {
      /**
       * This function is called whenever a `.useMutation` succeeds
       **/
      async onSuccess?: ((opts: {
    originalFn: () => MaybePromise<void>;
    queryClient: QueryClient;
    meta: Record<string, unknown>;
}) => MaybePromise<void>) | undefinedonSuccess(opts: {
    originalFn: () => MaybePromise<void>;
    queryClient: QueryClient;
    meta: Record<string, unknown>;
}opts) {
        /**
         * @note that order here matters:
         * The order here allows route changes in `onSuccess` without
         * having a flash of content change whilst redirecting.
         **/

        // Calls the `onSuccess` defined in the `useQuery()`-options:
        await opts: {
    originalFn: () => MaybePromise<void>;
    queryClient: QueryClient;
    meta: Record<string, unknown>;
}opts.originalFn: () => MaybePromise<void>originalFn();

        // Invalidate all queries in the react-query cache:
        await opts: {
    originalFn: () => MaybePromise<void>;
    queryClient: QueryClient;
    meta: Record<string, unknown>;
}opts.queryClient: QueryClientqueryClient.QueryClient.invalidateQueries<readonly unknown[]>(filters?: InvalidateQueryFilters<readonly unknown[]> | undefined, options?: InvalidateOptions): Promise<void>invalidateQueries();
      },
    },
  },
});

Additional Options

Aside from the query helpers, the object useUtils returns also contains the following properties:

interface interface ProxyTRPCContextProps<TRouter extends unknown, TSSRContext>ProxyTRPCContextProps<function (type parameter) TRouter in ProxyTRPCContextProps<TRouter extends unknown, TSSRContext>TRouter extends type AnyRouter = anyAnyRouter, function (type parameter) TSSRContext in ProxyTRPCContextProps<TRouter extends unknown, TSSRContext>TSSRContext> {
  /**
   * The `TRPCClient`
   */
  ProxyTRPCContextProps<TRouter extends unknown, TSSRContext>.client: anyclient: type TRPCClient<T> = anyTRPCClient<function (type parameter) TRouter in ProxyTRPCContextProps<TRouter extends unknown, TSSRContext>TRouter>;
  /**
   * The SSR context when server-side rendering
   * @default null
   */
  ProxyTRPCContextProps<TRouter extends unknown, TSSRContext>.ssrContext?: TSSRContext | null | undefinedssrContext?: function (type parameter) TSSRContext in ProxyTRPCContextProps<TRouter extends unknown, TSSRContext>TSSRContext | null;
  /**
   * State of SSR hydration.
   * - `false` if not using SSR.
   * - `prepass` when doing a prepass to fetch queries' data
   * - `mounting` before TRPCProvider has been rendered on the client
   * - `mounted` when the TRPCProvider has been rendered on the client
   * @default false
   */
  ProxyTRPCContextProps<TRouter extends unknown, TSSRContext>.ssrState?: SSRState | undefinedssrState?: type SSRState = false | "prepass" | "mounting" | "mounted"SSRState;
  /**
   * Abort loading query calls when unmounting a component - usually when navigating to a new page
   * @default false
   */
  ProxyTRPCContextProps<TRouter extends unknown, TSSRContext>.abortOnUnmount?: boolean | undefinedabortOnUnmount?: boolean;
}