enhancement: using useShopOrigin() after next JS router push

[ahmed-adly-khalil]

Hello,
I'm having a minor issue with useShopOrigin() after redirecting between my app routes using next JS router push, for ex: router.push("/new-page");

after looking into the source code and knowing that useShopOrigin use window.location.search means it depends on the shop param in the app URL after successful authentication.

I think this is fair assumption, I can simply maintain the shop and other params using next router push options as described here: https://nextjs.org/docs/api-reference/next/router

router.push({
          pathname: '/post/[pid]',
          query: { pid: post.id },
        })

as an enhancement, it would be great if useShopOrigin to read the shop from the session token like how useApi works

Thank you

[ctrlaltdylan]

Hi @ahmed-adly-khalil

Looks like we're doing 2 different methods of redirecting.

I'm following Shopify's AppBridge Redirect method here: https://shopify.dev/apps/tools/app-bridge/actions/navigation/redirect

I was having issues keeping the URL in sync with the app, because NextJS isn't able to change the URL within the iframe'd AppBridge app.

Are you using a custom LinkComponent to the Shopify Provider? If so can you share it?

[ahmed-adly-khalil]

Hi @ctrlaltdylan Thanks so much
I was using next/router https://nextjs.org/docs/api-reference/next/router but will switch it to AppBridge Redirect

[ctrlaltdylan]

I'm curious about your approach, could you share a simple page component using it?

One day I'd like to provide a customLinkComponent to the Shopify AppProvider so we have actual client side routing that works with the AppBridge. But I haven't gotten it to work yet.

[ahmed-adly-khalil]

Sure, here is a sample page

import { useRouter } from "next/router";
const MyPage = () => {
  const router = useRouter();


  return (
    <Page
      fullWidth
      title="My title"
      primaryAction={{
        content: "Go to next page",
        onAction: () => {
          router.push("/next-page");
        },
      }}

    >
      <div> .... 

this approach loses the query params, so a customLinkComponent would be great and i think it would be great also to have an api for it, something like router.push since shopify actions require programmatic push rather than a declarative link/component. Ref: https://polaris.shopify.com/components/structure/page

[jonathangiardino]

Hey @ahmed-adly-khalil, I am using next/router and I basically attach the params every time I change a route, this works out for me.

e.g.

router.push({ pathname: "/yourpath", query: { ...router.query }});

A temporary hack but not much of a hassle for me to keep the Shopify params always available in the URL.

[ahmed-adly-khalil]

@jonathangiardino Thanks so much

also i'm thinking about the non-embedded app scenario, not sure which approach works best there ... maybe for non-embedded we should hide these URL params from the URL and keep it in the session object? not sure

[jonathangiardino]

I am not sure @ahmed-adly-khalil but perhaps an idea would be rewrites, next js offers them via either next config or the new middleware.

Check these out! :)

https://nextjs.org/docs/api-reference/next/server
https://nextjs.org/docs/api-reference/next.config.js/rewrites