---
title: Fetcher
---

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

Example:

```ts
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 })[]>`)
