fix(react-query): fix useInfiniteQuery placeholderData types

[SSHari]

Ensure that useInfiniteQuery and useSuspenseInfiniteQuery use explicit types rather than inferred generic types.

Closes #4360
Bounty: /claim #4360

🎯 Changes

Problem

This problem looks to be the result of our relying on a default generic parameter (e.g.):

function myFunction<Generic = string>() {}

The problem is that the way the default parameter seems to be working is that TypeScript uses the default (i.e. string) unless it can infer the type by some other means.

In this case, we set the default value of TData to inferTransformedProcedureOutput<TProcedure>, however, by returning a different type from the placeholderData, TypeScript tries to help us out and infer the type from what it returns. This inference supersedes the default parameter type inferTransformedProcedureOutput<TProcedure>.

I put together a minimal example using the TS Playground to help illustrate what I mean. Essentially, TypeScript only uses the default parameter if it can't infer another type by some other means.

Solution

I'm making a bit of an assumption here which is why I'm opening this PR as a draft PR, so that a discussion can be started. Based on the idea that TRPC is intended to help create type safety by inferring types off of the router, I'm not sure there's a reason we would want to allow the types for these hooks to be overridden.

For example, I'm not sure we would expect to see the following:

type CustomData = {};

function MyComponent() {
  // Does it make sense to explicitly pass types to the hook if we're expecting the hook to infer types from the router?
  trpc.post.list.useInfiniteQuery<CustomData, CustomData>(input, opts);
}

Assuming that's true, then the question is why do we use generic types for the hooks. My thought is that there are two advantages:

1. Reduces duplication because you can reuse the same name in multiple places
2. Somewhat serves as documentation because we can rename a type before passing it to React Query which helps show how we intend to use the type

I'm not sure how important the above two points are, but if we prefer to keep them, then an alternative solution would be to explicitly constrain the generic parameter so that invalid types can't be inferred from the placeholderData return:

type Example = {
  useInfiniteQuery: <
    _TQueryFnData = inferTransformedProcedureOutput<TProcedure>,
    // The `extends` makes sure you can't return invalid data from the `placeholderData`
    TData extends inferTransformedProcedureOutput<
      TProcedure
    > = inferTransformedProcedureOutput<TProcedure>
  >(
    input: Omit<inferProcedureInput<TProcedure>, "cursor">,
    opts?: UseTRPCInfiniteQueryOptions<
      TPath,
      inferProcedureInput<TProcedure>,
      TData,
      TRPCClientErrorLike<TProcedure>
    >
  ) => UseTRPCInfiniteQueryResult<TData, TRPCClientErrorLike<TProcedure>>;
};

I also noticed that the useQuery hook also allows you to return anything from the placeholderData. I would think that we'd want to restrict this so you have to return the correct type for the placeholderData for all of the query types. That said, I held off on making more changes until we can confirm a path forward.

Note: If my initial assumption is wrong and we actually do want to be able to use any type for the hook's generic parameter (i.e. trpc.post.list.useInfiniteQuery<CustomData, CustomData>(input, opts);), then neither of these proposed changes will work.

✅ Checklist

• I have followed the steps listed in the Contributing guide.
• If necessary, I have added documentation related to the changes made.
• I have added or updated the tests related to the changes made.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
www	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 24, 2023 9:07pm

[vercel]

@SSHari is attempting to deploy a commit to the trpc Team on Vercel.

A member of the Team first needs to authorize it.