From f461d277186fdb24ec46538dcdd7e8ab680e06d9 Mon Sep 17 00:00:00 2001 From: Michelle Vinci Date: Fri, 29 Apr 2022 16:14:10 -0700 Subject: [PATCH] [Hydrogen docs]: Improve wayfinding between framework, components, hooks, and utilities docs (#1156) * improve wayfinding from framework to components docs * improve wayfinding from components to framework docs --- docs/components/framework/cookie.md | 4 ++++ .../framework/cookiesessionstorage.md | 4 ++++ docs/components/framework/fileroutes.md | 4 ++++ .../framework/filesessionstorage.md | 4 ++++ docs/components/framework/link.md | 4 ++++ .../framework/memorysessionstorage.md | 4 ++++ docs/components/framework/route.md | 4 ++++ docs/components/framework/router.md | 4 ++++ .../localization/localizationprovider.md | 4 ++++ docs/components/primitive/seo.md | 4 ++++ docs/framework/analytics.md | 2 +- docs/framework/cache.md | 12 +++++++--- docs/framework/css-support.md | 5 +--- docs/framework/environment-variables.md | 2 +- docs/framework/eslint.md | 4 ++++ docs/framework/index.md | 2 ++ docs/framework/preloaded-queries.md | 9 +++++++- docs/framework/react-server-components.md | 1 - docs/framework/routes.md | 23 +++++++++++++++---- docs/framework/seo.md | 6 ++++- docs/framework/server-props.md | 8 +++++-- docs/framework/sessions.md | 9 +++++++- docs/framework/static-assets.md | 1 + docs/framework/third-party-dependencies.md | 3 +-- docs/framework/work-with-rsc.md | 9 +++++++- docs/hooks/framework/usenavigate.md | 4 ++++ docs/hooks/framework/userouteparams.md | 4 ++++ docs/hooks/framework/usesession.md | 4 ++++ docs/hooks/global/fetchsync.md | 7 ++++++ docs/hooks/global/usequery.md | 7 ++++++ docs/hooks/global/useserverprops.md | 5 ++++ docs/hooks/global/useshopquery.md | 7 ++++++ 32 files changed, 152 insertions(+), 22 deletions(-) diff --git a/docs/components/framework/cookie.md b/docs/components/framework/cookie.md index 5c4bd19b3d..667fa356ac 100644 --- a/docs/components/framework/cookie.md +++ b/docs/components/framework/cookie.md @@ -53,3 +53,7 @@ The `Cookie` component is a server component. For more information about compone ## Related hooks - [`useSession`](https://shopify.dev/api/hydrogen/hooks/framework/usesession) + +## Related framework topics + +- [Sessions](https://shopify.dev/custom-storefronts/hydrogen/framework/sessions) diff --git a/docs/components/framework/cookiesessionstorage.md b/docs/components/framework/cookiesessionstorage.md index c0fe966d1d..e3e638501e 100644 --- a/docs/components/framework/cookiesessionstorage.md +++ b/docs/components/framework/cookiesessionstorage.md @@ -51,3 +51,7 @@ Don't use `CookieSessionStorage` if you expect to have more than 4kb of data wit ## Related hooks - [`useSession`](https://shopify.dev/api/hydrogen/hooks/framework/usesession) + +## Related framework topics + +- [Sessions](https://shopify.dev/custom-storefronts/hydrogen/framework/sessions) diff --git a/docs/components/framework/fileroutes.md b/docs/components/framework/fileroutes.md index 26627a8fff..09b4a014e9 100644 --- a/docs/components/framework/fileroutes.md +++ b/docs/components/framework/fileroutes.md @@ -50,3 +50,7 @@ The `FileRoutes` component is a server component that renders inside `App.server - [`Router`](https://shopify.dev/api/hydrogen/components/framework/router) - [`Route`](https://shopify.dev/api/hydrogen/components/framework/route) + +## Related framework topics + +- [Routes](https://shopify.dev/custom-storefronts/hydrogen/framework/routes) diff --git a/docs/components/framework/filesessionstorage.md b/docs/components/framework/filesessionstorage.md index 47cde55f3a..8f159b74e4 100644 --- a/docs/components/framework/filesessionstorage.md +++ b/docs/components/framework/filesessionstorage.md @@ -55,3 +55,7 @@ Because `FileSessionStorage` relies on the file system, it shouldn't be used in ## Related hooks - [`useSession`](https://shopify.dev/api/hydrogen/hooks/framework/usesession) + +## Related framework topics + +- [Sessions](https://shopify.dev/custom-storefronts/hydrogen/framework/sessions) diff --git a/docs/components/framework/link.md b/docs/components/framework/link.md index 75c60343ad..3123a0e70d 100644 --- a/docs/components/framework/link.md +++ b/docs/components/framework/link.md @@ -36,3 +36,7 @@ The `Link` component is a client component, which means that it renders on the c ## Related hooks - [`useNavigate`](https://shopify.dev/api/hydrogen/hooks/framework/usenavigate) + +## Related framework topics + +- [Routes](https://shopify.dev/custom-storefronts/hydrogen/framework/routes) diff --git a/docs/components/framework/memorysessionstorage.md b/docs/components/framework/memorysessionstorage.md index 8201d5ed1f..b20f86d00b 100644 --- a/docs/components/framework/memorysessionstorage.md +++ b/docs/components/framework/memorysessionstorage.md @@ -52,3 +52,7 @@ The `MemorySessionStorage` component is a server component that renders inside ` ## Related hooks - [`useSession`](https://shopify.dev/api/hydrogen/hooks/framework/usesession) + +## Related framework topics + +- [Sessions](https://shopify.dev/custom-storefronts/hydrogen/framework/sessions) diff --git a/docs/components/framework/route.md b/docs/components/framework/route.md index fe0f35a19b..b21310c222 100644 --- a/docs/components/framework/route.md +++ b/docs/components/framework/route.md @@ -61,3 +61,7 @@ The `Route` component is a server component that renders inside `App.server.jsx` - [`FileRoutes`](https://shopify.dev/api/hydrogen/components/framework/fileroutes) - [`Router`](https://shopify.dev/api/hydrogen/components/framework/router) + +## Related framework topics + +- [Routes](https://shopify.dev/custom-storefronts/hydrogen/framework/routes) diff --git a/docs/components/framework/router.md b/docs/components/framework/router.md index 3e104962fe..e2d26c22d7 100644 --- a/docs/components/framework/router.md +++ b/docs/components/framework/router.md @@ -53,3 +53,7 @@ The `Router` component is a server component that renders inside `App.server.jsx - [`FileRoutes`](https://shopify.dev/api/hydrogen/components/framework/fileroutes) - [`Route`](https://shopify.dev/api/hydrogen/components/framework/route) + +## Related framework topics + +- [Routes](https://shopify.dev/custom-storefronts/hydrogen/framework/routes) diff --git a/docs/components/localization/localizationprovider.md b/docs/components/localization/localizationprovider.md index 68868d9990..f6fd6a9db2 100644 --- a/docs/components/localization/localizationprovider.md +++ b/docs/components/localization/localizationprovider.md @@ -32,3 +32,7 @@ The `LocalizationProvider` component is a server component, which means that it ## Related hooks - [`useCountry`](https://shopify.dev/api/hydrogen/hooks/localization/usecountry) + +## Related framework topics + +- [Preloaded queries](https://shopify.dev/custom-storefronts/hydrogen/framework/preloaded-queries) diff --git a/docs/components/primitive/seo.md b/docs/components/primitive/seo.md index 8378a4f911..ab06b498a6 100644 --- a/docs/components/primitive/seo.md +++ b/docs/components/primitive/seo.md @@ -156,3 +156,7 @@ The `page` type is an object with fields that correspond to the Storefront API's } } ``` + +## Related framework topics + +- [SEO](https://shopify.dev/custom-storefronts/hydrogen/framework/seo) diff --git a/docs/framework/analytics.md b/docs/framework/analytics.md index 0561b06734..c3bc24644d 100644 --- a/docs/framework/analytics.md +++ b/docs/framework/analytics.md @@ -442,5 +442,5 @@ describe('Google Analytics 4', () => { ## Next steps -- Learn about [React Server Components](https://shopify.dev/custom-storefronts/hydrogen/framework/react-server-components), an opinionated data-fetching and rendering workflow for React apps. +- Learn how to [configure queries to preload](https://shopify.dev/custom-storefronts/hydrogen/framework/preloaded-queries) in your Hydrogen app. - Learn how to customize the output of [SEO-related tags](https://shopify.dev/custom-storefronts/hydrogen/framework/seo) in your Hydrogen client and server components. diff --git a/docs/framework/cache.md b/docs/framework/cache.md index de41016f16..bc2f601094 100644 --- a/docs/framework/cache.md +++ b/docs/framework/cache.md @@ -81,7 +81,7 @@ export interface AllCacheOptions { While rendering a page in your Hydrogen app, it’s common to make one or more sub-requests to Shopify or other third-party data sources within server components. You should use sub-request caching to keep pages loading quickly for end-users. All sub-request have the default `CacheSeconds` strategy. -The following example shows how to implement [`useShopQuery` for Shopify Storefront API queries](https://shopify.dev/api/hydrogen/hooks/global/useshopquery): +The following example shows how to implement [`useShopQuery`](https://shopify.dev/api/hydrogen/hooks/global/useshopquery) for Shopify Storefront API queries: {% codeblock file, filename: '/routes/my-products.server.jsx' %} @@ -95,7 +95,7 @@ const {data} = useShopQuery({ {% endcodeblock %} -The following example shows how to implement [`fetchSync` for third-party requests](https://shopify.dev/api/hydrogen/hooks/global/fetchsync): +The following example shows how to implement [`fetchSync`](https://shopify.dev/api/hydrogen/hooks/global/fetchsync) for third-party requests: {% codeblock file, filename: '/routes/my-products.server.jsx' %} @@ -273,6 +273,12 @@ Full-page caching is powered completely by [`cache-control` headers on the Hydro > Note: > Oxygen caches HTML responses from Hydrogen at the network edge. However, your hosting provider or CDN might not cache HTML responses by default. Make sure to consult with your individual provider to enable HTML caching for your Hydrogen app. +## Related hooks + +- [`useShopQuery`](https://shopify.dev/api/hydrogen/hooks/global/useshopquery) +- [`fetchSync`](https://shopify.dev/api/hydrogen/hooks/global/fetchsync) +- [`useQuery`](https://shopify.dev/api/hydrogen/hooks/global/usequery) + ## Next steps -- Learn about [React Server Components](https://shopify.dev/custom-storefronts/hydrogen/framework/react-server-components), an opinionated data-fetching and rendering workflow for React apps. +- Improve your app's loading performance with [streaming SSR and Suspense](https://shopify.dev/custom-storefronts/hydrogen/framework/streaming-ssr). diff --git a/docs/framework/css-support.md b/docs/framework/css-support.md index 325ec983d0..875bf3f67c 100644 --- a/docs/framework/css-support.md +++ b/docs/framework/css-support.md @@ -106,9 +106,6 @@ export default MyComponent() { {% endcodeblock %} -> Tip: -> Explore an [example implementation of CSS Modules in GitHub](https://github.com/Shopify/hydrogen/tree/main/examples/css-modules). - ## Next steps -- Learn about [React Server Components](https://shopify.dev/custom-storefronts/hydrogen/framework/react-server-components), an opinionated data-fetching and rendering workflow for React apps. +- Explore an [example implementation of CSS Modules in GitHub](https://github.com/Shopify/hydrogen/tree/main/examples/css-modules). diff --git a/docs/framework/environment-variables.md b/docs/framework/environment-variables.md index 380c542ccc..362842f6b3 100644 --- a/docs/framework/environment-variables.md +++ b/docs/framework/environment-variables.md @@ -98,4 +98,4 @@ app.use(hydrogenMiddleware({/* ... */})) ## Next steps -- Get familiar with the [file-based routing system](https://shopify.dev/custom-storefronts/hydrogen/framework/routes) that Hydrogen uses. +- Learn how to [deploy your Hydrogen app](https://shopify.dev/custom-storefronts/hydrogen/deployment) to Oxygen and other runtimes. diff --git a/docs/framework/eslint.md b/docs/framework/eslint.md index eb4e3423ba..2c49454fa9 100644 --- a/docs/framework/eslint.md +++ b/docs/framework/eslint.md @@ -57,3 +57,7 @@ To enable the Hydrogen configuration, add the `extends` property in your `.eslin ## Contributing to Hydrogen's ESLint plugin Hydrogen's ESLint plugin is open source. Learn how to [contribute to the project on GitHub](https://github.com/Shopify/hydrogen/blob/main/packages/eslint-plugin/.github/CONTRIBUTING.md). + +## Next steps + +- Explore the [ESLint plugin](https://github.com/Shopify/hydrogen/tree/main/packages/eslint-plugin). diff --git a/docs/framework/index.md b/docs/framework/index.md index 24e66f1b82..3c3b8a2871 100644 --- a/docs/framework/index.md +++ b/docs/framework/index.md @@ -119,4 +119,6 @@ If you need to change the server entry point, then make the following updates in ## Next steps +- Get familiar with the different [templates](https://shopify.dev/custom-storefronts/hydrogen/templates) that help you get started with Hydrogen. - Learn about [React Server Components](https://shopify.dev/custom-storefronts/hydrogen/framework/react-server-components), an opinionated data-fetching and rendering workflow for React apps. +- Learn how to [deploy your Hydrogen app](https://shopify.dev/custom-storefronts/hydrogen/deployment) to Oxygen and other runtimes. diff --git a/docs/framework/preloaded-queries.md b/docs/framework/preloaded-queries.md index a6f362c36d..e335078d73 100644 --- a/docs/framework/preloaded-queries.md +++ b/docs/framework/preloaded-queries.md @@ -123,6 +123,13 @@ If a query is being double loaded, then a warning displays in the server log. Th ![Shows a screenshot of query being double loaded](/assets/custom-storefronts/hydrogen/double-loaded-query.png) +## Related components and hooks + +- [`localizationProvider`](https://shopify.dev/api/hydrogen/components/localization/localizationprovider) +- [`fetchSync`](https://shopify.dev/api/hydrogen/hooks/global/fetchsync) +- [`useShopQuery`](https://shopify.dev/api/hydrogen/hooks/global/useshopquery) +- [`useQuery`](https://shopify.dev/api/hydrogen/hooks/global/usequery) + ## Next steps -- Get familiar with the [file-based routing system](https://shopify.dev/custom-storefronts/hydrogen/framework/routes) that Hydrogen uses. +- Learn about the [analytics support](https://shopify.dev/custom-storefronts/hydrogen/framework/analytics) build into Hydrogen apps. diff --git a/docs/framework/react-server-components.md b/docs/framework/react-server-components.md index 01e47b2e54..2fdcb28cfa 100644 --- a/docs/framework/react-server-components.md +++ b/docs/framework/react-server-components.md @@ -147,4 +147,3 @@ Although shared components have the most constraints, many components already ob - Learn how to [work with React Server Components](https://shopify.dev/custom-storefronts/hydrogen/framework/work-with-rsc). - Improve your app's loading performance with [streaming SSR and Suspense](https://shopify.dev/custom-storefronts/hydrogen/framework/streaming-ssr). -- Get familiar with the [file-based routing system](https://shopify.dev/custom-storefronts/hydrogen/framework/routes) that Hydrogen uses. diff --git a/docs/framework/routes.md b/docs/framework/routes.md index 792a3a5264..efcd68b0a2 100644 --- a/docs/framework/routes.md +++ b/docs/framework/routes.md @@ -300,7 +300,7 @@ export default function MyProducts({response}) { #### `response.doNotStream()` -By default, Hydrogen [streams SSR responses](https://github.com/reactwg/react-18/discussions/37). To customize a response, you need to tell Hydrogen that your server component plans to modify it in some way by calling `response.doNotStream()`: +By default, Hydrogen [streams SSR responses](https://shopify.dev/custom-storefronts/hydrogen/framework/streaming-ssr). To customize a response, you need to tell Hydrogen that your server component plans to modify it in some way by calling `response.doNotStream()`: {% codeblock file %} @@ -379,11 +379,11 @@ export default function CustomPage({response}) { {% endcodeblock %} -Since this code lives inside a server component, you can use [`useShopQuery`](/api/hydrogen/hooks/global/useshopquery) to populate your [custom responses](#custom-responses) with Shopify data. +Since this code lives inside a server component, you can use [`useShopQuery`](https://shopify.dev/api/hydrogen/hooks/global/useshopquery) to populate your [custom responses](#custom-responses) with Shopify data. ### Server props -In addition to `request` and `response` props, any props you manage with [`setServerProps`](/custom-storefronts/hydrogen/framework/server-props) is passed to each of your server components as props: +In addition to `request` and `response` props, any props you manage with [`setServerProps`](https://shopify.dev/custom-storefronts/hydrogen/framework/server-props) is passed to each of your server components as props: {% codeblock file %} @@ -664,6 +664,21 @@ await fetch('/api/views', { {% endcodeblock %} +## Related components and hooks + +- [`Link`](https://shopify.dev/api/hydrogen/components/framework/link) +- [`Router`](https://shopify.dev/api/hydrogen/components/framework/router) +- [`FileRoutes`](https://shopify.dev/api/hydrogen/components/framework/fileroutes) +- [`Route`](https://shopify.dev/api/hydrogen/components/framework/route) +- [`useNavigate`](https://shopify.dev/api/hydrogen/hooks/framework/usenavigate) +- [`useRouteParams`](https://shopify.dev/api/hydrogen/hooks/framework/userouteparams) +- [`useQuery`](https://shopify.dev/api/hydrogen/hooks/global/usequery) +- [`useShopQuery`](https://shopify.dev/api/hydrogen/hooks/global/useshopquery) +- [`fetchSync`](https://shopify.dev/api/hydrogen/hooks/global/fetchsync) + ## Next steps -- Learn about [React Server Components](https://shopify.dev/custom-storefronts/hydrogen/framework/react-server-components), an opinionated data-fetching and rendering workflow for React apps. +- Learn about how Hydrogen consumes data from different [sources](https://shopify.dev/custom-storefronts/hydrogen/data-sources). +- Learn how to manage [cache options](https://shopify.dev/custom-storefronts/hydrogen/framework/cache) for Hydrogen apps. +- Improve your app's loading performance with [streaming SSR and Suspense](https://shopify.dev/custom-storefronts/hydrogen/framework/streaming-ssr). +- Learn how to [manage your server props](https://shopify.dev/custom-storefronts/hydrogen/framework/server-props) during your development process. diff --git a/docs/framework/seo.md b/docs/framework/seo.md index 0a1e6bcca2..ac32f27966 100644 --- a/docs/framework/seo.md +++ b/docs/framework/seo.md @@ -169,6 +169,10 @@ The following limitations and considerations apply to the [XML sitemap](https:// - By default, the sitemap uses the [`onlineStoreUrl`](https://shopify.dev/api/storefront/latest/objects/Product) field from the Storefront API as the URL. It falls back to the Demo Store template URL structure, which is based on resource's handle. +## Related components + +- [`Seo`](https://shopify.dev/api/hydrogen/components/primitive/seo) + ## Next steps -- Get familiar with the [file-based routing system](https://shopify.dev/custom-storefronts/hydrogen/framework/routes) that Hydrogen uses. +- Learn about the [analytics support](https://shopify.dev/custom-storefronts/hydrogen/framework/analytics) build into Hydrogen apps. diff --git a/docs/framework/server-props.md b/docs/framework/server-props.md index 6dfac40cd7..1727768182 100644 --- a/docs/framework/server-props.md +++ b/docs/framework/server-props.md @@ -4,7 +4,7 @@ title: Server props description: Learn how to manage your server props during your development process. --- -As you build your Hydrogen app with [React Server Components](https://shopify.dev/custom-storefronts/hydrogen/framework/react-server-components), you'll likely need to update `props` on the server. Sharing data between the client and server is important for common tasks, like [page routing](https://shopify.dev/custom-storefronts/hydrogen/framework/react-server-components/work-with-rsc#sharing-data-between-client-and-server). +As you build your Hydrogen app with [React Server Components](https://shopify.dev/custom-storefronts/hydrogen/framework/react-server-components), you'll likely need to update `props` on the server. Sharing data between the client and server is important for common tasks, like [page routing](https://shopify.dev/custom-storefronts/hydrogen/framework/routes). This guide describes how to manage server props during your development process. @@ -85,7 +85,11 @@ export default function ProductSelector({selectedProductId}) { When the user navigates to a new page in your app, the server props will reset. This is important because if the user navigates to another product, then the selected variant of the previous product shouldn't apply to the new product page. +## Related hooks + +- [`useServerProps`](https://shopify.dev/api/hydrogen/hooks/global/useserverprops) + ## Next steps - Learn about [React Server Components](https://shopify.dev/custom-storefronts/hydrogen/framework/react-server-components), an opinionated data-fetching and rendering workflow for React apps. -- Learn how to interact with the [`useServerProps`](https://shopify.dev/api/hydrogen/hooks/global/useserverprops) hook. +- Learn how to [work with React Server Components](https://shopify.dev/custom-storefronts/hydrogen/framework/work-with-rsc). diff --git a/docs/framework/sessions.md b/docs/framework/sessions.md index b6e0d216f8..d7b42645a9 100644 --- a/docs/framework/sessions.md +++ b/docs/framework/sessions.md @@ -123,7 +123,14 @@ export async function api(request, {session}) { Hydrogen provides a [`Cookie`](https://shopify.dev/api/hydrogen/components/framework/cookie) component for building your own custom cookie and session implementations. All [Hydrogen session storage mechanisms](https://shopify.dev/custom-storefronts/hydrogen/framework/sessions#types-of-session-storage) use the same configuration options as `Cookie`. +## Related components and hooks + +- [`Cookie`](https://shopify.dev/api/hydrogen/components/framework/cookie) +- [`CookieSessionStorage`](https://shopify.dev/api/hydrogen/components/framework/cookiesessionstorage) +- [`MemorySessionStorage`](https://shopify.dev/api/hydrogen/components/framework/memorysessionstorage) +- [`FileSessionStorage`](https://shopify.dev/api/hydrogen/components/framework/filesessionstorage) +- [`useSession`](https://shopify.dev/api/hydrogen/hooks/framework/usesession) + ## Next steps -- Learn how to manage your [server props](https://shopify.dev/custom-storefronts/hydrogen/framework/server-props) during your development process. - Get familiar with the [file-based routing system](https://shopify.dev/custom-storefronts/hydrogen/framework/routes) that Hydrogen uses. diff --git a/docs/framework/static-assets.md b/docs/framework/static-assets.md index ed14745352..d7dde80f63 100644 --- a/docs/framework/static-assets.md +++ b/docs/framework/static-assets.md @@ -60,3 +60,4 @@ You should only import assets, such as styles or images, from [client components ## Next steps - Learn about [React Server Components](https://shopify.dev/custom-storefronts/hydrogen/framework/react-server-components), an opinionated data-fetching and rendering workflow for React apps. +- Learn how to [deploy your Hydrogen app](https://shopify.dev/custom-storefronts/hydrogen/deployment) to Oxygen and other runtimes. diff --git a/docs/framework/third-party-dependencies.md b/docs/framework/third-party-dependencies.md index 9383714d4d..e9f265633f 100644 --- a/docs/framework/third-party-dependencies.md +++ b/docs/framework/third-party-dependencies.md @@ -78,8 +78,7 @@ export default defineConfig({ > Tip: > If you find that a dependency is being optimized when it shouldn't, then you can try adding the dependency to `optimizeDeps.exclude` to see if it fixes the issue. -## More help +## Next steps - Learn more about dependency pre-bundling and optimization in [Vite](https://vitejs.dev/guide/dep-pre-bundling.html#dependency-pre-bundling). - - [Check this GitHub discussion](https://github.com/Shopify/hydrogen/discussions/93) to see if another developer has the same issue or report a new issue to Hydrogen maintainers. diff --git a/docs/framework/work-with-rsc.md b/docs/framework/work-with-rsc.md index dd771c5d22..552591d790 100644 --- a/docs/framework/work-with-rsc.md +++ b/docs/framework/work-with-rsc.md @@ -256,7 +256,14 @@ export default function App() { {% endcodeblock %} +## Related hooks + +- [`useShopQuery`](https://shopify.dev/api/hydrogen/hooks/global/useshopquery) +- [`fetchSync`](https://shopify.dev/api/hydrogen/hooks/global/fetchsync) +- [`useQuery`](https://shopify.dev/api/hydrogen/hooks/global/usequery) +- [`useServerProps`](https://shopify.dev/api/hydrogen/hooks/global/useserverprops) + ## Next steps - Improve your app's loading performance with [streaming SSR and Suspense](https://shopify.dev/custom-storefronts/hydrogen/framework/streaming-ssr). -- Get familiar with the [file-based routing system](https://shopify.dev/custom-storefronts/hydrogen/framework/routes) that Hydrogen uses. +- Learn about how Hydrogen consumes data from different [sources](https://shopify.dev/custom-storefronts/hydrogen/data-sources). diff --git a/docs/hooks/framework/usenavigate.md b/docs/hooks/framework/usenavigate.md index 340a060424..d3fc87b45e 100644 --- a/docs/hooks/framework/usenavigate.md +++ b/docs/hooks/framework/usenavigate.md @@ -54,3 +54,7 @@ The `useNavigate` hook returns the following values: ## Related components - [`Link`](https://shopify.dev/api/hydrogen/components/framework/link) + +## Related framework topics + +- [Routes](https://shopify.dev/custom-storefronts/hydrogen/framework/routes) diff --git a/docs/hooks/framework/userouteparams.md b/docs/hooks/framework/userouteparams.md index a4a489c7c8..9fe1e02ba4 100644 --- a/docs/hooks/framework/userouteparams.md +++ b/docs/hooks/framework/userouteparams.md @@ -48,3 +48,7 @@ The `useRouteParams` hook returns an object with key values for each matching ro ## Related hooks - [`useNavigate`](https://shopify.dev/api/hydrogen/hooks/framework/usenavigate) + +## Related framework topics + +- [Routes](https://shopify.dev/custom-storefronts/hydrogen/framework/routes) diff --git a/docs/hooks/framework/usesession.md b/docs/hooks/framework/usesession.md index 028ba3f9df..d22d7c3a08 100644 --- a/docs/hooks/framework/usesession.md +++ b/docs/hooks/framework/usesession.md @@ -40,3 +40,7 @@ The `useSession` hook returns all data within the current session. The return ty - [`FileSessionStorage`](https://shopify.dev/api/hydrogen/components/framework/filesessionstorage) - [`CookieSessionStorage`](https://shopify.dev/api/hydrogen/components/framework/cookiesessionstorage) - [`MemorySessionStorage`](https://shopify.dev/api/hydrogen/components/framework/memorysessionstorage) + +## Related framework topics + +- [Sessions](https://shopify.dev/custom-storefronts/hydrogen/framework/sessions) diff --git a/docs/hooks/global/fetchsync.md b/docs/hooks/global/fetchsync.md index dec19b318d..f0b77fa34a 100644 --- a/docs/hooks/global/fetchsync.md +++ b/docs/hooks/global/fetchsync.md @@ -151,3 +151,10 @@ The following considerations apply to `fetchSync` in server and client component - [`useShopQuery`](https://shopify.dev/api/hydrogen/hooks/global/useshopquery) - [`useQuery`](https://shopify.dev/api/hydrogen/hooks/global/usequery) + +## Related framework topics + +- [Caching](https://shopify.dev/custom-storefronts/hydrogen/framework/cache) +- [Preloaded queries](https://shopify.dev/custom-storefronts/hydrogen/framework/preloaded-queries) +- [Routes](https://shopify.dev/custom-storefronts/hydrogen/framework/routes) +- [Working with React Server Components](https://shopify.dev/custom-storefronts/hydrogen/framework/work-with-rsc) diff --git a/docs/hooks/global/usequery.md b/docs/hooks/global/usequery.md index 8131598cda..9492a1ff39 100644 --- a/docs/hooks/global/usequery.md +++ b/docs/hooks/global/usequery.md @@ -59,3 +59,10 @@ The `useQuery` returns an object with the following key: - [`fetchSync`](https://shopify.dev/api/hydrogen/hooks/global/fetchsync) - [`useShopQuery`](https://shopify.dev/api/hydrogen/hooks/global/useshopquery) + +## Related framework topics + +- [Caching](https://shopify.dev/custom-storefronts/hydrogen/framework/cache) +- [Preloaded queries](https://shopify.dev/custom-storefronts/hydrogen/framework/preloaded-queries) +- [Routes](https://shopify.dev/custom-storefronts/hydrogen/framework/routes) +- [Working with React Server Components](https://shopify.dev/custom-storefronts/hydrogen/framework/work-with-rsc) diff --git a/docs/hooks/global/useserverprops.md b/docs/hooks/global/useserverprops.md index 68c03c35f8..9ee041930b 100644 --- a/docs/hooks/global/useserverprops.md +++ b/docs/hooks/global/useserverprops.md @@ -30,3 +30,8 @@ The `useServerProps` hook returns an object with the following keys: | `serverProps` | The current server props. | | `setServerProps` | A function used to modify server props. | | `pending` | Whether a [transition is pending](https://github.com/reactwg/react-18/discussions/41). | + +## Related framework topics + +- [Server props](https://shopify.dev/custom-storefronts/hydrogen/framework/server-props) +- [Working with React Server Components](https://shopify.dev/custom-storefronts/hydrogen/framework/work-with-rsc) diff --git a/docs/hooks/global/useshopquery.md b/docs/hooks/global/useshopquery.md index f031807706..fe8d9e1931 100644 --- a/docs/hooks/global/useshopquery.md +++ b/docs/hooks/global/useshopquery.md @@ -75,3 +75,10 @@ The `useShopQuery` returns an object with the following key: - [`fetchSync`](https://shopify.dev/api/hydrogen/hooks/global/fetchsync) - [`useQuery`](https://shopify.dev/api/hydrogen/hooks/global/usequery) + +## Related framework topics + +- [Caching](https://shopify.dev/custom-storefronts/hydrogen/framework/cache) +- [Preloaded queries](https://shopify.dev/custom-storefronts/hydrogen/framework/preloaded-queries) +- [Routes](https://shopify.dev/custom-storefronts/hydrogen/framework/routes) +- [Working with React Server Components](https://shopify.dev/custom-storefronts/hydrogen/framework/work-with-rsc)