Is it possible to migrate to Hydrogen V2 step by step?

[iska31]

Hi there,

I'm getting the tech lead of a new project, set on "@shopify/hydrogen": "^1.2.0",.

Is there any way to progressively migrate to the V2 ? I do have 177 files to refactor as they are using the hooks logic (https://github.com/Shopify/hydrogen-v1/tree/v1.x-2022-07/docs) that we could get from the "@shopify/hydrogen": "^1.2.0",. Using "@shopify/hydrogen": "^2023.1.3", all the hooks are not usable anymore.

In addition to that I had to remove the "@shopify/shopify-api": "^5.0.1", and all the logic using Shopify.client.Graphlql() as those where causing build errors cause of @mapboxdependency.

Any idea on how to smoothly handle the migration ? Is there any way to make those hooks accessible within the V2?
Regards

[juanpprieto]

Hi @iska31, we have created a step by step guide on how to migrate to v2 here. Hope this helps.

If you are also fetching from 3rd party APIs, you might want to check this explanation too.

[iska31]

Hey, thank you for your answer.

Unfortunately no, the guide doesn't mention that we need to refacto all the hooks in components from the previous @shopify/hydrogen package, like useLocalization...
With what I understand I must use this new context logic and the loaders and actions. On my current project, most of the calls have been implemented on .client components (cf RSC) using hook functions, and it looks like I don't have other choice than refactoring all this logic right now.

Am I missing something ? Feel free to ask me any further details.

Thank you for the third party info tho, it is useful for another point.

[juanpprieto]

Hey @iska31,

package, like useLocalization...

Hydrogen is now a thin layer on top of Remix. This means that you'll need to reach for Remix docs directly for all your hook needs. e.g useLocation which can be imported via import {useLocation} from '@remix-run/react'.

With what I understand I must use this new context logic and the loaders and actions. On my current project, most of the calls have been implemented on .client components (cf RSC) using hook functions, and it looks like I don't have other choice than refactoring all this logic right now.

Hydrogen v2 no longer supports RSC because Remix doesn't atm. You'll need to migrate all RSC data fetching preferably to loaders or alternatively to any classic client-side fetching strategies.

[iska31]

Hello hello,

Thank you for your answer.
I was speaking about this hook : https://github.com/Shopify/hydrogen-v1/blob/v1.x-2022-07/docs/hooks/localization/uselocalization.md

As exemples :

import {gql} from '@shopify/hydrogen';
...
import {
  useCart,
  Link,
  CartLineProvider,
  CartLineImage,
  CartLineProductTitle,
  CartLineQuantityAdjustButton,
  CartCost,
  fetchSync,
  flattenConnection,
} from '@shopify/hydrogen';

All hooks are not usable at all anymore. Thus I have started to migrate all the code to Remix stack, as I didn't see any other way.
Thank you for your information :)

[juanpprieto]

We will be improving all our guides and release more detailed examples in the near future. Thanks for your feedback 🙏🏼