[Vue Query] queryOption type inference broken when using computed queryOption with `select` option

[xpowerHZ]

Describe the bug

queryOption type inference broken when using computed queryOption with select option

Your minimal, reproducible example

Sorry I couldn't find an existed vue example with tanstack query v5 set up to edit upon. But the steps should be really simple to reproduce

Steps to reproduce

1. Create a dynamic queryOption

const postsByUserIdQueryOption = (userId: string) => queryOption(...)

2. Use the computed queryOption in the component

const { data: posts } = useQuery(computed(() => postsByUserIdQueryOption(userId.value)))

3. Spread the options and add an enabled option - it works ✅

const { data: posts } = useQuery(computed(() => ({
  ...postsByUserIdQueryOption(userId.value),
  enabled: !!userId.value
})))

4. Add a select option - type error occurs ❌

const { data: postCount } = useQuery(computed(() => ({
  ...postsByUserIdQueryOption(userId.value),
  enabled: !!userId.value,
  select: (data) => data.length  // Monstrous typescript error
})))

but this ↓ non-dynamic queryOption without computed will work and postCount is correctly inferred to be a number ✅

const { data: postCount } = useQuery({
  ...postsByUserIdQueryOption(userId.value),
  enabled: !!userId.value,
  select: (data) => data.length  
})

5. Manually type data - fixes the type error ✅

const { data: postCount } = useQuery(computed(() => ({
  ...postsByUserIdQueryOption(userId.value),
  enabled: !!userId.value,
  select: (data: Post[]) => data.length
})))

---

Here ↓, it will also not infer correctly

const queryOption = computed(() => ({
    ...getPostsByUserIdQueryOption(userId.value)
    enabled: !!userId.value,
    select: (data) => data.length // typescript error here, data can be any, instead of the return type of queryFn defined inside queryOption
}))

Expected behavior

when having something like this

const { data: postCount } = useQuery(computed(() => ({
  ...postsByUserIdQueryOption(userId.value),
  enabled: !!userId.value,
  select: (data) => data.length
})))

the data parameter in select callback should be automatically inferred to the same type as the return type of queryFn provided in queryOption

How often does this bug happen?

None

Screenshots or Videos

No response

Platform

• vs code
• vue query v5

Tanstack Query adapter

None

TanStack Query version

v5.83.0

TypeScript version

5.4.5

Additional context

No response

[meliuos]

