supabase/apps/reference/_supabase_js/generated/invoke.mdx

---
id: invoke
title: 'invoke()'
slug: /invoke
custom_edit_url: https://github.com/supabase/supabase/edit/master/spec/supabase_js_v2_legacy.yml
---

import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'

Invokes a Supabase Function.

```js
const { data: user, error } = await supabase.functions.invoke('hello', {
  body: { foo: 'bar' },
})
```

## Parameters

<ul className="method-list-group">
  
<li className="method-list-item">
  <h4 className="method-list-item-label">
    <span className="method-list-item-label-name">
      functionName
    </span>
    <span className="method-list-item-label-badge required">
      required
    </span>
    <span className="method-list-item-validation">
      <code>string</code>
    </span>
  </h4>
  <div class="method-list-item-description">

the name of the function to invoke

  </div>
  
</li>

<li className="method-list-item">
  <h4 className="method-list-item-label">
    <span className="method-list-item-label-name">
      FunctionInvokeOptions
    </span>
    <span className="method-list-item-label-badge required">
      required
    </span>
    <span className="method-list-item-validation">
      <code>object</code>
    </span>
  </h4>
  <div class="method-list-item-description">

No description provided.

  </div>
  
<ul className="method-list-group">
  <h5 class="method-list-title method-list-title-isChild expanded">Properties</h5>

<li className="method-list-item">
  <h4 className="method-list-item-label">
    <span className="method-list-item-label-name">
      body
    </span>
    <span className="method-list-item-label-badge false">
      optional
    </span>
    <span className="method-list-item-validation">
      <code>File</code> | <code>Blob</code> | <code>ArrayBuffer</code> | <code>FormData</code> | <code>ReadableStream</code> | <code>Record</code> | <code>string</code>
    </span>
  </h4>
  <div class="method-list-item-description">

the body of the request

  </div>
  
<ul className="method-list-group">
  <h5 class="method-list-title method-list-title-isChild expanded">Properties</h5>

<li className="method-list-item">
  <h4 className="method-list-item-label">
    <span className="method-list-item-label-name">
      string
    </span>
    <span className="method-list-item-label-badge required">
      required
    </span>
    <span className="method-list-item-validation">
      <code>object</code>
    </span>
  </h4>
  <div class="method-list-item-description">

No description provided.

  </div>
  
</li>

<li className="method-list-item">
  <h4 className="method-list-item-label">
    <span className="method-list-item-label-name">
      Record
    </span>
    <span className="method-list-item-label-badge required">
      required
    </span>
    <span className="method-list-item-validation">
      <code>object</code>
    </span>
  </h4>
  <div class="method-list-item-description">

No description provided.

  </div>
  
</li>

<li className="method-list-item">
  <h4 className="method-list-item-label">
    <span className="method-list-item-label-name">
      ReadableStream
    </span>
    <span className="method-list-item-label-badge required">
      required
    </span>
    <span className="method-list-item-validation">
      <code>object</code>
    </span>
  </h4>
  <div class="method-list-item-description">

No description provided.

  </div>
  
</li>

<li className="method-list-item">
  <h4 className="method-list-item-label">
    <span className="method-list-item-label-name">
      FormData
    </span>
    <span className="method-list-item-label-badge required">
      required
    </span>
    <span className="method-list-item-validation">
      <code>object</code>
    </span>
  </h4>
  <div class="method-list-item-description">

No description provided.

  </div>
  
</li>

<li className="method-list-item">
  <h4 className="method-list-item-label">
    <span className="method-list-item-label-name">
      File
    </span>
    <span className="method-list-item-label-badge required">
      required
    </span>
    <span className="method-list-item-validation">
      <code>object</code>
    </span>
  </h4>
  <div class="method-list-item-description">

No description provided.

  </div>
  
</li>

<li className="method-list-item">
  <h4 className="method-list-item-label">
    <span className="method-list-item-label-name">
      Blob
    </span>
    <span className="method-list-item-label-badge required">
      required
    </span>
    <span className="method-list-item-validation">
      <code>object</code>
    </span>
  </h4>
  <div class="method-list-item-description">

No description provided.

  </div>
  
</li>

<li className="method-list-item">
  <h4 className="method-list-item-label">
    <span className="method-list-item-label-name">
      ArrayBuffer
    </span>
    <span className="method-list-item-label-badge required">
      required
    </span>
    <span className="method-list-item-validation">
      <code>object</code>
    </span>
  </h4>
  <div class="method-list-item-description">

No description provided.

  </div>
  
</li>

</ul>

</li>

<li className="method-list-item">
  <h4 className="method-list-item-label">
    <span className="method-list-item-label-name">
      headers
    </span>
    <span className="method-list-item-label-badge false">
      optional
    </span>
    <span className="method-list-item-validation">
      <code>object</code>
    </span>
  </h4>
  <div class="method-list-item-description">

object representing the headers to send with the request

  </div>
  
</li>

</ul>

</li>

</ul>

## Notes

- Requires an Authorization header.
- Invoke params generally match the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) spec.
- When you pass in a body to your function, we automatically attach the Content-Type header for `Blob`, `ArrayBuffer`, `File`, `FormData` and `String`. If it doesn't match any of these types we assume the payload is `json`, serialise it and attach the `Content-Type` header as `application/json`. You can override this behaviour by passing in a `Content-Type` header of your own.
- Responses are automatically parsed as `json`, `blob` and `form-data` depending on the `Content-Type` header sent by your function. Responses are parsed as `text` by default.

## Examples

### Basic invocation.

null

```js
const { data: user, error } = await supabase.functions.invoke('hello', {
  body: { foo: 'bar' },
})
```

### Error handling.

A `FunctionsHttpError` error is returned if your function throws an error, `FunctionsRelayError` if the Supabase Relay has an error processing your function and `FunctionsFetchError` if there is a network error in calling your function.

```js
import {
  FunctionsHttpError,
  FunctionsRelayError,
  FunctionsFetchError,
} from '@supabase/supabase-js'

const { data: user, error } = await supabase.functions.invoke('hello', {
  headers: {
    'my-custom-header': 'my-custom-header-value',
  },
  body: { foo: 'bar' },
})

if (error instanceof FunctionsHttpError) {
  console.log('Function returned an error', error.message)
} else if (error instanceof FunctionsRelayError) {
  console.log('Relay error:', error.message)
} else if (error instanceof FunctionsFetchError) {
  console.log('Fetch error:', error.message)
}
```

### Passing custom headers.

You can pass custom headers to your function. Note: supabase-js automatically passes the `Authorization` header with the signed in user's JWT.

```js
const { data: user, error } = await supabase.functions.invoke('hello', {
  headers: {
    'my-custom-header': 'my-custom-header-value',
  },
  body: { foo: 'bar' },
})
```