Fresh archive: Fetching data client

Retired Fresh / Deno reference. This original guide preserves the earlier runtime APIs, Preact/HTMX examples, and any former admin steps. Use it when maintaining that runtime; consult the Studio Site Editor guides for current editing. Migration notes distinguish editor and framework migration.

Suggested reading

• Core Concepts: Loaders
• Core Concepts: Actions

Client-side function invocation is a powerful feature of live.ts that allows you to fetch data or mutate directly from your functions without sending JavaScript to the browser. This feature ensures that your data fetching or mutation is unique across your repository and helps reduce latency on the client-side.

To get started with client-side function invocation, follow these steps:

1. Import invoke from runtime.ts

2. Now you can issue invocations using the invoke function. For example, to fetch data from a function, you would use the following code:

Can't find this file? Try this one

import { invoke } from "../runtime.ts";
import { useCallback } from "preact/hooks";
 
export default function MyIsland() {
 
  const fetchData = useCallback(() => {
    const data = await invoke["deco-sites/my-store"].loaders.myLoader({/* your function input props */});
  }, [])
 
  return <div>
    {...}
    <button onClick={fetchData}>Load</button>
  </div>
}

Here, the invoke function takes an object with a key property that specifies the path to your function and a props property that contains your function input props. When you call invoke, live.ts will invoke your function as it does for rendering sections and return it to you as a JavaScript object. It is also possible to call functions defined in an App installed in the project. For example,

const dataAppVtex = await invoke.vtex.loaders.vtexLoader({
  /* your function input props */
});

You can also batch requests by passing an object with multiple keys, each representing a desired invocation. For example:

const { data1, data2 } = await invoke({
  data1: invoke.path1({/* your function input props */}),
  data2: invoke.path2({/* your function input props */}),
});

With these steps, you can now start using client-side functions invocation in your Live.ts application, happy coding!