Your action can have a fetchers property that is an array of fetcher objects.

Example:

export const createChatCompletion = createAction({
  //...
  fetchers: [
    {
      id: 'fetchModels',
      dependencies: ['baseUrl', 'apiVersion'],
      fetch: async ({ credentials, options }) => {
        const baseUrl = options?.baseUrl ?? defaultOpenAIOptions.baseUrl
        const config = {
          apiKey: credentials.apiKey,
          baseURL: baseUrl ?? defaultOpenAIOptions.baseUrl,
          defaultHeaders: {
            'api-key': credentials.apiKey,
          },
          defaultQuery: options?.apiVersion
            ? {
                'api-version': options.apiVersion,
              }
            : undefined,
        } satisfies ClientOptions

        const openai = new OpenAI(config)

        const models = await openai.models.list()

        return (
          models.data
            .filter((model) => model.id.includes('gpt'))
            .sort((a, b) => b.created - a.created)
            .map((model) => model.id) ?? []
        )
      },
    },
  ],
})

A fetcher object has the following properties: id, dependencies, and fetch.

id is a string that uniquely identifies the fetcher. When you want an option field to be populated by the fetcher, you can use the fetcher’s id as the value of the option field.

dependencies is an array of strings that are the names of the option fields that the fetcher depends on. When any of the option fields in the dependencies array changes, the fetcher will be re-run.

fetch is an async function that takes an object with the following properties: credentials, options and returns a list of strings. It can also return a list of objects with the following properties: value, label. The value property is the value of the option field and the label property is the label of the option field. (Promise<(string | { label: string; value: string })[]>)

Options