Type assertion failure when trying to return spread UseQueryResult

[lisherwin]

I'm trying to implement a custom hook that performs a transform on a query result, and have the custom hook return the exact same UseQueryResult type as the underlying query result that it calls i.e. UseQueryResult<Friend, unknown>:

export function useFriend(): UseQueryResult<Friend, unknown> {
  const friendQueryResult = useQuery(["friend"], () => {
    return { name: "bob", numArms: 2 };
  });
  // compiler error: type is not compatible even though the overridden data has the same type as friendQueryResult's data
  return { ...friendQueryResult, data: { name: "alice", numArms: 2 } };
  // adding this type assertion was the only way I could do this but type assertions are evil.
  // return { ...friendQueryResult, data: { name: "alice", numArms: 2 } } as UseQueryResult<Friend, unknown>;  // only this works.
}

However, even though the overridden data is the same shape as friendQueryResult's data, the compiler is complaining that the return type is not compatible with UseQueryResult<Friend, unknown>. Is there any way to do this without introducing this type assertion? Thank you in advance 🙏

Here is a sandbox with the compiler error:
https://codesandbox.io/s/late-bird-1mnjqh?file=/src/App.tsx

[TkDodo]

I think that's because data is part of the large discriminated union type. If you add data unconditionally, the type needs to be a QueryObserverSuccessResult. So you'd also have to set status and derived booleans accordingly.

That is insanely unnecessary 😅 , but it would look something like this (ported to v4): https://codesandbox.io/s/thirsty-wescoff-vhxbw7?file=/src/App.tsx:523-802

The easiest thing to do is to just remove the return type annotation from your custom hook and let typescript infer the complex union type.

also, depending on what you'd like to transform, the select option might be better suited.

[lisherwin]

Thanks @TkDodo! I should have clarified my use case a bit more.

The transformation I'm doing actually returns the result of two (independent) query hooks. So the transformation merges the results of two query hooks. Something like:

export function useFriendWithMoreArms(): UseQueryResult<Friend, unknown> {
  const friendQueryResult = useFriend();
  const { data: friend } = friendQueryResult;
  const { data: armsToAdd = 0 } = useArmsToAdd();
  const friendWithMoreArms = friend
    ? { ...friend, numArms: (friend?.numArms ?? 0) + armsToAdd }
    : undefined;
  return {
    ...friendQueryResult,
    data: friendWithMoreArms
  };
}

(Apology for the odd example 😄) I was unable to do these fetches in a select function because query hooks can only be called in custom hooks/components. Not sure if I'm missing anything. Sandbox here: https://codesandbox.io/s/kind-cherry-ymghzz?file=/src/App.tsx:759-1161.

Regarding the return type, I also wanted the declared types because I'm building a shared library of query hooks, something like:

interface Hooks {
  useFriend(): UseQueryResult<Friend, unknown>;
  useArmsToAdd(): UseQueryResult<number, unknown>;
}
...

and it would be neat to have the return types declared so that consumers of this query hooks library are able to see the UseQueryResult type at top-level and not the complex union type. It seems like this isn't possible without setting the derived booleans and status explicitly?

Appreciate in advance any thoughts on this use case and if I'm missing anything obvious 🙏

[TkDodo]

I've transformed your example to use the select option:

https://codesandbox.io/s/cold-cherry-9noby4?file=/src/App.tsx

This works a lot better with fewer lines of code and is also easier on the types