Replace fetch with trpc useQuery
async function load({ signal }: { signal: AbortSignal }) {
const res = await fetch("https://swapi.py4e.com/api/people/?search", {
signal,
});
const json = await res.json();
return {
items: json.results,
};
}
async function sort(...)
const list = useAsyncList({ load, sort }); async function load({ signal }: { signal: AbortSignal }) {
const res = await fetch("https://swapi.py4e.com/api/people/?search", {
signal,
});
const json = await res.json();
return {
items: json.results,
};
}
async function sort(...)
const list = useAsyncList({ load, sort });I tried to just replace everything in the load function with
const { data } = api.teachers.getAll.useQuery();
return {
items: data,
} const { data } = api.teachers.getAll.useQuery();
return {
items: data,
}to my surprise this didn't work the objects look the same in console when i did console.log()
I do get a red line tho in
const listconst listType '({ signal }: { signal: AbortSignal; }) => Promise<{ items: Teacher[] | undefined; }>' is not assignable to type 'AsyncListLoadFunction<any, string>'.
Type 'Promise<{ items: Teacher[] | undefined; }>' is not assignable to type 'AsyncListStateUpdate<any, string> | Promise<AsyncListStateUpdate<any, string>>'.
Type 'Promise<{ items: Teacher[] | undefined; }>' is not assignable to type 'Promise<AsyncListStateUpdate<any, string>>'.
Type '{ items: Teacher[] | undefined; }' is not assignable to type 'AsyncListStateUpdate<any, string>'.
Types of property 'items' are incompatible.
Type 'Teacher[] | undefined' is not assignable to type 'Iterable<any>'.
Type 'undefined' is not assignable to type 'Iterable<any>'.ts(2322)
types.d.ts(109, 5): The expected type comes from property 'load' which is declared here on type 'AsyncListOptions<any, string>'Type '({ signal }: { signal: AbortSignal; }) => Promise<{ items: Teacher[] | undefined; }>' is not assignable to type 'AsyncListLoadFunction<any, string>'.
Type 'Promise<{ items: Teacher[] | undefined; }>' is not assignable to type 'AsyncListStateUpdate<any, string> | Promise<AsyncListStateUpdate<any, string>>'.
Type 'Promise<{ items: Teacher[] | undefined; }>' is not assignable to type 'Promise<AsyncListStateUpdate<any, string>>'.
Type '{ items: Teacher[] | undefined; }' is not assignable to type 'AsyncListStateUpdate<any, string>'.
Types of property 'items' are incompatible.
Type 'Teacher[] | undefined' is not assignable to type 'Iterable<any>'.
Type 'undefined' is not assignable to type 'Iterable<any>'.ts(2322)
types.d.ts(109, 5): The expected type comes from property 'load' which is declared here on type 'AsyncListOptions<any, string>'
