Theo's Typesafe Cult•2y ago

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

elpupperOP•2y ago

useAsyncList is from nextui

elpupperOP•2y ago

https://react-spectrum.adobe.com/react-stately/useAsyncList.html

useAsyncList

Documentation for useAsyncList in the React Stately package.

elpupperOP•2y 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

Gaming

Programming

Replace fetch with trpc useQuery