Reusing query function for useQuery and useInfiniteQuery in v5

[henribru]

In v4 we've sometimes been reusing the same query function for both useQuery and useInfiniteQuery by using pageParam if it's defined and otherwise using a page from the query key: https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ4A0KGAkgHYBmwZwMWO+R2ueAYsmQMYzARkDCfOgA94AXzgUoEEHADkAARgBDMqhWcA1gHoAbjgC0ARwZ45AWABQoSLDjLhvVJOmyARA6duA3FasUObl4yOABzdBhWCAhUAAorOEQwZXCABWUoZRAiExYAaXQ8AC44AG0iBGTwsQBdMRLmfHYuHj5BMhEYAB4AJXRlABM+ABs8LtL1KGpQiqr0AH4SsmQQACNcWoA+TasASkQEuCgI5CgQzxiAOnDuypT0JZX1qCIKaNQSyenSus3YgAMABYwGBgD7abToYRZMDDdCXTgybT-WYZLIfJL3EpzdKZWTzeZwOZiMS7Q6JS4wQHoMixY6oSBqdBwAC8myO6AZfAwlwGyhUu18ljEfksaHoLFiCEOuXwBWKZTkbwgclR4RKAEZavZnIi1DACDLTKwyCUblEYobhWTLFZxeQqDQ6I08FKjflCiVSnJqI7aOgLarENrlLruQbDtRaMBlMN0mk0SBNVbErK2KawhELagU5mYAA5KEwePoXFZEqxYah4v3fZsuBV9Qly5zOAAajgGqspKAA

As you can see, this now gives a type error because without passing the second generic to QueryFunctionContext, pageParam doesn't exist on the object. I thought maybe I could just add number | undefined as the second generic, but that causes an error for the useQuery call: https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ4A0KGAkgHYBmwZwMWO+R2ueAYsmQMYzARkDCfOgA94AXzgUoEEHADkAARgBDMqhWcA1gHoAbjgC0ARwZ45AWABQoSLDjLhvVJOmyARA6duA3FasUObl4yOABzdBhWCAhUAAorOEQwZXCABWUoZRAiExYAaXQ8AC44AG0iBGTwsQBdMRLmfHYuHj5BMhEYAB4AJXRlABM+ABs8LtL1KGpQiqr0AH4SsmQQACNcWoA+ImW13DgAHxQyAfQqMnQBzasASkQEuCgI5CgQzxiAOnDuypT0JZW6ygRAo0VQJUm01KdU2sQABgALGAwMDg7TadDCLJgYboD6cGTaOGzDJZcFJP4lObpTKyebzOBzMRiG4PRIfGAI9BkWJPVCQNToOAAXk2j3Q-L4GA+A2UKhuvksYj8ljQ9BYsQQD1y+AKxTKclBEDkJPCJQAjLV7M4CWoYARtaZWGQSt8ojEHUrWZYrGryOdaOr8JrHflCiVSnJqAG6O6TYgrcobVL7Q9qLRgMphuk0qSQBbPYkdWwXWEIu7UIWyzAAHKYmA59A0rIlWLDJMNv53UVwdvqRsfOZwADUcHNVhZQA

Is there a nice way to salvage this approach in v5? I could refactor it to something like this, but it's a bit clunky (and it triggers #6177): https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ4A0KGAkgHYBmwZwMWO+R2ueAYsmQMYzARkDCfOgA94AXzgUoEEHADkAARgBDMqhWcA1gHoAbjgC0ARwZ45AWABQoSLDjLhvVJOmyARA6duA3FasUObl4yOABzdBhWCAhUAAorOEQTFgBpdDwALjgAbSIEMGVwsQBdMSzmfHYuHj5BMhEYAB4AJXRlABM+ABs8Ruz1KGpQvILwrLJkEAAjXBKAPjmrAEpEBLgoCOQoEM8YgDpwpvzC9HHJmagiCmjULIGh7NK52IADAAsYGDBb7W10YWU4C66D2nBk2heI2UUEBt0Qo3QYjESzWiT2MDe6DIsQ2qEganQcAAvHN1ug8XwMHt2soVEtfJYxH5LGh6CxYgg1sl8GlMjk5NcIHIoWM4ABGEr2ZxgtQwAhc0ysMhZQ5RGLyxkoyxWVnkKg0OgVPAchWpdJZbJyaj62joNXCxCS5TSylytbUWjAZRdAAKJz9MJAWTFGsS3LYyrgHIRAcBRHDvKIe2TMoayOJpNVNw5ydBQn+crgCfNOWLeGyAAZinlc2XsmLq3AEVkY9DASVkaGwhEAHIFv3hWNBqNdZ0wAfoFYkuCj9QTvYIuAAanFVmRQA

