Access QueriesOptions type #3242

jmsims2 · 2022-01-28T16:23:25Z

jmsims2
Jan 28, 2022

Is there a way to access the type QueriesOptions? I'm working on wrapping useQueries and would like to type the argument the same way. Thanks for any help!

jmsims2 · 2022-01-28T16:28:27Z

jmsims2
Jan 28, 2022
Author

And if there isn't, but you all are open to it, happy to make a PR?

EDIT: Sorry, looks like I didn't have the latest version. I have the type now. But still getting the TS error below, so any help there would be greatly appreciated!

EDIT 2: Think I confused myself...looks like it's not exposed, so maybe a PR would be welcome?

0 replies

jmsims2 · 2022-01-28T16:48:37Z

jmsims2
Jan 28, 2022
Author

EDIT: Got this working by casting the map to as [...QueriesOptions<T>] ended up working. The rest of our problem is our own making by not typing our other wrapper functions correctly (we wrap useQuery and useMutation). So I think we'd just need to get QueriesOptions exposed as a type.

Hmm, actually just playing with this locally seems I'm missing something still. Exposed QueriesOptions and am getting a TS error.

Here is our wrapped hook. We essentially just add a connector to the query functions context. It's just a little fetch helper that adds a bunch of headers and handles some auth logic. It looks like:

export function useConnectorQueries<T extends any[]>(
  queries: [...QueriesOptions<T>]
) {
  return useQueries<T>(
    queries.map((query) => {
      const { queryFn, queryVariables, queryKey, ...rest } = query
      return {
        queryKey,
        onError,
        ...rest,
        queryFn: ({ queryKey }) => {
          const [_key, ...args] = queryKey
          return queryFn?.call({ connector }, ...args)
        }
      }
    })
  )
}

But that gives this TS error and I'm not sure where I'm going wrong?

Argument of type '({ queryKey: any; onError: (error: any) => void; } & Omit<(T extends [] ? [] : T extends [infer Head] ? [GetOptions<Head>] : T extends [infer Head, ...infer Tail] ? [...Tail] extends [] ? [] : [...Tail] extends [infer Head] ? [...] : [......] extends [...] ? [......] extends [] ? [] : [......] extends [...] ? [...] ...' is not assignable to parameter of type 'readonly [...T extends [] ? [] : T extends [infer Head] ? [GetOptions<Head>] : T extends [infer Head, ...infer Tail] ? [...Tail] extends [] ? [] : [...Tail] extends [infer Head] ? [GetOptions<Head>, GetOptions<Head>] : [......] extends [...] ? [......] extends [] ? [] : [......] extends [...] ? [...] : [......] exte...'.
  Target requires 1 element(s) but source may have fewer.

 13     queries.map((query) => {
        ~~~~~~~~~~~~~~~~~~~~~~~~
 14       const { queryFn, queryVariables, queryKey, ...rest } = query
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
... 
 23       }
    ~~~~~~~
 24     })

4 replies

TkDodo Jan 30, 2022
Maintainer

how do you import QueriesOptions because I don't see it being exported ...

jmsims2 Jan 30, 2022
Author

I modified the library locally to see if it would work. If it's something you all are ok with, could make a PR to export that type?

TkDodo Jan 30, 2022
Maintainer

yes, we should export it. Thank you

jmsims2 Jan 31, 2022
Author

@TkDodo Added a PR here: #3251

I think I followed the contribution guidelines correctly and seemed all I had to do was add the export and the build types script takes care of the rest? Let me know if I did something wrong.

TkDodo · 2022-01-30T14:55:01Z

TkDodo
Jan 30, 2022
Maintainer

I'm getting better errors when removing the callside generics:

