getQueryKey (v11)

We provide a getQueryKey helper that accepts a router or procedure so that you can easily provide the native function the correct query key.

// Queries
declare function function getQueryKey(procedure: AnyQueryProcedure, input?: DeepPartial<TInput>, type?: QueryType): TRPCQueryKey (+1 overload)getQueryKey(
  procedure: anyprocedure: type AnyQueryProcedure = anyAnyQueryProcedure,
  input: unknowninput?: type DeepPartial<T> = TDeepPartial<type TInput = unknownTInput>,
  type: QueryType | undefinedtype?: type QueryType = "query" | "infinite" | "any"QueryType, /** @default 'any' */
): type TRPCQueryKey = any[]TRPCQueryKey;

// Routers
declare function function getQueryKey(router: AnyRouter): TRPCQueryKey (+1 overload)getQueryKey(
  router: anyrouter: type AnyRouter = anyAnyRouter,
): type TRPCQueryKey = any[]TRPCQueryKey;

type type QueryType = "query" | "infinite" | "any"QueryType = "query" | "infinite" | "any";
// for useQuery ──┘         │            │
// for useInfiniteQuery ────┘            │
// will match all ───────────────────────┘

import { function useIsFetching(filters?: QueryFilters, queryClient?: QueryClient): numberuseIsFetching, const useQueryClient: (queryClient?: QueryClient) => QueryClientuseQueryClient } from '@tanstack/react-query';
import { function getQueryKey<TProcedureOrRouter extends ProcedureOrRouter>(procedureOrRouter: TProcedureOrRouter, ..._params: GetParams<TProcedureOrRouter>): TRPCQueryKeygetQueryKey } from '@trpc/react-query';
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<{
        list: QueryProcedure<{
            input: void;
            output: {
                id: string;
                title: string;
            }[];
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & DecorateRouterRecord<...>trpc } from './utils/trpc';

function function MyComponent(): voidMyComponent() {
  const const queryClient: QueryClientqueryClient = function useQueryClient(queryClient?: QueryClient): QueryClientuseQueryClient();

  const const posts: UseTRPCQueryResult<{
    id: string;
    title: string;
}[], TRPCClientErrorLike<{
    input: void;
    output: {
        id: string;
        title: string;
    }[];
    transformer: false;
    errorShape: DefaultErrorShape;
}>>posts = const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: void;
            output: {
                id: string;
                title: string;
            }[];
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & DecorateRouterRecord<...>trpc.post: DecorateRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
            title: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>post.list: DecoratedQuery<{
    input: void;
    output: {
        id: string;
        title: string;
    }[];
    transformer: false;
    errorShape: DefaultErrorShape;
}>list.useQuery: ProcedureUseQuery
<{
    id: string;
    title: string;
}[], {
    id: string;
    title: string;
}[]>(input: void | unique symbol, opts?: UseTRPCQueryOptions<{
    id: string;
    title: string;
}[], {
    id: string;
    title: string;
}[], TRPCClientErrorLike<{
    input: void;
    output: {
        id: string;
        title: string;
    }[];
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    id: string;
    title: string;
}[]> | undefined) => UseTRPCQueryResult<{
    id: string;
    title: string;
}[], TRPCClientErrorLike<{
    input: void;
    output: {
        id: string;
        title: string;
    }[];
    transformer: false;
    errorShape: DefaultErrorShape;
}>> (+1 overload)useQuery();

  // See if a query is fetching
  const const postListKey: TRPCQueryKeypostListKey = getQueryKey<DecoratedQuery<{
    input: void;
    output: {
        id: string;
        title: string;
    }[];
    transformer: false;
    errorShape: DefaultErrorShape;
}>>(procedureOrRouter: DecoratedQuery<{
    input: void;
    output: {
        id: string;
        title: string;
    }[];
    transformer: false;
    errorShape: DefaultErrorShape;
}>, input?: void | undefined, type?: QueryType | undefined): TRPCQueryKeygetQueryKey(const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: void;
            output: {
                id: string;
                title: string;
            }[];
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & DecorateRouterRecord<...>trpc.post: DecorateRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
            title: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>post.list: DecoratedQuery<{
    input: void;
    output: {
        id: string;
        title: string;
    }[];
    transformer: false;
    errorShape: DefaultErrorShape;
}>list, var undefinedundefined, 'query');
  const const isFetching: numberisFetching = function useIsFetching(filters?: QueryFilters, queryClient?: QueryClient): numberuseIsFetching({ QueryFilters<readonly unknown[]>.queryKey?: readonly unknown[] | undefinedqueryKey: const postListKey: TRPCQueryKeypostListKey });

  // Set some query defaults for an entire router
  const const postKey: TRPCQueryKeypostKey = getQueryKey<DecorateRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
            title: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>>(procedureOrRouter: DecorateRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
            title: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>): TRPCQueryKeygetQueryKey(const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    post: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: void;
            output: {
                id: string;
                title: string;
            }[];
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
    }>>;
}>>, unknown> & DecorateRouterRecord<...>trpc.post: DecorateRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: void;
        output: {
            id: string;
            title: string;
        }[];
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>post);
  const queryClient: QueryClientqueryClient.QueryClient.setQueryDefaults<unknown, Error, unknown, unknown>(queryKey: QueryKey, options: Partial<OmitKeyof<QueryObserverOptions<unknown, Error, unknown, unknown, readonly unknown[], never>, "queryKey", "strictly">>): voidsetQueryDefaults(const postKey: TRPCQueryKeypostKey, { staleTime?: StaleTimeFunction<unknown, Error, unknown, readonly unknown[]> | undefinedstaleTime: 30 * 60 * 1000 });

  // ...
}

Mutations

Similarly to queries, we provide a getMutationKey for mutations. The underlying function is the same as getQueryKey (in fact, you could technically use getQueryKey for mutations as well), the only difference is in semantics.

import { getMutationKey } from '@trpc/react-query';

const mutationKey = getMutationKey(trpc.user.create);