Hooks in an API route handler

[tylerpaige]

Hi there,

I'm wondering if the community can offer me some ideas for how I might resolve an "inavlid hook" issue within an API route handler.

I have page that displays products in a grid. I want the products to be paginated in an infinite scroll. I have modeled this page after the demo-store's ProductGrid component. As such, the page in question exports an api function that returns more product data. The ProductGrid component makes requests to that endpoint and receives data. So far so good :-)

My trouble lies in getting the api function to return all the data I need. Each item in the ProductGrid needs data from Shopify as well as a third party CMS. I already have a custom hook that will provide me with this combined data. Unfortunately, though, it seems I cannot use my hook in the api route handler. Whenever I do, I get the following error in the server logs:

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component.

I understand that this error comes from React, not necessarily from Hydrogen. But I don't totally understand why I'm getting this error. I suppose it's because the api function is just a function, not a component? Does that mean that API route handlers will never support hooks?

For now, I have solved it by rewriting my hook's functionality inside the api function using Axios, rather than fetchSync. But I would love to use the hook here if I can, since that's a bit more DRY.

If anyone has insights as to how I might get this working, I would be very appreciative!

---

For reference, here is a very simple reproduction: https://github.com/tylerpaige/hydrogen-api-route-hooks

[juanpprieto]

Hi @tylerpaige, thanks for the excellent write up.

As you mentioned, API functions are not react components. Think of them like a regular lambda function.

My advise is to modify your custom hook, so that the fetching logic is isolated from the hook logic. This way you end up with a utility and a hook — e.g fetchProduct and useProduct which uses fetchProduct internally.

This approach should help make testing easier and let you import fetchProduct inside the API route.

We do this in our internals with useShopQuery and queryShop (which gets passed as a param to the api handler)

[tylerpaige]

That's a great idea! Thanks for such a fast response. I will indeed make this work