useListData with Tanstack Query

[writes-of-spring]

Hey!

when using data returned from a tanstack query hook as initial data in the useListData hook is always returning an empty list in the returned properties.

 const { data = [], isLoading, isError } = useQuery(farmsQueryOptions);
 const list = useListData({
    initialItems: data,
    getKey: (item) => item.id,
  });

I know there's useAsyncList but was trying to use useListData combined with tanstack query for cache invalidation / synchronisation, and it can be worked around by fetching data and passing it into a useListData component, but was wondering if I'm missing anything simple!

Thanks

[reidbarber]

By using data = [] it looks like you're destructuring it as an empty list.

[writes-of-spring]

That sets the default value in case data is undefined, and the initial render data is undefined. I've tried it without too though,

Is initialItems cached to the first render?

[reidbarber]

To set the default data, I think you want to pass initialData into useQuery.

And yes, initialItems is meant to be for initial render, so I'm not sure using these two hooks together will work if the data isn't ready.

[writes-of-spring]

Good to know, child component it is!

Thank you