typescript - Το pageParam του TanstackQuery V5 δεν υπάρχει στον τύπο

Έχω αυτόν τον κώδικα. Στην έκδοση v5 του TanStack αντιμετωπίζω πρόβλημα. Στην έκδοση v4 δεν υπάρχει αυτό το πρόβλημα.

const queryFn: QueryFunction<Awaited<ReturnType>>=({pageParam}) => notificationControllerGetNotification({cursor: pageParam, ...params}, axiosOptions);

TS2339: Η ιδιοκτησία 'pageParam' δεν υπάρχει στον τύπο '{ queryKey: QueryKey; signal: AbortSignal; meta: Record | undefined; }'.

Δεν βρήκα αυτό το σφάλμα στην τεκμηρίωση

`

export interface NotificationListEntity {
    createdAt: string;
    entityId?: string | null;
    entityType: NotificationEntityType;
    id: string;
    message: string;
    read: boolean;
    title: string;
    trigger: NotificationTrigger;
    type: NotificationType;
}

export const notificationControllerGetNotification = (
    params?: NotificationControllerGetNotificationParams,
    options?: AxiosRequestConfig,
): Promise<AxiosResponse<NotificationListEntity[]>> => {
    return axios.default.get(`/api/notifications`, {
        ...options,
        params: {...params, ...options?.params},
    });
};

export const getNotificationControllerGetNotificationInfiniteQueryOptions = <
    TData = Awaited<ReturnType<typeof notificationControllerGetNotification>>,
    TError = AxiosError<NotificationListEntity[]>,
>(
    params?: NotificationControllerGetNotificationParams,
    options?: {
        query?: UseInfiniteQueryOptions<
            Awaited<ReturnType<typeof notificationControllerGetNotification>>,
            TError,
            TData
        >;
        axios?: AxiosRequestConfig;
    },
) => {
    const {query: queryOptions, axios: axiosOptions} = options ?? {};

    const queryKey = queryOptions?.queryKey ?? getNotificationControllerGetNotificationQueryKey(params);

    const queryFn: QueryFunction<Awaited<ReturnType<typeof notificationControllerGetNotification>>> = ({pageParam}) =>
        notificationControllerGetNotification({cursor: pageParam, ...params}, axiosOptions);

    return {queryKey, queryFn, ...queryOptions} as UseInfiniteQueryOptions<
        Awaited<ReturnType<typeof notificationControllerGetNotification>>,
        TError,
        TData
    > & {queryKey: QueryKey};
};

Προσπαθώ να γράψω διαφορετικές επιλογές και επίσης να γράψω pageParam: TPageParam όπως στην τεκμηρίωση

Απάντηση #1

Από την έκδοση v5, ο τύπος QueryFunction έχει 3 γενικές παραμέτρους:

export type QueryFunction<
  T = unknown,
  TQueryKey extends QueryKey = QueryKey,
  TPageParam = never,
> = (context: QueryFunctionContext<TQueryKey, TPageParam>) => T | Promise<T>

Το TPageParam περνάει στο QueryFunctionContext, όπου θα καθορίσει αν το pageParam είναι διαθέσιμο κατά το χρόνο εκτέλεσης ή όχι:

export type QueryFunctionContext<
  TQueryKey extends QueryKey = QueryKey,
  TPageParam = never,
> = [TPageParam] extends [never]
  ? {
      queryKey: TQueryKey
      signal: AbortSignal
      meta: QueryMeta | undefined
    }
  : {
      queryKey: TQueryKey
      signal: AbortSignal
      pageParam: TPageParam
      direction: FetchDirection
      meta: QueryMeta | undefined
    }

αφού περνάς ένα τύπο παραμέτρου στο QueryFunction, οι άλλες δύο παίρνουν τις αντίστοιχες προεπιλεγμένες τιμές τους:

const queryFn: QueryFunction<Awaited<ReturnType<typeof notificationControllerGetNotification>>> = ({pageParam}) => ...

οπότε πρέπει να παρέχετε και τις 3 παραμέτρους τύπου:

const queryFn: QueryFunction<Awaited<ReturnType<typeof notificationControllerGetNotification>>, QueryKey, number> = ({pageParam}) =>

QueryKey και number είναι απλώς ένα παράδειγμα εδώ, καθώς δεν ξέρω πώς θα μοιάζει ένα έγκυρο pageParam για την περίπτωσή σας.

σε μια διαφορετική νότα: Δεν καταλαβαίνω πλήρως τι προσπαθείς να πετύχεις, αλλά φαίνεται περιττά περίπλοκο. Έχουμε επίσης μια βοηθητική συνάρτηση infiniteQueryOptions για να δημιουργήσεις επιλογές με τύπο ασφαλή, τις οποίες μπορείς μετά να περάσεις στο useInfiniteQuery...