ShopifyProvider
The ShopifyProvider component wraps your entire app and provides support for hooks. You should place it in your app's entry point component. For example, <App>. If you're using the Hydrogen framework, then you don't need to add this provider because it's automatically wrapped around your app in renderHydrogen().
Example code
Anchor link to section titled "Example code"
| Name | Type | Description |
|---|---|---|
| shopifyConfig? | ShopifyConfig | ShopifyConfigFetcher |
Shopify connection information. Defaults to the shopify property in the hydrogen.config.js file. |
| children? | React |
Any ReactNode elements. |
Component type
Anchor link to section titled "Component type"The ShopifyProvider component is a server component that renders inside App.server.jsx. For more information about component types, refer to React Server Components.
Related framework topics
Anchor link to section titled "Related framework topics"Considerations
Anchor link to section titled "Considerations"ShopifyProvideris specific to Hydrogen and currently doesn't work in Next.js or other frameworks.- You can't have multiple instances of
ShopifyProviderwithin your app. Because it's not usingContext(which isn't currently supported in server components), all<ShopifyProvider>instances share the same configuration for each request. - You can dynamically define the configuration (
shopifyConfigprop) for each request to the server. This is useful for aggregating multiple storefronts with a single Hydrogen app.