Go Headless

Build Apps

Client

API Preview

Ricos

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, allows you to cache or temporarily store the return value of web methods. Use the `ttl` property to define the duration, in seconds, for which you want the return value to be cached. If the Time To Live (TTL) is not set, the default value is `604800` seconds, which is approximately 1 week. 

Assign identifiers to caches using the `tags` property of the `cache` object. Tags enable you to specify cached return values that may require invalidation due to significant changes in your data. To invalidate web method caches, 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 is re-cached the next time your backend function is called. Learn more about [web method caching](https://dev.wix.com/docs/develop-websites/articles/best-practices/caching/about-web-method-caching).



>__Important:__
> - The `tags` property is required for caching. Without tags, nothing is cached. 
> - The `invalidateCache()` method from [wix-cache-backend](https://dev.wix.com/docs/velo/api-reference/wix-cache-backend/cache/invalidate-cache) is currently in developer preview.




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 [web methods](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/web-modules/about-web-modules#web-methods) in your backend code that can be called from your site's frontend code. In order to call the function from the frontend, you need to define the necessary permissions. 

With web modules you can also cache the return values of web methods. This means you can temporarily store the return values of your backend functions on Wix's infrastructure for a specified period of time. Web method caching reduces response times, decreases server load, and enhances the overall user experience of site visitors by providing quicker access to previously generated data. Learn more about [web method caching](https://dev.wix.com/docs/develop-websites/articles/best-practices/caching/about-web-method-caching).


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](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/web-modules/call-backend-code-from-the-frontend).

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.