T
TanStack•2y ago
rare-sapphire

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 
// 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!
1 Reply
unwilling-turquoise
unwilling-turquoise•2y ago
Can you show a typescript playground please?

Did you find this page helpful?