react-query factory example with queryOptions()

query-todo-factory.ts

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

type Todo = {
    id: number
}
declare function fetchTodos(filters?: string): Promise<Array<Todo>>
declare function fetchTodo(id: number): Promise<Array<Todo>>

const queryClient = new QueryClient()

const todoKeys = {
  all: ['todos'],
  filter: (filters: string) => [...todoKeys.all, 'filter', filters],
  detail: (id: number) => [...todoKeys.all, 'detail', id],
} as const

export const todoQueries = {
  all: () => 
    queryOptions({
      queryKey: todoKeys.all,
      queryFn: () => fetchTodos(),
    }),
  filter: (filters: string) =>
    queryOptions({
      queryKey: todoKeys.filter(filters),
      queryFn: () => fetchTodos(filters),
    }),
  detail: (id: number) =>
    queryOptions({
      queryKey: todoKeys.detail(id),
      queryFn: () => fetchTodo(id),
      staleTime: 5000,
    }),
}

const { data: todos } = useQuery(todoQueries.all())
const { data: firstTodo } = useQuery(todoQueries.detail(1))

const allTodoKeys = queryClient.getQueryData(todoQueries.all().queryKey) // allTodoKeys is same as todoKeys.all
//    ^?