From 71327627483b3977175856dc98ca6111660a53ff Mon Sep 17 00:00:00 2001 From: hta218 Date: Thu, 13 Jun 2024 15:18:36 +0700 Subject: [PATCH] Update docs --- docs/guides/environment-variables.md | 4 +++- docs/guides/fetching-and-caching.md | 8 ++++---- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/docs/guides/environment-variables.md b/docs/guides/environment-variables.md index 815246e7..f142e654 100644 --- a/docs/guides/environment-variables.md +++ b/docs/guides/environment-variables.md @@ -89,7 +89,7 @@ Inside a **Weaverse** component's `loader`: ```tsx import type { ComponentLoaderArgs } from '@weaverse/hydrogen' -export let loader = async ({ weaverse }: ComponentLoaderArgs) => { +export let loader = async ({ weaverse }: ComponentLoaderArgs<{}, Env>) => { // Get `env` variables from `weaverse` client let { env } = weaverse @@ -99,6 +99,8 @@ export let loader = async ({ weaverse }: ComponentLoaderArgs) => { } ``` +You can pass the `env` type to the `ComponentLoaderArgs` generics as the second argument to ensure that the type of the environment variables is correct. + ## Conclusion Correctly understanding and managing environment variables is crucial for both the security and functionality of your Weaverse Hydrogen theme. Always ensure that they are treated with the utmost care, keeping any sensitive data well protected. diff --git a/docs/guides/fetching-and-caching.md b/docs/guides/fetching-and-caching.md index 78032a64..581a08e9 100644 --- a/docs/guides/fetching-and-caching.md +++ b/docs/guides/fetching-and-caching.md @@ -31,8 +31,8 @@ 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`**, ensuring that you have - access to correct data types within the component's loader function. +- **Typing with `ComponentLoaderArgs`**: You can pass types to **`ComponentLoaderArgs`**, ensuring that you have + access to correct data & environment 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 @@ -52,7 +52,7 @@ type MyComponentData = { // Component definition... -export let loader = async (args: ComponentLoaderArgs) => { +export let loader = async (args: ComponentLoaderArgs) => { // Getting `weaverse` client instance and component's `data` from component's loader function's arguments let { weaverse, data } = args let { storefront, request, env } = weaverse @@ -87,7 +87,7 @@ type ExternalData = { // Type definition... } -export let loader = async ({ weaverse }: ComponentLoaderArgs) => { +export let loader = async ({ weaverse }: ComponentLoaderArgs<{}, Env>) => { let { fetchWithCache, env } = weaverse let API = `https://external-api.endpoint`