Go Headless

Build Apps

Client

API Preview

Develop Websites

REST

Velo

GraphQL (Alpha)

Permissions needed to call the function in frontend code.

permissions

Permissions

_function

Function

options

Options

Defines a backend function that can be called from the frontend.

The `webMethod()` function is a wrapper used to export functions from backend code that can be called from the frontend. 

The `permissions` parameter is used to define the permissions needed to call the function in frontend code. Import
the `Permissions` enum from the `wix-web-module` module to define the permissions. 
The permission options are:
 - `Permissions.Anyone`: Any site visitor can call the function.
 - `Permissions.Admin`: Only site admins can call the function.
 - `Permissions.SiteMember`: Only site members can call the function.


The `cache` object, found in the `options` parameter, enables you to cache or temporarily store the return values of your backend functions for a specific duration. Use the `ttl` property to define the duration, in seconds, for which you want your return value to be cached. If the Time To Live (TTL) is not set, the default value is `604000` seconds, which is approximately 1 week. 

You can also assign identifiers to cached return values using the `tags` property of the `cache` object. Tags allow you to specify cached return values that may require invalidation due to a significant change in your data. To invalidate a cached return value, use the [`invalidateCache()`](https://dev.wix.com/docs/velo/api-reference/wix-cache-backend/cache/invalidate-cache) function from `wix-cache-backend`. Once invalidated, the return value will be re-cached the next time the function is called. 



>__Important:__
>If you plan to invalidate your caches, you must first cache them using the `tags` property to identify them. Without tags, your cache will only be invalidated when the TTL expires or when you republish your site with a code change. 




Web methods must be defined in files with a `.web.js` extension.

// Exporting a backend function from a '.web.js' file:
import {Permissions, webMethod} from "wix-web-module";

export const multiply = webMethod(Permissions.Anyone, (a,b) => a * b);

// Using the function in frontend code:
import {multiply} from "backend/multiply.web";

$w.onReady(async function () {
  multiply(5, 3).then((result) => {
    console.log(result); // Logs 15
  });
});

Export a backend function and use it in frontend code

import { Permissions, webMethod } from "wix-web-module";
import { currencies } from "wix-ecom.v2";

export const getConversionRate = webMethod(
  Permissions.Anyone, 
  async () => {
  try {
    const conversionRate = await currencies.getConversionRate("USD", "GBP");
    const rate = conversionRate.rate;
    const timestamp = conversionRate.rateTimestamp;

    return conversionRate;
  } catch (error) {
    console.error(error);
    // Handle the error
  }
},
{
  cache: {
    tags: ["currency", "USD", "GBP"],
    ttl: 86400 // Cache TTL in seconds (1 day)
  }
});

/* Promise resolves to:
 *  {
 *    "rate": {
 *       value: "20",
 *       decimalPlaces: 2
 *    },
 *    "rateTimestamp": "2020-03-15T20:00:00.181Z"
 *  }
 */

Export and cache the return value

Export and cache the return value of `getConversionRate()` for 1 day

import { Permissions, webMethod } from "wix-web-module";
import { posts } from "wix-blog-backend";

// List blog posts
const listBlogPostsFunction = async () => {
  try {
    const results = await posts.listPosts();
    return results.posts;
  } catch (error) {
    console.error("Error fetching blog posts:", error);
    // Handle the error
  }
};

// Exported web method that caches blog posts
export const getCachedBlogPosts = webMethod(
  Permissions.Anyone,
  listBlogPostsFunction,
  {
    cache: {
      tags: ["blogPosts", "blog"],
      ttl: 604800, // Cache TTL in seconds (7 days)
    },
  }
);

Export and cache the return value of `listPosts()` for 1 week

import { Permissions, webMethod } from "wix-web-module";
import { contacts } from "wix-crm.v2";
import { elevate } from "wix-auth";

/* Sample contact ID value: "2ca312b3-e850-465a-9991-c59c9c140919" */

const elevatedGetContact = elevate(contacts.getContact);

export const myGetContactFunction = webMethod(
  Permissions.Anyone,
  async (id) => {
    try {
      const contact = await elevatedGetContact(id);

      return contact;
    } catch (error) {
      console.log(error);
      // Handle the error
    }
  },
  {
    cache: {
      tags: ["contact", "crm"],
      ttl: 2628000, // Cache TTL in seconds (1 month)
    },
  }
);

Export and cache the return value of `queryContacts()` for 1 month with `elevate()`

webMethod

# Introduction
The Web Modules API allows you to define functions in your backend code that can be called from your site's frontend code. In order to call the function from the frontened, you need to define the necessary permissions. 

With web modules you can also cache the return values of the backend functions in your code. This means you can temporarily store the result of the function for a specified period of time. Caching return values reduces response times, decreases server load, and enhances the overall user experience of site visitors by providing quicker access to previously generated data. 

To use the Web Modules API, import the `webMethod` function and the `Permissions` enum from the `wix-web-module` module:
```javascript
import { webMethod, Permissions } from 'wix-web-module';
```
Learn more about [working with the Web Modules API](https://support.wix.com/en/article/about-web-methods).

velo_wix-web-module

Cache

An array of strings used to categorize and identify cached return values. These tags help you organize and later specify which cached data to invalidate.

number

Options for caching the return value of the `function` being passed.