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 toComponentLoaderArgs<T>
, ensuring that you have access to correct data types within the component's loader function. -
Accessing to
env
andrequest
: Sometimes, while crafting your queries or managing data, you might need more context about the environment or incoming requests. Theweaverse
client has got you covered; it also packs information aboutenv
andrequest
, 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 weaverse.fetchWithCache
method.
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.
The fetchWithCache
function takes in the following parameters:
-
url
(required): The external API you want to fetch data from. -
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:
Caching Strategy |
Cache Control Header |
Cache Duration |
|
public, max-age=1, stale-while-revalidate=9 |
10 seconds |
|
public, max-age=3600, stale-while-revalidate=82800 |
1 Day |
|
no-store |
No cache |
|
Define your own cache control header |
Custom |
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
or inside Remix's route loader
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.