Edit: I guess I can make the parameter a union of the two possible contexts and check if pageParam is present, which seems nicer than the other refactor, even if it's not as nice as the original code: https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ4A0KGAkgHYBmwZwMWO+R2ueAYsmQMYzARkDCfOgA94AXzgUoEEHADkAARgBDMqhWcA1gHoAbjgC0ARwZ45AWABQoSLDjLhvVJOmyARA6duA3FasUObl4yOABzdBhWCAhUAAorOEQTFgBpdDwALjgAbSIEMGVwsQBdIgA6Cs4hdFExLOZ8di4ePkEyERgAHgAldGUAEz4AGzxO7PUoalC8gvCAfiyyZBAAI1wSgD4iJdXcDbgAHzgGtkCWgWrRHr7BshGxiamZwvQFuB21qE2NqwBKRAScCgEWQUBCnhiZXCXXyL0Wy0+RAo0VQWUeZFC2WKYg2sQABgALGAwMCo7TaGrKcBDdBlKogbR455QKmoxCzdBZNwcgAKyhZIDccGocCq7Rq8DmosuMDKvP5VLgWQ5YjEv0BiTKMAJ6DIsWBqEganQcAAvPsDUaMGV+soVL9fJYxH5LGh6CxYghAcl8GlMjk5MiIHJnuEsgBGEr2Zxi9QEb2mVhkLLQqIxeNO9WWKxu8hUGh0E6ehOpdJZbJyaj52joNMhxBR5QxvhxwHUWjAZRDPnhPkCiMZxI+tjJsIRNOoQdjmAAOQlPfQfapWViQybMAX-3NcDX6gXcpecAA1HBw1Y1UA

[TkDodo]

I guess I can make the parameter a union of the two possible contexts and check if pageParam is present, which seems nicer than the other refactor, even if it's not as nice as the original code

yeah that works, it's generally two different query contexts, and only one has pageParam at runtime. However, I would suggest to only abstract away the thing that is actually unified, which is the call to axios and thus de-couple it from the QueryFunctionContext. With inline functions, you also get type inference for the context:

https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ4A0KGAkgHYBmwZwMWO+R2ueAYsmQMYzARkDCfOgA94AXzgUoEEHADkAARgBDMqhWcA1gHoAbjgC0ARwZ45AWABQoSLDjLhvVJOmyARA6duA3FasUObl4yOABzdBhWCAhUAAowZXCALjgyZBAAI1wASisEKzg4KAjkKBDPGIA6cJgAHgQE5NT0rKgiCmjUFPUoalCAbQBdMQA+WIADAAsYGDAu7W10YWVwABt0Ss4ZbXGiBuUoFa7EOEb0ODExXMtCwsqYSfQyWOLUSDVzgF4RovQ3vgwlQAJsoVNlfJYxH5LGh6CxYvkbnATCwANLoPApfpyDoQOR7M4pACMYkG9mcWzUMAIBWRplYZBSCLpaIxWIJiXQpIu2Tg3zCESiMXinOyNMh1yssPIVBodGY+ARtJR+HRmLg2Oosto6CF+MQ3OUFIB1Np1FowGUqwACpzbYcQMTxYUVWxGXBmWd7SseXyfjUhXEvQcVmLaTUAHJLGC28Lex0e1ZGmOiv1wJPqWMbM5wADUcCJViuQA

I can see that this also triggers #6177, I'll take a look in a bit, because this approach works in the react adapter:

https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1QJ4A0KGAkgHYBmwZwMWO+R2ueAYsmQMYzARkDCfOgA94AXzgUoEEHADkAARgBDMqhWcA1gHoo6ZdwC0ARwZ45AWABQoSLDjLhvVJOmyARI+fuA3NesUHNy8ZHAA5ugwrBAQqAAUYMoRAFxwZMggAEa4AJTWCNZwcHowyFChXrEAdBEwADwIiSlpGdlQRBQxqKnqUNRhANoAumIAfHEABgAWMDBg3dra6MLK4AA26FWcMtoTRI3KUKvdiHBN6HBiYnlWRUVVMFPoZHF6qJBqFwC8o8Xo73wMFUACbKFQ5PxWMT+KxoegsOIFW5wUwsADS6DwqQGck6EDk+3OqQAjGIhg4XNs1DACIUUWZWGRUoj6ejMdjCUl0GTLjk4D9wpForEElycrSoTdrHDyFQaHRmPhEXTUfgMVi4DjqHLaOhhQTEDzlJTATS6dRaMBlGsAApcu1HEAkiVFVVsJlwFnnB2rXn8361YXxb2HVbium1AByyxgdoiPqdnrWxtjYv9cGT6jjm3OcAA1HBidZrkA

[henribru]

I guess that works, but we've actually structured all our query functions to accept the full context after inspiration from your blog post 😅

[TkDodo]

I think I don't really anticipated using the same fetch-function for infinite and normal queries, and us doing a change in the typings in v5 that makes type-inference for pageParam work (it was just any before), but coincidentally breaks the combination of the two things 😅