How to validate RTK Query responses properly

[aleburato]

Hi everybody, I'm currently enjoying RTK Query a lot, and I think the provided documentation is great.

However, I could not find the answer to one of my needs: validation, and where to put it.

The point is: when the server returns a 200:OK status response with a body (e.g.: I requested a Pokemon), I "don't trust" the server and would like to validate the response body against some custom rules (for example, check that the pokemon name is there etc.) and throw a custom error to let the rest of my code know that something is wrong.

If I try to use the transformResponse to perform such validation and throw an exception when it fails, everything works as expected and the isError and error properties in the useGetPokemonQuery hook get updated accordingly. However, I also get this message in the console:

An unhandled error occured processing a request for the endpoint "getPokemonByName".
In the case of an unhandled error, no tags will be "provided" or "invalidated". Error: OMG NO MUST HAVE NAME PROP!!1111

    at transformResponse (https://rozuw.csb.app/src/services/pokemon.ts:22:17)
    at eval (https://rozuw.csb.app/node_modules/@reduxjs/toolkit/dist/query/rtk-query.esm.js:768:24)
    at step (https://rozuw.csb.app/node_modules/@reduxjs/toolkit/dist/query/rtk-query.esm.js:171:17)
    at Object.eval [as next] (https://rozuw.csb.app/node_modules/@reduxjs/toolkit/dist/query/rtk-query.esm.js:120:14)
    at fulfilled (https://rozuw.csb.app/node_modules/@reduxjs/toolkit/dist/query/rtk-query.esm.js:227:24)

This is rather scary, so: where should I put my validation?

Sample here: https://codesandbox.io/s/nervous-field-64vr6

Thanks in advance to anyone who'd like to give me an answer!

[azangru]

Based on the docs, one way of handling this would be to use the queryFn method that returns an object with either a data field if the response is ok, or an error field if the response is invalid. But perhaps there exists something even more idiomatic?

[phryneas]

You could also throw in the transformResponse callback.

Sorry, read the second message before the first 😅

Yes, throwing in transformResponse is the appropriate thing here. And yes, it will break some things like not calling providesTags, but if your frontend-backend contract is violated, that will probably be the least of your concerns - after all it already means that the data is so corrupt that you could not just graciously recover from it.

[aleburato]

Thanks to you both. I think that while the queryfn way is the cleaner one, the solution suggested by @phryneas (i.e.: keep doing what you're already doing) is good enough for my needs. After all, as he says, when the fe/be contract is violated, you don't care for subtleties.