ensureQueryData parameter type mismatch queryOption?
Hello all, thank you for your help in advance.
Trying to implement a paginated query in router loader following example repo as well as https://tanstack.com/router/v1/docs/guide/external-data-loading#a-more-realistic-example-using-tanstack-query
I can't quite figure out how to get ensureQueryData to be happy
TS does not like the query option, however
Thanks again!
Trying to implement a paginated query in router loader following example repo as well as https://tanstack.com/router/v1/docs/guide/external-data-loading#a-more-realistic-example-using-tanstack-query
I can't quite figure out how to get ensureQueryData to be happy
// loader
loader: async ({ context }) => {
const token = localStorage.getItem("fesapp");
if (token) {
const options = actionsQueryOptions(1, token);
await context.queryClient.ensureQueryData(options);
}
// query
export function actionsQueryOptions(page: number, token: string) {
return queryOptions({
queryKey: ["actionButtons", page],
queryFn: async () => {
if (!token) {
throw new Error("Authentication token not found");
}
const params: FetchPaginatedListingsParams = { page, limit: 9 };
return await fetchPaginatedListings(params, token);
},
});
}
export const fetchPaginatedListings = async (
{ page, limit }: FetchPaginatedListingsParams,
token: string,
): Promise<Actions> => {
const response = await fetch(
`${url}/api/action-phrases/paginated-list?page=${page}&limit=${limit}`,
{
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
},
);
if (!response.ok) {
throw new Error("Network response was not ok");
}
const data = await response.json();
return data as Actions;
};// loader
loader: async ({ context }) => {
const token = localStorage.getItem("fesapp");
if (token) {
const options = actionsQueryOptions(1, token);
await context.queryClient.ensureQueryData(options);
}
// query
export function actionsQueryOptions(page: number, token: string) {
return queryOptions({
queryKey: ["actionButtons", page],
queryFn: async () => {
if (!token) {
throw new Error("Authentication token not found");
}
const params: FetchPaginatedListingsParams = { page, limit: 9 };
return await fetchPaginatedListings(params, token);
},
});
}
export const fetchPaginatedListings = async (
{ page, limit }: FetchPaginatedListingsParams,
token: string,
): Promise<Actions> => {
const response = await fetch(
`${url}/api/action-phrases/paginated-list?page=${page}&limit=${limit}`,
{
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
},
);
if (!response.ok) {
throw new Error("Network response was not ok");
}
const data = await response.json();
return data as Actions;
};TS does not like the query option, however
Argument type UseQueryOptions<Action[], Register extends {defaultError: infer TError} ? TError : Error, Action[], (string | number)[]> & {initialData?: undefined} & {queryKey: DataTag<(string | number)[], Action[]>} is not assignable to parameter type FetchQueryOptions<unknown, DefaultError, undefined, (string | number)[] & {dataTagSymbol: Action[]}>Argument type UseQueryOptions<Action[], Register extends {defaultError: infer TError} ? TError : Error, Action[], (string | number)[]> & {initialData?: undefined} & {queryKey: DataTag<(string | number)[], Action[]>} is not assignable to parameter type FetchQueryOptions<unknown, DefaultError, undefined, (string | number)[] & {dataTagSymbol: Action[]}>Thanks again!
