useInfiniteQuery() (v11)

Example Procedure

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<{
    infinitePosts: QueryProcedure<{
        input: {
            direction: "forward" | "backward";
            limit?: number | null | undefined;
            cursor?: number | null | undefined;
        };
        output: {
            items: {
                myCursor: number;
            }[];
            nextCursor: number | undefined;
        };
        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
<{
    infinitePosts: QueryProcedure<{
        input: {
            direction: "forward" | "backward";
            limit?: number | null | undefined;
            cursor?: number | null | undefined;
        };
        output: {
            items: {
                myCursor: number;
            }[];
            nextCursor: number | undefined;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>(_: {
    infinitePosts: QueryProcedure<{
        input: {
            direction: "forward" | "backward";
            limit?: number | null | undefined;
            cursor?: number | null | undefined;
        };
        output: {
            items: {
                myCursor: number;
            }[];
            nextCursor: number | undefined;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}) => BuiltRouter<...>router({
  infinitePosts: QueryProcedure<{
    input: {
        direction: "forward" | "backward";
        limit?: number | null | undefined;
        cursor?: number | null | undefined;
    };
    output: {
        items: {
            myCursor: number;
        }[];
        nextCursor: number | undefined;
    };
    meta: object;
    errorShape: DefaultErrorShape;
}>infinitePosts: 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<{
    limit: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
    cursor: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
    direction: z.ZodEnum<{
        forward: "forward";
        backward: "backward";
    }>;
}, z.core.$strip>>(schema: z.ZodObject<{
    limit: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
    cursor: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
    direction: z.ZodEnum<{
        forward: "forward";
        backward: "backward";
    }>;
}, z.core.$strip>): ProcedureBuilder<object, object, object, {
    direction: "forward" | "backward";
    limit?: number | null | undefined;
    cursor?: number | ... 1 more ... | undefined;
}, ... 4 more ..., DefaultErrorShape>input(
      import zz.function object<{
    limit: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
    cursor: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
    direction: z.ZodEnum<{
        forward: "forward";
        backward: "backward";
    }>;
}>(shape?: {
    limit: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
    cursor: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
    direction: z.ZodEnum<{
        forward: "forward";
        backward: "backward";
    }>;
} | undefined, params?: string | {
    error?: string | z.core.$ZodErrorMap<NonNullable<z.core.$ZodIssueUnrecognizedKeys | z.core.$ZodIssueInvalidType<unknown>>> | undefined;
    message?: string | undefined | undefined;
} | undefined): z.ZodObject<...>object({
        limit: z.ZodOptional<z.ZodNullable<z.ZodNumber>>limit: import zz.function number(params?: string | z.core.$ZodNumberParams): z.ZodNumbernumber()._ZodNumber<$ZodNumberInternals<number>>.min(value: number, params?: string | z.core.$ZodCheckGreaterThanParams): z.ZodNumbermin(1)._ZodNumber<$ZodNumberInternals<number>>.max(value: number, params?: string | z.core.$ZodCheckLessThanParams): z.ZodNumbermax(100).ZodType<any, any, $ZodNumberInternals<number>>.nullish(): z.ZodOptional<z.ZodNullable<z.ZodNumber>>nullish(),
        cursor: z.ZodOptional<z.ZodNullable<z.ZodNumber>>cursor: import zz.function number(params?: string | z.core.$ZodNumberParams): z.ZodNumbernumber().ZodType<any, any, $ZodNumberInternals<number>>.nullish(): z.ZodOptional<z.ZodNullable<z.ZodNumber>>nullish(), // <-- "cursor" needs to exist, but can be any type
        direction: z.ZodEnum<{
    forward: "forward";
    backward: "backward";
}>direction: import zz.enum<readonly ["forward", "backward"]>(values: readonly ["forward", "backward"], params?: string | z.core.$ZodEnumParams): z.ZodEnum<{
    forward: "forward";
    backward: "backward";
}> (+1 overload)
export enumenum(['forward', 'backward']), // optional, useful for bi-directional query
      }),
    )
    .ProcedureBuilder<object, object, object, { direction: "forward" | "backward"; limit?: number | null | undefined; cursor?: number | null | undefined; }, { direction: "forward" | "backward"; limit?: number | ... 1 more ... | undefined; cursor?: number | ... 1 more ... | undefined; }, UnsetMarker, UnsetMarker, false, DefaultErrorShape>.query<{
    items: {
        myCursor: number;
    }[];
    nextCursor: number | undefined;
}>(resolver: ProcedureResolver<object, object, object, {
    direction: "forward" | "backward";
    limit?: number | null | undefined;
    cursor?: number | null | undefined;
}, UnsetMarker, {
    items: {
        myCursor: number;
    }[];
    nextCursor: number | undefined;
}>): QueryProcedure<{
    input: {
        direction: "forward" | "backward";
        limit?: number | null | undefined;
        cursor?: number | null | undefined;
    };
    output: {
        items: {
            myCursor: number;
        }[];
        nextCursor: number | undefined;
    };
    meta: object;
    errorShape: DefaultErrorShape;
}>query(async (opts: ProcedureResolverOptions<object, object, object, {
    direction: "forward" | "backward";
    limit?: number | null | undefined;
    cursor?: number | null | undefined;
}>opts) => {
      const { const input: {
    direction: "forward" | "backward";
    limit?: number | null | undefined;
    cursor?: number | null | undefined;
}input } = opts: ProcedureResolverOptions<object, object, object, {
    direction: "forward" | "backward";
    limit?: number | null | undefined;
    cursor?: number | null | undefined;
}>opts;
      const const limit: numberlimit = const input: {
    direction: "forward" | "backward";
    limit?: number | null | undefined;
    cursor?: number | null | undefined;
}input.limit?: number | null | undefinedlimit ?? 50;
      const { const cursor: number | null | undefinedcursor } = const input: {
    direction: "forward" | "backward";
    limit?: number | null | undefined;
    cursor?: number | null | undefined;
}input;
      const const items: {
    myCursor: number;
}[]items = await const prisma: {
    post: {
        findMany: (opts: any) => Promise<{
            myCursor: number;
        }[]>;
    };
}prisma.post: {
    findMany: (opts: any) => Promise<{
        myCursor: number;
    }[]>;
}post.findMany: (opts: any) => Promise<{
    myCursor: number;
}[]>findMany({
        take: numbertake: const limit: numberlimit + 1, // get an extra item at the end which we'll use as next cursor
        where: {
    title: {
        contains: string;
    };
}where: {
          title: {
    contains: string;
}title: {
            contains: stringcontains: 'Prisma' /* Optional filter */,
          },
        },
        cursor: {
    myCursor: number;
} | undefinedcursor: const cursor: number | null | undefinedcursor ? { myCursor: numbermyCursor: const cursor: numbercursor } : var undefinedundefined,
        orderBy: {
    myCursor: string;
}orderBy: {
          myCursor: stringmyCursor: 'asc',
        },
      });
      let let nextCursor: number | null | undefinednextCursor: typeof const cursor: number | null | undefinedcursor | undefined = var undefinedundefined;
      if (const items: {
    myCursor: number;
}[]items.Array<{ myCursor: number; }>.length: numberlength > const limit: numberlimit) {
        const const nextItem: {
    myCursor: number;
} | undefinednextItem = const items: {
    myCursor: number;
}[]items.Array<{ myCursor: number; }>.pop(): {
    myCursor: number;
} | undefinedpop();
        let nextCursor: number | null | undefinednextCursor = const nextItem: {
    myCursor: number;
} | undefinednextItem!.myCursor: numbermyCursor;
      }

      return {
        items: {
    myCursor: number;
}[]items,
        nextCursor: number | undefinednextCursor,
      };
    }),
});

Example React Component

components/MyComponent.tsx

import { const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    infinitePosts: QueryProcedure<{
        input: {
            direction: "forward" | "backward";
            limit?: number | null | undefined;
            cursor?: number | null | undefined;
        };
        output: {
            items: {
                id: string;
                title: string;
            }[];
            nextCursor: number | undefined;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, unknown> & DecorateRouterRecord<...>trpc } from '../utils/trpc';

export function function MyComponent(): voidMyComponent() {
  const const myQuery: TRPCHookResult & UseInfiniteQueryResult<{
    pages: {
        items: {
            id: string;
            title: string;
        }[];
        nextCursor?: number | undefined;
    }[];
    pageParams: (number | null | undefined)[];
}, TRPCClientErrorLike<{
    input: {
        direction: "forward" | "backward";
        limit?: number | null | undefined;
        cursor?: number | null | undefined;
    };
    output: {
        items: {
            id: string;
            title: string;
        }[];
        nextCursor?: number | undefined;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>>myQuery = const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    infinitePosts: QueryProcedure<{
        input: {
            direction: "forward" | "backward";
            limit?: number | null | undefined;
            cursor?: number | null | undefined;
        };
        output: {
            items: {
                id: string;
                title: string;
            }[];
            nextCursor: number | undefined;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>, unknown> & DecorateRouterRecord<...>trpc.infinitePosts: DecoratedQuery<{
    input: {
        direction: "forward" | "backward";
        limit?: number | null | undefined;
        cursor?: number | null | undefined;
    };
    output: {
        items: {
            id: string;
            title: string;
        }[];
        nextCursor?: number | undefined;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>infinitePosts.useInfiniteQuery: useTRPCInfiniteQuery
<{
    pages: {
        items: {
            id: string;
            title: string;
        }[];
        nextCursor?: number | undefined;
    }[];
    pageParams: (number | null | undefined)[];
}>(input: InfiniteInput<{
    direction: "forward" | "backward";
    limit?: number | null | undefined;
    cursor?: number | null | undefined;
}>, opts?: makeInfiniteQueryOptions<number | null | undefined, UndefinedInitialDataInfiniteOptions<{
    items: {
        id: string;
        title: string;
    }[];
    nextCursor?: number | undefined;
}, TRPCClientErrorLike<{
    input: {
        direction: "forward" | "backward";
        limit?: number | null | undefined;
        cursor?: number | null | undefined;
    };
    output: {
        items: {
            id: string;
            title: string;
        }[];
        nextCursor?: number | undefined;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    pages: {
        items: {
            id: string;
            title: string;
        }[];
        nextCursor?: number | undefined;
    }[];
    pageParams: (number | null | undefined)[];
}, any, number | ... 1 more ... | undefined>> | undefined) => TRPCHookResult & UseInfiniteQueryResult<...> (+2 overloads)useInfiniteQuery(
    {
      limit?: number | null | undefinedlimit: 10,
    },
    {
      getNextPageParam: GetNextPageParamFunction<number | null | undefined, {
    items: {
        id: string;
        title: string;
    }[];
    nextCursor?: number | undefined;
}>getNextPageParam: (lastPage: {
    items: {
        id: string;
        title: string;
    }[];
    nextCursor?: number | undefined;
}lastPage) => lastPage: {
    items: {
        id: string;
        title: string;
    }[];
    nextCursor?: number | undefined;
}lastPage.nextCursor?: number | undefinednextCursor,
      // initialCursor: 1, // <-- optional you can pass an initialCursor
    },
  );
  // [...]
}

Helpers

`getInfiniteData()`

This helper gets the currently cached data from an existing infinite query

components/MyComponent.tsx

import { const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    infinitePosts: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: {
                limit?: number | null | undefined;
                cursor?: number | null | undefined;
                direction?: "forward" | "backward" | undefined;
            };
            output: {
                items: {
                    id: string;
                    title: string;
                    status: string;
                }[];
                nextCursor: number | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        add: MutationProcedure<...>;
    }>>;
}>>, unknown> & DecorateRouterRecord<...>trpc } from '../utils/trpc';

export function function MyComponent(): voidMyComponent() {
  const const utils: TRPCContextPropsBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    infinitePosts: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: {
                limit?: number | null | undefined;
                cursor?: number | null | undefined;
                direction?: "forward" | "backward" | undefined;
            };
            output: {
                items: {
                    id: string;
                    title: string;
                    status: string;
                }[];
                nextCursor: number | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        add: MutationProcedure<...>;
    }>>;
}>>, unknown> & {
    ...;
} & DecorateRouter & {
    ...;
}utils = const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    infinitePosts: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: {
                limit?: number | null | undefined;
                cursor?: number | null | undefined;
                direction?: "forward" | "backward" | undefined;
            };
            output: {
                items: {
                    id: string;
                    title: string;
                    status: string;
                }[];
                nextCursor: number | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        add: MutationProcedure<...>;
    }>>;
}>>, unknown> & DecorateRouterRecord<...>trpc.function useUtils(): TRPCContextPropsBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    infinitePosts: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: {
                limit?: number | null | undefined;
                cursor?: number | null | undefined;
                direction?: "forward" | "backward" | undefined;
            };
            output: {
                items: {
                    id: string;
                    title: string;
                    status: string;
                }[];
                nextCursor: number | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        add: MutationProcedure<...>;
    }>>;
}>>, unknown> & {
    ...;
} & DecorateRouter & {
    ...;
}useUtils();

  const const myMutation: UseTRPCMutationResult<{
    id: string;
    title: string;
}, TRPCClientErrorLike<{
    input: {
        title: string;
    };
    output: {
        id: string;
        title: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    title: string;
}, void>myMutation = const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    infinitePosts: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: {
                limit?: number | null | undefined;
                cursor?: number | null | undefined;
                direction?: "forward" | "backward" | undefined;
            };
            output: {
                items: {
                    id: string;
                    title: string;
                    status: string;
                }[];
                nextCursor: number | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        add: MutationProcedure<...>;
    }>>;
}>>, unknown> & DecorateRouterRecord<...>trpc.infinitePosts: DecorateRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: {
            limit?: number | null | undefined;
            cursor?: number | null | undefined;
            direction?: "forward" | "backward" | undefined;
        };
        output: {
            items: {
                id: string;
                title: string;
                status: string;
            }[];
            nextCursor: number | undefined;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    add: MutationProcedure<{
        input: {
            title: string;
        };
        output: {
            id: string;
            title: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>infinitePosts.add: DecoratedMutation<{
    input: {
        title: string;
    };
    output: {
        id: string;
        title: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>add.useMutation: <void>(opts?: UseTRPCMutationOptions<{
    title: string;
}, TRPCClientErrorLike<{
    input: {
        title: string;
    };
    output: {
        id: string;
        title: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    id: string;
    title: string;
}, void> | undefined) => UseTRPCMutationResult<{
    id: string;
    title: string;
}, TRPCClientErrorLike<{
    input: {
        title: string;
    };
    output: {
        id: string;
        title: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    title: string;
}, void>useMutation({
    async onMutate?: ((variables: {
    title: string;
}, context: MutationFunctionContext) => void | Promise<void>) | undefinedonMutate(opts: {
    title: string;
}opts) {
      await const utils: TRPCContextPropsBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    infinitePosts: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: {
                limit?: number | null | undefined;
                cursor?: number | null | undefined;
                direction?: "forward" | "backward" | undefined;
            };
            output: {
                items: {
                    id: string;
                    title: string;
                    status: string;
                }[];
                nextCursor: number | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        add: MutationProcedure<...>;
    }>>;
}>>, unknown> & {
    ...;
} & DecorateRouter & {
    ...;
}utils.infinitePosts: DecorateRouter & {
    list: DecorateQueryProcedure<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, QueryProcedure<{
        input: {
            limit?: number | null | undefined;
            cursor?: number | null | undefined;
            direction?: "forward" | "backward" | undefined;
        };
        output: {
            items: {
                id: string;
                title: string;
                status: string;
            }[];
            nextCursor: number | undefined;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>>;
    add: DecorateMutationProcedure<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, MutationProcedure<...>>;
}infinitePosts.list: DecorateQueryProcedure<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, QueryProcedure<{
    input: {
        limit?: number | null | undefined;
        cursor?: number | null | undefined;
        direction?: "forward" | "backward" | undefined;
    };
    output: {
        items: {
            id: string;
            title: string;
            status: string;
        }[];
        nextCursor: number | undefined;
    };
    meta: object;
    errorShape: DefaultErrorShape;
}>>list.function cancel(input?: {
    limit?: number | null | undefined;
    cursor?: number | null | undefined;
    direction?: "forward" | "backward" | undefined;
} | undefined, options?: CancelOptions): Promise<void>cancel();
      const const allPosts: InfiniteData<{
    items: {
        id: string;
        title: string;
        status: string;
    }[];
    nextCursor?: number | undefined;
}, number | null> | undefinedallPosts = const utils: TRPCContextPropsBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    infinitePosts: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: {
                limit?: number | null | undefined;
                cursor?: number | null | undefined;
                direction?: "forward" | "backward" | undefined;
            };
            output: {
                items: {
                    id: string;
                    title: string;
                    status: string;
                }[];
                nextCursor: number | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        add: MutationProcedure<...>;
    }>>;
}>>, unknown> & {
    ...;
} & DecorateRouter & {
    ...;
}utils.infinitePosts: DecorateRouter & {
    list: DecorateQueryProcedure<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, QueryProcedure<{
        input: {
            limit?: number | null | undefined;
            cursor?: number | null | undefined;
            direction?: "forward" | "backward" | undefined;
        };
        output: {
            items: {
                id: string;
                title: string;
                status: string;
            }[];
            nextCursor: number | undefined;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>>;
    add: DecorateMutationProcedure<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, MutationProcedure<...>>;
}infinitePosts.list: DecorateQueryProcedure<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, QueryProcedure<{
    input: {
        limit?: number | null | undefined;
        cursor?: number | null | undefined;
        direction?: "forward" | "backward" | undefined;
    };
    output: {
        items: {
            id: string;
            title: string;
            status: string;
        }[];
        nextCursor: number | undefined;
    };
    meta: object;
    errorShape: DefaultErrorShape;
}>>list.function getInfiniteData(input?: {
    limit?: number | null | undefined;
    cursor?: number | null | undefined;
    direction?: "forward" | "backward" | undefined;
} | undefined): InfiniteData<{
    items: {
        id: string;
        title: string;
        status: string;
    }[];
    nextCursor?: number | undefined;
}, number | null> | undefinedgetInfiniteData({ limit?: number | null | undefinedlimit: 10 });
      // [...]
    },
  });
}

`setInfiniteData()`

This helper allows you to update a query's cached data

components/MyComponent.tsx

import { const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    infinitePosts: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: {
                limit?: number | null | undefined;
                cursor?: number | null | undefined;
                direction?: "forward" | "backward" | undefined;
            };
            output: {
                items: {
                    id: string;
                    title: string;
                    status: string;
                }[];
                nextCursor: number | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        delete: MutationProcedure<...>;
    }>>;
}>>, unknown> & DecorateRouterRecord<...>trpc } from '../utils/trpc';

export function function MyComponent(): voidMyComponent() {
  const const utils: TRPCContextPropsBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    infinitePosts: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: {
                limit?: number | null | undefined;
                cursor?: number | null | undefined;
                direction?: "forward" | "backward" | undefined;
            };
            output: {
                items: {
                    id: string;
                    title: string;
                    status: string;
                }[];
                nextCursor: number | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        delete: MutationProcedure<...>;
    }>>;
}>>, unknown> & {
    ...;
} & DecorateRouter & {
    ...;
}utils = const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    infinitePosts: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: {
                limit?: number | null | undefined;
                cursor?: number | null | undefined;
                direction?: "forward" | "backward" | undefined;
            };
            output: {
                items: {
                    id: string;
                    title: string;
                    status: string;
                }[];
                nextCursor: number | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        delete: MutationProcedure<...>;
    }>>;
}>>, unknown> & DecorateRouterRecord<...>trpc.function useUtils(): TRPCContextPropsBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    infinitePosts: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: {
                limit?: number | null | undefined;
                cursor?: number | null | undefined;
                direction?: "forward" | "backward" | undefined;
            };
            output: {
                items: {
                    id: string;
                    title: string;
                    status: string;
                }[];
                nextCursor: number | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        delete: MutationProcedure<...>;
    }>>;
}>>, unknown> & {
    ...;
} & DecorateRouter & {
    ...;
}useUtils();

  const const myMutation: UseTRPCMutationResult<{
    id: string;
}, TRPCClientErrorLike<{
    input: {
        id: string;
    };
    output: {
        id: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    id: string;
}, void>myMutation = const trpc: CreateTRPCReactBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    infinitePosts: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: {
                limit?: number | null | undefined;
                cursor?: number | null | undefined;
                direction?: "forward" | "backward" | undefined;
            };
            output: {
                items: {
                    id: string;
                    title: string;
                    status: string;
                }[];
                nextCursor: number | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        delete: MutationProcedure<...>;
    }>>;
}>>, unknown> & DecorateRouterRecord<...>trpc.infinitePosts: DecorateRouterRecord<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    list: QueryProcedure<{
        input: {
            limit?: number | null | undefined;
            cursor?: number | null | undefined;
            direction?: "forward" | "backward" | undefined;
        };
        output: {
            items: {
                id: string;
                title: string;
                status: string;
            }[];
            nextCursor: number | undefined;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
    delete: MutationProcedure<{
        input: {
            id: string;
        };
        output: {
            id: string;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>;
}>>infinitePosts.delete: DecoratedMutation<{
    input: {
        id: string;
    };
    output: {
        id: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>delete.useMutation: <void>(opts?: UseTRPCMutationOptions<{
    id: string;
}, TRPCClientErrorLike<{
    input: {
        id: string;
    };
    output: {
        id: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    id: string;
}, void> | undefined) => UseTRPCMutationResult<{
    id: string;
}, TRPCClientErrorLike<{
    input: {
        id: string;
    };
    output: {
        id: string;
    };
    transformer: false;
    errorShape: DefaultErrorShape;
}>, {
    id: string;
}, void>useMutation({
    async onMutate?: ((variables: {
    id: string;
}, context: MutationFunctionContext) => void | Promise<void>) | undefinedonMutate(opts: {
    id: string;
}opts) {
      await const utils: TRPCContextPropsBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    infinitePosts: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: {
                limit?: number | null | undefined;
                cursor?: number | null | undefined;
                direction?: "forward" | "backward" | undefined;
            };
            output: {
                items: {
                    id: string;
                    title: string;
                    status: string;
                }[];
                nextCursor: number | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        delete: MutationProcedure<...>;
    }>>;
}>>, unknown> & {
    ...;
} & DecorateRouter & {
    ...;
}utils.infinitePosts: DecorateRouter & {
    list: DecorateQueryProcedure<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, QueryProcedure<{
        input: {
            limit?: number | null | undefined;
            cursor?: number | null | undefined;
            direction?: "forward" | "backward" | undefined;
        };
        output: {
            items: {
                id: string;
                title: string;
                status: string;
            }[];
            nextCursor: number | undefined;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>>;
    delete: DecorateMutationProcedure<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, MutationProcedure<...>>;
}infinitePosts.list: DecorateQueryProcedure<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, QueryProcedure<{
    input: {
        limit?: number | null | undefined;
        cursor?: number | null | undefined;
        direction?: "forward" | "backward" | undefined;
    };
    output: {
        items: {
            id: string;
            title: string;
            status: string;
        }[];
        nextCursor: number | undefined;
    };
    meta: object;
    errorShape: DefaultErrorShape;
}>>list.function cancel(input?: {
    limit?: number | null | undefined;
    cursor?: number | null | undefined;
    direction?: "forward" | "backward" | undefined;
} | undefined, options?: CancelOptions): Promise<void>cancel();

      const utils: TRPCContextPropsBase<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{
    infinitePosts: BuiltRouter<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, DecorateCreateRouterOptions<{
        list: QueryProcedure<{
            input: {
                limit?: number | null | undefined;
                cursor?: number | null | undefined;
                direction?: "forward" | "backward" | undefined;
            };
            output: {
                items: {
                    id: string;
                    title: string;
                    status: string;
                }[];
                nextCursor: number | undefined;
            };
            meta: object;
            errorShape: DefaultErrorShape;
        }>;
        delete: MutationProcedure<...>;
    }>>;
}>>, unknown> & {
    ...;
} & DecorateRouter & {
    ...;
}utils.infinitePosts: DecorateRouter & {
    list: DecorateQueryProcedure<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, QueryProcedure<{
        input: {
            limit?: number | null | undefined;
            cursor?: number | null | undefined;
            direction?: "forward" | "backward" | undefined;
        };
        output: {
            items: {
                id: string;
                title: string;
                status: string;
            }[];
            nextCursor: number | undefined;
        };
        meta: object;
        errorShape: DefaultErrorShape;
    }>>;
    delete: DecorateMutationProcedure<{
        ctx: object;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: false;
    }, MutationProcedure<...>>;
}infinitePosts.list: DecorateQueryProcedure<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, QueryProcedure<{
    input: {
        limit?: number | null | undefined;
        cursor?: number | null | undefined;
        direction?: "forward" | "backward" | undefined;
    };
    output: {
        items: {
            id: string;
            title: string;
            status: string;
        }[];
        nextCursor: number | undefined;
    };
    meta: object;
    errorShape: DefaultErrorShape;
}>>list.function setInfiniteData(input: {
    limit?: number | null | undefined;
    cursor?: number | null | undefined;
    direction?: "forward" | "backward" | undefined;
}, updater: Updater<InfiniteData<{
    items: {
        id: string;
        title: string;
        status: string;
    }[];
    nextCursor?: number | undefined;
}, number | null> | undefined, InfiniteData<{
    items: {
        id: string;
        title: string;
        status: string;
    }[];
    nextCursor?: number | undefined;
}, number | null> | undefined>, options?: SetDataOptions): voidsetInfiniteData({ limit?: number | null | undefinedlimit: 10 }, (data: InfiniteData<{
    items: {
        id: string;
        title: string;
        status: string;
    }[];
    nextCursor?: number | undefined;
}, number | null> | undefineddata) => {
        if (!data: InfiniteData<{
    items: {
        id: string;
        title: string;
        status: string;
    }[];
    nextCursor?: number | undefined;
}, number | null> | undefineddata) {
          return {
            InfiniteData<{ items: { id: string; title: string; status: string; }[]; nextCursor?: number | undefined; }, number | null>.pages: {
    items: {
        id: string;
        title: string;
        status: string;
    }[];
    nextCursor?: number | undefined;
}[]pages: [],
            InfiniteData<{ items: { id: string; title: string; status: string; }[]; nextCursor?: number | undefined; }, number | null>.pageParams: (number | null)[]pageParams: [],
          };
        }

        return {
          ...data: InfiniteData<{
    items: {
        id: string;
        title: string;
        status: string;
    }[];
    nextCursor?: number | undefined;
}, number | null>data,
          InfiniteData<{ items: { id: string; title: string; status: string; }[]; nextCursor?: number | undefined; }, number | null>.pages: {
    items: {
        id: string;
        title: string;
        status: string;
    }[];
    nextCursor?: number | undefined;
}[]pages: data: InfiniteData<{
    items: {
        id: string;
        title: string;
        status: string;
    }[];
    nextCursor?: number | undefined;
}, number | null>data.InfiniteData<{ items: { id: string; title: string; status: string; }[]; nextCursor?: number | undefined; }, number | null>.pages: {
    items: {
        id: string;
        title: string;
        status: string;
    }[];
    nextCursor?: number | undefined;
}[]pages.Array<{ items: { id: string; title: string; status: string; }[]; nextCursor?: number | undefined; }>.map<{
    items: {
        id: string;
        title: string;
        status: string;
    }[];
    nextCursor?: number | undefined;
}>(callbackfn: (value: {
    items: {
        id: string;
        title: string;
        status: string;
    }[];
    nextCursor?: number | undefined;
}, index: number, array: {
    items: {
        id: string;
        title: string;
        status: string;
    }[];
    nextCursor?: number | undefined;
}[]) => {
    items: {
        id: string;
        title: string;
        status: string;
    }[];
    nextCursor?: number | undefined;
}, thisArg?: any): {
    items: {
        id: string;
        title: string;
        status: string;
    }[];
    nextCursor?: number | undefined;
}[]map((page: {
    items: {
        id: string;
        title: string;
        status: string;
    }[];
    nextCursor?: number | undefined;
}page) => ({
            ...page: {
    items: {
        id: string;
        title: string;
        status: string;
    }[];
    nextCursor?: number | undefined;
}page,
            items: {
    id: string;
    title: string;
    status: string;
}[]items: page: {
    items: {
        id: string;
        title: string;
        status: string;
    }[];
    nextCursor?: number | undefined;
}page.items: {
    id: string;
    title: string;
    status: string;
}[]items.Array<{ id: string; title: string; status: string; }>.filter(predicate: (value: {
    id: string;
    title: string;
    status: string;
}, index: number, array: {
    id: string;
    title: string;
    status: string;
}[]) => unknown, thisArg?: any): {
    id: string;
    title: string;
    status: string;
}[] (+1 overload)filter((item: {
    id: string;
    title: string;
    status: string;
}item) => item: {
    id: string;
    title: string;
    status: string;
}item.status: stringstatus === 'published'),
          })),
        };
      });
    },
  });

  // [...]
}