Ran into the same problem any updates , other than that fix and this fix
const { data: postCount } = useQuery<Post[])>(computed(() => ({
...postsByUserIdQueryOption(userId.value),
enabled: !!userId.value,
select: (data => data.length
})))
are you using orpc by any chance ??

[bartlangelaan]

I think the type inference can be fixed by adding another queryOptions call. For example:

//                                 ⌄⌄⌄⌄⌄⌄⌄⌄⌄⌄⌄⌄
const queryOption = computed(() => queryOptions({
    ...getPostsByUserIdQueryOption(userId.value)
    enabled: !!userId.value,
    select: (data) => data.length
}))

[xpowerHZ]

@meliuos No I wasn't using orpc, I was using AppSync graphql wrapped in my custom function.

[temoncher]

I also struggled with these interfaces and ended up writing my own wrappers around useQuery, useInfiniteQuery, useQueries and useMutation

I figured out that if you present solid-query-like interface, type inference becomes a lot easier. Is there any chance we can get similar interface in a new major version?

const { data: postCount } = useQuery(() => ({
    ...getPostsByUserIdQueryOption(userId.value)
    enabled: !!userId.value,
    select: (data) => data.length
}));

I could dedicate some time to make a PR, because there are some issues that you can't solve with just wrappers. For example useInfiniteQuery uses mapped type with conditional on "enabled" property and MaybeRefOrGetter/MaybeRefDeep for each options key. I can't just pass a computed of query options to a useInfiniteQuery for some reason. Why are these interfaces different for useQuery/useInfiniteQuery? Same problem with useQueries

We could get rid of all of these inconsistencies and make interface of these functions better for type inference if we just always accept getter as a parameter for useQuery/useInfiniteQuery/useQueries/useMutation and use this getter inside any reactive context internally, or cache it with wrapping it into computed.

[tearaj]

I am also facing a similar issue with type inference when a select option is added, this is on React Query and not Vue Query, but the issues seem very similar, hence i've put a comment a here.

I have a map of keys -> query options and the query options are computed, some of the options have a select key and the others don't, all of them end up returning the same final data type, but useQuery is not able to infer it

An example is below:

import { queryOptions, useQuery } from '@tanstack/react-query'

const opt = {
  hasName: (options: { enabled: boolean; region: string }) => ({
    queryKey: ['A', options.region],
    queryFn: async () => {
      return Promise.resolve({name: "Jackson"}) // fetch data for A
    },
    enabled: options.enabled,
  }),
  hasNameAndId: (options: { enabled: boolean; region: string }) => queryOptions({
    queryKey: ['B', options.region],
    queryFn: async (): Promise<{name: string, id: string}> => {
      return Promise.resolve({name: "Jackson", id: "1234"}) // fetch data for B
    },
    select: (data) => ({ name: data.name, id: data.id }),
    enabled: options.enabled,
  }),
}
type SupportedTypes = keyof typeof opt

export function useCustomData(type: SupportedTypes, options: { enabled?: boolean; region?: string } = {}): {name: string} | undefined {
  const { enabled = true, region = 'us' } = options
  const res = useQuery(
    opt[type]({ enabled, region })
  )
  return res.data
}

the opt[type] is showing an inference error, despite the fact that both of the query options return the same data type.
When it is used with the exact keys like opt['hasName'] or opt['hasNameAndId'] it does not show this compilation issue.

Please let me know if this is not the appropriate issue for this and if i should create a new one for this.

[TkDodo]

please show a typescript playground

@DamianOsipiuk FYI

[tearaj]

Typescript playground link: click here

NOTE: This playground is using the react-query package and not the vue-query

[TkDodo]

okay so it’s not vue related ?

despite the fact that both of the query options return the same data type.

The problem seems to be that your queryFn returns different things in the different branches, but when you access the options dynamically with opt[type]({ enabled, region }), it expands to a union type, so eventually the error is:

Type 'Promise<{ name: string; }>' is not assignable to type 'Promise<{ name: string; id: string; }>'.

The error goes away if both fetch for A and B return the same shape:

https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAbzgRwK4FMoE8DyYbAQB2AzgDRyonoCKG2cAvnAGZQQhwDkAAjAIakBAYwDWAeijp+wmAFo0mLFwBQK4cRLwI+OAF5EKuHAAW-EgDl+IdAC44ACh0FN9pOiL8ARgBt0AE3svCAg-QQBuOCkAc0Iiey0oYCJopgBKfQA+RwQjYxR6LABpdCx7AG0uAEEuCmc4kgA6GLiAXTI840VsADF4uHMsImFHDL1s3Pz8qRhUKCI4AAV2EGBqZvQSUIA3dAckTxt7LgApGVEtolq4YEDuAEYAJgBmABYudLhxcVZ0GGETHB-PwBKxoHAqp0mB0ph5vH47vVNI04b4AjD0hizJZrOgqkR-ABJO5OfANNxwVEIoIhMJESItYgJGBJFKfcZQ7q4MmafZQrqFEplOCVABC1yRpA2sWI7X5BSUfXsg2Go3syw4a3QAB4DrjmazopFbgbkqlGNlxoYplMZnMFhrVuspFsfLt9nBDnZuGcxJdriaHi93p9vr9-oDgaCWODRfLGBiptQ-LJ7A4o-wxtkPV77BnGl6KIH87dMfKqQF7JKmhX-Imy4wVDAsGB0HAAMqoMCQWABAAqLc2+jgolKEBYcGbrfHcGcanQAA8e-AWKhhi4FlR0ABhKgwDgAERB-AceSn3s73egMH7g-IeWrFNrAH4aaFpPSougZURX3BEmaTDDggCYqGkFK5v+LKAcwAA+lAEugLDJAE1pwBoQiIJSnhov4w4shgFCMgsBhcFQHzMAY1Z5BhWhfiQw5bnQSikjA5Tnq0Hq1kR35xOkaR5Ha8z0Y0GYqI2QA

[tearaj]

okay so it’s not vue related ?

i think it's occuring in both react and vue

I get that if i ensure that both the queryFn returns the same type it will be fixed
The question that i have is that the data the useQuery() returns for both those queryOptions are the same type. both return just {name: string} due to the presence of the select option in hasNameAndId. If you were to access it directly with hasNameAndId or with hasName it would still compile and return properly, it only has this issue when it's dynamically picking it

Attaching playground link with direct access instead of dynamic access -> click here

Note how useCustomData and useCustomData2 have the same signature despite both using different queryFn

[TkDodo]

both return just {name: string} due to the presence of the select option

on type level, there are two types for useQuery: One for what the queryFn returns (TQueryFnData) and one for what useQuery itself returns (TData). The default for TData is TQueryFnData, so if you have no select, it’s the same, but if you have select, they can differ.

So while you get the same thing at runtime, it’s two different things on type level.

I don’t think there’s a lot we can do here

[temoncher]

As I understand original problem raised in this thread is vue-query only.

I'm not aware of a way to add packages into typescript playground, because of it I made a repro of original vue-query problem on stackblitz https://stackblitz.com/edit/vitejs-vite-fo1j5vbe?file=src%2FApp.data.ts

main chunk of code

import { ref, computed } from 'vue';
import { queryOptions, useQuery } from '@tanstack/vue-query';

const sleep = (delay: number) => new Promise((res) => setTimeout(res, delay));

type Post = {
  title: string;
};

function postsByUserIdQueryOption(userId: string) {
  return queryOptions({
    queryKey: ['posts', userId],
    queryFn: () =>
      sleep(2000).then((): Post[] => [{ title: `First post by ${userId}` }]),
  });
}

const userId = ref('some-user-id');

function useEnabledExample() {
  return useQuery(
    computed(() => ({
      ...postsByUserIdQueryOption(userId.value),
      enabled: false,
      // ^ enabled works without errors, and also autocompletable
    }))
  );
}

function useBrokenExample() {
  return useQuery(
    computed(() => ({
      ...postsByUserIdQueryOption(userId.value),
      select: (res) => res,
      //       ^ select autocompletable, but results in an error
      // also `res` should be inferrable as Post[], but unfortunately typescript can't infer based on useQuery types, because computed stands in between useQuery and postsByUserIdQueryOption
    }))
  );
}

function useExplicitTypingExample() {
  return useQuery(
    computed(() => ({
      ...postsByUserIdQueryOption(userId.value),
      select: (res: Post[]) => res,
      //            ^ if we type `res` explicitly everything is fine
    }))
  );
}

function useNonComputedExample() {
  return useQuery({
    ...postsByUserIdQueryOption('some-user-id'),
    select: (res) => res,
    //      ^ infers fine, because computed wrapper does not get in the way
  });
}

function useAdditionalQueryOptionsExample() {
  return useQuery(
    computed(() =>
      queryOptions({
        ...postsByUserIdQueryOption(userId.value),
        select: (res) => res,
        //       ^ infers correctly, but useQuery < computed < queryOptions < ... is a lot of boilerplate
      })
    )
  );
}

export const useExample = useBrokenExample;

This is very wip, has some unsolved typescript errors and probably bugs, but I would imagine solution like this temoncher#1

But accepting getter as a parameter instead of whatever it accepts now in various functions will be a huge breaking change for vue-query, not sure if it is really viable.

edit: added workaround proposed by @bartlangelaan

[TkDodo]

I'm not aware of a way to add packages into typescript playground

you can just import stuff in the TS playground, see the other example playgrounds that were posted.