flat-fuchsia

Strongly typing useQueries

Hi I am trying to use useQueries, and I have doubt with Typescript, I am trying to call multiple fetch functions in useQueries and it returns an array of combined types. I was wondering is there any way to strongly type the array with query v5: in the given code, is there any way to return the types like [string, date, number] considering those functions returns these types correspondingly?

const { data, isSuccess, isError } = useQueries({
    queries: 
        [
          {
            queryKey: ['address'],
            queryFn: fetchAddress(),
          },
          {
            queryKey: ['date'],
            queryFn: fetchDate(),
          },
          {
            queryKey: ['registrationNumber'],
            queryFn: fetchRegNo(),
          },
        ],
    combine: (results) => ({
      data: results.map((result) => result.data),
      pending: results.some((result) => result.isPending),
      isLoading: results.some((result) => result.isLoading),
      isSuccess: results.every((result) => result.isSuccess),
      isError: results.some((result) => result.isError),
    }),
  });

const { data, isSuccess, isError } = useQueries({
    queries: 
        [
          {
            queryKey: ['address'],
            queryFn: fetchAddress(),
          },
          {
            queryKey: ['date'],
            queryFn: fetchDate(),
          },
          {
            queryKey: ['registrationNumber'],
            queryFn: fetchRegNo(),
          },
        ],
    combine: (results) => ({
      data: results.map((result) => result.data),
      pending: results.some((result) => result.isPending),
      isLoading: results.some((result) => result.isLoading),
      isSuccess: results.every((result) => result.isSuccess),
      isError: results.some((result) => result.isError),
    }),
  });

10 Replies

genetic-orange•2y ago

I'm actually wondering the same thing. When using useQuery my result is inferred but useQueries causes eslint to complain of "Missing return type on function". I also notice signal has type any when used in the queryFn, not AbortSignal. I currently have my queryFn typed myself using:

queryFn: ({ signal }: QueryFunctionContext): Promise<PartDetails> => partDetails.get({ id }, signal)

queryFn: ({ signal }: QueryFunctionContext): Promise<PartDetails> => partDetails.get({ id }, signal)

Is this the expected solution? I know the typescript interfaces for useQueries is annoyingly deep and complex.

typical-coral•2y ago

Show a typescript playground please

flat-fuchsiaOP•2y ago

@TkDodo 🔮 https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcA5FDvmQNwBQokscA3nAK6pYCK7WUwLKgA0cAKpde-AJ4B5MDGAQAdugC+cIiXIABGMlX7cAawD0lPDAC0ARz5RpZOnQLtl+JcrgBBMGAAUAJSsznBwuCqohFgwuAAW3gAmiZSo6AC8cEEAXHBRAsoA5nDpAHwhYWGUMOxQXmQAMgZYcACMtHRhavSV4ZHRsXEAIsgwLZk5cCNjJeUsnZXVtV7KWADuU6NYQT1w3QthEYaaMfHYhQByECVZgbnK7CAARvyzFYsxy3AALABsAOwADgAzAAmP7A3b7BZHKIcLjeWDAKIZW5vea9JZ1eE8eyCVD+DGVOz8fG5A69OAAbQplPedN6JIcAGksNJclSyMhkqlUGQALrCWkMpnSABiylyQTeBFOCR5QgJgSFDMqahVqvpmtFrPZ1LIiS2Ao1mrgoolUuCZROg2m22Vwt66sdlSJpp1bI5FCwhWRMCgo08F0eLygxpdjPs4slaOtssG5yuQRNDOdqsFFIiz2AqylqXYABsYKgreVCcLDfpcvmi6gAHQgZABfw1mCluCtuuV5AOulgLDKRI5wrVoSF4t11AkbYtsdF9ud5EABQHQ6KvcpyIaEG5w9HqHH9anIBnrYXc5gda3O7XhQ3vWRAGV2LhcIr94e61gAG4yfyzg95zeRdUGfV9FXvSpkQAUSgYgoA-WtJ2nf8z2Ai8r1QWD4MgtQNzwqF6E6UwEAQBYkAACX4FoYDiFpuzgZEO0+OosESFB0GQOAYGkfs4AgAgsnyYc4AAHzgB5nlecS7TEjhBywAgczYwIqUFOByI7UY6KgOA4ggDZcAMOAAEk4EKGJuN4loC2AYwWipYSilEO1REk0N1LQbi6P4qBEleATvJaLEvAYpjGxzfRlMScjTBhfpWG7URr13ZzGKwuDoA0TJOCwRFFBRHYFlMUxegAPQAfgWEKsgpAAeIdv1KYU6riVpSiogsC2uAB1aAC0SABCOrTDa5q6TqsBShYAApR9ZAuSd-WHYACGkfxu0CNQRqm+rTEa8a4ECeg1DoIA

TS Playground - An online editor for exploring TypeScript and JavaS...

The Playground lets you write TypeScript or JavaScript online in a safe and sharable way.

genetic-orange•2y ago

