add types for manually typing hook results in userland code

[phryneas]

This has come up quite a bit, as just calling ReturnType on the hooks does not work - after all, depending on how the hook is called, it could be any kind of result. ( a lot in chat, but also for example in #1937).

This PR exports some types that can be used to manually declare these types.

This PR still needs docs & type tests, I just wanted to put it out here quickly as I had some time atm.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 2ff893c:

Sandbox	Source
Vanilla	Configuration
Vanilla Typescript	Configuration
rsk-github-issues-example	Configuration
@examples-query-react/basic	Configuration
@examples-query-react/advanced	Configuration
@examples-action-listener/counter	Configuration

[u900x600]

Thanks to @phryneas I ended up here here after some talk on the chat. Our use case to have access to hook result types is fairly simple: We have queries which depend on each other and we expect to have a bunch of them coming up. To illustrate that a bit:

import { createApi } from '@reduxjs/toolkit/query/react';

export const api = createApi({
  …
  endpoints: b => ({
    getA: b.query<{aid: string}, void>(…)
    getB: b.query<{bid: string}, { aid: string }>(…)
  })
});

export {
  useGetAQuery,
  useGetBQuery
} = api

in order to getB we need to getA in advance and pipe the result as argument into getB. The simple solution to this is to create a third hook, that does the chaining with the help of the skip or skipToken. Assuming that there are more endpoints getC ... getZ plus mutations postB … postZ which all depend on the data provided by getA this process can easily get repetitive and errorprone.

To come around this a »Higher Order Query Hook« will come in handy. So we started doing that and with the help of the source and the discord channel, I was able to setup something along those lines:

import { QueryDefinition, MutationDefinition } from '@reduxjs/toolkit/query';
import { UseQuery, UseMutation } from '@reduxjs/toolkit/src/query/react/buildHooks';

type QDef<QueryArg, ResultType> = QueryDefinition<QueryArg, any, string, ResultType, string>;

type MDef<QueryArg, ResultType> = MutationDefinition<QueryArg, any, string, ResultType, string>;

type QueryHook<A, B>  = UseQuery<QDef<A, B>>;
                                        | UseMutation<MDef<A, B>>;

const withAData = <A extends object, B>(query: QueryHook<A & { aid: string }, B>): QueryHook<A, B> => (arg, option) => …

But the above doesn't work with Query or Mutation, since there Return Type doesn't match. So, for now we have it working for queries, but to make it work for mutations as well we would need some more control over the return type.

Additionally it is cumbersome to use the existing types to create a proper constraint on the input argument(s).

The ability to create properly types abstractions over those query hooks would allow the creation of many primitives over queries: merging data, getC if getA otherwise getB - it would basically be the foundation to unlock reactive query combinators.