Get type of QueryResult from queryOptions?

[Faithfinder]

Is there a helper type like this?

const todoQueryOptions = (params) => queryOptions({ queryKey, queryFn});

type TodoQueryResult = InferQueryResult<ReturnType<typeof todoQueryOptions>>

[toppsdown]

Also just ran into this. Haven't been able to figure out a solution

[TkDodo]

why do you need that? Inference is complicated 😅

[Faithfinder]

I wanted to pass the whole queryResult object as a prop. I think I worked around it, somehow? The reasoning was probably either that I'd be passing different queryResults depending on conditions, or maybe just that there's a ton of parameters that I didn't want to duplicate in the child component?

[TkDodo]

this works fine with just type TodoQueryOptions = ReturnType<typeof todoQueryOptions>:

https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAbzgRwK4FMoE8DyYbAQB2AzgDRyonoCKG2cAvnAGZQQhwDkAAjAIakBAYwDWAeijp+wmAFo0mLFwBQoSLDgAqOPxJwAStNmt2nLlJkxVK4cRLwYEACYQ6SvAXtwAvHAAUwM4AXHBEqCAARpgAlL4AfCj0uPiEpP4IKnBJSgDS6FihANpcTq5cFEEAumRZOdgAYkSh-nE+iQAKZsDUAHRSJBAANgBu6IHOMSqMMQDcKiowWGDocAAqLm7Jnmn6fkYwqFBEa8voADxLKxAscGVbHqn28QssqESyaXAAgmBgrYgFtk7EI4EUghRqDAAJLOKq+QzGGC9KjoADKAhg4wADFNgfZHJsdt4-Pd3NhiekglM6lJDscAnVsudnMARi9spy4OcALJYADCHEgRHQRHgECepB8CHulJIzHEHM553ErPZdSmjFe70+xDgfMF4GIopg-jA7DAJFCCAlXlIoQ2rnJKTt8rimTqIIc9SwCNRzrNFpIvVtuxp2TpRyIYVQQyG0xUQA

[Faithfinder]

I don't even remember the use case that clearly, but sounds like this would solve it, thanks!

[JannikWempe]

I don't think is the answer. It provides the type of query options but I think the author wanted to extract the return type of the queryFn.

Like this

[toppsdown]

@TkDodo I want to get the return type of the queryFn from the options.

Use case:

• I have an endpoint that allows filters and returns some data
• Every filter is stored in a different query key
• I want to optimistically update all the matching query keys using setQueriesData
• Data of old data is type unknown. I want to assert it's actually the data type of the queryFn that I included in the QueryOptions

[TkDodo]

please show a typescript playground for this. if you use the queryKey returned from queryOptions, setQueryData will be type-safe.

[BrianUribe6]

If anyone stumbles across this and you are interested on inferring the type of the data directly from the query options. I came up with this utility type.

type InferQueryData<T> = 
    T extends (...args: any) => { select?: (...args: any) => infer S} ? S: 
    T extends (...args: any) => { queryFn?: (...args: any) => infer R} ? Awaited<R>: never; 

Example:

function getTodoById(id: number) {
   return queryOptions({
    queryKey: ['todo', id],
    queryFn: () => Promise.resolve({ data: 5 }),
    select: (result) => result.data 
  })
};

function getTodoByIdWithoutSelect(id: number) {
   return queryOptions({
    queryKey: ['todo', id],
    queryFn: () => Promise.resolve({ data: 5 }),
  })
};

// number
type TodoWithSelect = InferQueryData<typeof getTodoById>

// { data: number }
type TodoWithoutSelect = InferQueryData<typeof getTodoByIdWithoutSelect>

This could be useful when your types are automatically generated from a Open API spec.

Of course you could also just move the declaration of the query function outside and export its return type...