February 2025 release
February 18, 2025
Welcome to our February release! This release contains package updates and validation on Remix future flag v3_singleFetch.
Turn on Remix future flag: v3_singleFetch
Single Fetch is a new data loading strategy and streaming format. To turn it on, add the following lines to your vite.config.ts:
Code Example
// Typescript
declare module "@remix-run/server-runtime" {
interface Future {
v3_singleFetch: true;
}
}
export default defineConfig({
plugins: [
hydrogen(),
oxygen(),
remix({
presets: [hydrogen.preset()],
future: {
v3_fetcherPersist: true,
v3_relativeSplatPath: true,
v3_throwAbortReason: true,
v3_lazyRouteDiscovery: true,
v3_singleFetch: true, // add this flag
},
}),
tsconfigPaths(),
],
For more detailed upgrade instructions, see the v3_singleFetch PR or refer to the Remix guide [https://remix.run/docs/en/main/guides/single-fetch].
As part of the Single Fetch upgrade, the default shouldRevalidate behaviour in the root.tsx has also been changed. Hydrogen strives for a performance optimized site. To maintain the same shouldRevalidate behaviour as before the Single Fetch upgrade, update your shouldRevalidate function in your root.tsx to the following:
Code Example
export const shouldRevalidate: ShouldRevalidateFunction = ({
formMethod,
currentUrl,
nextUrl,
- defaultShouldRevalidate,
}) => {
// revalidate when a mutation is performed e.g add to cart, login...
if (formMethod && formMethod !== 'GET') return true;
// revalidate when manually revalidating via useRevalidator
if (currentUrl.toString() === nextUrl.toString()) return true;
- return defaultShouldRevalidate;
// Defaulting to no revalidation for root loader data to improve performance.
// When using this feature, you risk your UI getting out of sync with your server.
// Use with caution. If you are uncomfortable with this optimization, update the
// line below to `return defaultShouldRevalidate` instead.
// For more details see: https://remix.run/docs/en/main/route/should-revalidate
+ return false;
};
B2B methods and props are stable
We have stabilized all B2B related utilities. Update your code by searching in your app for customerAccount.UNSTABLE_getBuyer() and update to customerAccount.getBuyer(), and search for customerAccount.UNSTABLE_setBuyer() and update to customerAccount.setBuyer().
Code Example
- customerAccount.UNSTABLE_getBuyer();
+ customerAccount.getBuyer()
- customerAccount.UNSTABLE_setBuyer({
+ customerAccount.setBuyer({
companyLocationId,
});
Also remove the unstableB2B option from createHydrogenContext or createCustomerAccountClient:
Code Example
const hydrogenContext = createHydrogenContext({
env,
request,
cache,
waitUntil,
session,
i18n: {language: 'EN', country: 'US'},
- customerAccount: {
- unstableB2b: true,
- },
cart: {
queryFragment: CART_QUERY_FRAGMENT,
},
});
There will be warning notifications for any usage on unstable methods and props. For more detailed upgrade instructions, see the B2B update PR.
To take advantage of all the latest features and improvements in Hydrogen, just run npx shopify hydrogen upgrade. That’s it for the February release — see you in March!
Get building
Spin up a new Hydrogen app in minutes.
See documentation