Best way to use useInfiniteQuery with typescript

[qkreltms]

It is so frustrating to new users like me to use useInfiniteQuery with Typescript. So I implemented as an example for this:

https://codesandbox.io/s/react-query-useinfinitequery-be62c?file=/src/App.tsx

Do you think it is good for example of useInfiniteQuery with Typescript?

[danielbrauer]

Completely agree that useInfiniteQuery has frustrating types. I was able to switch to tsnext (as mentioned in the docs https://react-query.tanstack.com/docs/typescript) and I haven't had to specify anything for useInfiniteQuery. The downside is useMutation returns unknown for errors by default, so you either have to specify that type or cast it.

[sayinserdar]

I also had a rough time implementing the infiniteQuery. The example is quite vague in terms of variables and the main idea. I think the problem is the architecture of the API. Limiting/ Skipping base API would be more explanatory.

[danielbrauer]

While I agree the example isn't awesome, I think the API is good in part because it is unopinionated. Limit/skip isn't the only way to paginate a query, and it doesn't scale well as you skip further and further.

[sayinserdar]

I definitely agree with that but the thing is explaining a concept in a fairly known way. It doesn't really matter whether it scales or not cause you are just trying to understand an API/concept. It's also flexible enough to be used in different scenarios.

[danielbrauer]

Here is an example using tsnext with the HackerNews API, fetching items in groups of five: https://codesandbox.io/s/confident-dawn-67yb2?file=/src/App.tsx

[felix-bohlin]

Any more ideas on this topic?