Trailing slash redirects are not working as expected according to shopify docs

[johnstew]

What is the location of your example repository?

No response

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

2023.10.0

What version of Remix are you using?

2.1.0

Steps to Reproduce

1. Create a redirect according to shopify docs with or without trailing slash. Shopify docs say this is handled on their end so the UI will error stating the path already exists if you try adding another one with a slash
2. Try accessing the redirect with and without a trailing slash, e.g. /about-us returns redirect but /about-us/ 404s

Expected Behavior

The redirect should work with or without the trailing slash.

Actual Behavior

The redirect only works without the trailing slash.

I traced the problem to the actual query specifically the path: filter. If you remove that path filter this query returns the correct payload but with that filter it returns this.

{
  "data": {
    "urlRedirects": {
      "edges": []
    }
  }
}

I'm not sure if this is a bug with the api or hydrogen so I'm filing this here for Shopify folks to chime in.

[michenly]

@johnstew its likely a bit of both. I will report it to the API team and see if there is anything we can do on the hydrogen side for now as well.

[johnstew]

Okay, so my workaround was to copy all the code around storefrontRedirect and modify it to check if there's a slash at the end and remove it to query for the redirects.

const hasTrailingSlash = /\/$/.test(redirectFrom);
const modifiedRedirectFrom = hasTrailingSlash ? redirectFrom.replace(/\/$/, '') : redirectFrom;

const {urlRedirects} = await storefront.query(REDIRECT_QUERY, {
    variables: {
        query: `path:${modifiedRedirectFrom}`,
    },
});

[blittle]

It looks like Shopify's admin does not allow redirects to be defined with a trailing slash, so it's probably okay for us to automatically strip trailing slashes before we query for redirects. I will make this change.