Script Fetch

Basic Script Fetch#

<script>  const reviews = fetch("https://api.example.com/reviews");</script>{{ reviews }}  {{ loading }}    <p>Loading reviews...</p>  {{ /loading }}  {{ fail }}    <p>Could not load reviews.</p>  {{ /fail }}  {{ success }}    {{ items }}      <article>        <h2>{{ title }}</h2>      </article>    {{ /items }}  {{ /success }}{{ /reviews }}

The <script> block creates browser-side state. TemplateX turns const reviews = fetch(...) into values that the {{ reviews }} state block can read.

State Values#

For a fetch named reviews, TemplateX gives you three values:

In templates, keep using TemplateX tags such as {{ title }}, {{ loading }}, {{ fail }}, and {{ success }}.

TemplateX State Blocks#

You can also use TemplateX-style state blocks around a script fetch:

<script>  const joke = fetch("https://official-joke-api.appspot.com/random_joke");</script>{{ joke }}  {{ loading }}    <p>Loading joke...</p>  {{ /loading }}  {{ fail }}    <p>Could not load joke.</p>  {{ /fail }}  {{ success }}    <article>      <h2>{{ setup }}</h2>      <p>{{ punchline }}</p>    </article>  {{ /success }}{{ /joke }}

Inside {{ success }}, value tags read from the fetched JSON object.

Dynamic Script URLs#

Script fetch URLs can include TemplateX values:

<script>  const joke = fetch("https://api.example.com/jokes?post={{ slug }}");</script>{{ joke }}  {{ loading }}    <p>Loading joke...</p>  {{ /loading }}  {{ fail }}    <p>Could not load joke.</p>  {{ /fail }}  {{ success }}    <h2>{{ setup }}</h2>    <p>{{ punchline }}</p>  {{ /success }}{{ /joke }}

In this example, {{ slug }} comes from the current WordPress post.

Script fetch URLs also support modifiers:

<script>  const movie = fetch("https://api.example.com/movie?t={{ title | lower | urlencode }}");</script>

Use stable values such as post slugs, IDs, or sanitized field values. Each different URL can create a separate request and cache entry.

Static Script Fetch#

Use fetch.static(...) in <script> when the data should be cached on the server and passed into the interactive view:

<script>  const movie = fetch.static("https://api.example.com/movie?id=123");</script>{{ movie }}  {{ fail }}    <p>Could not load movie data.</p>  {{ /fail }}  {{ success }}    <article>      <h2>{{ Title }}</h2>      <p>{{ Year }}</p>    </article>  {{ /success }}{{ /movie }}

Static script fetches do not run fetch() in the browser. TemplateX reads the JSON through WordPress and gives the cached value to the interactive view.

Read Values Outside The State Block#

The state block is useful for loading and failure markup. You can still read fetched values after the block by using the fetch name:

<script>  const movie = fetch.static("https://api.example.com/movie?id=123");</script>{{ movie }}  {{ fail }}    <p>Could not load movie data.</p>  {{ /fail }}{{ /movie }}<article>  <h2>{{ movie.Title }}</h2>  <p>{{ movie.Year }}</p></article>

Use the fetch name, such as movie, when reading outside the block. success is the branch name inside {{ movie }}, not the fetched object name.

When To Use Script Fetch#

Use script fetch when the fetched data needs browser-side state, loading UI, or live interactions.

Use paired {{ fetch }} when the fetched data can be rendered by WordPress on the server with normal TemplateX markup.