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
dataprop. This prop comes from the component's loader's arguments, allowing for content that responds to changes based on the component's data.
ComponentLoaderArgs: You can pass types to
ComponentLoaderArgs<T>, ensuring that you have access to correct data types within the component's loader function.
request: Sometimes, while crafting your queries or managing data, you might need more context about the environment or incoming requests. The
weaverseclient has got you covered; it also packs information about
request, which you can utilize as required.
Here's a sample to give you an idea:
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
Here's a practical example inside a Weaverse's component:
You can follow a similar approach in the route's loader function by accessing the
weaverse instance from the app's load context.
fetchWithCache function takes in the following parameters:
url(required): The external API you want to fetch data from.
options(optional): An object that:
Includes an additional
strategyoption introduced by Weaverse, giving you enhanced control over cache headers.
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:
Cache Control Header
public, max-age=1, stale-while-revalidate=9
public, max-age=3600, stale-while-revalidate=82800
Define your own cache control header
Default Caching Strategy
By default, Weaverse applies the
CacheShort strategy to
fetchWithCache() methods. If you'd like to modify this behavior, you can do so with the following:
Inside Weaverse's component
or inside Remix's route
Using Custom Cache
For those situations where a custom caching strategy is required:
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:
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.