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 list
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>'
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>'
3 Replies
elpupper
elpupper14mo ago
useAsyncList is from nextui
elpupper
elpupper14mo ago
useAsyncList
Documentation for useAsyncList in the React Stately package.
elpupper
elpupper14mo ago
for anyone wondering this is what i did to solve this
const { data } = api.teachers.getAll.useQuery();

async function load({ signal }: { signal: AbortSignal }) {
const list = JSON.parse(JSON.stringify(data));
return {
items: list,
}
}

useEffect(() => {
list.reload();
}, [data]);
const { data } = api.teachers.getAll.useQuery();

async function load({ signal }: { signal: AbortSignal }) {
const list = JSON.parse(JSON.stringify(data));
return {
items: list,
}
}

useEffect(() => {
list.reload();
}, [data]);
works amazing