React query selectors for useInfiniteQuery that return extra properties aren't recognized
Created a playground below but I'm basically trying to have a selector that returns a flatmap of a response. However it keeps throwing an overload error or says the property I created doesn't exist or when I add all the properties from the data response + some extra information, then TS doesn't recognize the extra properties.
I'm using TS vs 5.1 and reactQuery v4 (though on playground it's reactQuery v5)
https://www.typescriptlang.org/play/?target=6&ts=5.1.6#code/JYWwDg9gTgLgBAbzgVwM4FMCSA7AZsbYGdARWXSgE84BfOXKCEOAcinQEMBjGAWgEdyVFgFgAUOJiUw6OACV0qSNgxwAvInFxtcRgHdUALjioYUAgHMA2gF1xNcVwgr4SACYcYHWupQYc+ITEZBSUADwKSs4YAHwAFAhaOoKhANLolMZWLASBRKRClCw2ADRJ2ilUAGLYxnEAlOoxcAAKjCDAGAB07KgQADYAbugJ+kZwVgBEABbAkzY09WViOibo-eg8dR5ejWrNiSurOk4uuhAGvjscXWAcFopduP2eALIcYHF3D01w3+g9C6oADc5WOAHpwbp0DBkFBsIgxg4jsdobD4YigcjVsjFuJ8WJTqZEHBrsZPMRwDAAEw+DRoLB4Aj5EJUCKKZSxBJgyqUdKZCY5JlBAqhYrLVa8mp1PbNNpMToA3oDYajIFZGZzBZLMEYDZbOBxa6yzQo45E+BjK6eG7-VBPF4wd6ff6-f6Agygs2rSFouEIhBIsGrdjogPB1F-e6KYzXW7R1ASyOrf4tDhQDggcZx1PpzOJiOosaF2hg3H1cQU9BU6kAfg9qDgvqtbggimwLHg6AAHp0YABCIA
TS Playground - An online editor for exploring TypeScript and JavaS...
The Playground lets you write TypeScript or JavaScript online in a safe and sharable way.
7 Replies
wise-white•11mo ago
your sandbox uses
react-query, which is v3. v4 & v5 are available as @tanstack/react-query
select was changed in v5 to support transforming into arbitrary data, so it won't work in v4
https://www.typescriptlang.org/play/?target=6&ts=5.1.6#code/JYWwDg9gTgLgBAbzgVwM4FMCSA7AZsbYGdARWXSgE84BfOXKCEOAcgAEYBDbVLgYwDWAeijpOfGAFoAjuSosAsAChlfCD3iyK1ALwoMOfIWJltACgTK41uFqoBpdJQBccANosCRoqTmUWALoANFY2dpQAYtiuZgCUcDoAfHAACowgwBgAdKKoEAA2AG7oFowA7qiubgBEABbA1QE0sSFKNnAERMCc+SmcAObofVCcIK4AjK3tgzAAcugAHjB9g8OjMfFJKNgAJuhG6DtTNhj56BIxO5xcm8mWbe02ahpw5agJcFdcWWAD6KhZXD5a4AWU4YDMv0GCWSUPQOQgFViAG5Qo9XugYMgoNhEPQIBBXEg3rQaGjaK1msplOEsl9OMohEJ0QA9AD8QATS Playground - An online editor for exploring TypeScript and JavaS...
The Playground lets you write TypeScript or JavaScript online in a safe and sharable way.
ratty-blushOP•11mo ago
So is the answer, that it's just not supported in v4?
wise-white•11mo ago
yes
we released v5 one year ago so please update 🙂
ratty-blushOP•11mo ago
Unfortunately, it's a pretty big organization. So updating across the board is not an option. Big shame that v4 doesn't support partial selects with typescript
Also figured this out. I was able to useQuery has the
TData param. I created a hook that accepted a generic function (selector) and made it so that Tdata pointed to the return value of that Fn.wise-white•11mo ago
"Big shame"? For real, comments like this are the WORST part of open source 🙄
ratty-blushOP•11mo ago
Didn't mean for that to be offensive. Was just saying it's a shame. v4 docs specify that select, " can be used to transform or select a part of the data returned by the query function" to specify that but then not be compatible with TS is odd. That's saying that anyone who used TypeScript and React Query in v4, which was only moved away from a year ago, couldn't use selects and get proper typings.
A year is not much for giant or codebases that have been around for a long time. Some of which even struggle to update react versions. So giving an answer of "just update" is much easier said then done.
ratty-blushOP•11mo ago
Also providing a workaround solution for anyone who see's this thread. It's a bit hacky as it forces the type but basic idea is that you type the select function as a generic that defaults to returning the default of useInfiniteQuery.
Then Omit data from the result and type data as either undefined or the ReturnType of the select fn. See example;
This was only way I found without updating library itself as the even trying to type
TData which is the third argument of useInfiniteQuery, it would always get wrapper in InfiniteData
https://www.typescriptlang.org/play/?target=6&ts=5.1.6#code/JYWwDg9gTgLgBAbzgVwM4FMCSA7AZsbYGdARWXSgE8AaOHfQ4gEQEMYW4BfOXKCEOAHIo6FgGMYAWgCO5KoICwAKFCRYcAEqiJPPgOHaYggNzLlYiNlTwAJugA2LSnAC8cABR3HlHCFQAuOGxkEAAjCgBKVwA+RGU4BLgRGGQobCD0AHc4AAU9YAx3EVQIewA3dBi4DBgAFVB0CGQYIvQS8vRaLydfVAiI0yVOQeUYSjBKsgpKADFsLVRIK0q3YLCKAG0AXUGxibgmdFwWZHsYAGUHdB03d3jEmzYWQPoCInRWdgAeKao5haWGGiyiiLlir0YHyePzks3mbUB6GigwsVngaFIsIA6lAWGAJlBXHAvvcEpd7NcYHM4OgAB7EbA2VAeUmJBKPdgvPBvZjQ35wgGWIGs0GxFjYZxuQ7HU4XK4SZTRdwIVkYCkSajKTiBFVKNlqykAfkC5Mpc0G3DcCE4oriesSqOsSTasqJGIh735MOm-wRQqRytZbNk0wA0uhKIENoIABYOewQQRbTX2tkJEN-bCBFioSjYMQeW26tMluAsTIsIhwbqUdwAJgADA2BkHS8lUukNgBGWh12gAZh2rYSnBTpeq8pgY8SNsGbPbaWdqFdObgAHkQEQvntGrgl7LaIIOSxBLEAGR28fHwLIRlHAjoGxwAA+mnQKTStXG6C+pokc2RVlhi1EYlEdeA43sBMsWgewbD-KkADkiXcAB9a86G5SFPhYb1M0FZZoiLVkAHoSJpWkWHACk4AgPcF0IbAAHM4EyGM2HQCpCUoJpWPFGBWQYoRIOg2CbEEMtmXAi1QPAuBajaGAAGF+CWdBsHgW5iNTOA5IQDDjyxIgYwQy0UAwfkcTxAlAx0-VJ0CESIBgqA4IQmZEOnEcWx0sigggGkoD4QlJHk84JzaOAYBjApJLLOBIFQVBgFCYB7CIShWWAPdPCeIzooQ1wXDcWN42csTBCiYsZ1I8iAAEYFQSQ6QmCRmqC6A4FCsAWCYyKbAgSLsAgeA6QKeBMmMghqhgKACBY0LUBjCBMmZIhBGZTJoAAa3mrKcsM4yEIAOh6vq+kQTgzB0vSDLy4ymjldUYDMjFLNxfEKHcHy2T8pamjg-yIJYCpAuC5lxSfDBKirVdosqOwZTOOACAYT1YX2jxDuix6EMNU7eraKqrqUQT3w7YkYy7aInNYsSvhIqngSGQYgATS Playground - An online editor for exploring TypeScript and JavaS...
The Playground lets you write TypeScript or JavaScript online in a safe and sharable way.