Recommended way to use dropdown's dynamic options with TanStack Query

[sebj54]

Hi there!

I am actually using Formkit Pro and TanStack Query in the same project and I am wondering what is the best approach to combine the advantages of both solutions, especially with dynamic loading of options with Dropdown or Autocomplete.

TanStack Query intro

For those not familiar with TanStack Query, each time you want to perform a fetch, you would do something like this:

const { data, isLoading, refetch } = useQuery({
  queryKey: ['todos'],
  queryFn: fetchTodoList,
})

You would get these variables (among many others):

• data: a computed variable containing the result of the request (it is undefined before the fetch request is performed)
• isLoading: a computed variable indicating that the fetch request is being made
• refetch: a function returning a `Promise, allowing you to perform the same request again, to refresh the data.

There are also a strategy to share data between multiple calls of the same request, refresh data when user resumes the app…

Using Tanstack Query with Formkit

Actually, I am using a FormKitSchema with the data prop, so I can set my options with a computed (mapped from the data computed I get from my TanStack query).

I would like to be able to use dynamic options, so I will have to replace my options with an async function. I can put my TanStack query in manual mode and call refetch in the options function, bu I would loose a big advantage of TanStack.

If you have anything to suggest, I would be very happy to ty it out. But here is what could resolve the current situation (maybe it's already possible):

• Be able to return a computed from the options function: like this TanStack can fetch automatically if page changes, but the loading indicator would not work
• Set the loading indicator manually and still use a computed for the options
• Have two properties: one for options (still a computed in my case), another one for options function (options-fetcher?)