- return useQueries<T>(
+ return useQueries(

this should be the same because options are already bound to T. But I don't know too much about the useQueries types, I hope @artysidorenko can help us out here :)

0 replies

artysidorenko · 2022-01-30T22:39:14Z

artysidorenko
Jan 30, 2022

that gives this TS error and I'm not sure where I'm going wrong?

Yeah, I think for now you might need to cast the map as [...QueriesOptions<T>] to handle this, like you mentioned in your edit.

The cast is necessary in the current setup because useQueries expects the argument to be some fixed-length tuple, but because there is an Array.map() on the queries, TS loses the information about the length and it doesn't fit a tuple anymore, resulting in the Target requires 1 element(s) but source may have fewer. error. It's a current limitation of TS Array.map.. a bit more context here.

I think something like should work for you and preserve the results? (I also added the extra `UseQueryOptions` in the map, so that when you destructure query on the line below it doesn't turn everything into `any`s)

export function useConnectorQueries<T extends any[]>(
  queries: [...QueriesOptions<T>]
): QueriesResults<T> {
  return useQueries(
    queries.map<UseQueryOptions>((query: UseQueryOptions) => {
      const { queryFn, queryKey, queryVariables, onError,...rest } = query
      return {
        queryKey,
        onError,
        ...rest,
        queryFn: ({ queryKey }) => {
          const [_key, ...args] = queryKey
          return queryFn?.call({ connector }, ...args)
        }
      }
    }) as [...QueriesOptions<T>]
  )
}

0 replies

artysidorenko · 2022-01-30T22:47:36Z

artysidorenko
Jan 30, 2022

[somewhat related] You've revealed a missing piece in the current types though:

In theory you should also have been able to write something like the below, without any casting required, if you were working with an array rather than a tuple (if every query in queries has the same type). BUT at the moment, this will throw an error because it doesn't support dynamic arrays with a strongly typed TQueryKey .. it can only work without the TQueryKey parameter at the end...

export function useConnectorQueries<TQueryFnData, TError, TData, TQueryKey extends QueryKey>(
  queries: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>[]
) {
  ...
}

I don't know if this second example would better fit your use case... it doesn't work atm if you need to type your QK but I'll see if I can fix that (similar to #3208 ... in that issue we dealt with a strongly typed query key with a fixed-length argument, but not a dynamic array yet)

2 replies

jmsims2 Jan 31, 2022
Author

This actually might fit our use case better. We still have some work to do on our end though as our initial implementation of wrapping useQuery mistyped the queryFn. So we'll need to figure that out on our end, but the strong typings might be a better fit for us for sure!

Actually, on second read, this could potentially work now IF we don't need to type our query key? I'm considering typing that strongly now since we'll need to rework our query functions to actually use the correct type. But I can give it a try without typing it and see how it goes too.

artysidorenko Feb 5, 2022

this could potentially work now IF we don't need to type our query key

Yeah I was gunna say that this might work for you, although I've just added the below PR that should also allow you to keep your QK strongly-typed and use the full and proper array type for your argument: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>[].

#3267

Added a simplified version of your example as the test case (let me know if there's anything important missing)

Uh oh!

Access QueriesOptions type #3242

Uh oh!

jmsims2 Jan 28, 2022

Replies: 5 comments · 6 replies

Uh oh!

Uh oh!

jmsims2 Jan 28, 2022 Author

Uh oh!

Uh oh!

jmsims2 Jan 28, 2022 Author

Uh oh!

TkDodo Jan 30, 2022 Maintainer

Uh oh!

jmsims2 Jan 30, 2022 Author

Uh oh!

TkDodo Jan 30, 2022 Maintainer

Uh oh!

jmsims2 Jan 31, 2022 Author

Uh oh!

TkDodo Jan 30, 2022 Maintainer

Uh oh!

artysidorenko Jan 30, 2022

Uh oh!

Uh oh!

artysidorenko Jan 30, 2022

Uh oh!

jmsims2 Jan 31, 2022 Author

Uh oh!

artysidorenko Feb 5, 2022

jmsims2
Jan 28, 2022

Replies: 5 comments 6 replies

jmsims2
Jan 28, 2022
Author

jmsims2
Jan 28, 2022
Author

TkDodo Jan 30, 2022
Maintainer

jmsims2 Jan 30, 2022
Author

TkDodo Jan 30, 2022
Maintainer

jmsims2 Jan 31, 2022
Author

TkDodo
Jan 30, 2022
Maintainer

artysidorenko
Jan 30, 2022

artysidorenko
Jan 30, 2022

jmsims2 Jan 31, 2022
Author