Data Fetching and Caching

Data Fetching

With Weaverse, fetching data server-side is straightforward. This ease-of-use is attributed to the weaverse client which is already injected into the application's load context. Let's explore the mechanisms and available methods for data fetching.

Fetching Page Data

The primary method for fetching a Weaverse page is the weaverse.loadPage(). This function allows you to dynamically load your page data in any route's loader function. For a comprehensive look into its usage, refer to the guide on Rendering a Weaverse Page.

Querying Storefront Data inside Weaverse's Component

Fetching storefront data within a Weaverse component is a core feature, and for this, you can rely on the storefront.query function (the storefront instance is nested within the weaverse client). This function enables direct querying from Shopify's Storefront API.

Let's delve a bit deeper:

• Dynamic Content Queries: One of the standout features is the ability to dynamically query content using the data prop. This prop comes from the component's loader's arguments, allowing for content that responds to changes based on the component's data.

• Typing with ComponentLoaderArgs: You can pass types to ComponentLoaderArgs<T>, ensuring that you have access to correct data types within the component's loader function.

• Accessing to env and request: Sometimes, while crafting your queries or managing data, you might need more context about the environment or incoming requests. The weaverse client has got you covered; it also packs information about env and request, which you can utilize as required.

Here's a sample to give you an idea:

WEAVERSE_EMBEDED_CODE

Fetching Data from External APIs

With Weaverse, you're not limited to fetching just storefront data. You can easily pull data from external APIs using the weaverse.fetchWithCache method.

Here's a practical example inside a Weaverse's component:

WEAVERSE_EMBEDED_CODE

You can follow a similar approach in the route's loader function by accessing the weaverse instance from the app's load context.

WEAVERSE_EMBEDED_CODE

The fetchWithCache function takes in the following parameters:

1. url (required): The external API you want to fetch data from.

2. options (optional): An object that:

   • Follows the same structure as the standard JavaScript's fetch function options.

   • Includes an additional strategy option introduced by Weaverse, giving you enhanced control over cache headers.

Caching

Weaverse effectively integrates Hydrogen's caching strategies, ensuring that developers have the tools necessary for optimal performance and up-to-date information delivery.

Here are the caching strategies Weaverse employs from Hydrogen:

Default Caching Strategy

By default, Weaverse applies the CacheShort strategy to loadPage() and fetchWithCache() methods. If you'd like to modify this behavior, you can do so with the following:

Inside Weaverse's component loader

WEAVERSE_EMBEDED_CODE

or inside Remix's route loader

WEAVERSE_EMBEDED_CODE

Using Custom Cache

For those situations where a custom caching strategy is required:

WEAVERSE_EMBEDED_CODE

Custom Cache Properties

If you're looking to get a more fine-tuned caching experience, Weaverse provides a set of properties you can use. Here's a quick rundown:

WEAVERSE_EMBEDED_CODE

For a deeper dive into each of these cache properties, consider checking Hydrogen's documentation on cache options. This will provide a comprehensive understanding of how to best utilize them for your specific needs.