How to implement a dynamic catch-all route in Shopify Hydrogen?

Developer Support
1

Is there a way to implement Dynamic CatchAll routing [[…catchall.tsx]] in Shopify Hydrogen?

2

Here’s what we were trying, but it seems to override the default routing with Plasmic Page/Component routing i.e. it works on Plasmic routes but our Hydrogen routes don’t work anymore

[…handle.server.tsx].ts

3

This is unfortunately how dynamic routes work today in Hydrogen, but I believe it’s a bug.

You can work around it for now by either:

• Avoiding using [...catchall].server.tsx and instead using [slug].server.tsx wherever you need it (you would need to create the appropriate dirs where you expect Plasmic pages to be)
• Create the catchall, and from the code in there, dispatch to your other routes yourself
Both are ugly, but I believe our hands are tied at the moment - I’ll pass the feedback onto the Hydrogen team :disappointed:

4

@yang I’m not able to get ANY plasmic routes to work now. I’m literally just copy pasting the code from quick-start guide under /pages/[handle].server.tsx dir. And we also have routes on Plasmic Studio

5

Hmm, I’m trying it now and I’m having trouble reproducing… what are you seeing? Empty response from maybeFetchComponentData() despite passing in a path that matches a page? Or …?

6

I’m on Shopify Hydrogen. Stack trace doesn’t point to any plasmic errors as such.

import {
  PlasmicClientRootProvider,
  PlasmicClientComponent,
} from '~/components/plasmic-helpers.client';
import {usePlasmicData} from '~/lib/plasmic';
import {NotFound} from '~/components/index.server';
import {HydrogenRouteProps} from '@shopify/hydrogen';

export default function PlasmicPage({params}: HydrogenRouteProps) {
  const {handle} = params;

  // If the url is /pages/hello, then `handle` will be "hello". We convert this into the page path
  // that we used in Plasmic for the corresponding page.
  const data = usePlasmicData([`/${handle}`]);
  if (!data) {
    return <NotFound />;
  }
  const {plasmicData, queryData} = data;
  return (
    <PlasmicClientRootProvider
      prefetchedData={plasmicData}
      prefetchedQueryData={queryData}
    >
      <PlasmicClientComponent component={plasmicData.entryCompMetas[0].name} />
    </PlasmicClientRootProvider>
  );
}
7

Right, are you just getting a blank screen? If you replace that whole thing with a div, you can see the div? Or is it that the fetchComponentData call inside your usePlasmicData function is returning empty data for the given handle? (Assuming you have that handle defined as the page route inside your Plasmic project?)

8

It’s returning the <NotFound /> component

9

But the route exists on Studio

Screenshot 2022-09-13 at 3.40.46 AM.png

10

Try either changing the route to /faq or passing in /pages/${handle}

11

Still the same :disappointed:

12

Okay passing /pages/ to it worked

13

Phew, Thanks!

14

(If you change the route in the Plasmic project, you need to also either publish a new version, or change your initPlasmicLoader call to specify preview:true

15

Got it