Here's that same example with AbortSignal included and showing as any. It obviously lacks the "Missing return type on function" from eslint, but I can create a codesandbox if necessary. https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcA5FDvmQNwBQokscA3nAK6pYCK7WUwLKgA0cAKpde-AJ4B5MDGAQAdugC+cIiXIABGMlX7cAawD0lPDAC0ARz5RpZOnQLtl+JcrgBBMGAAUAJSsznBwuCqohFgwuAAW3gAmiZSo6AC8cP6owADmysgANgBcPgBG0DAAynkFhYGlUQLKuXDpAHwhYWGUMOxQXmQAMgZYcACMtHRhavTd4ZHRsXEAIsgwY5lBpWsbbZ0s0929-V7KWADucLtYQXNws0dhEYaaMfHYuQByEG1ZDXBlOwQGV+PsuscYqc4AAWABsAHYABwAZgATPCUfdHkcXlEOFxvLBgFEMv9wYd5icBgSePZBKh-JTunZ+AzSk95nAANqcrkQ-nzVkOADSWGkpW5ZGQyVSqDIAF1hHzBcLpAAxZSlJlwHL5IoPYIdN7LJIpISMvV1QLKwXdNS2u0Cp1qsUSnlkRLrLCKx1OuBqzXao2dAjvVbeoJ+wUOlXzZn+13iyUULC5EkwKDrTxfYGgqC+uNcwNa8nGsPLT4-KNFmbR+ZKzkREHAc7a1LsQowVAhrIJ7pe-SlDtd1AAOhAyAC-hHMF7s7Hg+QNpVYCwykSrdyw6Ene7Y9QJFuM93Xfnp5gY5JAAV15uWiv+SShhAZVud6g9+PDyBj7Pz5+XZXqgL5vg+9ZwCSVTsLguAWh+X5jlgABuMj+CegFzuCC5QTBcFpI+XIkgAolAxBQAho4Hke6H-thF7AaR5GETMhFqIE2L0NMpgIAgRxIAAEvwYwwHEYxLpB6DUuciQoOgyBwDA0hrnAEAEFkTRbnAAA+gJ5mCuk3DpHAblgBCtlgiSBNySpwPxcBZqJYJxBAVy4AYcAAJJwLkMSKcpYyFMAxhjNymktKINyiECIL8LZaCKWJqlQIkYJqYlYzSXAEkknAk6tvoFmJPxpi4osrBLqIz6vveuRVagTHQBomScFgRKKKSdxHKYpjzAAegA-EcWX+JyAA8m7Ie0KpjXE4ztEJhSFL8ADq0CFIkACEY2mHN038mNYDtCwABSVSyF8B6ZluwAENI-hLoEag7Ud42mJN+1wBxdBqHQQA

TS Playground - An online editor for exploring TypeScript and JavaS...

The Playground lets you write TypeScript or JavaScript online in a safe and sharable way.

typical-coral•2y ago

@blackfish in combine, your results are a tuple:

[UseQueryResult<string, Error>, UseQueryResult<Date, Error>, UseQueryResult<number, Error>]

[UseQueryResult<string, Error>, UseQueryResult<Date, Error>, UseQueryResult<number, Error>]

but then you call .map on them, and mapping on a tuple in typescript will make it an array. Keeping the tuple type on .map only works with homogenous tuples. see: https://github.com/microsoft/TypeScript/pull/11252

GitHub

Add overloads for 'map' on tuple types by DanielRosenwasser · Pull ...

This PR fixes #6574. Sometimes users have the expectation that calling map on a homogeneous tuple will create a tuple type of the same size, but with the element types appropriately mapped on. For ...

typical-coral•2y ago

@troywoy the object passed to the queryFn should be typed as QueryFunctionContext, but it seems it isn't in this case. Plese file an issue. Minimal repro would be this: https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1WO1OAXzgDMoIQ4ByAARgEMA7VRgYwGsB6KdBtmAFoAjjigBPagCgppZEwHAITOAEEwYABQBKRFLhw2y1mXQw2AC1UATa71SEAvHE2pgAcyYMANgC41AEbQMADKHl7e2v6seEzucI4AfHoGBrwwyFAq1AAyzOhwAIzUANz6xGXlRizwaOiqsMCsTi66SSmp6Zkqddi4+KiaCOWpcKL9BL4jo3AA2tMzHYuj4xIA0uji-rPUDLb2qNQAugA0C8ur4gBiTP6aAgAebcmkZpY2dgSDjwB0bp4+bRnZapIjnAxHaZEbTlMFgoA if you want, please take a stab at fixing it, but the types are fairly complex

TS Playground - An online editor for exploring TypeScript and JavaS...

The Playground lets you write TypeScript or JavaScript online in a safe and sharable way.

genetic-orange•2y ago

Sure, I'll open an issue now. Should I mention the eslint error too or create a codesandbox of that? Or a separate issue?

typical-coral•2y ago

It's a TS issue, not eslint

genetic-orange•2y ago

Well I know that, but I wasn't sure if the inferred return was related to the incorrect ctx type. I'll just double check after this fix is released

flat-fuchsiaOP•2y ago

Oh okay. I got it. Thanks for the info.

Gaming

Programming

Strongly typing useQueries

Did you find this page helpful?